LF-4699 Tweaks

* Resolve Recharts warning by specifying height correctly
* Remove unnecessary wrapper

Author: SayakaOno

packages/webapp/src/components/Charts/LineChart.tsx

@@ -149,75 +149,73 @@ function LineChart(props: LineChartProps) {
   return (
     <div className={styles.wrapper}>
       {title && <div className={styles.title}>{title}</div>}
-      <div className={styles.chartWrapper}>
-        <ResponsiveContainer width="100%" height="100%">
-          <RechartsLineChart width={500} height={230} data={data} margin={{ top: 12 }}>
-            <CartesianGrid stroke="#E9F3FF" vertical={false} />
-            <XAxis
-              dataKey={xAxisDataKey}
-              domain={['auto', 'auto']}
-              padding={{ left: xAxisSidePadding, right: xAxisSidePadding }}
-              axisLine={false}
-              tick={{ ...axisLabelStyles, transform: 'translate(0, 8)' }}
-              tickSize={3}
-              tickMargin={6}
-              tickLine={{ transform: 'translate(0, 8)' }}
-              ticks={ticks}
-              {...(isTimeScaleProps(props)
-                ? {
-                    type: 'number',
-                    scale: 'time',
-                    tickFormatter: (time) => getLocalShortDate(time, props.language, t),
-                  }
-                : {})}
+      <ResponsiveContainer width="100%" height={showLegend ? 280 : 230}>
+        <RechartsLineChart data={data} margin={{ top: 12 }}>
+          <CartesianGrid stroke="#E9F3FF" vertical={false} />
+          <XAxis
+            dataKey={xAxisDataKey}
+            domain={['auto', 'auto']}
+            padding={{ left: xAxisSidePadding, right: xAxisSidePadding }}
+            axisLine={false}
+            tick={{ ...axisLabelStyles, transform: 'translate(0, 8)' }}
+            tickSize={3}
+            tickMargin={6}
+            tickLine={{ transform: 'translate(0, 8)' }}
+            ticks={ticks}
+            {...(isTimeScaleProps(props)
+              ? {
+                  type: 'number',
+                  scale: 'time',
+                  tickFormatter: (time) => getLocalShortDate(time, props.language, t),
+                }
+              : {})}
+          />
+          <YAxis
+            yAxisId="left"
+            tickLine={false}
+            tick={axisLabelStyles}
+            axisLine={false}
+            // Default width is 60, which causes a gap
+            // https://github.com/recharts/recharts/issues/2027
+            width={40}
+          />
+          {showLegend && (
+            <Legend
+              iconType="circle"
+              onClick={onLegendClick}
+              wrapperStyle={{
+                paddingTop: 16,
+                paddingBottom: 16,
+                fontSize: 12,
+                fontWeight: 600,
+              }}
             />
-            <YAxis
-              yAxisId="left"
-              tickLine={false}
-              tick={axisLabelStyles}
-              axisLine={false}
-              // Default width is 60, which causes a gap
-              // https://github.com/recharts/recharts/issues/2027
-              width={40}
-            />
-            {showLegend && (
-              <Legend
-                iconType="circle"
-                onClick={onLegendClick}
-                wrapperStyle={{
-                  paddingTop: 16,
-                  paddingBottom: 16,
-                  fontSize: 12,
-                  fontWeight: 600,
+          )}
+          <Tooltip content={CustomTooltip} cursor={false} />
+          {lineConfig.map(({ id, color }) => {
+            return (
+              <Line
+                key={id}
+                yAxisId="left"
+                type="linear"
+                dataKey={id}
+                stroke={color}
+                strokeWidth={3}
+                hide={hiddenLines.includes(id)}
+                dot={data.length > 12 ? false : { r: 4 }}
+                activeDot={{
+                  r: 6,
+                  fill: activeLine === id ? color : 'transparent',
+                  stroke: activeLine === id ? color : 'transparent',
+                  // https://github.com/recharts/recharts/issues/2678
+                  onMouseOver: () => onLineMouseOver(id),
+                  onMouseLeave: onLineMouseLeave,
                 }}
               />
-            )}
-            <Tooltip content={CustomTooltip} cursor={false} />
-            {lineConfig.map(({ id, color }) => {
-              return (
-                <Line
-                  key={id}
-                  yAxisId="left"
-                  type="linear"
-                  dataKey={id}
-                  stroke={color}
-                  strokeWidth={3}
-                  hide={hiddenLines.includes(id)}
-                  dot={data.length > 12 ? false : { r: 4 }}
-                  activeDot={{
-                    r: 6,
-                    fill: activeLine === id ? color : 'transparent',
-                    stroke: activeLine === id ? color : 'transparent',
-                    // https://github.com/recharts/recharts/issues/2678
-                    onMouseOver: () => onLineMouseOver(id),
-                    onMouseLeave: onLineMouseLeave,
-                  }}
-                />
-              );
-            })}
-          </RechartsLineChart>
-        </ResponsiveContainer>
-      </div>
+            );
+          })}
+        </RechartsLineChart>
+      </ResponsiveContainer>
     </div>
   );
 }

packages/webapp/src/components/Charts/styles.module.scss

@@ -23,12 +23,8 @@
   font-size: 14px;
   line-height: 14px;
   letter-spacing: 0px;
-  color: var(--Colors-Neutral-Neutral-900, #2b303a);
-  margin-bottom: 8px;
-}
-
-.chartWrapper {
-  height: 230px;
+  color: var(--Colors-Neutral-Neutral-900);
+  margin-bottom: 16px;
 }
 
 // Fix storybook styling issue
@@ -41,7 +37,7 @@
 .tooltip {
   position: relative;
   border-radius: 4px;
-  border: 2px solid var(--tooltipColor);
+  border: 1px solid var(--tooltipColor);
   background-color: white; /* Prevents chart lines from being visible through the tooltip */
   color: var(--tooltipColor);
   box-shadow: 2px 2px 2px 0px #00000026;

packages/webapp/src/components/Charts/utils.ts

@@ -107,8 +107,8 @@ export const getTicks = (
   return getDailyTicks(startDateObj, lastDate);
 };
 
-const convertToMilliseconds = (unixTimestamp: number): number => {
-  return unixTimestamp * 1000;
+const convertToMilliseconds = (unixTime: number): number => {
+  return unixTime * 1000;
 };
 
 export const getLocalShortDate = (unixTime: number, language: string, t: TFunction): string => {
@@ -127,13 +127,13 @@ const getTime = (unixTime: number, language: string): string => {
 };
 
 export const getDateTime = (
-  dateTime: number,
+  unixTime: number,
   language: string,
   truncPeriod: TruncPeriod,
   t: TFunction,
 ) => {
-  const date = getLocalShortDate(dateTime, language, t);
-  const time = truncPeriod === 'hour' ? ` ${getTime(dateTime, language)}` : '';
+  let dateTime = getLocalShortDate(unixTime, language, t);
+  dateTime += truncPeriod === 'hour' ? ` - ${getTime(unixTime, language)}` : '';
 
-  return `${date}${time}`;
+  return dateTime;
 };