Implement enchrichments events per second graph (#17436)

* Cleanup existing naming

* Add face recognitions per second

* Add lpr fps

* Add all eps

* Clean up line graph

* Translations

* Change wording

* Fix incorrect access

* Don't require plates

* Add comment

* Fix

web/src/components/graph/LineGraph.tsx

@@ -143,3 +143,118 @@ export function CameraLineGraph({
     </div>
   );
 }
+
+type EventsPerSecondLineGraphProps = {
+  graphId: string;
+  unit: string;
+  name: string;
+  updateTimes: number[];
+  data: ApexAxisChartSeries;
+};
+export function EventsPerSecondsLineGraph({
+  graphId,
+  unit,
+  name,
+  updateTimes,
+  data,
+}: EventsPerSecondLineGraphProps) {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
+  const { theme, systemTheme } = useTheme();
+
+  const lastValue = useMemo<number>(
+    // @ts-expect-error y is valid
+    () => data[0].data[data[0].data.length - 1]?.y ?? 0,
+    [data],
+  );
+
+  const formatTime = useCallback(
+    (val: unknown) => {
+      return formatUnixTimestampToDateTime(
+        updateTimes[Math.round(val as number) - 1],
+        {
+          timezone: config?.ui.timezone,
+          strftime_fmt:
+            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+        },
+      );
+    },
+    [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: isMobileOnly ? 2 : 3,
+        tickPlacement: "on",
+        labels: {
+          rotate: 0,
+          formatter: formatTime,
+        },
+        axisBorder: {
+          show: false,
+        },
+        axisTicks: {
+          show: false,
+        },
+      },
+      yaxis: {
+        show: true,
+        labels: {
+          formatter: (val: number) => Math.ceil(val).toString(),
+        },
+        min: 0,
+      },
+    } as ApexCharts.ApexOptions;
+  }, [graphId, systemTheme, theme, formatTime]);
+
+  useEffect(() => {
+    ApexCharts.exec(graphId, "updateOptions", options, true, true);
+  }, [graphId, options]);
+
+  return (
+    <div className="flex w-full flex-col">
+      <div className="flex items-center gap-1">
+        <div className="text-xs text-muted-foreground">{name}</div>
+        <div className="text-xs text-primary">
+          {lastValue}
+          {unit}
+        </div>
+      </div>
+      <Chart type="line" options={options} series={data} height="120" />
+    </div>
+  );
+}

web/src/pages/System.tsx

@@ -14,10 +14,10 @@ import CameraMetrics from "@/views/system/CameraMetrics";
 import { useHashState } from "@/hooks/use-overlay-state";
 import { Toaster } from "@/components/ui/sonner";
 import { FrigateConfig } from "@/types/frigateConfig";
-import FeatureMetrics from "@/views/system/FeatureMetrics";
+import EnrichmentMetrics from "@/views/system/EnrichmentMetrics";
 import { useTranslation } from "react-i18next";
 
-const allMetrics = ["general", "features", "storage", "cameras"] as const;
+const allMetrics = ["general", "enrichments", "storage", "cameras"] as const;
 type SystemMetric = (typeof allMetrics)[number];
 
 function System() {
@@ -34,7 +34,7 @@ function System() {
       !config?.lpr.enabled &&
       !config?.face_recognition.enabled
     ) {
-      const index = metrics.indexOf("features");
+      const index = metrics.indexOf("enrichments");
       metrics.splice(index, 1);
     }
 
@@ -89,7 +89,7 @@ function System() {
               aria-label={`Select ${item}`}
             >
               {item == "general" && <LuActivity className="size-4" />}
-              {item == "features" && <LuSearchCode className="size-4" />}
+              {item == "enrichments" && <LuSearchCode className="size-4" />}
               {item == "storage" && <LuHardDrive className="size-4" />}
               {item == "cameras" && <FaVideo className="size-4" />}
               {isDesktop && (
@@ -122,8 +122,8 @@ function System() {
           setLastUpdated={setLastUpdated}
         />
       )}
-      {page == "features" && (
-        <FeatureMetrics
+      {page == "enrichments" && (
+        <EnrichmentMetrics
           lastUpdated={lastUpdated}
           setLastUpdated={setLastUpdated}
         />

web/src/views/system/CameraMetrics.tsx

@@ -1,5 +1,5 @@
 import { useFrigateStats } from "@/api/ws";
-import { CameraLineGraph } from "@/components/graph/CameraGraph";
+import { CameraLineGraph } from "@/components/graph/LineGraph";
 import CameraInfoDialog from "@/components/overlay/CameraInfoDialog";
 import { Skeleton } from "@/components/ui/skeleton";
 import { FrigateConfig } from "@/types/frigateConfig";

web/src/views/system/EnrichmentMetrics.tsx

@@ -7,15 +7,16 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
+import { EventsPerSecondsLineGraph } from "@/components/graph/LineGraph";
 
-type FeatureMetricsProps = {
+type EnrichmentMetricsProps = {
   lastUpdated: number;
   setLastUpdated: (last: number) => void;
 };
-export default function FeatureMetrics({
+export default function EnrichmentMetrics({
   lastUpdated,
   setLastUpdated,
-}: FeatureMetricsProps) {
+}: EnrichmentMetricsProps) {
   // stats
   const { t } = useTranslation(["views/system"]);
 
@@ -102,15 +103,26 @@ export default function FeatureMetrics({
               {embeddingInferenceTimeSeries.map((series) => (
                 <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
                   <div className="mb-5 capitalize">{series.name}</div>
-                  <ThresholdBarGraph
-                    key={series.name}
-                    graphId={`${series.name}-inference`}
-                    name={series.name}
-                    unit="ms"
-                    threshold={EmbeddingThreshold}
-                    updateTimes={updateTimes}
-                    data={[series]}
-                  />
+                  {series.name.endsWith("Speed") ? (
+                    <ThresholdBarGraph
+                      key={series.name}
+                      graphId={`${series.name}-inference`}
+                      name={series.name}
+                      unit="ms"
+                      threshold={EmbeddingThreshold}
+                      updateTimes={updateTimes}
+                      data={[series]}
+                    />
+                  ) : (
+                    <EventsPerSecondsLineGraph
+                      key={series.name}
+                      graphId={`${series.name}-fps`}
+                      unit=""
+                      name={t("enrichments.infPerSecond")}
+                      updateTimes={updateTimes}
+                      data={[series]}
+                    />
+                  )}
                 </div>
               ))}
             </>