build(charts): Reduce ECharts bundle size (#122806)

Some dashboard helpers imported the all-inclusive ECharts entry point
just to connect chart groups. That registered every chart feature
globally and pulled it into the startup bundle.

Switches those helpers to `echarts/core` and gives `BaseChart` an
explicit registry for the seven series types, components, SVG/canvas
renderers, and legacy grid behavior we currently rely on.

| Startup vendor chunk | Raw | Gzip |
|---|---:|---:|
| Before | 3,936.5 KiB | 1,251.3 KiB |
| After | 3,599.1 KiB | 1,146.0 KiB |
| Saved | 337.5 KiB | 105.3 KiB |

The main risk is missing a registration when adding a new ECharts
feature; this audits every current series, component, and action and
keeps both renderers plus `LegacyGridContainLabel` to avoid behavior
changes.

The production source map no longer contains `echarts/index.js`; ECharts
modules drop from 501 to 309.

---------

Co-authored-by: OpenAI Codex <noreply@openai.com>

Author: scttcper

knip.config.ts

@@ -75,6 +75,7 @@ const config: KnipConfig = {
         'odiff-bin', // raw binary consumed by Python backend, not a JS import
         'run-on-changed', // CLI used by the eslint CI job (.github/workflows/frontend.yml), not a JS import
         '@swc-contrib/mut-cjs-exports', // used in jest config
+        'zrender', // used in echarts
       ],
       // Knip's Less compiler expects the extension in `project`; styles are handled by Rspack,
       // so do not report them as unused files.

static/app/components/charts/baseChart.tsx

@@ -1,13 +1,4 @@
-import 'echarts/lib/component/grid';
-import 'echarts/lib/component/graphic';
-import 'echarts/lib/component/toolbox';
-import 'echarts/lib/component/brush';
-import 'echarts/lib/component/visualMap';
 import 'echarts/theme/v5.js';
-import 'zrender/lib/svg/svg';
-// Canvas backend. Explicit so `renderer: 'canvas'` never silently relies on
-// another module importing the full `echarts` bundle.
-import 'zrender/lib/canvas/canvas';
 
 import {useEffect, useId, useMemo, useRef} from 'react';
 import type {Theme} from '@emotion/react';
@@ -29,8 +20,33 @@ import type {
   YAXisComponentOption,
 } from 'echarts';
 import ReactEchartsCore from 'echarts-for-react/lib/core';
-import {AriaComponent} from 'echarts/components';
+import {
+  BarChart,
+  CustomChart,
+  HeatmapChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  TreemapChart,
+} from 'echarts/charts';
+import {
+  AriaComponent,
+  AxisPointerComponent,
+  BrushComponent,
+  DataZoomInsideComponent,
+  GraphicComponent,
+  GridComponent,
+  LegendComponent,
+  MarkAreaComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+} from 'echarts/components';
 import * as echarts from 'echarts/core';
+import {LegacyGridContainLabel} from 'echarts/features';
+import {CanvasRenderer, SVGRenderer} from 'echarts/renderers';
 import type {CallbackDataParams} from 'echarts/types/dist/shared';
 
 import {markLine} from 'sentry/components/charts/components/markLine';
@@ -85,7 +101,34 @@ const handleClick = (clickSeries: any, instance: ECharts) => {
   }
 };
 
-echarts.use(AriaComponent);
+// Keep registrations explicit so importing a small API such as `connect` never
+// pulls in ECharts' all-inclusive, side-effectful entry point. The legacy grid
+// layout preserves the containLabel behavior from the previous full import.
+echarts.use([
+  AriaComponent,
+  AxisPointerComponent,
+  BarChart,
+  BrushComponent,
+  CanvasRenderer,
+  CustomChart,
+  DataZoomInsideComponent,
+  GraphicComponent,
+  GridComponent,
+  HeatmapChart,
+  LegacyGridContainLabel,
+  LegendComponent,
+  LineChart,
+  MarkAreaComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  PieChart,
+  ScatterChart,
+  SVGRenderer,
+  ToolboxComponent,
+  TooltipComponent,
+  TreemapChart,
+  VisualMapComponent,
+]);
 
 type ReactEchartProps = React.ComponentProps<typeof ReactEchartsCore>;
 type ReactEChartOpts = NonNullable<ReactEchartProps['opts']>;

static/app/components/charts/useChartXRangeSelection.spec.tsx

@@ -86,7 +86,7 @@ describe('useChartXRangeSelection', () => {
 
     it('should disconnect chart group when chartsGroupName is provided', () => {
       const disconnectSpy = jest.fn();
-      jest.spyOn(require('echarts'), 'disconnect').mockImplementation(disconnectSpy);
+      jest.spyOn(require('echarts/core'), 'disconnect').mockImplementation(disconnectSpy);
 
       const {result} = renderHook(() =>
         useChartXRangeSelection({
@@ -255,7 +255,7 @@ describe('useChartXRangeSelection', () => {
 
     it('should reconnect chart group after brush ends', async () => {
       const connectSpy = jest.fn();
-      jest.spyOn(require('echarts'), 'connect').mockImplementation(connectSpy);
+      jest.spyOn(require('echarts/core'), 'connect').mockImplementation(connectSpy);
 
       const mockEchartsInstance = {
         ...mockChartInstance,

static/app/components/charts/useChartXRangeSelection.tsx

@@ -8,17 +8,9 @@ import {
 } from 'react';
 import {createPortal} from 'react-dom';
 import type {BrushComponentOption, EChartsOption, ToolboxComponentOption} from 'echarts';
-// FOOTGUN: this imports the full `echarts` bundle (not `echarts/core`), whose
-// entry calls `use()` on *every* feature — including `LegacyGridContainLabel`.
-// ECharts' feature registry is a process-wide singleton shared with
-// `echarts/core`, so this flips every `grid.containLabel` chart in the app
-// (e.g., anything built on `BaseChart`) onto the legacy grid layout, which
-// reserves space differently than ECharts 6's default `outerBounds` layout.
-// If you switch this to `echarts/core`, audit `containLabel` charts for shifted
-// axis padding. See heatMapWidget/utils/heatMapAxes.tsx for one place this bit us.
-import * as echarts from 'echarts';
 import type EChartsReact from 'echarts-for-react';
 import type {EChartsInstance} from 'echarts-for-react';
+import {connect, disconnect} from 'echarts/core';
 
 import {getToolBox} from 'sentry/components/charts/components/toolBox';
 import type {EChartBrushEndHandler, EChartBrushStartHandler} from 'sentry/types/echarts';
@@ -197,7 +189,7 @@ export function useChartXRangeSelection({
       // box drawn for all of the charts in the group. We are going for chart specific box selections,
       // so we disconnect the group while drawing.
       if (chartsGroupName) {
-        echarts?.disconnect(chartsGroupName);
+        disconnect(chartsGroupName);
       }
 
       chartInstance.dispatchAction({type: 'hideTip'});
@@ -430,7 +422,7 @@ export function useChartXRangeSelection({
       // We re-connect the group after drawing the box, so that the cursor is synced across all charts again.
       // Check the onBrushStart handler for more details.
       if (chartsGroupName) {
-        echarts?.connect(chartsGroupName);
+        connect(chartsGroupName);
       }
     }
 

static/app/views/dashboards/contexts/widgetSyncContext.tsx

@@ -1,7 +1,7 @@
 import type {ReactNode} from 'react';
 import {createContext, useCallback, useContext, useEffect, useMemo, useRef} from 'react';
 import type {EChartsType} from 'echarts';
-import * as echarts from 'echarts';
+import {connect, getInstanceByDom} from 'echarts/core';
 
 import {uniqueId} from 'sentry/utils/guid';
 
@@ -38,7 +38,7 @@ export function WidgetSyncContextProvider({
           if (!entry.target.isConnected) {
             continue;
           }
-          const chart = echarts.getInstanceByDom(entry.target as HTMLElement);
+          const chart = getInstanceByDom(entry.target as HTMLElement);
           if (!chart) {
             continue;
           }
@@ -50,7 +50,7 @@ export function WidgetSyncContextProvider({
           }
         }
 
-        echarts?.connect(stableGroupName);
+        connect(stableGroupName);
       });
     }
     return observerRef.current;
@@ -74,7 +74,7 @@ export function WidgetSyncContextProvider({
 
       // Set the group immediately for charts that may already be visible
       chart.group = stableGroupName;
-      echarts?.connect(stableGroupName);
+      connect(stableGroupName);
 
       // Return a function to unregister the chart
       return () => {

static/app/views/dashboards/dashboard.tsx

@@ -7,6 +7,7 @@ import {forceCheck} from 'react-lazyload';
 import {useTheme, type Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
+import {connect} from 'echarts/core';
 import cloneDeep from 'lodash/cloneDeep';
 import debounce from 'lodash/debounce';
 
@@ -55,7 +56,7 @@ import {
 import {SortableWidget} from './sortableWidget';
 import type {DashboardDetails, Widget} from './types';
 import {DashboardFilterKeys} from './types';
-import {connectDashboardCharts, getMergedDashboardFilters} from './utils';
+import {getMergedDashboardFilters} from './utils';
 import type {WidgetLegendSelectionState} from './widgetLegendSelectionState';
 
 export const DRAG_HANDLE_CLASS = 'widget-drag';
@@ -197,7 +198,7 @@ function DashboardInner({
   useEffect(() => {
     window.addEventListener('resize', debouncedHandleResize);
 
-    connectDashboardCharts(DASHBOARD_CHART_GROUP);
+    connect(DASHBOARD_CHART_GROUP);
     trackEngagementAnalytics(
       dashboard.widgets,
       organization,

static/app/views/dashboards/utils.tsx

@@ -1,4 +1,3 @@
-import {connect} from 'echarts';
 import type {Location} from 'history';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
@@ -549,10 +548,6 @@ export function dashboardFiltersToString(
   return dashboardFilterConditions;
 }
 
-export function connectDashboardCharts(groupName: string) {
-  connect?.(groupName);
-}
-
 export function hasDatasetSelector(_organization: Organization): boolean {
   return true;
 }

static/app/views/dashboards/widgets/heatMapWidget/utils/heatMapAxes.tsx

@@ -19,8 +19,8 @@ import {formatXAxisTimestamp} from 'sentry/views/dashboards/widgets/timeSeriesWi
  * in the coordinate system to place the cells.
  *
  * `axisLabel: {show: false}` looks redundant with `show: false`, but it isn't:
- * the app also loads the full `echarts` bundle (via `useChartXRangeSelection`),
- * which registers the legacy `containLabel` layout. That layout reserves grid
+ * `BaseChart` registers the legacy `containLabel` layout to preserve existing
+ * chart spacing. That layout reserves grid
  * space for an axis's labels based on `axisLabel.show` alone — it ignores the
  * axis-level `show` — so without this the hidden category axis pads the chart
  * with room for its (never-rendered) bucket-boundary labels.