feat(chartcuterie): Add explore line chart render descriptor

Add SLACK_EXPLORE_LINE chartcuterie type that accepts timeseries data
directly from the /events-timeseries/ endpoint, avoiding the unnecessary
conversion to EventsStats format. Uses the shared TimeSeries type,
timeSeriesItemToEChartsDataPoint, and formatTimeSeriesName utilities.

Supports both single series and grouped (top N) data.

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

Author: DominikB2014

static/app/chartcuterie/config.tsx

@@ -12,6 +12,7 @@
 import {lightTheme} from 'sentry/utils/theme/theme';
 
 import {makeDiscoverCharts} from './discover';
+import {makeExploreCharts} from './explore';
 import {makeMetricAlertCharts} from './metricAlert';
 import {makeMetricDetectorCharts} from './metricDetector';
 import {makePerformanceCharts} from './performance';
@@ -42,6 +43,7 @@ const register = (renderDescriptor: RenderDescriptor<ChartType>) =>
   renderConfig.set(renderDescriptor.key, renderDescriptor);
 
 makeDiscoverCharts(lightTheme).forEach(register);
+makeExploreCharts(lightTheme).forEach(register);
 makeMetricAlertCharts(lightTheme).forEach(register);
 makeMetricDetectorCharts(lightTheme).forEach(register);
 makePerformanceCharts(lightTheme).forEach(register);

static/app/chartcuterie/explore.tsx

@@ -0,0 +1,96 @@
+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 type {TimeSeries} from 'sentry/views/dashboards/widgets/common/types';
+import {formatTimeSeriesName} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatTimeSeriesName';
+
+import {DEFAULT_FONT_FAMILY, makeSlackChartDefaults, slackChartSize} from './slack';
+import type {RenderDescriptor} from './types';
+import {ChartType} from './types';
+
+type ExploreChartData = {
+  seriesName: string;
+  timeSeries: TimeSeries[];
+};
+
+export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartType>> => {
+  const exploreXAxis = XAxis({
+    theme,
+    splitNumber: 3,
+    isGroupedByDate: true,
+    axisLabel: {fontSize: 11, fontFamily: DEFAULT_FONT_FAMILY},
+  });
+
+  const slackChartDefaults = makeSlackChartDefaults(theme);
+  const exploreCharts: Array<RenderDescriptor<ChartType>> = [];
+
+  exploreCharts.push({
+    key: ChartType.SLACK_EXPLORE_LINE,
+    getOption: (data: ExploreChartData) => {
+      const matching = data.timeSeries.filter(ts => ts.yAxis === data.seriesName);
+
+      if (matching.length === 0) {
+        return {
+          ...slackChartDefaults,
+          xAxis: exploreXAxis,
+          useUTC: true,
+          series: [],
+        };
+      }
+
+      const hasGroups = matching.some(ts => ts.groupBy && ts.groupBy.length > 0);
+
+      if (!hasGroups) {
+        const ts = matching[0]!;
+        const color = theme.chart.getColorPalette(0);
+        const lineSeries = LineSeries({
+          name: data.seriesName,
+          data: ts.values.map(timeSeriesItemToEChartsDataPoint),
+          lineStyle: {color: color?.[0], opacity: 1},
+          itemStyle: {color: color?.[0]},
+        });
+
+        return {
+          ...slackChartDefaults,
+          xAxis: exploreXAxis,
+          useUTC: true,
+          color,
+          series: [lineSeries],
+        };
+      }
+
+      const sorted = matching
+        .slice()
+        .sort((a, b) => (a.meta?.order ?? 0) - (b.meta?.order ?? 0));
+      const hasOther = sorted.some(ts => ts.meta?.isOther);
+      const color = theme.chart
+        .getColorPalette(sorted.length - 1 - (hasOther ? 1 : 0))
+        ?.slice() as string[];
+      if (hasOther) {
+        color.push(theme.tokens.content.secondary);
+      }
+
+      const series = sorted.map((ts, i) => {
+        return LineSeries({
+          name: formatTimeSeriesName(ts),
+          data: ts.values.map(timeSeriesItemToEChartsDataPoint),
+          lineStyle: {color: color?.[i], opacity: 1},
+          itemStyle: {color: color?.[i]},
+        });
+      });
+
+      return {
+        ...slackChartDefaults,
+        xAxis: exploreXAxis,
+        useUTC: true,
+        color,
+        series,
+      };
+    },
+    ...slackChartSize,
+  });
+
+  return exploreCharts;
+};

static/app/chartcuterie/types.tsx

@@ -20,6 +20,7 @@ export enum ChartType {
   SLACK_METRIC_DETECTOR_SESSIONS = 'slack:metricDetector.sessions',
   SLACK_PERFORMANCE_ENDPOINT_REGRESSION = 'slack:performance.endpointRegression',
   SLACK_PERFORMANCE_FUNCTION_REGRESSION = 'slack:performance.functionRegression',
+  SLACK_EXPLORE_LINE = 'slack:explore.line',
 }
 
 /**