fix(dashboard): Localize dashboard widget dates and labels

Relates to #4004

packages/dashboard/src/lib/framework/dashboard-widget/latest-orders-widget/index.tsx

@@ -5,11 +5,11 @@ import {
     OrderStateCell,
 } from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
 import { Button } from '@/vdb/components/ui/button.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { useLingui } from '@lingui/react/macro';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
-import { formatRelative } from 'date-fns';
 import { useEffect, useState } from 'react';
 import { DashboardBaseWidget } from '../base-widget.js';
 import { useWidgetFilters } from '@/vdb/hooks/use-widget-filters.js';
@@ -19,6 +19,7 @@ export const WIDGET_ID = 'latest-orders-widget';
 
 export function LatestOrdersWidget() {
     const { t } = useLingui();
+    const { formatRelativeDate } = useLocalFormat();
     const { dateRange } = useWidgetFilters();
     const { setTableSettings, settings } = useUserSettings();
     const tableSettings = settings.tableSettings?.[WIDGET_ID];
@@ -108,7 +109,7 @@ export function LatestOrdersWidget() {
                         cell: ({ row }) => {
                             return (
                                 <span className="capitalize">
-                                    {formatRelative(row.original.orderPlacedAt ?? new Date(), new Date())}
+                                    {formatRelativeDate(row.original.orderPlacedAt ?? new Date())}
                                 </span>
                             );
                         },

packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx

@@ -4,9 +4,11 @@ import { useWidgetDimensions } from '@/vdb/hooks/use-widget-dimensions.js';
 export function MetricsChart({
     chartData,
     formatValue,
+    dataLabel,
 }: {
     chartData: any[];
     formatValue: (value: any) => string;
+    dataLabel: string;
 }) {
     const { width, height } = useWidgetDimensions();
 
@@ -30,6 +32,7 @@ export function MetricsChart({
             <Area
                 type="monotone"
                 dataKey="sales"
+                name={dataLabel}
                 stroke="var(--color-brand)"
                 strokeWidth={2}
                 strokeOpacity={0.8}

packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/index.tsx

@@ -26,6 +26,17 @@ export function MetricsWidget() {
     const { dateRange } = useWidgetFilters();
     const [dataType, setDataType] = useState<DATA_TYPES>(DATA_TYPES.OrderTotal);
 
+    const dataTypeLabel = useMemo(() => {
+        switch (dataType) {
+            case DATA_TYPES.OrderCount:
+                return t`Order Count`;
+            case DATA_TYPES.OrderTotal:
+                return t`Order Total`;
+            case DATA_TYPES.AverageOrderValue:
+                return t`Average Order Value`;
+        }
+    }, [dataType, t]);
+
     const { data, refetch, isRefetching } = useQuery({
         queryKey: ['dashboard-order-metrics', dataType, dateRange],
         queryFn: () => {
@@ -89,6 +100,7 @@ export function MetricsWidget() {
                         return formatCurrency(value, activeChannel?.defaultCurrencyCode ?? 'USD', 0);
                     }}
                     chartData={chartData.values}
+                    dataLabel={dataTypeLabel}
                 />
             )}
         </DashboardBaseWidget>