Implement camera stats graphs (#10831)

* Implement camera graphs

* Cleanup naming

* Cleanup rendering

* Cleanup spacing

* Fix audio name

* theme updates to match design corretly

* Mobile color fixes

* Mobile color fixes

web/src/components/graph/SystemGraph.tsx

@@ -3,6 +3,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { Threshold } from "@/types/graph";
 import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
+import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 
 type ThresholdBarGraphProps = {
@@ -35,6 +36,10 @@ export function ThresholdBarGraph({
 
   const formatTime = useCallback(
     (val: unknown) => {
+      if (val == 0) {
+        return;
+      }
+
       const date = new Date(updateTimes[Math.round(val as number)] * 1000);
       return date.toLocaleTimeString([], {
         hour12: config?.ui.time_format != "24hour",
@@ -94,6 +99,7 @@ export function ThresholdBarGraph({
         tickAmount: 4,
         tickPlacement: "on",
         labels: {
+          offsetX: -30,
           formatter: formatTime,
         },
         axisBorder: {
@@ -181,7 +187,7 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
         },
       },
       tooltip: {
-        theme: systemTheme || theme,
+        show: false,
       },
       xaxis: {
         axisBorder: {
@@ -199,7 +205,7 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
         min: 0,
         max: 100,
       },
-    };
+    } as ApexCharts.ApexOptions;
   }, [graphId, systemTheme, theme]);
 
   useEffect(() => {
@@ -235,3 +241,135 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
     </div>
   );
 }
+
+const GRAPH_COLORS = ["#5C7CFA", "#ED5CFA", "#FAD75C"];
+
+type CameraLineGraphProps = {
+  graphId: string;
+  unit: string;
+  dataLabels: string[];
+  updateTimes: number[];
+  data: ApexAxisChartSeries;
+};
+export function CameraLineGraph({
+  graphId,
+  unit,
+  dataLabels,
+  updateTimes,
+  data,
+}: CameraLineGraphProps) {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
+  const lastValues = useMemo<number[] | undefined>(() => {
+    if (!dataLabels || !data || data.length == 0) {
+      return undefined;
+    }
+
+    return dataLabels.map(
+      (_, labelIdx) =>
+        // @ts-expect-error y is valid
+        data[labelIdx].data[data[labelIdx].data.length - 1]?.y ?? 0,
+    ) as number[];
+  }, [data, dataLabels]);
+
+  const { theme, systemTheme } = useTheme();
+
+  const formatTime = useCallback(
+    (val: unknown) => {
+      if (val == 0) {
+        return;
+      }
+
+      const date = new Date(updateTimes[Math.round(val as number)] * 1000);
+      return date.toLocaleTimeString([], {
+        hour12: config?.ui.time_format != "24hour",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    },
+    [config, updateTimes],
+  );
+
+  const options = useMemo(() => {
+    return {
+      chart: {
+        id: graphId,
+        selection: {
+          enabled: false,
+        },
+        toolbar: {
+          show: false,
+        },
+        zoom: {
+          enabled: false,
+        },
+      },
+      colors: GRAPH_COLORS,
+      grid: {
+        show: false,
+      },
+      legend: {
+        show: false,
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        width: 1,
+      },
+      tooltip: {
+        theme: systemTheme || theme,
+      },
+      markers: {
+        size: 0,
+      },
+      xaxis: {
+        tickAmount: 4,
+        tickPlacement: "between",
+        labels: {
+          offsetX: -30,
+          formatter: formatTime,
+        },
+        axisBorder: {
+          show: false,
+        },
+        axisTicks: {
+          show: false,
+        },
+      },
+      yaxis: {
+        show: false,
+        min: 0,
+      },
+    } as ApexCharts.ApexOptions;
+  }, [graphId, systemTheme, theme, formatTime]);
+
+  useEffect(() => {
+    ApexCharts.exec(graphId, "updateOptions", options, true, true);
+  }, [graphId, options]);
+
+  return (
+    <div className="w-full flex flex-col">
+      {lastValues && (
+        <div className="flex items-center gap-2.5">
+          {dataLabels.map((label, labelIdx) => (
+            <div key={label} className="flex items-center gap-1">
+              <MdCircle
+                className="size-2"
+                style={{ color: GRAPH_COLORS[labelIdx] }}
+              />
+              <div className="text-xs text-muted-foreground">{label}</div>
+              <div className="text-xs text-primary-foreground">
+                {lastValues[labelIdx]}
+                {unit}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      <Chart type="line" options={options} series={data} height="120" />
+    </div>
+  );
+}

web/src/components/graph/TimelineGraph.tsx

@@ -1,101 +0,0 @@
-import { GraphData } from "@/types/graph";
-import Chart from "react-apexcharts";
-
-type TimelineGraphProps = {
-  id: string;
-  data: GraphData[];
-  start: number;
-  end: number;
-  objects: number[];
-};
-
-/**
- * A graph meant to be overlaid on top of a timeline
- */
-export default function TimelineGraph({
-  id,
-  data,
-  start,
-  end,
-  objects,
-}: TimelineGraphProps) {
-  return (
-    <Chart
-      type="bar"
-      options={{
-        colors: [
-          ({ dataPointIndex }: { dataPointIndex: number }) => {
-            if (objects.includes(dataPointIndex)) {
-              return "#06b6d4";
-            } else {
-              return "#991b1b";
-            }
-          },
-        ],
-        chart: {
-          id: id,
-          selection: {
-            enabled: false,
-          },
-          toolbar: {
-            show: false,
-          },
-          zoom: {
-            enabled: false,
-          },
-        },
-        dataLabels: { enabled: false },
-        grid: {
-          show: false,
-          padding: {
-            bottom: 2,
-            top: -12,
-            left: -20,
-            right: 0,
-          },
-        },
-        legend: {
-          show: false,
-          position: "top",
-        },
-        plotOptions: {
-          bar: {
-            columnWidth: "100%",
-            barHeight: "100%",
-            hideZeroBarsWhenGrouped: true,
-          },
-        },
-        stroke: {
-          width: 0,
-        },
-        tooltip: {
-          enabled: false,
-        },
-        xaxis: {
-          type: "datetime",
-          axisBorder: {
-            show: false,
-          },
-          axisTicks: {
-            show: false,
-          },
-          labels: {
-            show: false,
-          },
-          min: start,
-          max: end,
-        },
-        yaxis: {
-          axisBorder: {
-            show: false,
-          },
-          labels: {
-            show: false,
-          },
-        },
-      }}
-      series={data}
-      height="100%"
-    />
-  );
-}