fix metrics

web/src/components/graph/LineGraph.tsx

@@ -1,4 +1,5 @@
 import { useTheme } from "@/context/theme-provider";
+import { useDateLocale } from "@/hooks/use-date-locale";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useCallback, useEffect, useMemo } from "react";
@@ -24,7 +25,7 @@ export function CameraLineGraph({
   updateTimes,
   data,
 }: CameraLineGraphProps) {
-  const { t } = useTranslation(["views/system"]);
+  const { t } = useTranslation(["views/system", "common"]);
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
@@ -43,18 +44,25 @@ export function CameraLineGraph({
 
   const { theme, systemTheme } = useTheme();
 
+  const locale = useDateLocale();
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
   const formatTime = useCallback(
     (val: unknown) => {
-      return formatUnixTimestampToDateTime(
+      const timestamp = updateTimes[Math.round(val as number)];
-        updateTimes[Math.round(val as number)],
+      return formatUnixTimestampToDateTime(timestamp, {
-        {
+        timezone: config?.ui.timezone,
-          timezone: config?.ui.timezone,
+        date_format: format,
-          strftime_fmt:
+        locale,
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+      });
-        },
-      );
     },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
   );
 
   const options = useMemo(() => {
@@ -170,18 +178,26 @@ export function EventsPerSecondsLineGraph({
     [data],
   );
 
+  const locale = useDateLocale();
+  const { t } = useTranslation(["common"]);
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
   const formatTime = useCallback(
     (val: unknown) => {
-      return formatUnixTimestampToDateTime(
+      const timestamp = updateTimes[Math.round(val as number) - 1];
-        updateTimes[Math.round(val as number) - 1],
+      return formatUnixTimestampToDateTime(timestamp, {
-        {
+        timezone: config?.ui.timezone,
-          timezone: config?.ui.timezone,
+        date_format: format,
-          strftime_fmt:
+        locale,
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+      });
-        },
-      );
     },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
   );
 
   const options = useMemo(() => {

web/src/components/graph/SystemGraph.tsx

@@ -1,10 +1,12 @@
 import { useTheme } from "@/context/theme-provider";
+import { useDateLocale } from "@/hooks/use-date-locale";
 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";
+import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
 type ThresholdBarGraphProps = {
@@ -45,6 +47,16 @@ export function ThresholdBarGraph({
 
   const { theme, systemTheme } = useTheme();
 
+  const locale = useDateLocale();
+  const { t } = useTranslation(["common"]);
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
   const formatTime = useCallback(
     (val: unknown) => {
       const dateIndex = Math.round(val as number);
@@ -53,17 +65,14 @@ export function ThresholdBarGraph({
       if (dateIndex < 0) {
         timeOffset = 5 * Math.abs(dateIndex);
       }
-
+      const timestamp = updateTimes[Math.max(1, dateIndex) - 1] - timeOffset;
-      return formatUnixTimestampToDateTime(
+      return formatUnixTimestampToDateTime(timestamp, {
-        updateTimes[Math.max(1, dateIndex) - 1] - timeOffset,
+        timezone: config?.ui.timezone,
-        {
+        date_format: format,
-          timezone: config?.ui.timezone,
+        locale,
-          strftime_fmt:
+      });
-            config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
-        },
-      );
     },
-    [config, updateTimes],
+    [config?.ui.timezone, format, locale, updateTimes],
   );
 
   const options = useMemo(() => {

web/src/views/system/StorageMetrics.tsx

@@ -10,9 +10,8 @@ import {
 import useSWR from "swr";
 import { CiCircleAlert } from "react-icons/ci";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useTimezone } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, useTimezone } from "@/hooks/use-date-utils";
 import { RecordingsSummary } from "@/types/review";
-import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useTranslation } from "react-i18next";
 
 type CameraStorage = {
@@ -70,6 +69,19 @@ export default function StorageMetrics({
       : null;
   }, [recordingsSummary]);
 
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampMonthDayYearHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
+  const formattedEarliestDate = useFormattedTimestamp(
+    earliestDate || 0,
+    format,
+    timezone,
+  );
+
   if (!cameraStorage || !stats || !totalStorage || !config) {
     return;
   }
@@ -114,13 +126,7 @@ export default function StorageMetrics({
               <span className="font-medium">
                 {t("storage.recordings.earliestRecording")}
               </span>{" "}
-              {formatUnixTimestampToDateTime(earliestDate, {
+              {formattedEarliestDate}
-                timezone: timezone,
-                strftime_fmt:
-                  config.ui.time_format === "24hour"
-                    ? "%d %b %Y, %H:%M"
-                    : "%B %d, %Y, %I:%M %p",
-              })}
             </div>
           )}
         </div>