From f01b4e175e9df23fcfcbba4bca5df09c5b6f3675 Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Tue, 22 Apr 2025 15:58:08 -0500 Subject: [PATCH] fix metrics --- web/src/components/graph/LineGraph.tsx | 54 +++++++++++++++--------- web/src/components/graph/SystemGraph.tsx | 29 ++++++++----- web/src/views/system/StorageMetrics.tsx | 24 +++++++---- 3 files changed, 69 insertions(+), 38 deletions(-) diff --git a/web/src/components/graph/LineGraph.tsx b/web/src/components/graph/LineGraph.tsx index ef55c93438..4e4f3666a2 100644 --- a/web/src/components/graph/LineGraph.tsx +++ b/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("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( - updateTimes[Math.round(val as number)], - { - timezone: config?.ui.timezone, - strftime_fmt: - config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p", - }, - ); + const timestamp = updateTimes[Math.round(val as number)]; + return formatUnixTimestampToDateTime(timestamp, { + timezone: config?.ui.timezone, + date_format: format, + locale, + }); }, - [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( - updateTimes[Math.round(val as number) - 1], - { - timezone: config?.ui.timezone, - strftime_fmt: - config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p", - }, - ); + const timestamp = updateTimes[Math.round(val as number) - 1]; + return formatUnixTimestampToDateTime(timestamp, { + timezone: config?.ui.timezone, + date_format: format, + locale, + }); }, - [config, updateTimes], + [config?.ui.timezone, format, locale, updateTimes], ); const options = useMemo(() => { diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx index aaf838763d..e70990c516 100644 --- a/web/src/components/graph/SystemGraph.tsx +++ b/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); } - - 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", - }, - ); + const timestamp = updateTimes[Math.max(1, dateIndex) - 1] - timeOffset; + return formatUnixTimestampToDateTime(timestamp, { + timezone: config?.ui.timezone, + date_format: format, + locale, + }); }, - [config, updateTimes], + [config?.ui.timezone, format, locale, updateTimes], ); const options = useMemo(() => { diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx index 4e7ff646d1..2f41f2c921 100644 --- a/web/src/views/system/StorageMetrics.tsx +++ b/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({ {t("storage.recordings.earliestRecording")} {" "} - {formatUnixTimestampToDateTime(earliestDate, { - timezone: timezone, - strftime_fmt: - config.ui.time_format === "24hour" - ? "%d %b %Y, %H:%M" - : "%B %d, %Y, %I:%M %p", - })} + {formattedEarliestDate} )}