fix(chartcuterie): Avoid plottable imports that break Node VM sandbox

static/app/chartcuterie/explore.tsx

@@ -1,11 +1,14 @@
 import type {Theme} from '@emotion/react';
+import type {BarSeriesOption, LineSeriesOption} from 'echarts';
 
 import {XAxis} from 'sentry/components/charts/components/xAxis';
+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 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';
@@ -16,6 +19,29 @@ type ExploreChartData = {
   type?: DisplayType;
 };
 
+/**
+ * Creates an ECharts series based on the display type.
+ *
+ * NOTE: We intentionally avoid importing the plottable classes (Line, Area,
+ * Bars) here because they pull in `@sentry/react` which requires browser
+ * globals that are unavailable in chartcuterie's Node.js VM sandbox. Using
+ * the series constructors directly keeps this bundle compatible.
+ */
+function createSeries(
+  displayType: DisplayType,
+  props: LineSeriesOption & BarSeriesOption
+) {
+  switch (displayType) {
+    case DisplayType.BAR:
+      return BarSeries(props);
+    case DisplayType.AREA:
+      return AreaSeries({...props, areaStyle: {opacity: 0.4}});
+    case DisplayType.LINE:
+    default:
+      return LineSeries(props);
+  }
+}
+
 export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartType>> => {
   const exploreXAxis = XAxis({
     theme,
@@ -46,21 +72,19 @@ export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartTyp
       if (!hasGroups) {
         const ts = timeSeries[0]!;
         const color = theme.chart.getColorPalette(0);
-        const plottingOptions: ContinuousTimeSeriesPlottingOptions = {
-          color: color?.[0] ?? '',
-          unit: ts.meta.valueUnit,
-          yAxisPosition: 'left',
-        };
-        const plottable = createPlottableFromTimeSeries(displayType, ts, {
-          color: color?.[0],
+        const singleSeries = createSeries(displayType, {
+          name: ts.yAxis,
+          data: ts.values.map(timeSeriesItemToEChartsDataPoint),
+          lineStyle: {color: color?.[0], opacity: 1},
+          itemStyle: {color: color?.[0]},
         });
 
         return {
           ...slackChartDefaults,
           xAxis: exploreXAxis,
           useUTC: true,
           color,
-          series: plottable?.toSeries(plottingOptions) ?? [],
+          series: [singleSeries],
         };
       }
 
@@ -75,17 +99,13 @@ export const makeExploreCharts = (theme: Theme): Array<RenderDescriptor<ChartTyp
         color.push(theme.tokens.content.secondary);
       }
 
-      const series = sorted.flatMap((ts, i) => {
-        const plottingOptions: ContinuousTimeSeriesPlottingOptions = {
-          color: color?.[i] ?? '',
-          unit: ts.meta.valueUnit,
-          yAxisPosition: 'left',
-        };
-        const plottable = createPlottableFromTimeSeries(displayType, ts, {
+      const series = sorted.map((ts, i) => {
+        return createSeries(displayType, {
           name: formatTimeSeriesLabel(ts),
-          color: color?.[i],
+          data: ts.values.map(timeSeriesItemToEChartsDataPoint),
+          lineStyle: {color: color?.[i], opacity: 1},
+          itemStyle: {color: color?.[i]},
         });
-        return plottable?.toSeries(plottingOptions) ?? [];
       });
 
       return {

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

@@ -13,7 +13,7 @@ type PlottableConfig = {
   stack?: string;
 };
 
-export function createPlottableFromTimeSeries(
+function createPlottableFromTimeSeries(
   displayType: DisplayType,
   timeSeries: TimeSeries,
   config?: PlottableConfig