From 7739a330d84509bd6e21dfc12e5c1ef5131f1aea Mon Sep 17 00:00:00 2001
From: leccelecce <24962424+leccelecce@users.noreply.github.com>
Date: Wed, 24 Jun 2026 23:04:43 +0100
Subject: [PATCH] Use a distinct color palette for Frames / Detections graphs
 (#2)

The CPU and Frames / Detections graphs on the system metrics page both
rendered through CameraLineGraph with a single shared palette, making
the two graphs hard to tell apart at a glance.

Add an optional `colors` prop to CameraLineGraph (defaulting to the
existing palette so CPU graphs are unchanged) and give the Frames /
Detections graphs their own green/orange/cyan palette. The colors are
routed through both the chart lines and the legend dots so they stay
in sync.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/components/graph/LineGraph.tsx | 11 ++++++++---
 web/src/views/system/CameraMetrics.tsx |  7 ++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/web/src/components/graph/LineGraph.tsx b/web/src/components/graph/LineGraph.tsx
index c7d1b0f4e6..c5eda5af4e 100644
--- a/web/src/components/graph/LineGraph.tsx
+++ b/web/src/components/graph/LineGraph.tsx
@@ -11,6 +11,9 @@ import useSWR from "swr";
 import { useTimeFormat } from "@/hooks/use-date-utils";
 
 const GRAPH_COLORS = ["#5C7CFA", "#ED5CFA", "#FAD75C"];
+// Distinct palette so the Frames / Detections graphs are easy to tell apart
+// from the CPU graphs at a glance.
+export const FPS_GRAPH_COLORS = ["#2DD4BF", "#818CFF", "#D17B88"];
 
 type CameraLineGraphProps = {
   graphId: string;
@@ -19,6 +22,7 @@ type CameraLineGraphProps = {
   updateTimes: number[];
   data: ApexAxisChartSeries;
   isActive?: boolean;
+  colors?: string[];
 };
 export function CameraLineGraph({
   graphId,
@@ -27,6 +31,7 @@ export function CameraLineGraph({
   updateTimes,
   data,
   isActive = true,
+  colors = GRAPH_COLORS,
 }: CameraLineGraphProps) {
   const { t } = useTranslation(["views/system", "common"]);
   const { data: config } = useSWR<FrigateConfig>("config", {
@@ -91,7 +96,7 @@ export function CameraLineGraph({
           enabled: false,
         },
       },
-      colors: GRAPH_COLORS,
+      colors,
       grid: {
         show: false,
       },
@@ -138,7 +143,7 @@ export function CameraLineGraph({
         min: 0,
       },
     } as ApexCharts.ApexOptions;
-  }, [graphId, systemTheme, theme, formatTime]);
+  }, [graphId, colors, systemTheme, theme, formatTime]);
 
   useEffect(() => {
     ApexCharts.exec(graphId, "updateOptions", options, true, true);
@@ -162,7 +167,7 @@ export function CameraLineGraph({
             <div key={label} className="flex items-center gap-1">
               <MdCircle
                 className="size-2"
-                style={{ color: GRAPH_COLORS[labelIdx] }}
+                style={{ color: colors[labelIdx] }}
               />
               <div className="text-xs text-secondary-foreground">
                 {t("cameras.label." + label)}
diff --git a/web/src/views/system/CameraMetrics.tsx b/web/src/views/system/CameraMetrics.tsx
index 340953b413..b2e95f30fc 100644
--- a/web/src/views/system/CameraMetrics.tsx
+++ b/web/src/views/system/CameraMetrics.tsx
@@ -1,5 +1,8 @@
 import { useFrigateStats } from "@/api/ws";
-import { CameraLineGraph } from "@/components/graph/LineGraph";
+import {
+  CameraLineGraph,
+  FPS_GRAPH_COLORS,
+} from "@/components/graph/LineGraph";
 import CameraInfoDialog from "@/components/overlay/CameraInfoDialog";
 import { ConnectionQualityIndicator } from "@/components/camera/ConnectionQualityIndicator";
 import { EmptyCard } from "@/components/card/EmptyCard";
@@ -308,6 +311,7 @@ export default function CameraMetrics({
               updateTimes={updateTimes}
               data={overallFpsSeries}
               isActive={isActive}
+              colors={FPS_GRAPH_COLORS}
             />
           </div>
         ) : (
@@ -411,6 +415,7 @@ export default function CameraMetrics({
                               cameraFpsSeries[camera.name] || {},
                             )}
                             isActive={isActive}
+                            colors={FPS_GRAPH_COLORS}
                           />
                         </div>
                       ) : (