feat(perf) Add output type as option to axisFormatter (#37682)

Fixes PERF-1390

static/app/components/charts/eventsChart.tsx

@@ -34,6 +34,7 @@ import {axisLabelFormatter, tooltipFormatter} from 'sentry/utils/discover/charts
 import {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
 import {
   aggregateMultiPlotType,
+  aggregateOutputType,
   getEquation,
   isEquation,
 } from 'sentry/utils/discover/fields';
@@ -302,7 +303,8 @@ class Chart extends React.Component<ChartProps, State> {
       yAxis: {
         axisLabel: {
           color: theme.chartLabel,
-          formatter: (value: number) => axisLabelFormatter(value, yAxis),
+          formatter: (value: number) =>
+            axisLabelFormatter(value, aggregateOutputType(yAxis)),
         },
       },
       ...(chartOptionsProp ?? {}),

static/app/utils/discover/charts.tsx

@@ -3,7 +3,7 @@ import {LegendComponentOption} from 'echarts';
 import {t} from 'sentry/locale';
 import {Series} from 'sentry/types/echarts';
 import {defined, formatBytesBase2} from 'sentry/utils';
-import {aggregateOutputType} from 'sentry/utils/discover/fields';
+import {aggregateOutputType, AggregationOutputType} from 'sentry/utils/discover/fields';
 import {
   DAY,
   formatAbbreviatedNumber,
@@ -57,13 +57,13 @@ export function tooltipFormatterUsingAggregateOutputType(
  */
 export function axisLabelFormatter(
   value: number,
-  seriesName: string,
+  outputType: AggregationOutputType,
   abbreviation: boolean = false,
   durationUnit?: number
 ): string {
   return axisLabelFormatterUsingAggregateOutputType(
     value,
-    aggregateOutputType(seriesName),
+    outputType,
     abbreviation,
     durationUnit
   );

static/app/views/alerts/utils/index.tsx

@@ -6,6 +6,7 @@ import {IssueAlertRule} from 'sentry/types/alerts';
 import {defined} from 'sentry/utils';
 import {getUtcDateString} from 'sentry/utils/dates';
 import {axisLabelFormatter, tooltipFormatter} from 'sentry/utils/discover/charts';
+import {aggregateOutputType} from 'sentry/utils/discover/fields';
 import {
   Dataset,
   Datasource,
@@ -134,7 +135,7 @@ export function alertAxisFormatter(value: number, seriesName: string, aggregate:
     return defined(value) ? `${round(value, 2)}%` : '\u2015';
   }
 
-  return axisLabelFormatter(value, seriesName);
+  return axisLabelFormatter(value, aggregateOutputType(seriesName));
 }
 
 export function alertTooltipValueFormatter(

static/app/views/dashboardsV2/widgetCard/chart.tsx

@@ -32,6 +32,7 @@ import {
 } from 'sentry/utils/discover/charts';
 import {getFieldFormatter} from 'sentry/utils/discover/fieldRenderers';
 import {
+  aggregateOutputType,
   getAggregateArg,
   getEquation,
   getMeasurementSlug,
@@ -419,7 +420,7 @@ class WidgetCardChart extends Component<WidgetCardChartProps, State> {
           formatter: (value: number) =>
             timeseriesResultsType
               ? axisLabelFormatterUsingAggregateOutputType(value, timeseriesResultsType)
-              : axisLabelFormatter(value, axisLabel),
+              : axisLabelFormatter(value, aggregateOutputType(axisLabel)),
         },
       },
     };

static/app/views/eventsV2/miniGraph.tsx

@@ -20,7 +20,7 @@ import {Series} from 'sentry/types/echarts';
 import {getUtcToLocalDateObject} from 'sentry/utils/dates';
 import {axisLabelFormatter} from 'sentry/utils/discover/charts';
 import EventView from 'sentry/utils/discover/eventView';
-import {PlotType} from 'sentry/utils/discover/fields';
+import {aggregateOutputType, PlotType} from 'sentry/utils/discover/fields';
 import {DisplayModes, TOP_N} from 'sentry/utils/discover/types';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {Theme} from 'sentry/utils/theme';
@@ -270,7 +270,7 @@ class MiniGraph extends Component<Props> {
                 formatter: (value: number) =>
                   axisLabelFormatter(
                     value,
-                    Array.isArray(yAxis) ? yAxis[0] : yAxis,
+                    aggregateOutputType(Array.isArray(yAxis) ? yAxis[0] : yAxis),
                     true
                   ),
                 inside: true,

static/app/views/performance/charts/chart.tsx

@@ -117,7 +117,7 @@ function Chart({
             formatter(value: number) {
               return axisLabelFormatter(
                 value,
-                data[0].seriesName,
+                aggregateOutputType(data[0].seriesName),
                 undefined,
                 durationUnit
               );
@@ -136,7 +136,7 @@ function Chart({
             formatter(value: number) {
               return axisLabelFormatter(
                 value,
-                data[0].seriesName,
+                aggregateOutputType(data[0].seriesName),
                 undefined,
                 durationUnit
               );
@@ -153,7 +153,7 @@ function Chart({
             formatter(value: number) {
               return axisLabelFormatter(
                 value,
-                data[1].seriesName,
+                aggregateOutputType(data[1].seriesName),
                 undefined,
                 durationUnit
               );

static/app/views/performance/landing/widgets/widgets/singleFieldAreaWidget.tsx

@@ -9,6 +9,7 @@ import {getInterval, getPreviousSeriesName} from 'sentry/components/charts/utils
 import {t} from 'sentry/locale';
 import {axisLabelFormatter} from 'sentry/utils/discover/charts';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
+import {aggregateOutputType} from 'sentry/utils/discover/fields';
 import {
   QueryBatchNode,
   Transform,
@@ -135,7 +136,7 @@ export function SingleFieldAreaWidget(props: PerformanceWidgetProps) {
 
                 return (
                   <HighlightNumber key={fieldName} color={props.chartColor}>
-                    {axisLabelFormatter(value, fieldName)}
+                    {axisLabelFormatter(value, aggregateOutputType(fieldName))}
                   </HighlightNumber>
                 );
               })}

static/app/views/performance/transactionSummary/transactionAnomalies/anomalyChart.tsx

@@ -54,7 +54,7 @@ const _AnomalyChart = (props: Props) => {
     yAxis: {
       axisLabel: {
         // Coerces the axis to be count based
-        formatter: (value: number) => axisLabelFormatter(value, 'tpm()'),
+        formatter: (value: number) => axisLabelFormatter(value, 'number'),
       },
     },
   };

static/app/views/performance/transactionSummary/transactionOverview/durationChart/content.tsx

@@ -104,9 +104,8 @@ function Content({
       minInterval: durationUnit,
       axisLabel: {
         color: theme.chartLabel,
-        // p50() coerces the axis to be time based
         formatter: (value: number) => {
-          return axisLabelFormatter(value, 'p50()', undefined, durationUnit);
+          return axisLabelFormatter(value, 'duration', undefined, durationUnit);
         },
       },
     },

static/app/views/performance/transactionSummary/transactionOverview/durationPercentileChart/chart.tsx

@@ -33,7 +33,7 @@ function Chart(props: Props) {
           color: theme.chartLabel,
           // Use p50() to force time formatting.
           formatter: (value: number) =>
-            axisLabelFormatter(value, 'p50()', undefined, durationUnit),
+            axisLabelFormatter(value, 'duration', undefined, durationUnit),
         },
       }}
       tooltip={{valueFormatter: value => getDuration(value / 1000, 2)}}