fix(dashboards): Abbreviate LineChartWidget Y axis integers (#81937)

Converts numbers like "800,000" to "800k" in the Y Axis of
`LineChartWidget` but _not_ in the tooltip! I split the
`formatChartValue` function into two, one for formatting the value in
the Y axis, and one for formatting the value for the tooltip. They're
different! In the tooltip we expect to have more digits.

I'll continue to tweak this as I find more cases.

Author: gggritso

Diff for: static/app/views/dashboards/widgets/lineChartWidget/formatTooltipValue.spec.tsx

@@ -0,0 +1,67 @@
+import {formatTooltipValue} from './formatTooltipValue';
+
+describe('formatTooltipValue', () => {
+  describe('integer', () => {
+    it.each([
+      [0, '0'],
+      [17, '17'],
+      [171, '171'],
+      [17111, '17,111'],
+      [17_000_110, '17,000,110'],
+      [1_000_110_000, '1,000,110,000'],
+    ])('Formats %s as %s', (value, formattedValue) => {
+      expect(formatTooltipValue(value, 'integer')).toEqual(formattedValue);
+    });
+  });
+
+  describe('number', () => {
+    it.each([
+      [17.1238, '17.124'],
+      [1772313.1, '1,772,313.1'],
+    ])('Formats %s as %s', (value, formattedValue) => {
+      expect(formatTooltipValue(value, 'number')).toEqual(formattedValue);
+    });
+  });
+
+  describe('percentage', () => {
+    it.each([
+      [0, '0%'],
+      [0.712, '71.2%'],
+      [17.123, '1,712.3%'],
+      [1, '100%'],
+    ])('Formats %s as %s', (value, formattedValue) => {
+      expect(formatTooltipValue(value, 'percentage')).toEqual(formattedValue);
+    });
+  });
+
+  describe('duration', () => {
+    it.each([
+      [0, 'millisecond', '0.00ms'],
+      [0.712, 'second', '712.00ms'],
+      [1231, 'second', '20.52min'],
+    ])('Formats %s as %s', (value, unit, formattedValue) => {
+      expect(formatTooltipValue(value, 'duration', unit)).toEqual(formattedValue);
+    });
+  });
+
+  describe('size', () => {
+    it.each([
+      [0, 'byte', '0.0 B'],
+      [0.712, 'megabyte', '712 KB'],
+      [1231, 'kibibyte', '1.2 MiB'],
+    ])('Formats %s as %s', (value, unit, formattedValue) => {
+      expect(formatTooltipValue(value, 'size', unit)).toEqual(formattedValue);
+    });
+  });
+
+  describe('rate', () => {
+    it.each([
+      [0, '1/second', '0/s'],
+      [0.712, '1/second', '0.712/s'],
+      [12712, '1/second', '12.7K/s'],
+      [1231, '1/minute', '1.23K/min'],
+    ])('Formats %s as %s', (value, unit, formattedValue) => {
+      expect(formatTooltipValue(value, 'rate', unit)).toEqual(formattedValue);
+    });
+  });
+});

Diff for: static/app/views/dashboards/widgets/lineChartWidget/formatChartValue.tsx renamed to static/app/views/dashboards/widgets/lineChartWidget/formatTooltipValue.tsx

@@ -10,7 +10,7 @@ import getDuration from 'sentry/utils/duration/getDuration';
 import {formatRate} from 'sentry/utils/formatters';
 import {formatPercentage} from 'sentry/utils/number/formatPercentage';
 
-export function formatChartValue(value: number, type: string, unit?: string): string {
+export function formatTooltipValue(value: number, type: string, unit?: string): string {
   switch (type) {
     case 'integer':
     case 'number':

Diff for: static/app/views/dashboards/widgets/lineChartWidget/formatChartValue.spec.tsx renamed to static/app/views/dashboards/widgets/lineChartWidget/formatYAxisValue.spec.tsx

@@ -1,34 +1,37 @@
-import {formatChartValue} from './formatChartValue';
+import {formatYAxisValue} from './formatYAxisValue';
 
-describe('formatChartValue', () => {
+describe('formatYAxisValue', () => {
   describe('integer', () => {
     it.each([
       [0, '0'],
       [17, '17'],
-      [1772313, '1,772,313'],
+      [171, '171'],
+      [17111, '17k'],
+      [17_000_110, '17m'],
+      [1_000_110_000, '1b'],
     ])('Formats %s as %s', (value, formattedValue) => {
-      expect(formatChartValue(value, 'integer')).toEqual(formattedValue);
+      expect(formatYAxisValue(value, 'integer')).toEqual(formattedValue);
     });
   });
 
   describe('number', () => {
     it.each([
-      [0, '0'],
       [17.1238, '17.124'],
       [1772313.1, '1,772,313.1'],
     ])('Formats %s as %s', (value, formattedValue) => {
-      expect(formatChartValue(value, 'number')).toEqual(formattedValue);
+      expect(formatYAxisValue(value, 'number')).toEqual(formattedValue);
     });
   });
 
   describe('percentage', () => {
     it.each([
       [0, '0%'],
+      [0.00005, '0.005%'],
       [0.712, '71.2%'],
       [17.123, '1,712.3%'],
       [1, '100%'],
     ])('Formats %s as %s', (value, formattedValue) => {
-      expect(formatChartValue(value, 'percentage')).toEqual(formattedValue);
+      expect(formatYAxisValue(value, 'percentage')).toEqual(formattedValue);
     });
   });
 
@@ -38,7 +41,7 @@ describe('formatChartValue', () => {
       [0.712, 'second', '712.00ms'],
       [1231, 'second', '20.52min'],
     ])('Formats %s as %s', (value, unit, formattedValue) => {
-      expect(formatChartValue(value, 'duration', unit)).toEqual(formattedValue);
+      expect(formatYAxisValue(value, 'duration', unit)).toEqual(formattedValue);
     });
   });
 
@@ -48,7 +51,7 @@ describe('formatChartValue', () => {
       [0.712, 'megabyte', '712 KB'],
       [1231, 'kibibyte', '1.2 MiB'],
     ])('Formats %s as %s', (value, unit, formattedValue) => {
-      expect(formatChartValue(value, 'size', unit)).toEqual(formattedValue);
+      expect(formatYAxisValue(value, 'size', unit)).toEqual(formattedValue);
     });
   });
 
@@ -59,7 +62,7 @@ describe('formatChartValue', () => {
       [12712, '1/second', '12.7K/s'],
       [1231, '1/minute', '1.23K/min'],
     ])('Formats %s as %s', (value, unit, formattedValue) => {
-      expect(formatChartValue(value, 'rate', unit)).toEqual(formattedValue);
+      expect(formatYAxisValue(value, 'rate', unit)).toEqual(formattedValue);
     });
   });
 });

Diff for: static/app/views/dashboards/widgets/lineChartWidget/formatYAxisValue.tsx

@@ -0,0 +1,36 @@
+import {formatBytesBase2} from 'sentry/utils/bytes/formatBytesBase2';
+import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
+import {
+  ABYTE_UNITS,
+  DURATION_UNITS,
+  SIZE_UNITS,
+} from 'sentry/utils/discover/fieldRenderers';
+import type {RateUnit} from 'sentry/utils/discover/fields';
+import getDuration from 'sentry/utils/duration/getDuration';
+import {formatAbbreviatedNumber, formatRate} from 'sentry/utils/formatters';
+import {formatPercentage} from 'sentry/utils/number/formatPercentage';
+
+export function formatYAxisValue(value: number, type: string, unit?: string): string {
+  switch (type) {
+    case 'integer':
+      return formatAbbreviatedNumber(value);
+    case 'number':
+      return value.toLocaleString();
+    case 'percentage':
+      return formatPercentage(value, 3);
+    case 'duration':
+      return getDuration((value * (unit ? DURATION_UNITS[unit] : 1)) / 1000, 2, true);
+    case 'size':
+      const bytes = value * SIZE_UNITS[unit ?? 'byte'];
+
+      const formatter = ABYTE_UNITS.includes(unit ?? 'byte')
+        ? formatBytesBase10
+        : formatBytesBase2;
+
+      return formatter(bytes);
+    case 'rate':
+      return formatRate(value, unit as RateUnit);
+    default:
+      return value.toString();
+  }
+}

Diff for: static/app/views/dashboards/widgets/lineChartWidget/lineChartWidgetVisualization.tsx

@@ -22,7 +22,8 @@ import {useWidgetSyncContext} from '../../contexts/widgetSyncContext';
 import {ReleaseSeries} from '../common/releaseSeries';
 import type {Meta, Release, TimeseriesData} from '../common/types';
 
-import {formatChartValue} from './formatChartValue';
+import {formatTooltipValue} from './formatTooltipValue';
+import {formatYAxisValue} from './formatYAxisValue';
 import {splitSeriesIntoCompleteAndIncomplete} from './splitSeriesIntoCompleteAndIncomplete';
 
 export interface LineChartWidgetVisualizationProps {
@@ -135,7 +136,7 @@ export function LineChartWidgetVisualization(props: LineChartWidgetVisualization
       isGroupedByDate: true,
       showTimeInTooltip: true,
       valueFormatter: value => {
-        return formatChartValue(value, type, unit);
+        return formatTooltipValue(value, type, unit);
       },
       truncate: true,
       utc: utc ?? false,
@@ -223,7 +224,7 @@ export function LineChartWidgetVisualization(props: LineChartWidgetVisualization
       yAxis={{
         axisLabel: {
           formatter(value: number) {
-            return formatChartValue(value, type, unit);
+            return formatYAxisValue(value, type, unit);
           },
         },
         axisPointer: {