Some progress on charts

web/pages/components/chart.tsx

@@ -0,0 +1,58 @@
+import { LineChart, XAxis, YAxis, Line, Tooltip, Legend } from "recharts";
+import { timeFormat } from "d3-time-format";
+
+export default function Chart({ data, color, unit }) {
+  const CustomizedTooltip = (props) => {
+    const { active, payload } = props;
+    if (active && payload && payload[0]) {
+      const time = payload[0].payload
+        ? timeFormat("%I:%M")(new Date(payload[0].payload.time), {
+            nearestTo: 1,
+          })
+        : "";
+      return (
+        <div className="custom-tooltip">
+          <p className="label">
+            <strong>{time}</strong> {payload[0].payload.value} %
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  const timeFormatter = (tick) => {
+    return timeFormat("%I:%M")(new Date(tick), {
+      nearestTo: 1,
+    });
+  };
+
+  return (
+    <LineChart width={1200} height={400} data={data}>
+      <XAxis
+        dataKey="time"
+        // type="number"
+        tickFormatter={timeFormatter}
+        interval="preserveStartEnd"
+        tickCount={5}
+        minTickGap={15}
+        domain={["dataMin", "dataMax"]}
+      />
+      <YAxis
+        dataKey="value"
+        interval="preserveStartEnd"
+        unit={unit}
+        domain={["dataMin", "dataMax"]}
+      />
+      <Tooltip content={<CustomizedTooltip />} />
+      <Legend />
+      <Line
+        type="monotone"
+        dataKey="value"
+        stroke={color}
+        dot={null}
+        strokeWidth={3}
+      />
+    </LineChart>
+  );
+}