From 5b35839cbaaada25ee1b68678173a0c3a9870ea4 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 5 Apr 2024 20:19:49 -0600
Subject: [PATCH] Improve data label distribution

---
 web/src/components/graph/SystemGraph.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index a66cf3c39..b1eccc8e9 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 { isMobile, isMobileOnly } from "react-device-detect";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 
@@ -36,7 +37,7 @@ export function ThresholdBarGraph({
 
   const formatTime = useCallback(
     (val: unknown) => {
-      if (val == 0) {
+      if (val == 1) {
         return;
       }
 
@@ -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: {
@@ -280,7 +281,7 @@ export function CameraLineGraph({
 
   const formatTime = useCallback(
     (val: unknown) => {
-      if (val == 0) {
+      if (val == 1) {
         return;
       }
 
@@ -328,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: {