fix: localize widget chart formatting

packages/widgets/src/umami/umami-content.tsx

@@ -91,7 +91,7 @@ export function UmamiContent({
   const { visitorStats } = firstResult;
 
   const chartData = visitorStats.dataPoints.map((point: UmamiVisitorStats["dataPoints"][number]) => ({
-    label: formatXLabel(point.timestamp, timeFrame),
+    label: formatXLabel(point.timestamp, timeFrame, locale),
     visitors: point.visitors,
     ...(point.events !== undefined ? { events: point.events } : {}),
   }));

packages/widgets/src/umami/umami-events-content.tsx

@@ -5,7 +5,7 @@ import { Box, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type { UmamiEventSeries } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { EVENT_COLORS, formatXLabel, umamiQueryOptions } from "./umami-utils";
 
@@ -27,6 +27,7 @@ export function UmamiEventsContent({
   showXAxis,
 }: UmamiEventsContentProps) {
   const t = useScopedI18n("widget.umami");
+  const locale = useCurrentIntlLocale();
   const { colorScheme } = useMantineColorScheme();
   const tickColor = colorScheme === "dark" ? "#c1c2c5" : "#495057";
 
@@ -59,7 +60,7 @@ export function UmamiEventsContent({
   );
 
   const chartData = allTimestamps.map((timestamp) => {
-    const row: Record<string, string | number> = { label: formatXLabel(timestamp, timeFrame) };
+    const row: Record<string, string | number> = { label: formatXLabel(timestamp, timeFrame, locale) };
     for (const serie of series) {
       row[serie.eventName] = byEvent.get(serie.eventName)?.get(timestamp) ?? 0;
     }

packages/widgets/src/umami/umami-top-list.tsx

@@ -4,7 +4,7 @@ import { Group, ScrollArea, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type { UmamiMetricItem } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { umamiQueryOptions } from "./umami-utils";
 
@@ -48,6 +48,8 @@ function UmamiTopList({
   heading: string;
   emptyLabel: string;
 }) {
+  const locale = useCurrentIntlLocale();
+
   return (
     <Stack gap={2} h="100%">
       <Text size="xs" c="dimmed" fw={500}>
@@ -64,7 +66,7 @@ function UmamiTopList({
                 {item.x || emptyLabel}
               </Text>
               <Text size="xs" fw={600} flex="0 0 auto">
-                {item.y.toLocaleString()}
+                {item.y.toLocaleString(locale)}
               </Text>
             </Group>
           ))}

packages/widgets/src/umami/umami-utils.ts

@@ -6,17 +6,17 @@ export const umamiQueryOptions = { refetchInterval: 60_000 } as const;
 
 export const EVENT_COLORS = ["blue.5", "orange.5", "green.5", "red.5", "violet.5", "teal.5", "yellow.5", "pink.5"];
 
-export function formatXLabel(timestamp: string, timeFrame: string): string {
+export function formatXLabel(timestamp: string, timeFrame: string, locale: string): string {
   const date = new Date(timestamp);
   switch (timeFrame) {
     case "today":
     case "24h":
-      return `${date.getHours().toString().padStart(2, "0")}:00`;
+      return date.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
     case "7d":
     case "30d":
     case "month":
     case "lastMonth":
-      return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+      return date.toLocaleDateString(locale, { month: "short", day: "numeric" });
     default:
       return timestamp;
   }