administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-04 20:47:42 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix metrics

Browse Source
This commit is contained in:
Josh Hawkins 2025-04-22 15:58:08 -05:00
parent 033078ccac
commit f01b4e175e
3 changed files with 69 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/components/graph/LineGraph.tsx
View File

@ -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(
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(() => {

29
web/src/components/graph/SystemGraph.tsx
View File

@ -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(() => {

24
web/src/views/system/StorageMetrics.tsx
View File

@ -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, {
timezone: timezone,
strftime_fmt:
config.ui.time_format === "24hour"
? "%d %b %Y, %H:%M"
: "%B %d, %Y, %I:%M %p",
})}
{formattedEarliestDate}
</div>
)}
</div>