Add sensor metrics tab

src/components/Drawer/Sensor.tsx

@@ -0,0 +1,172 @@
+import "chartjs-adapter-date-fns";
+
+import type React from "react";
+
+import {
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  TimeSeriesScale,
+  Tooltip
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+
+import { useDevice } from "@app/core/providers/useDevice.js";
+
+export const Sensor = (): JSX.Element => {
+  const { nodes, hardware } = useDevice();
+
+  const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
+
+  ChartJS.register(
+    LinearScale,
+    PointElement,
+    LineElement,
+    Tooltip,
+    Filler,
+    Legend,
+    TimeSeriesScale
+  );
+
+  return (
+    <div className="flex h-full w-full flex-grow">
+      <Line
+        className="h-full w-full flex-grow"
+        options={{
+          responsive: true,
+          maintainAspectRatio: false,
+          interaction: {
+            mode: "index",
+            intersect: false
+          },
+          line: {
+            datasets: {
+              tension: 0.5
+            }
+          },
+          scales: {
+            x: {
+              type: "timeseries",
+              ticks: {
+                display: false
+              }
+            },
+            y: {
+              ticks: {
+                display: false
+              }
+            },
+            y1: {
+              display: false
+            },
+            y2: {
+              display: false
+            },
+            y3: {
+              display: false
+            },
+            y4: {
+              display: false
+            },
+            y5: {
+              display: false
+            }
+          },
+          plugins: {}
+        }}
+        data={{
+          labels: [],
+          datasets: [
+            {
+              fill: true,
+              label: "barometricPressure",
+              yAxisID: "y",
+              data: myNode?.environmentMetrics.map((metric) => {
+                return {
+                  x: metric.timestamp,
+                  y: metric.barometricPressure
+                };
+              }),
+              backgroundColor: "rgba(102, 126, 234, 0.25)",
+              borderColor: "rgba(102, 126, 234, 1)",
+              pointBackgroundColor: "rgba(102, 126, 234, 1)"
+            },
+            {
+              fill: true,
+              label: "current",
+              yAxisID: "y1",
+              data: myNode?.environmentMetrics.map((metric) => {
+                return {
+                  x: metric.timestamp,
+                  y: metric.current
+                };
+              }),
+              backgroundColor: "rgba(237, 100, 166, 0.25)",
+              borderColor: "rgba(237, 100, 166, 1)",
+              pointBackgroundColor: "rgba(237, 100, 166, 1)"
+            },
+            {
+              fill: true,
+              label: "gasResistance",
+              yAxisID: "y2",
+              data: myNode?.environmentMetrics.map((metric) => {
+                return {
+                  x: metric.timestamp,
+                  y: metric.gasResistance
+                };
+              }),
+              backgroundColor: "rgba(113, 234, 102, 0.25)",
+              borderColor: "rgba(113, 234, 102, 1)",
+              pointBackgroundColor: "rgba(113, 234, 102, 1)"
+            },
+            {
+              fill: true,
+              label: "relativeHumidity",
+              yAxisID: "y3",
+              data: myNode?.environmentMetrics.map((metric) => {
+                return {
+                  x: metric.timestamp,
+                  y: metric.relativeHumidity
+                };
+              }),
+              backgroundColor: "rgba(234, 166, 102, 0.25)",
+              borderColor: "rgba(234, 166, 102, 1)",
+              pointBackgroundColor: "rgba(234, 166, 102, 1)"
+            },
+            {
+              fill: true,
+              label: "temperature",
+              yAxisID: "y4",
+              data: myNode?.environmentMetrics.map((metric) => {
+                return {
+                  x: metric.timestamp,
+                  y: metric.temperature
+                };
+              }),
+              backgroundColor: "rgba(38, 255, 212, 0.25)",
+              borderColor: "rgba(38, 255, 212, 1)",
+              pointBackgroundColor: "rgba(38, 255, 212, 1)"
+            },
+            {
+              fill: true,
+              label: "voltage",
+              yAxisID: "y5",
+              data: myNode?.environmentMetrics.map((metric) => {
+                return {
+                  x: metric.timestamp,
+                  y: metric.voltage
+                };
+              }),
+              backgroundColor: "rgba(247, 255, 15, 0.25)",
+              borderColor: "rgba(247, 255, 15, 1)",
+              pointBackgroundColor: "rgba(247, 255, 15, 1)"
+            }
+          ]
+        }}
+      />
+    </div>
+  );
+};

src/components/Drawer/index.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 
 import { Metrics } from "@components/Drawer/Metrics.js";
 import { Notifications } from "@components/Drawer/Notifications.js";
+import { Sensor } from "@components/Drawer/Sensor.js";
 import type { TabType } from "@components/generic/TabbedContent.js";
 import { Tab } from "@headlessui/react";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
@@ -12,7 +13,8 @@ export const Drawer = (): JSX.Element => {
 
   const tabs: TabType[] = [
     { name: "Notifications", element: Notifications },
-    { name: "Metrics", element: Metrics }
+    { name: "Metrics", element: Metrics },
+    { name: "Sensor", element: Sensor }
   ];
   return (
     <Tab.Group>