1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-17 01:17:29 +02:00

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)
This commit is contained in:
Thomas Heartman 2025-01-17 11:56:40 +01:00 committed by GitHub
parent 2d340f6a21
commit f6479b1adb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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,
);