diff --git a/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx b/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx index 035879152d..86347f5241 100644 --- a/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx +++ b/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx @@ -19,7 +19,8 @@ import { getDisplayFormat, getSeriesLabel, getTimeUnit, -} from './impact-metrics-utils.ts'; + formatLargeNumbers, +} from './utils.ts'; import { fromUnixTime } from 'date-fns'; import { useSeriesColor } from './hooks/useSeriesColor.ts'; @@ -254,6 +255,14 @@ export const ImpactMetrics: FC = () => { }, ticks: { precision: 0, + callback: ( + value: unknown, + ): string | number => + typeof value === 'number' + ? formatLargeNumbers( + value, + ) + : (value as number), }, }, }, diff --git a/frontend/src/component/insights/impact-metrics/impact-metrics-utils.ts b/frontend/src/component/insights/impact-metrics/utils.ts similarity index 81% rename from frontend/src/component/insights/impact-metrics/impact-metrics-utils.ts rename to frontend/src/component/insights/impact-metrics/utils.ts index 2f62e26676..8c4e292d39 100644 --- a/frontend/src/component/insights/impact-metrics/impact-metrics-utils.ts +++ b/frontend/src/component/insights/impact-metrics/utils.ts @@ -48,3 +48,13 @@ export const getSeriesLabel = (metric: Record): string => { return `${__name__} (${labelParts})`; }; + +export const formatLargeNumbers = (value: number): string => { + if (value >= 1000000) { + return `${(value / 1000000).toFixed(0)}M`; + } + if (value >= 1000) { + return `${(value / 1000).toFixed(0)}k`; + } + return value.toString(); +};