Format the dashboard metric in the viewer's locale
React · React · intermediate · modification
Generalises MetricStat for our international rollout: it now takes the current viewer and formats the metric with digit grouping and separators for their locale, instead of the US-only formatting it shipped with. Verified against our US dashboards.
The dashboard is rolling out to ~30 countries; every stat tile on it renders through MetricStat, and viewer.locale comes from the signed-in user's settings.
Requirements
- Generalise MetricStat so it takes the current viewer and renders value with digit grouping and separators for that viewer, not the US-only formatting it had before.
- Format value in the viewer's own locale — viewer.locale holds the BCP 47 language tag the user picked in settings (e.g. 'de-DE', 'fr-FR', 'en-IN').
- Keep the markup otherwise unchanged: the grouped number in the value slot and label beneath it.
Files touched
- src/components/MetricStat.jsx
--- src/components/MetricStat.jsx
/**
- * Show a single dashboard metric, US-formatted.
+ * Show a single dashboard metric in the viewer's own locale.
*
- * @param {{ label: string, value: number }} props
+ * @param {{ label: string, value: number, viewer: { locale: string } }} props
+ * `viewer.locale` is the BCP 47 language tag the user picked in settings
+ * (e.g. 'de-DE', 'fr-FR', 'en-IN') — it drives digit grouping and separators.
*/
-export function MetricStat({ label, value }) {
+export function MetricStat({ label, value, viewer }) {
const formatted = new Intl.NumberFormat('en-US').format(value);
return (