feat(chartcuterie): Support multiple display types in Explore chart rendering

Refactor Explore chartcuterie rendering to use the plottable
infrastructure instead of hardcoded LineSeries, ensuring Slack unfurl
charts match the frontend rendering for line, bar, and area charts.

Extract createPlottableFromTimeSeries to accept a DisplayType directly,
and rename the Widget-dependent variant to
createPlottableFromTimeSeriesAndWidget.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: DominikB2014

static/app/chartcuterie/explore.tsx

@@ -1,17 +1,19 @@
 import type {Theme} from '@emotion/react';
 
 import {XAxis} from 'sentry/components/charts/components/xAxis';
-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 type {ContinuousTimeSeriesPlottingOptions} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/continuousTimeSeries';
+import {createPlottableFromTimeSeries} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/createPlottableFromTimeSeries';
 
 import {DEFAULT_FONT_FAMILY, makeSlackChartDefaults, slackChartSize} from './slack';
 import type {RenderDescriptor} from './types';
 import {ChartType} from './types';
 
 type ExploreChartData = {
   timeSeries: TimeSeries[];
+  type?: DisplayType;
 };
 
 export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartType>> => {
@@ -28,7 +30,7 @@ export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartTyp
   exploreCharts.push({
     key: ChartType.SLACK_EXPLORE_LINE,
     getOption: (data: ExploreChartData) => {
-      const {timeSeries} = data;
+      const {timeSeries, type: displayType = DisplayType.LINE} = data;
 
       if (timeSeries.length === 0) {
         return {
@@ -44,19 +46,21 @@ export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartTyp
       if (!hasGroups) {
         const ts = timeSeries[0]!;
         const color = theme.chart.getColorPalette(0);
-        const lineSeries = LineSeries({
-          name: ts.yAxis,
-          data: ts.values.map(timeSeriesItemToEChartsDataPoint),
-          lineStyle: {color: color?.[0], opacity: 1},
-          itemStyle: {color: color?.[0]},
+        const plottingOptions: ContinuousTimeSeriesPlottingOptions = {
+          color: color?.[0] ?? '',
+          unit: ts.meta.valueUnit,
+          yAxisPosition: 'left',
+        };
+        const plottable = createPlottableFromTimeSeries(displayType, ts, {
+          color: color?.[0],
         });
 
         return {
           ...slackChartDefaults,
           xAxis: exploreXAxis,
           useUTC: true,
           color,
-          series: [lineSeries],
+          series: plottable?.toSeries(plottingOptions) ?? [],
         };
       }
 
@@ -71,13 +75,17 @@ export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartTyp
         color.push(theme.tokens.content.secondary);
       }
 
-      const series = sorted.map((ts, i) => {
-        return LineSeries({
+      const series = sorted.flatMap((ts, i) => {
+        const plottingOptions: ContinuousTimeSeriesPlottingOptions = {
+          color: color?.[i] ?? '',
+          unit: ts.meta.valueUnit,
+          yAxisPosition: 'left',
+        };
+        const plottable = createPlottableFromTimeSeries(displayType, ts, {
           name: formatTimeSeriesLabel(ts),
-          data: ts.values.map(timeSeriesItemToEChartsDataPoint),
-          lineStyle: {color: color?.[i], opacity: 1},
-          itemStyle: {color: color?.[i]},
+          color: color?.[i],
         });
+        return plottable?.toSeries(plottingOptions) ?? [];
       });
 
       return {

static/app/views/dashboards/widgetCard/visualizationWidget.tsx

@@ -42,7 +42,7 @@ import type {
   TimeSeriesGroupBy,
 } from 'sentry/views/dashboards/widgets/common/types';
 import {formatBreakdownLegendValue} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatBreakdownLegendValue';
-import {createPlottableFromTimeSeries} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/createPlottableFromTimeSeries';
+import {createPlottableFromTimeSeriesAndWidget} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/createPlottableFromTimeSeries';
 import type {Plottable} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/plottable';
 import {Thresholds} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/thresholds';
 import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization';
@@ -232,7 +232,7 @@ function VisualizationWidgetContent({
       }
 
       const {timeSeries, label, seriesName, widgetQuery} = transformed;
-      const plottable = createPlottableFromTimeSeries(
+      const plottable = createPlottableFromTimeSeriesAndWidget(
         timeSeries,
         widget,
         label,

static/app/views/dashboards/widgets/timeSeriesWidget/plottables/createPlottableFromTimeSeries.spec.tsx

@@ -5,9 +5,9 @@ import {Area} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/
 import {Bars} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/bars';
 import {Line} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/line';
 
-import {createPlottableFromTimeSeries} from './createPlottableFromTimeSeries';
+import {createPlottableFromTimeSeriesAndWidget} from './createPlottableFromTimeSeries';
 
-describe('createPlottableFromTimeSeries', () => {
+describe('createPlottableFromTimeSeriesAndWidget', () => {
   const mockTimeSeries = {
     yAxis: 'count()',
     values: [
@@ -23,28 +23,28 @@ describe('createPlottableFromTimeSeries', () => {
 
   it('creates Line instance for LINE display type', () => {
     const widget = WidgetFixture({displayType: DisplayType.LINE});
-    const plottable = createPlottableFromTimeSeries(mockTimeSeries, widget);
+    const plottable = createPlottableFromTimeSeriesAndWidget(mockTimeSeries, widget);
 
     expect(plottable).toBeInstanceOf(Line);
   });
 
   it('creates Area instance for AREA display type', () => {
     const widget = WidgetFixture({displayType: DisplayType.AREA});
-    const plottable = createPlottableFromTimeSeries(mockTimeSeries, widget);
+    const plottable = createPlottableFromTimeSeriesAndWidget(mockTimeSeries, widget);
 
     expect(plottable).toBeInstanceOf(Area);
   });
 
   it('creates Bars instance for BAR display type', () => {
     const widget = WidgetFixture({displayType: DisplayType.BAR});
-    const plottable = createPlottableFromTimeSeries(mockTimeSeries, widget);
+    const plottable = createPlottableFromTimeSeriesAndWidget(mockTimeSeries, widget);
 
     expect(plottable).toBeInstanceOf(Bars);
   });
 
   it('returns null for TABLE display type', () => {
     const widget = WidgetFixture({displayType: DisplayType.TABLE});
-    const plottable = createPlottableFromTimeSeries(mockTimeSeries, widget);
+    const plottable = createPlottableFromTimeSeriesAndWidget(mockTimeSeries, widget);
 
     expect(plottable).toBeNull();
   });

static/app/views/dashboards/widgets/timeSeriesWidget/plottables/createPlottableFromTimeSeries.tsx

@@ -6,29 +6,43 @@ import {Bars} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/
 import {Line} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/line';
 import type {Plottable} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/plottable';
 
+type PlottableConfig = {
+  alias?: string;
+  color?: string;
+  name?: string;
+  stack?: string;
+};
+
 export function createPlottableFromTimeSeries(
+  displayType: DisplayType,
   timeSeries: TimeSeries,
-  widget: Widget,
-  alias?: string,
-  name?: string,
-  color?: string
+  config?: PlottableConfig
 ): Plottable | null {
-  const shouldStack = widget.queries[0]?.columns.length! > 0;
-
-  const {displayType, title} = widget;
   switch (displayType) {
     case DisplayType.LINE:
-      return new Line(timeSeries, {alias, name, color});
+      return new Line(timeSeries, config);
     case DisplayType.AREA:
-      return new Area(timeSeries, {alias, name, color});
+      return new Area(timeSeries, config);
     case DisplayType.BAR:
-      return new Bars(timeSeries, {
-        stack: shouldStack ? title : undefined,
-        alias,
-        name,
-        color,
-      });
+      return new Bars(timeSeries, config);
     default:
       return null;
   }
 }
+
+export function createPlottableFromTimeSeriesAndWidget(
+  timeSeries: TimeSeries,
+  widget: Widget,
+  alias?: string,
+  name?: string,
+  color?: string
+): Plottable | null {
+  const shouldStack = widget.queries[0]?.columns.length! > 0;
+
+  return createPlottableFromTimeSeries(widget.displayType, timeSeries, {
+    alias,
+    name,
+    color,
+    stack: shouldStack ? widget.title : undefined,
+  });
+}