From f6479b1adb52273c756e046c23b5c85884792a86 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 17 Jan 2025 11:56:40 +0100
Subject: [PATCH] chore(1-3267): use the user's locale settings for formatting
 the tooltip date (#9113)

This PR updates the tooltip date display in the traffic usage chart to
use the user's chosen locale settings, falling back to en-US if the
settings are unavailable or otherwise unset.

So, for instance, if I have set my locale to "ja-JP", I'd get this
instead of the en US format:

![image](https://github.com/user-attachments/assets/4c1dbeab-3275-405d-ab8b-90f24531caff)
---
 .../NetworkTrafficUsage/NetworkTrafficUsage.tsx   | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
index 3c6ab14fb9..77ac241778 100644
--- a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
+++ b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
@@ -33,6 +33,7 @@ import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlu
 import { formatTickValue } from 'component/common/Chart/formatTickValue';
 import { useTrafficLimit } from './hooks/useTrafficLimit';
 import { BILLING_TRAFFIC_BUNDLE_PRICE } from 'component/admin/billing/BillingDashboard/BillingPlan/BillingPlan';
+import { useLocationSettings } from 'hooks/useLocationSettings';
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'grid',
@@ -144,6 +145,7 @@ export const NetworkTrafficUsage: VFC = () => {
 
     const { isOss } = useUiConfig();
 
+    const { locationSettings } = useLocationSettings();
     const {
         record,
         period,
@@ -169,11 +171,14 @@ export const NetworkTrafficUsage: VFC = () => {
                     periodItem.month,
                     Number.parseInt(tooltipItems[0].label),
                 );
-                return tooltipDate.toLocaleDateString('en-US', {
-                    month: 'long',
-                    day: 'numeric',
-                    year: 'numeric',
-                });
+                return tooltipDate.toLocaleDateString(
+                    locationSettings?.locale ?? 'en-US',
+                    {
+                        month: 'long',
+                        day: 'numeric',
+                        year: 'numeric',
+                    },
+                );
             },
             includedTraffic,
         );