Implement camera graphs

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: {
@@ -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/pages/System.tsx

@@ -10,6 +10,7 @@ import { LuActivity, LuHardDrive } from "react-icons/lu";
 import { FaVideo } from "react-icons/fa";
 import Logo from "@/components/Logo";
 import useOptimisticState from "@/hooks/use-optimistic-state";
+import CameraMetrics from "@/views/system/CameraMetrics";
 
 const metrics = ["general", "storage", "cameras"] as const;
 type SystemMetric = (typeof metrics)[number];
@@ -82,127 +83,14 @@ function System() {
         />
       )}
       {page == "storage" && <StorageMetrics setLastUpdated={setLastUpdated} />}
+      {page == "cameras" && (
+        <CameraMetrics
+          lastUpdated={lastUpdated}
+          setLastUpdated={setLastUpdated}
+        />
+      )}
     </div>
   );
 }
 
 export default System;
-
-/**
- * const cameraCpuSeries = useMemo(() => {
-    if (!statsHistory || statsHistory.length == 0) {
-      return {};
-    }
-
-    const series: {
-      [cam: string]: {
-        [key: string]: { name: string; data: { x: object; y: string }[] };
-      };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      const statTime = new Date(stats.service.last_updated * 1000);
-
-      Object.entries(stats.cameras).forEach(([key, camStats]) => {
-        if (!config?.cameras[key].enabled) {
-          return;
-        }
-
-        if (!(key in series)) {
-          const camName = key.replaceAll("_", " ");
-          series[key] = {};
-          series[key]["ffmpeg"] = { name: `${camName} ffmpeg`, data: [] };
-          series[key]["capture"] = { name: `${camName} capture`, data: [] };
-          series[key]["detect"] = { name: `${camName} detect`, data: [] };
-        }
-
-        series[key]["ffmpeg"].data.push({
-          x: statsIdx,
-          y: stats.cpu_usages[camStats.ffmpeg_pid.toString()]?.cpu ?? 0.0,
-        });
-        series[key]["capture"].data.push({
-          x: statsIdx,
-          y: stats.cpu_usages[camStats.capture_pid?.toString()]?.cpu ?? 0,
-        });
-        series[key]["detect"].data.push({
-          x: statsIdx,
-          y: stats.cpu_usages[camStats.pid.toString()].cpu,
-        });
-      });
-    });
-    return series;
-  }, [statsHistory]);
-  const cameraFpsSeries = useMemo(() => {
-    if (!statsHistory) {
-      return {};
-    }
-
-    const series: {
-      [cam: string]: {
-        [key: string]: { name: string; data: { x: object; y: number }[] };
-      };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      const statTime = new Date(stats.service.last_updated * 1000);
-
-      Object.entries(stats.cameras).forEach(([key, camStats]) => {
-        if (!(key in series)) {
-          const camName = key.replaceAll("_", " ");
-          series[key] = {};
-          series[key]["det"] = { name: `${camName} detections`, data: [] };
-          series[key]["skip"] = {
-            name: `${camName} skipped detections`,
-            data: [],
-          };
-        }
-
-        series[key]["det"].data.push({
-          x: statsIdx,
-          y: camStats.detection_fps,
-        });
-        series[key]["skip"].data.push({
-          x: statsIdx,
-          y: camStats.skipped_fps,
-        });
-      });
-    });
-    return series;
-  }, [statsHistory]);
- *
- *  <div className="bg-primary rounded-2xl flex-col">
-      <Heading as="h4">Cameras</Heading>
-      <div className="grid grid-cols-1 sm:grid-cols-2">
-        {config &&
-          Object.values(config.cameras).map((camera) => {
-            if (camera.enabled) {
-              return (
-                <div key={camera.name} className="grid grid-cols-2">
-                  <ThresholdBarGraph
-                    graphId={`${camera.name}-cpu`}
-                    title={`${camera.name.replaceAll("_", " ")} CPU`}
-                    unit="%"
-                    data={Object.values(cameraCpuSeries[camera.name] || {})}
-                  />
-                  <ThresholdBarGraph
-                    graphId={`${camera.name}-fps`}
-                    title={`${camera.name.replaceAll("_", " ")} FPS`}
-                    unit=""
-                    data={Object.values(cameraFpsSeries[camera.name] || {})}
-                  />
-                </div>
-              );
-            }
-
-            return null;
-          })}
-      </div>
- */

web/src/views/system/CameraMetrics.tsx

@@ -0,0 +1,187 @@
+import { useFrigateStats } from "@/api/ws";
+import { CameraLineGraph } from "@/components/graph/SystemGraph";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { FrigateStats } from "@/types/stats";
+import { useEffect, useMemo, useState } from "react";
+import useSWR from "swr";
+
+type CameraMetricsProps = {
+  lastUpdated: number;
+  setLastUpdated: (last: number) => void;
+};
+export default function CameraMetrics({
+  lastUpdated,
+  setLastUpdated,
+}: CameraMetricsProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  // stats
+
+  const { data: initialStats } = useSWR<FrigateStats[]>(
+    ["stats/history", { keys: "cpu_usages,cameras,service" }],
+    {
+      revalidateOnFocus: false,
+    },
+  );
+
+  const [statsHistory, setStatsHistory] = useState<FrigateStats[]>([]);
+  const { payload: updatedStats } = useFrigateStats();
+
+  useEffect(() => {
+    if (initialStats == undefined || initialStats.length == 0) {
+      return;
+    }
+
+    if (statsHistory.length == 0) {
+      setStatsHistory(initialStats);
+      return;
+    }
+
+    if (!updatedStats) {
+      return;
+    }
+
+    if (updatedStats.service.last_updated > lastUpdated) {
+      setStatsHistory([...statsHistory, updatedStats]);
+      setLastUpdated(Date.now() / 1000);
+    }
+  }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
+
+  // timestamps
+
+  const updateTimes = useMemo(
+    () => statsHistory.map((stats) => stats.service.last_updated),
+    [statsHistory],
+  );
+
+  // stats data
+
+  const cameraCpuSeries = useMemo(() => {
+    if (!statsHistory || statsHistory.length == 0) {
+      return {};
+    }
+
+    const series: {
+      [cam: string]: {
+        [key: string]: { name: string; data: { x: number; y: string }[] };
+      };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.cameras).forEach(([key, camStats]) => {
+        if (!config?.cameras[key].enabled) {
+          return;
+        }
+
+        if (!(key in series)) {
+          const camName = key.replaceAll("_", " ");
+          series[key] = {};
+          series[key]["ffmpeg"] = { name: `${camName} ffmpeg`, data: [] };
+          series[key]["capture"] = { name: `${camName} capture`, data: [] };
+          series[key]["detect"] = { name: `${camName} detect`, data: [] };
+        }
+
+        series[key]["ffmpeg"].data.push({
+          x: statsIdx,
+          y: stats.cpu_usages[camStats.ffmpeg_pid.toString()]?.cpu ?? 0.0,
+        });
+        series[key]["capture"].data.push({
+          x: statsIdx,
+          y: stats.cpu_usages[camStats.capture_pid?.toString()]?.cpu ?? 0,
+        });
+        series[key]["detect"].data.push({
+          x: statsIdx,
+          y: stats.cpu_usages[camStats.pid.toString()].cpu,
+        });
+      });
+    });
+    return series;
+  }, [config, statsHistory]);
+
+  const cameraFpsSeries = useMemo(() => {
+    if (!statsHistory) {
+      return {};
+    }
+
+    const series: {
+      [cam: string]: {
+        [key: string]: { name: string; data: { x: number; y: number }[] };
+      };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.cameras).forEach(([key, camStats]) => {
+        if (!(key in series)) {
+          const camName = key.replaceAll("_", " ");
+          series[key] = {};
+          series[key]["det"] = { name: `${camName} detections`, data: [] };
+          series[key]["skip"] = {
+            name: `${camName} skipped detections`,
+            data: [],
+          };
+        }
+
+        series[key]["det"].data.push({
+          x: statsIdx,
+          y: camStats.detection_fps,
+        });
+        series[key]["skip"].data.push({
+          x: statsIdx,
+          y: camStats.skipped_fps,
+        });
+      });
+    });
+    return series;
+  }, [statsHistory]);
+
+  return (
+    <div className="size-full mt-4 flex flex-col overflow-y-auto">
+      <div className="mb-5">Cameras</div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        {config &&
+          Object.values(config.cameras).map((camera) => {
+            if (camera.enabled) {
+              return (
+                <div key={camera.name} className="grid grid-cols-2 gap-2">
+                  <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                    <div className="mb-5 capitalize">
+                      {camera.name.replaceAll("_", " ")} CPU
+                    </div>
+                    <CameraLineGraph
+                      graphId={`${camera.name}-cpu`}
+                      unit="%"
+                      dataLabels={["ffmpeg", "capture", "detect"]}
+                      updateTimes={updateTimes}
+                      data={Object.values(cameraCpuSeries[camera.name] || {})}
+                    />
+                  </div>
+                  <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                    <div className="mb-5 capitalize">
+                      {camera.name.replaceAll("_", " ")} FPS
+                    </div>
+                    <CameraLineGraph
+                      graphId={`${camera.name}-fps`}
+                      unit=" FPS"
+                      dataLabels={["detect", "skipped"]}
+                      updateTimes={updateTimes}
+                      data={Object.values(cameraFpsSeries[camera.name] || {})}
+                    />
+                  </div>
+                </div>
+              );
+            }
+
+            return null;
+          })}
+      </div>
+    </div>
+  );
+}