add a hook to track window resize so we can dynamically size charts; default highlight Home link in nav; some typescript fixes

web/pages/components/chart.tsx

@@ -1,5 +1,7 @@
 import { LineChart, XAxis, YAxis, Line, Tooltip, Legend } from "recharts";
 import { timeFormat } from "d3-time-format";
+import useWindowSize from '../../utils/hook-windowresize';
+import styles from '../../styles/styles.module.css';
 
 interface ToolTipProps {
   active?: boolean,
@@ -10,20 +12,18 @@ interface ToolTipProps {
 const defaultProps = {
   active: false,
   payload: Object,
-  unit: "",
+  unit: '',
 };
 
 interface TimedValue {
   time: Date;
-  value: Number;
+  value: number;
 }
 
 interface ChartProps {
-  // eslint-disable-next-line react/require-default-props
   data?: TimedValue[],
   color: string,
   unit: string,
-  // eslint-disable-next-line react/require-default-props
   dataCollections?: any[],
 }
 
@@ -47,61 +47,67 @@ export default function Chart({ data, color, unit, dataCollections }: ChartProps
   if (!data && !dataCollections) {
     return null;
   }
+  
+  const windowSize = useWindowSize();
+  const chartWidth = windowSize.width * .68;
+  const chartHeight = chartWidth * .333;
 
   const timeFormatter = (tick: string) => {
     return timeFormat("%I:%M")(new Date(tick));
   };
 
-  let ticks
+  let ticks = [];
   if (dataCollections.length > 0) {
-    ticks = dataCollections[0].data?.map(function (collection) {
+    ticks = dataCollections[0].data?.map((collection) => {
       return collection?.time;
     })
   } else if (data?.length > 0){
-    ticks = data?.map(function (item) {
+    ticks = data?.map(item => {
       return item?.time;
     });
   }
 
   return (
-    <LineChart width={1200} height={400} data={data}>
-      <XAxis
-        dataKey="time"
-        tickFormatter={timeFormatter}
-        interval="preserveStartEnd"
-        tickCount={5}
-        minTickGap={15}
-        domain={["dataMin", "dataMax"]}
-        ticks={ticks}
-      />
-      <YAxis
-        dataKey="value"
-        interval="preserveStartEnd"
-        unit={unit}
-        domain={["dataMin", "dataMax"]}
-      />
-      <Tooltip content={<CustomizedTooltip unit={unit} />} />
-      <Legend />
-      <Line
-        type="monotone"
-        dataKey="value"
-        stroke={color}
-        dot={null}
-        strokeWidth={3}
-      />
-      {dataCollections?.map((s) => (
-        <Line
+    <div className={styles.lineChartContainer}>
+      <LineChart width={chartWidth} height={chartHeight} data={data}>
+        <XAxis
+          dataKey="time"
+          tickFormatter={timeFormatter}
+          interval="preserveStartEnd"
+          tickCount={5}
+          minTickGap={15}
+          domain={["dataMin", "dataMax"]}
+          ticks={ticks}
+        />
+        <YAxis
           dataKey="value"
-          data={s.data}
-          name={s.name}
-          key={s.name}
+          interval="preserveStartEnd"
+          unit={unit}
+          domain={["dataMin", "dataMax"]}
+        />
+        <Tooltip content={<CustomizedTooltip unit={unit} />} />
+        <Legend />
+        <Line
           type="monotone"
-          stroke={s.color}
+          dataKey="value"
+          stroke={color}
           dot={null}
           strokeWidth={3}
         />
-      ))}
-    </LineChart>
+        {dataCollections?.map((s) => (
+          <Line
+            dataKey="value"
+            data={s.data}
+            name={s.name}
+            key={s.name}
+            type="monotone"
+            stroke={s.color}
+            dot={null}
+            strokeWidth={3}
+          />
+        ))}
+      </LineChart>
+    </div>
   );
 }