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

Refactors the Explore chartcuterie rendering to use the plottable
infrastructure (`Line`, `Area`, `Bars` classes and their `toSeries()`
methods) instead of hardcoding `LineSeries`. This ensures Slack unfurl
charts match the frontend rendering for line, bar, and area display
types.

`ExploreChartData` now accepts an optional `type` field (`DisplayType`),
defaulting to `LINE` for backward compatibility. The Python unfurl code
can pass `"type": "bar"` or `"type": "area"` to render different chart
types.

Also extracts `createPlottableFromTimeSeries(displayType, timeSeries,
config?)` as a reusable function that takes a `DisplayType` directly,
and renames the `Widget`-dependent variant to
`createPlottableFromTimeSeriesAndWidget`.

Refs DAIN-1481

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,
+  });
+}