mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01: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: 
This commit is contained in:
		
							parent
							
								
									2d340f6a21
								
							
						
					
					
						commit
						f6479b1adb
					
				| @ -33,6 +33,7 @@ import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlu | |||||||
| import { formatTickValue } from 'component/common/Chart/formatTickValue'; | import { formatTickValue } from 'component/common/Chart/formatTickValue'; | ||||||
| import { useTrafficLimit } from './hooks/useTrafficLimit'; | import { useTrafficLimit } from './hooks/useTrafficLimit'; | ||||||
| import { BILLING_TRAFFIC_BUNDLE_PRICE } from 'component/admin/billing/BillingDashboard/BillingPlan/BillingPlan'; | import { BILLING_TRAFFIC_BUNDLE_PRICE } from 'component/admin/billing/BillingDashboard/BillingPlan/BillingPlan'; | ||||||
|  | import { useLocationSettings } from 'hooks/useLocationSettings'; | ||||||
| 
 | 
 | ||||||
| const StyledBox = styled(Box)(({ theme }) => ({ | const StyledBox = styled(Box)(({ theme }) => ({ | ||||||
|     display: 'grid', |     display: 'grid', | ||||||
| @ -144,6 +145,7 @@ export const NetworkTrafficUsage: VFC = () => { | |||||||
| 
 | 
 | ||||||
|     const { isOss } = useUiConfig(); |     const { isOss } = useUiConfig(); | ||||||
| 
 | 
 | ||||||
|  |     const { locationSettings } = useLocationSettings(); | ||||||
|     const { |     const { | ||||||
|         record, |         record, | ||||||
|         period, |         period, | ||||||
| @ -169,11 +171,14 @@ export const NetworkTrafficUsage: VFC = () => { | |||||||
|                     periodItem.month, |                     periodItem.month, | ||||||
|                     Number.parseInt(tooltipItems[0].label), |                     Number.parseInt(tooltipItems[0].label), | ||||||
|                 ); |                 ); | ||||||
|                 return tooltipDate.toLocaleDateString('en-US', { |                 return tooltipDate.toLocaleDateString( | ||||||
|                     month: 'long', |                     locationSettings?.locale ?? 'en-US', | ||||||
|                     day: 'numeric', |                     { | ||||||
|                     year: 'numeric', |                         month: 'long', | ||||||
|                 }); |                         day: 'numeric', | ||||||
|  |                         year: 'numeric', | ||||||
|  |                     }, | ||||||
|  |                 ); | ||||||
|             }, |             }, | ||||||
|             includedTraffic, |             includedTraffic, | ||||||
|         ); |         ); | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user