From ee91fecea66301858b62dd9402e46162f137eb64 Mon Sep 17 00:00:00 2001 From: Linh Nguyen Date: Tue, 12 Dec 2023 12:25:07 -0500 Subject: [PATCH] Format number in compact forms --- src/components/explore/ClientVolumeOverTimeGraph.svelte | 4 ++-- src/components/explore/CompareClientVolumeGraph.svelte | 4 ++-- src/components/explore/CompareSampleCountGraph.svelte | 4 ++-- src/components/explore/DistributionChart.svelte | 3 +-- src/components/explore/ProbeExplorer.svelte | 4 ++-- src/components/explore/SampleCountOverTimeGraph.svelte | 4 ++-- src/utils/formatters.js | 9 ++------- 7 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/components/explore/ClientVolumeOverTimeGraph.svelte b/src/components/explore/ClientVolumeOverTimeGraph.svelte index f2d38fcf3..90ef7d040 100644 --- a/src/components/explore/ClientVolumeOverTimeGraph.svelte +++ b/src/components/explore/ClientVolumeOverTimeGraph.svelte @@ -8,7 +8,7 @@ import ReleaseVersionMarkers from '../ReleaseVersionMarkers.svelte'; import { totalClientsGraph, tween } from '../../utils/constants'; - import { formatMillion } from '../../utils/formatters'; + import { formatCompact } from '../../utils/formatters'; import ReferenceSymbol from '../ReferenceSymbol.svelte'; import TrackingLine from './TrackingLine.svelte'; @@ -64,7 +64,7 @@ side="left" lineStyle="short" ticks={yScale.ticks(4)} - tickFormatter={formatMillion} + tickFormatter={formatCompact} /> {#if aggregationLevel === 'build_id'} diff --git a/src/components/explore/CompareClientVolumeGraph.svelte b/src/components/explore/CompareClientVolumeGraph.svelte index 85de831a3..6c9a79e0e 100644 --- a/src/components/explore/CompareClientVolumeGraph.svelte +++ b/src/components/explore/CompareClientVolumeGraph.svelte @@ -7,7 +7,7 @@ import Tweenable from '../Tweenable.svelte'; import ChartTitle from './ChartTitle.svelte'; import { compareClientCountsGraph, tween } from '../../utils/constants'; - import { formatMillion } from '../../utils/formatters'; + import { formatCompact } from '../../utils/formatters'; export let description; export let leftAudienceValue; @@ -75,7 +75,7 @@ /> diff --git a/src/components/explore/CompareSampleCountGraph.svelte b/src/components/explore/CompareSampleCountGraph.svelte index cceb045b7..4510b8773 100644 --- a/src/components/explore/CompareSampleCountGraph.svelte +++ b/src/components/explore/CompareSampleCountGraph.svelte @@ -7,7 +7,7 @@ import Tweenable from '../Tweenable.svelte'; import ChartTitle from './ChartTitle.svelte'; import { compareClientCountsGraph, tween } from '../../utils/constants'; - import { formatMillion } from '../../utils/formatters'; + import { formatCompact } from '../../utils/formatters'; export let description; export let leftSampleValue; @@ -75,7 +75,7 @@ /> diff --git a/src/components/explore/DistributionChart.svelte b/src/components/explore/DistributionChart.svelte index a0df9333e..1a29c5adb 100644 --- a/src/components/explore/DistributionChart.svelte +++ b/src/components/explore/DistributionChart.svelte @@ -2,6 +2,7 @@ import { scaleLinear } from 'd3-scale'; import { tooltip as tooltipAction } from '@graph-paper/core/actions'; import { distributionComparisonGraph } from '../../utils/constants'; + import { formatCompact } from '../../utils/formatters'; export let innerHeight; export let innerWidth; @@ -25,8 +26,6 @@ style: 'percent', maximumFractionDigits: 2, }).format(t); - let formatCompact = (t) => - Intl.NumberFormat('en', { notation: 'compact' }).format(t); $: y = scaleLinear().domain([0, topTick]).range([minHeight, maxHeight]); diff --git a/src/components/explore/ProbeExplorer.svelte b/src/components/explore/ProbeExplorer.svelte index 583a739ed..7b255c67c 100644 --- a/src/components/explore/ProbeExplorer.svelte +++ b/src/components/explore/ProbeExplorer.svelte @@ -29,7 +29,7 @@ import { formatBuildIDToDateString, - formatMillion, + formatCompact, formatFromNanoseconds, } from '../../utils/formatters'; @@ -70,7 +70,7 @@ export let yScaleType; export let yDomain; export let densityMetricType; - export let yTickFormatter = formatMillion; + export let yTickFormatter = formatCompact; if (data[0].metric_type === 'timing_distribution') { yTickFormatter = formatFromNanoseconds; } diff --git a/src/components/explore/SampleCountOverTimeGraph.svelte b/src/components/explore/SampleCountOverTimeGraph.svelte index d81a824d8..75da227ef 100644 --- a/src/components/explore/SampleCountOverTimeGraph.svelte +++ b/src/components/explore/SampleCountOverTimeGraph.svelte @@ -8,7 +8,7 @@ import ReleaseVersionMarkers from '../ReleaseVersionMarkers.svelte'; import { totalClientsGraph, tween } from '../../utils/constants'; - import { formatMillion } from '../../utils/formatters'; + import { formatCompact } from '../../utils/formatters'; import ReferenceSymbol from '../ReferenceSymbol.svelte'; import TrackingLine from './TrackingLine.svelte'; @@ -64,7 +64,7 @@ side="left" lineStyle="short" ticks={yScale.ticks(4)} - tickFormatter={formatMillion} + tickFormatter={formatCompact} /> {#if aggregationLevel === 'build_id'} diff --git a/src/utils/formatters.js b/src/utils/formatters.js index 80824204c..879075537 100644 --- a/src/utils/formatters.js +++ b/src/utils/formatters.js @@ -17,13 +17,8 @@ export const formatParenPercent = (fmt, v, pad = 0) => { return `${p}${f}`; }; -export const formatMillion = (num) => - // format a number as '1mil' if a million or more - Math.abs(num) > 999999 - ? `${format(',d')( - Math.sign(num) * (Math.abs(num) / 1000000).toFixed(1) - )}mil` - : format(',d')(Math.sign(num) * Math.abs(num)); +export const formatCompact = (t) => + Intl.NumberFormat('en', { notation: 'compact' }).format(t); export const formatBuildIDToDateString = (b) => timeFormat('%Y-%m-%d %H')(b); export const ymd = timeFormat('%Y-%m-%d');