perf: Implement Echarts treeshaking

superset-frontend/jest.config.js

@@ -56,7 +56,7 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   snapshotSerializers: ['@emotion/jest/enzyme-serializer'],
   transformIgnorePatterns: [
-    'node_modules/(?!d3-(interpolate|color)|remark-gfm|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp|nanoid|@rjsf/*.|sinon)',
+    'node_modules/(?!d3-(interpolate|color)|remark-gfm|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp|nanoid|@rjsf/*.|sinon|echarts|zrender)',
   ],
   globals: {
     __DEV__: true,

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts

@@ -28,7 +28,7 @@ import {
   t,
   tooltipHtml,
 } from '@superset-ui/core';
-import { EChartsCoreOption, graphic } from 'echarts';
+import { EChartsCoreOption, graphic } from 'echarts/core';
 import {
   BigNumberVizProps,
   BigNumberDatum,

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { EChartsCoreOption } from 'echarts';
+import type { EChartsCoreOption } from 'echarts/core';
 import {
   ChartDataResponseResult,
   ContextMenuFilters,

superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts

@@ -23,8 +23,9 @@ import {
   getNumberFormatter,
   getTimeFormatter,
 } from '@superset-ui/core';
-import { EChartsCoreOption, BoxplotSeriesOption } from 'echarts';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { BoxplotSeriesOption } from 'echarts/charts';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
 import {
   BoxPlotChartTransformedProps,
   BoxPlotQueryFormData,

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts

@@ -16,7 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { EChartsCoreOption, ScatterSeriesOption } from 'echarts';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { ScatterSeriesOption } from 'echarts/charts';
 import { extent } from 'd3-array';
 import {
   CategoricalColorNamespace,

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts

@@ -27,8 +27,9 @@ import {
   tooltipHtml,
   ValueFormatter,
 } from '@superset-ui/core';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
-import { EChartsCoreOption, FunnelSeriesOption } from 'echarts';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { FunnelSeriesOption } from 'echarts/charts';
 import {
   DEFAULT_FORM_DATA as DEFAULT_FUNNEL_FORM_DATA,
   EchartsFunnelChartProps,

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/constants.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { SupersetTheme } from '@superset-ui/core';
-import { GaugeSeriesOption } from 'echarts';
+import type { GaugeSeriesOption } from 'echarts/charts';
 
 export const defaultGaugeSeriesOption = (
   theme: SupersetTheme,

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts

@@ -26,9 +26,10 @@ import {
   getValueFormatter,
   tooltipHtml,
 } from '@superset-ui/core';
-import { EChartsCoreOption, GaugeSeriesOption } from 'echarts';
-import { GaugeDataItemOption } from 'echarts/types/src/chart/gauge/GaugeSeries';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { GaugeSeriesOption } from 'echarts/charts';
+import type { GaugeDataItemOption } from 'echarts/types/src/chart/gauge/GaugeSeries';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
 import { range } from 'lodash';
 import { parseNumbersList } from '../utils/controls';
 import {

superset-frontend/plugins/plugin-chart-echarts/src/Graph/constants.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { GraphSeriesOption } from 'echarts';
+import type { GraphSeriesOption } from 'echarts/charts';
 
 export const DEFAULT_GRAPH_SERIES_OPTION: GraphSeriesOption = {
   zoom: 0.7,

superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts

@@ -23,9 +23,10 @@ import {
   DataRecordValue,
   tooltipHtml,
 } from '@superset-ui/core';
-import { EChartsCoreOption, GraphSeriesOption } from 'echarts';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { GraphSeriesOption } from 'echarts/charts';
+import type { GraphEdgeItemOption } from 'echarts/types/src/chart/graph/GraphSeries';
 import { extent as d3Extent } from 'd3-array';
-import { GraphEdgeItemOption } from 'echarts/types/src/chart/graph/GraphSeries';
 import {
   EchartsGraphFormData,
   EChartGraphNode,

superset-frontend/plugins/plugin-chart-echarts/src/Graph/types.ts

@@ -17,8 +17,8 @@
  * under the License.
  */
 import { QueryFormData } from '@superset-ui/core';
-import { GraphNodeItemOption } from 'echarts/types/src/chart/graph/GraphSeries';
-import { SeriesTooltipOption } from 'echarts/types/src/util/types';
+import type { GraphNodeItemOption } from 'echarts/types/src/chart/graph/GraphSeries';
+import type { SeriesTooltipOption } from 'echarts/types/src/util/types';
 import {
   BaseChartProps,
   BaseTransformedProps,

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts

@@ -29,15 +29,18 @@ import {
 } from '@superset-ui/core';
 import memoizeOne from 'memoize-one';
 import { maxBy, minBy } from 'lodash';
-import { EChartsOption, HeatmapSeriesOption } from 'echarts';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { ComposeOption } from 'echarts/core';
+import type { HeatmapSeriesOption } from 'echarts/charts';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
 import { HeatmapChartProps, HeatmapTransformedProps } from './types';
 import { getDefaultTooltip } from '../utils/tooltip';
 import { Refs } from '../types';
 import { parseAxisBound } from '../utils/controls';
 import { NULL_STRING } from '../constants';
 import { getPercentFormatter } from '../utils/formatters';
 
+type EChartsOption = ComposeOption<HeatmapSeriesOption>;
+
 const DEFAULT_ECHARTS_BOUNDS = [0, 200];
 
 // Calculated totals per x and y categories plus total
@@ -213,7 +216,7 @@ export default function transformProps(
       top: 0,
       itemHeight: legendType === 'continuous' ? 300 : 14,
       itemWidth: 15,
-      formatter: min => valueFormatter(min as number),
+      formatter: (min: number) => valueFormatter(min),
       inRange: {
         color: colors,
       },

superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts

@@ -16,8 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { BarSeriesOption, EChartsOption } from 'echarts';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { ComposeOption } from 'echarts/core';
+import type { BarSeriesOption } from 'echarts/charts';
+import type { GridComponentOption } from 'echarts/components';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
 import { isEmpty } from 'lodash';
 import {
   CategoricalColorNamespace,
@@ -133,6 +135,8 @@ export default function transformProps(
     focusedSeries = index;
   };
 
+  type EChartsOption = ComposeOption<GridComponentOption | BarSeriesOption>;
+
   const echartOptions: EChartsOption = {
     grid: {
       ...defaultGrid,

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -44,7 +44,8 @@ import {
   ValueFormatter,
 } from '@superset-ui/core';
 import { getOriginalSeries } from '@superset-ui/chart-controls';
-import { EChartsCoreOption, SeriesOption } from 'echarts';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { SeriesOption } from 'echarts';
 import {
   DEFAULT_FORM_DATA,
   EchartsMixedTimeseriesChartTransformedProps,

superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts

@@ -28,8 +28,9 @@ import {
   getValueFormatter,
   tooltipHtml,
 } from '@superset-ui/core';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
-import { EChartsCoreOption, PieSeriesOption } from 'echarts';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { PieSeriesOption } from 'echarts/charts';
 import {
   DEFAULT_FORM_DATA as DEFAULT_PIE_FORM_DATA,
   EchartsPieChartProps,

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

@@ -25,9 +25,10 @@ import {
   getTimeFormatter,
   NumberFormatter,
 } from '@superset-ui/core';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
-import { RadarSeriesDataItemOption } from 'echarts/types/src/chart/radar/RadarSeries';
-import { EChartsCoreOption, RadarSeriesOption } from 'echarts';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { RadarSeriesDataItemOption } from 'echarts/types/src/chart/radar/RadarSeries';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { RadarSeriesOption } from 'echarts/charts';
 import {
   DEFAULT_FORM_DATA as DEFAULT_RADAR_FORM_DATA,
   EchartsRadarChartProps,

superset-frontend/plugins/plugin-chart-echarts/src/Sankey/transformProps.ts

@@ -16,8 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { EChartsOption, SankeySeriesOption } from 'echarts';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { ComposeOption } from 'echarts/core';
+import type { SankeySeriesOption } from 'echarts/charts';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
 import {
   CategoricalColorNamespace,
   NumberFormats,
@@ -32,6 +33,7 @@ import { getDefaultTooltip } from '../utils/tooltip';
 import { getPercentFormatter } from '../utils/formatters';
 
 type Link = { source: string; target: string; value: number };
+type EChartsOption = ComposeOption<SankeySeriesOption>;
 
 export default function transformProps(
   chartProps: SankeyChartProps,

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts

@@ -30,8 +30,8 @@ import {
   tooltipHtml,
   ValueFormatter,
 } from '@superset-ui/core';
-import { EChartsCoreOption } from 'echarts';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
 import { NULL_STRING, OpacityEnum } from '../constants';
 import { defaultGrid } from '../defaults';
 import { Refs } from '../types';

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/types.ts

@@ -25,7 +25,7 @@ import {
   QueryFormData,
   QueryFormMetric,
 } from '@superset-ui/core';
-import { SunburstSeriesNodeItemOption } from 'echarts/types/src/chart/sunburst/SunburstSeries';
+import type { SunburstSeriesNodeItemOption } from 'echarts/types/src/chart/sunburst/SunburstSeries';
 import {
   BaseTransformedProps,
   ContextMenuTransformedProps,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

@@ -27,9 +27,9 @@ import {
   LegendState,
   ensureIsArray,
 } from '@superset-ui/core';
-import { ViewRootGroup } from 'echarts/types/src/util/types';
-import GlobalModel from 'echarts/types/src/model/Global';
-import ComponentModel from 'echarts/types/src/model/Component';
+import type { ViewRootGroup } from 'echarts/types/src/util/types';
+import type GlobalModel from 'echarts/types/src/model/Global';
+import type ComponentModel from 'echarts/types/src/model/Component';
 import { EchartsHandler, EventHandlers } from '../types';
 import Echart from '../components/Echart';
 import { TimeseriesChartTransformedProps } from './types';

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -47,8 +47,9 @@ import {
   isDerivedSeries,
   getTimeOffset,
 } from '@superset-ui/chart-controls';
-import { EChartsCoreOption, SeriesOption } from 'echarts';
-import { LineStyleOption } from 'echarts/types/src/util/types';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { LineStyleOption } from 'echarts/types/src/util/types';
+import type { SeriesOption } from 'echarts';
 import {
   EchartsTimeseriesChartProps,
   EchartsTimeseriesFormData,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts

@@ -32,8 +32,7 @@ import {
   TimeseriesDataRecord,
   ValueFormatter,
 } from '@superset-ui/core';
-import { SeriesOption } from 'echarts';
-import {
+import type {
   CallbackDataParams,
   DefaultStatesMixin,
   ItemStyleOption,
@@ -43,11 +42,12 @@ import {
   SeriesLineLabelOption,
   ZRLineType,
 } from 'echarts/types/src/util/types';
-import {
+import type { SeriesOption } from 'echarts';
+import type {
   MarkArea1DDataItemOption,
   MarkArea2DDataItemOption,
 } from 'echarts/types/src/component/marker/MarkAreaModel';
-import { MarkLine1DDataItemOption } from 'echarts/types/src/component/marker/MarkLineModel';
+import type { MarkLine1DDataItemOption } from 'echarts/types/src/component/marker/MarkLineModel';
 import { extractForecastSeriesContext } from '../utils/forecast';
 import {
   EchartsTimeseriesSeriesType,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { OptionName } from 'echarts/types/src/util/types';
+import type { OptionName } from 'echarts/types/src/util/types';
 import {
   AnnotationLayer,
   AxisType,

superset-frontend/plugins/plugin-chart-echarts/src/Tree/constants.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { TreeSeriesOption } from 'echarts';
+import type { TreeSeriesOption } from 'echarts/charts';
 import { EchartsTreeFormData } from './types';
 
 export const DEFAULT_TREE_SERIES_OPTION: TreeSeriesOption = {

superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts

@@ -21,12 +21,13 @@ import {
   DataRecordValue,
   tooltipHtml,
 } from '@superset-ui/core';
-import { EChartsCoreOption, TreeSeriesOption } from 'echarts';
-import {
+import type { EChartsCoreOption } from 'echarts/core';
+import type { TreeSeriesOption } from 'echarts/charts';
+import type {
   TreeSeriesCallbackDataParams,
   TreeSeriesNodeItemOption,
 } from 'echarts/types/src/chart/tree/TreeSeries';
-import { OptionName } from 'echarts/types/src/util/types';
+import type { OptionName } from 'echarts/types/src/util/types';
 import {
   EchartsTreeChartProps,
   EchartsTreeFormData,

superset-frontend/plugins/plugin-chart-echarts/src/Tree/types.ts

@@ -16,9 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { OptionName } from 'echarts/types/src/util/types';
+import type { OptionName } from 'echarts/types/src/util/types';
+import type { TreeSeriesNodeItemOption } from 'echarts/types/src/chart/tree/TreeSeries';
 import { ChartDataResponseResult, QueryFormData } from '@superset-ui/core';
-import { TreeSeriesNodeItemOption } from 'echarts/types/src/chart/tree/TreeSeries';
 import { BaseChartProps, BaseTransformedProps } from '../types';
 
 export type EchartsTreeFormData = QueryFormData & {

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts

@@ -27,8 +27,9 @@ import {
   getValueFormatter,
   tooltipHtml,
 } from '@superset-ui/core';
-import { TreemapSeriesNodeItemOption } from 'echarts/types/src/chart/treemap/TreemapSeries';
-import { EChartsCoreOption, TreemapSeriesOption } from 'echarts';
+import type { TreemapSeriesNodeItemOption } from 'echarts/types/src/chart/treemap/TreemapSeries';
+import type { EChartsCoreOption } from 'echarts/core';
+import type { TreemapSeriesOption } from 'echarts/charts';
 import {
   DEFAULT_FORM_DATA as DEFAULT_TREEMAP_FORM_DATA,
   EchartsTreemapChartProps,

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/types.ts

@@ -23,7 +23,7 @@ import {
   QueryFormData,
   QueryFormMetric,
 } from '@superset-ui/core';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
 import {
   BaseTransformedProps,
   ContextMenuTransformedProps,

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts

@@ -29,7 +29,8 @@ import {
   rgbToHex,
   tooltipHtml,
 } from '@superset-ui/core';
-import { EChartsOption, BarSeriesOption } from 'echarts';
+import type { ComposeOption } from 'echarts/core';
+import type { BarSeriesOption } from 'echarts/charts';
 import {
   EchartsWaterfallChartProps,
   ISeriesData,
@@ -43,6 +44,8 @@ import { getColtypesMapping } from '../utils/series';
 import { Refs } from '../types';
 import { NULL_STRING } from '../constants';
 
+type EChartsOption = ComposeOption<BarSeriesOption>;
+
 function formatTooltip({
   params,
   breakdownName,

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts

@@ -24,8 +24,8 @@ import {
   QueryFormMetric,
   RgbaColor,
 } from '@superset-ui/core';
-import { BarDataItemOption } from 'echarts/types/src/chart/bar/BarSeries';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
+import type { BarDataItemOption } from 'echarts/types/src/chart/bar/BarSeries';
+import type { CallbackDataParams } from 'echarts/types/src/util/types';
 import { BaseTransformedProps, LegendFormData } from '../types';
 
 export type WaterfallFormXTicksLayout =