From c2202454147936d1770137eaac334719b8e746e2 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Wed, 7 Aug 2024 06:53:52 +0200 Subject: [PATCH] perf: Implement Echarts treeshaking (#29874) --- superset-frontend/jest.config.js | 2 +- .../BigNumberWithTrendline/transformProps.ts | 2 +- .../src/BigNumber/types.ts | 2 +- .../src/BoxPlot/transformProps.ts | 5 +- .../src/Bubble/transformProps.ts | 3 +- .../src/Funnel/transformProps.ts | 5 +- .../src/Gauge/constants.ts | 2 +- .../src/Gauge/transformProps.ts | 7 ++- .../src/Graph/constants.ts | 2 +- .../src/Graph/transformProps.ts | 5 +- .../plugin-chart-echarts/src/Graph/types.ts | 4 +- .../src/Heatmap/transformProps.ts | 9 ++- .../src/Histogram/transformProps.ts | 8 ++- .../src/MixedTimeseries/transformProps.ts | 3 +- .../src/Pie/transformProps.ts | 5 +- .../src/Radar/transformProps.ts | 7 ++- .../src/Sankey/transformProps.ts | 6 +- .../src/Sunburst/transformProps.ts | 4 +- .../src/Sunburst/types.ts | 2 +- .../src/Timeseries/EchartsTimeseries.tsx | 6 +- .../src/Timeseries/transformProps.ts | 5 +- .../src/Timeseries/transformers.ts | 8 +-- .../src/Timeseries/types.ts | 2 +- .../src/Tree/constants.ts | 2 +- .../src/Tree/transformProps.ts | 7 ++- .../plugin-chart-echarts/src/Tree/types.ts | 4 +- .../src/Treemap/transformProps.ts | 5 +- .../plugin-chart-echarts/src/Treemap/types.ts | 2 +- .../src/Waterfall/transformProps.ts | 5 +- .../src/Waterfall/types.ts | 4 +- .../src/components/Echart.tsx | 59 ++++++++++++++++++- .../plugins/plugin-chart-echarts/src/types.ts | 6 +- .../src/utils/forecast.ts | 4 +- .../plugin-chart-echarts/src/utils/series.ts | 4 +- .../plugin-chart-echarts/src/utils/tooltip.ts | 2 +- .../test/Pie/transformProps.test.ts | 7 ++- 36 files changed, 149 insertions(+), 66 deletions(-) diff --git a/superset-frontend/jest.config.js b/superset-frontend/jest.config.js index bb5e2ce4a..b9a6105cf 100644 --- a/superset-frontend/jest.config.js +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts index 015f0feee..d285a551b 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts index 2081460ad..7c4908ada 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts index 4f5c8f323..8150c3e3e 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts index b60ad9916..152edf762 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts index a0b056933..d0be236fd 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/constants.ts index 2e72350f7..676b1f08d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/constants.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts index 187ce67dc..0bea236b4 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts +++ b/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 { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/constants.ts index f7dea8013..c193be38e 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/constants.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts index 2cc3aff92..5d50a5af7 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/types.ts index 4a45f79c4..2c7deae3f 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/types.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts index 90524d12d..d9b433b06 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts @@ -29,8 +29,9 @@ 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'; @@ -38,6 +39,8 @@ import { parseAxisBound } from '../utils/controls'; import { NULL_STRING } from '../constants'; import { getPercentFormatter } from '../utils/formatters'; +type EChartsOption = ComposeOption; + 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, }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts index cdb4182cf..df8fe3b15 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts +++ b/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; + const echartOptions: EChartsOption = { grid: { ...defaultGrid, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 29741f545..9a6705ee2 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts index 1b3898d8f..0b6667c0c 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts index dd49a1b87..3995c0cf8 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/transformProps.ts index 96be18c89..00ba97821 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/transformProps.ts +++ b/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; export default function transformProps( chartProps: SankeyChartProps, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts index 7006e2178..77888c64c 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts +++ b/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'; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/types.ts index 37844adde..8fc8385d1 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/types.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx index e9cc9f687..b183fc549 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx +++ b/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'; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index dac526138..c34a8e449 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index 91649ecd5..796fab033 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts index 6ca9650db..1619b837d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/constants.ts index 35567c3fc..79cea342a 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/constants.ts +++ b/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 = { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts index a0b08816d..e0dc20ff5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/types.ts index 0fde0cde2..394837cb6 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/types.ts +++ b/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 & { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts index 73feda2b2..bdd23c3fc 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/types.ts index 1d4298838..104cc913b 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/types.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts index f9ff6c68d..ab21e7b37 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts +++ b/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; + function formatTooltip({ params, breakdownName, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts index 438650119..71a28dd9f 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts +++ b/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 = diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx index 5d85fac31..db054eab0 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx @@ -28,7 +28,35 @@ import { } from 'react'; import { styled } from '@superset-ui/core'; -import { ECharts, init } from 'echarts'; +import { use, init, EChartsType } from 'echarts/core'; +import { + SankeyChart, + PieChart, + BarChart, + FunnelChart, + GaugeChart, + GraphChart, + LineChart, + ScatterChart, + RadarChart, + BoxplotChart, + TreeChart, + TreemapChart, + HeatmapChart, + SunburstChart, +} from 'echarts/charts'; +import { CanvasRenderer } from 'echarts/renderers'; +import { + TooltipComponent, + GridComponent, + VisualMapComponent, + LegendComponent, + DataZoomComponent, + ToolboxComponent, + GraphicComponent, + AriaComponent, +} from 'echarts/components'; +import { LabelLayout } from 'echarts/features'; import { EchartsHandler, EchartsProps, EchartsStylesProps } from '../types'; const Styles = styled.div` @@ -36,6 +64,33 @@ const Styles = styled.div` width: ${({ width }) => width}; `; +use([ + CanvasRenderer, + BarChart, + BoxplotChart, + FunnelChart, + GaugeChart, + GraphChart, + HeatmapChart, + LineChart, + PieChart, + RadarChart, + SankeyChart, + ScatterChart, + SunburstChart, + TreeChart, + TreemapChart, + AriaComponent, + DataZoomComponent, + GraphicComponent, + GridComponent, + LegendComponent, + ToolboxComponent, + TooltipComponent, + VisualMapComponent, + LabelLayout, +]); + function Echart( { width, @@ -53,7 +108,7 @@ function Echart( // eslint-disable-next-line no-param-reassign refs.divRef = divRef; } - const chartRef = useRef(); + const chartRef = useRef(); const currentSelection = useMemo( () => Object.keys(selectedValues) || [], [selectedValues], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts index 4126aaeda..02adce8cc 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts @@ -32,8 +32,8 @@ import { SqlaFormData, ChartMetadata, } from '@superset-ui/core'; -import { EChartsCoreOption, ECharts } from 'echarts'; -import { TooltipMarker } from 'echarts/types/src/util/format'; +import type { EChartsCoreOption, EChartsType } from 'echarts/core'; +import type { TooltipMarker } from 'echarts/types/src/util/format'; import { StackControlsValue } from './constants'; export type EchartsStylesProps = { @@ -58,7 +58,7 @@ export interface EchartsProps { } export interface EchartsHandler { - getEchartInstance: () => ECharts | undefined; + getEchartInstance: () => EChartsType | undefined; } export enum ForecastSeriesEnum { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast.ts index a68dafe8d..c7244baf4 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast.ts @@ -18,8 +18,8 @@ */ import { isNumber } from 'lodash'; import { DataRecord, DTTM_ALIAS, ValueFormatter } from '@superset-ui/core'; -import { OptionName } from 'echarts/types/src/util/types'; -import { TooltipMarker } from 'echarts/types/src/util/format'; +import type { OptionName } from 'echarts/types/src/util/types'; +import type { TooltipMarker } from 'echarts/types/src/util/format'; import { ForecastSeriesContext, ForecastSeriesEnum, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts index cb97dff93..13d36b714 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts @@ -34,7 +34,9 @@ import { ValueFormatter, } from '@superset-ui/core'; import { SortSeriesType } from '@superset-ui/chart-controls'; -import { format, LegendComponentOption, SeriesOption } from 'echarts'; +import { format } from 'echarts/core'; +import type { LegendComponentOption } from 'echarts/components'; +import type { SeriesOption } from 'echarts'; import { isEmpty, maxBy, meanBy, minBy, orderBy, sumBy } from 'lodash'; import { NULL_STRING, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts index 7110cae6d..a4433cc95 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts @@ -17,7 +17,7 @@ * under the License. */ -import { CallbackDataParams } from 'echarts/types/src/util/types'; +import type { CallbackDataParams } from 'echarts/types/src/util/types'; import { TOOLTIP_OVERFLOW_MARGIN, TOOLTIP_POINTER_MARGIN } from '../constants'; import { Refs } from '../types'; diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts index e0c199257..34f8e5fd5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts @@ -22,8 +22,11 @@ import { SqlaFormData, supersetTheme, } from '@superset-ui/core'; -import { LabelFormatterCallback, PieSeriesOption } from 'echarts'; -import { CallbackDataParams } from 'echarts/types/src/util/types'; +import type { PieSeriesOption } from 'echarts/charts'; +import type { + LabelFormatterCallback, + CallbackDataParams, +} from 'echarts/types/src/util/types'; import transformProps, { parseParams } from '../../src/Pie/transformProps'; import { EchartsPieChartProps } from '../../src/Pie/types';