From 12e6e43d6ccaaf77aa2977d0783a03278e9461e9 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 7 Apr 2024 14:36:28 -0600
Subject: [PATCH] Add y axis to camera stats graphs (#10854)

* Add y axis to camera stats graphs

* Add y axis to gneral graph too

* Improve data label distribution

* Cleanup
---
 web/src/components/graph/SystemGraph.tsx | 28 ++++++++++++++----------
 web/src/views/system/GeneralMetrics.tsx  | 14 ++++++------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index d66fb5f7c..6bccfaa7a 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/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 { isMobileOnly } from "react-device-detect";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 
@@ -36,11 +37,11 @@ export function ThresholdBarGraph({
 
   const formatTime = useCallback(
     (val: unknown) => {
-      if (val == 0) {
+      if (val == 1) {
         return;
       }
 
-      const date = new Date(updateTimes[Math.round(val as number)] * 1000);
+      const date = new Date(updateTimes[Math.round(val as number) - 1] * 1000);
       return date.toLocaleTimeString([], {
         hour12: config?.ui.time_format != "24hour",
         hour: "2-digit",
@@ -96,10 +97,10 @@ export function ThresholdBarGraph({
         size: 0,
       },
       xaxis: {
-        tickAmount: 4,
+        tickAmount: isMobileOnly ? 3 : 4,
         tickPlacement: "on",
         labels: {
-          offsetX: -30,
+          offsetX: -18,
           formatter: formatTime,
         },
         axisBorder: {
@@ -110,9 +111,11 @@ export function ThresholdBarGraph({
         },
       },
       yaxis: {
-        show: false,
+        show: true,
+        labels: {
+          formatter: (val: number) => Math.ceil(val).toString(),
+        },
         min: 0,
-        max: threshold.warning + 10,
       },
     } as ApexCharts.ApexOptions;
   }, [graphId, threshold, systemTheme, theme, formatTime]);
@@ -278,7 +281,7 @@ export function CameraLineGraph({
 
   const formatTime = useCallback(
     (val: unknown) => {
-      if (val == 0) {
+      if (val == 1) {
         return;
       }
 
@@ -326,10 +329,10 @@ export function CameraLineGraph({
         size: 0,
       },
       xaxis: {
-        tickAmount: 4,
-        tickPlacement: "between",
+        tickAmount: isMobileOnly ? 3 : 4,
+        tickPlacement: "on",
         labels: {
-          offsetX: -30,
+          offsetX: isMobileOnly ? -18 : 0,
           formatter: formatTime,
         },
         axisBorder: {
@@ -340,7 +343,10 @@ export function CameraLineGraph({
         },
       },
       yaxis: {
-        show: false,
+        show: true,
+        labels: {
+          formatter: (val: number) => Math.ceil(val).toString(),
+        },
         min: 0,
       },
     } as ApexCharts.ApexOptions;
diff --git a/web/src/views/system/GeneralMetrics.tsx b/web/src/views/system/GeneralMetrics.tsx
index 52eaa42f5..49f7d733e 100644
--- a/web/src/views/system/GeneralMetrics.tsx
+++ b/web/src/views/system/GeneralMetrics.tsx
@@ -99,7 +99,7 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        series[key].data.push({ x: statsIdx, y: stats.inference_speed });
+        series[key].data.push({ x: statsIdx + 1, y: stats.inference_speed });
       });
     });
     return Object.values(series);
@@ -125,7 +125,7 @@ export default function GeneralMetrics({
         }
 
         series[key].data.push({
-          x: statsIdx,
+          x: statsIdx + 1,
           y: stats.cpu_usages[detStats.pid.toString()].cpu,
         });
       });
@@ -153,7 +153,7 @@ export default function GeneralMetrics({
         }
 
         series[key].data.push({
-          x: statsIdx,
+          x: statsIdx + 1,
           y: stats.cpu_usages[detStats.pid.toString()].mem,
         });
       });
@@ -182,7 +182,7 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        series[key].data.push({ x: statsIdx, y: stats.gpu });
+        series[key].data.push({ x: statsIdx + 1, y: stats.gpu });
       });
     });
     return Object.keys(series).length > 0 ? Object.values(series) : [];
@@ -207,7 +207,7 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        series[key].data.push({ x: statsIdx, y: stats.mem });
+        series[key].data.push({ x: statsIdx + 1, y: stats.mem });
       });
     });
     return Object.values(series);
@@ -236,7 +236,7 @@ export default function GeneralMetrics({
           }
 
           series[key].data.push({
-            x: statsIdx,
+            x: statsIdx + 1,
             y: stats.cpu_usages[procStats.pid.toString()].cpu,
           });
         }
@@ -266,7 +266,7 @@ export default function GeneralMetrics({
           }
 
           series[key].data.push({
-            x: statsIdx,
+            x: statsIdx + 1,
             y: stats.cpu_usages[procStats.pid.toString()].mem,
           });
         }