fix(chartcuterie): Format y-axis labels in Explore unfurl charts (#112719)

Explore unfurl charts were showing raw numbers on the y-axis (e.g.
`300,000`)
instead of abbreviated values (`300K`), and duration fields were missing
units
(showing `5` instead of `5ms`).

Adds a y-axis formatter using `formatYAxisValue` — the same function the
Explore page uses — which reads `valueType` and `valueUnit` from the
timeseries metadata to format labels appropriately for integers,
durations,
sizes, rates, and percentages.

Fixes DAIN-1496

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: DominikB2014

static/app/chartcuterie/explore.tsx

@@ -2,18 +2,31 @@ import type {Theme} from '@emotion/react';
 import type {BarSeriesOption, LineSeriesOption} from 'echarts';
 
 import {XAxis} from 'sentry/components/charts/components/xAxis';
+import {YAxis} from 'sentry/components/charts/components/yAxis';
 import {AreaSeries} from 'sentry/components/charts/series/areaSeries';
 import {BarSeries} from 'sentry/components/charts/series/barSeries';
 import {LineSeries} from 'sentry/components/charts/series/lineSeries';
 import {timeSeriesItemToEChartsDataPoint} from 'sentry/utils/timeSeries/timeSeriesItemToEChartsDataPoint';
 import {DisplayType} from 'sentry/views/dashboards/types';
 import type {TimeSeries} from 'sentry/views/dashboards/widgets/common/types';
 import {formatTimeSeriesLabel} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatTimeSeriesLabel';
+import {formatYAxisValue} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatYAxisValue';
 
 import {DEFAULT_FONT_FAMILY, makeSlackChartDefaults, slackChartSize} from './slack';
 import type {RenderDescriptor} from './types';
 import {ChartType} from './types';
 
+/**
+ * Builds a y-axis axisLabel formatter from the first timeseries metadata.
+ */
+function makeYAxisFormatter(timeSeries: TimeSeries[]) {
+  const firstSeries = timeSeries[0];
+  const valueType = firstSeries?.meta?.valueType ?? 'number';
+  const valueUnit = firstSeries?.meta?.valueUnit;
+
+  return (value: number) => formatYAxisValue(value, valueType, valueUnit ?? undefined);
+}
+
 type ExploreChartData = {
   timeSeries: TimeSeries[];
   type?: DisplayType;
@@ -67,6 +80,16 @@ export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartTyp
         };
       }
 
+      const exploreYAxis = YAxis({
+        theme,
+        splitNumber: 3,
+        axisLabel: {
+          fontSize: 11,
+          fontFamily: DEFAULT_FONT_FAMILY,
+          formatter: makeYAxisFormatter(timeSeries),
+        },
+      });
+
       const hasGroups = timeSeries.some(ts => ts.groupBy && ts.groupBy.length > 0);
 
       if (!hasGroups) {
@@ -81,6 +104,7 @@ export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartTyp
 
         return {
           ...slackChartDefaults,
+          yAxis: exploreYAxis,
           xAxis: exploreXAxis,
           useUTC: true,
           color,
@@ -110,6 +134,7 @@ export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartTyp
 
       return {
         ...slackChartDefaults,
+        yAxis: exploreYAxis,
         xAxis: exploreXAxis,
         useUTC: true,
         color,