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, }); }