From a6fd56ca740261627195e558ff101d01ee8459ab Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 4 Nov 2024 06:40:22 -0700
Subject: [PATCH] More timezone fixes

---
 web/src/components/graph/CameraGraph.tsx | 15 +++++++++------
 web/src/components/graph/SystemGraph.tsx | 17 +++++++++--------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/web/src/components/graph/CameraGraph.tsx b/web/src/components/graph/CameraGraph.tsx
index 3289887c5..ab5d6e03f 100644
--- a/web/src/components/graph/CameraGraph.tsx
+++ b/web/src/components/graph/CameraGraph.tsx
@@ -1,5 +1,6 @@
 import { useTheme } from "@/context/theme-provider";
 import { FrigateConfig } from "@/types/frigateConfig";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
 import { isMobileOnly } from "react-device-detect";
@@ -42,12 +43,14 @@ export function CameraLineGraph({
 
   const formatTime = useCallback(
     (val: unknown) => {
-      const date = new Date(updateTimes[Math.round(val as number)] * 1000);
-      return date.toLocaleTimeString([], {
-        hour12: config?.ui.time_format != "24hour",
-        hour: "2-digit",
-        minute: "2-digit",
-      });
+      return formatUnixTimestampToDateTime(
+        updateTimes[Math.round(val as number)],
+        {
+          timezone: config?.ui.timezone,
+          strftime_fmt:
+            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+        },
+      );
     },
     [config, updateTimes],
   );
diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index 572eae5cd..aaf838763 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -1,6 +1,7 @@
 import { useTheme } from "@/context/theme-provider";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Threshold } from "@/types/graph";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
 import { isMobileOnly } from "react-device-detect";
@@ -50,17 +51,17 @@ export function ThresholdBarGraph({
 
       let timeOffset = 0;
       if (dateIndex < 0) {
-        timeOffset = 5000 * Math.abs(dateIndex);
+        timeOffset = 5 * Math.abs(dateIndex);
       }
 
-      const date = new Date(
-        updateTimes[Math.max(1, dateIndex) - 1] * 1000 - timeOffset,
+      return formatUnixTimestampToDateTime(
+        updateTimes[Math.max(1, dateIndex) - 1] - timeOffset,
+        {
+          timezone: config?.ui.timezone,
+          strftime_fmt:
+            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+        },
       );
-      return date.toLocaleTimeString([], {
-        hour12: config?.ui.time_format != "24hour",
-        hour: "2-digit",
-        minute: "2-digit",
-      });
     },
     [config, updateTimes],
   );