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/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>
               ))}
             </>