feat(plugin-chart-echarts): subject Update echarts to v5.0.1 (#928)

* feat(plugin-chart-echarts): subject Update echarts to v5.0.1

* fix lint

* fix lint

* wip

* wip

* wip

* Fix comments

* Add back missed properties

* Fix lint

* Fix

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/package.json

@@ -28,9 +28,8 @@
   "dependencies": {
     "@superset-ui/chart-controls": "0.17.5",
     "@superset-ui/core": "0.17.5",
-    "@types/echarts": "^4.9.3",
     "@types/mathjs": "^6.0.7",
-    "echarts": "^5.0.0",
+    "echarts": "^5.0.1",
     "mathjs": "^8.0.1"
   },
   "peerDependencies": {

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

@@ -23,6 +23,8 @@ import {
   getMetricLabel,
   getNumberFormatter,
 } from '@superset-ui/core';
+import { EChartsOption, BoxplotSeriesOption } from 'echarts';
+import { CallbackDataParams } from 'echarts/types/src/util/types';
 import { BoxPlotQueryFormData } from './types';
 import { EchartsProps } from '../types';
 import { extractGroupbyLabel } from '../utils/series';
@@ -43,7 +45,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
   const metricLabels = formdataMetrics.map(getMetricLabel);
 
   const transformedData = data
-    .map(datum => {
+    .map((datum: any) => {
       const groupbyLabel = extractGroupbyLabel({ datum, groupby });
       return metricLabels.map(metric => {
         const name = metricLabels.length === 1 ? groupbyLabel : `${groupbyLabel}, ${metric}`;
@@ -102,41 +104,13 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
   else if (xTicksLayout === 'staggered') axisLabel = { rotate: -45 };
   else axisLabel = { show: true };
 
-  // @ts-ignore
+  const series: BoxplotSeriesOption[] = [
-  const echartOptions: echarts.EChartOption<echarts.EChartOption.SeriesBoxplot> = {
-    grid: {
-      ...defaultGrid,
-      top: 30,
-      bottom: 30,
-      left: 20,
-      right: 20,
-    },
-    xAxis: {
-      type: 'category',
-      data: transformedData.map(row => row.name),
-      axisLabel,
-    },
-    yAxis: {
-      ...defaultYAxis,
-      type: 'value',
-      axisLabel: { formatter: numberFormatter },
-    },
-    tooltip: {
-      ...defaultTooltip,
-      trigger: 'item',
-      axisPointer: {
-        type: 'shadow',
-      },
-    },
-    series: [
     {
       name: 'boxplot',
       type: 'boxplot',
-        avoidLabelOverlap: true,
-        // @ts-ignore
       data: transformedData,
       tooltip: {
-          formatter: param => {
+        formatter: (param: CallbackDataParams) => {
           // @ts-ignore
           const {
             value,
@@ -164,7 +138,34 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
     },
     // @ts-ignore
     ...outlierData,
-    ],
+  ];
+
+  const echartOptions: EChartsOption = {
+    grid: {
+      ...defaultGrid,
+      top: 30,
+      bottom: 30,
+      left: 20,
+      right: 20,
+    },
+    xAxis: {
+      type: 'category',
+      data: transformedData.map(row => row.name),
+      axisLabel,
+    },
+    yAxis: {
+      ...defaultYAxis,
+      type: 'value',
+      axisLabel: { formatter: numberFormatter },
+    },
+    tooltip: {
+      ...defaultTooltip,
+      trigger: 'item',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    series,
   };
 
   return {

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/types.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { QueryFormData } from '@superset-ui/core';
-import { PostProcessingBoxplot } from '@superset-ui/core/src/query/types/PostProcessing';
+import { PostProcessingBoxplot } from '@superset-ui/core/lib/query/types/PostProcessing';
 
 export type BoxPlotQueryFormData = QueryFormData & {
   numberFormat?: string;

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

@@ -25,6 +25,8 @@ import {
   NumberFormats,
   NumberFormatter,
 } from '@superset-ui/core';
+import { CallbackDataParams } from 'echarts/types/src/util/types';
+import { EChartsOption, PieSeriesOption } from 'echarts';
 import {
   DEFAULT_FORM_DATA as DEFAULT_PIE_FORM_DATA,
   EchartsPieFormData,
@@ -41,7 +43,7 @@ export function formatPieLabel({
   labelType,
   numberFormatter,
 }: {
-  params: echarts.EChartOption.Tooltip.Format;
+  params: CallbackDataParams;
   labelType: EchartsPieLabelType;
   numberFormatter: NumberFormatter;
 }): string {
@@ -93,7 +95,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
   const numberFormatter = getNumberFormatter(numberFormat);
 
-  const transformedData = data.map(datum => {
+  const transformedData: PieSeriesOption[] = data.map(datum => {
     const name = extractGroupbyLabel({ datum, groupby });
     return {
       value: datum[metricLabel],
@@ -104,7 +106,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
     };
   });
 
-  const formatter = (params: { name: string; value: number; percent: number }) =>
+  const formatter = (params: CallbackDataParams) =>
     formatPieLabel({ params, numberFormatter, labelType });
 
   const defaultLabel = {
@@ -113,25 +115,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
     color: '#000000',
   };
 
-  const echartOptions: echarts.EChartOption<echarts.EChartOption.SeriesPie> = {
+  const series: PieSeriesOption[] = [
-    grid: {
-      ...defaultGrid,
-    },
-    tooltip: {
-      ...defaultTooltip,
-      trigger: 'item',
-      formatter: params =>
-        formatPieLabel({
-          params: params as echarts.EChartOption.Tooltip.Format,
-          numberFormatter,
-          labelType: EchartsPieLabelType.KeyValuePercent,
-        }),
-    },
-    legend: {
-      ...getLegendProps(legendType, legendOrientation, showLegend),
-      data: keys,
-    },
-    series: [
     {
       type: 'pie',
       ...getChartPadding(showLegend, legendOrientation, legendMargin),
@@ -158,10 +142,29 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
           backgroundColor: 'white',
         },
       },
-        // @ts-ignore
       data: transformedData,
     },
-    ],
+  ];
+
+  const echartOptions: EChartsOption = {
+    grid: {
+      ...defaultGrid,
+    },
+    tooltip: {
+      ...defaultTooltip,
+      trigger: 'item',
+      formatter: (params: any) =>
+        formatPieLabel({
+          params,
+          numberFormatter,
+          labelType: EchartsPieLabelType.KeyValuePercent,
+        }),
+    },
+    legend: {
+      ...getLegendProps(legendType, legendOrientation, showLegend),
+      data: keys,
+    },
+    series,
   };
 
   return {

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

@@ -32,6 +32,7 @@ import {
   TimeseriesChartDataResponseResult,
   TimeFormatter,
 } from '@superset-ui/core';
+import { EChartsOption, SeriesOption } from 'echarts';
 import { DEFAULT_FORM_DATA, EchartsTimeseriesFormData } from './types';
 import { EchartsProps, ForecastSeriesEnum, ProphetValue } from '../types';
 import { parseYAxisBound } from '../utils/controls';
@@ -85,7 +86,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
   const rebasedData = rebaseTimeseriesDatum(data);
   const rawSeries = extractTimeseriesSeries(rebasedData);
-  const series: echarts.EChartOption.Series[] = [];
+  const series: SeriesOption[] = [];
   const formatter = getNumberFormatter(contributionMode ? ',.0%' : yAxisFormat);
 
   rawSeries.forEach(entry => {
@@ -136,7 +137,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
     xAxisFormatter = String;
   }
 
-  const echartOptions: echarts.EChartOption = {
+  const echartOptions: EChartsOption = {
     useUTC: true,
     grid: {
       ...defaultGrid,
@@ -168,7 +169,6 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
     tooltip: {
       ...defaultTooltip,
       trigger: richTooltip ? 'axis' : 'item',
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       formatter: (params: any) => {
         const value: number = !richTooltip ? params.value : params[0].value[0];
         const prophetValue = !richTooltip ? [params] : params;
@@ -193,10 +193,12 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend),
+      // @ts-ignore
       data: rawSeries
         .filter(
           entry =>
-            extractForecastSeriesContext(entry.name || '').type === ForecastSeriesEnum.Observation,
+            extractForecastSeriesContext((entry.name || '') as string).type ===
+            ForecastSeriesEnum.Observation,
         )
         .map(entry => entry.name || '')
         .concat(extractAnnotationLabels(annotationLayers, annotationData)),
@@ -227,7 +229,6 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
   };
 
   return {
-    // @ts-ignore
     echartOptions,
     width,
     height,

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

@@ -18,15 +18,28 @@
  */
 import {
   AnnotationData,
+  AnnotationLayer,
   AnnotationOpacity,
   CategoricalColorScale,
   EventAnnotationLayer,
-  FormulaAnnotationLayer,
   IntervalAnnotationLayer,
   isTimeseriesAnnotationResult,
   TimeseriesAnnotationLayer,
   TimeseriesDataRecord,
 } from '@superset-ui/core';
+import { SeriesOption } from 'echarts';
+import {
+  CallbackDataParams,
+  DefaultExtraStateOpts,
+  ItemStyleOption,
+  LineStyleOption,
+  OptionName,
+  ZRLineType,
+} from 'echarts/types/src/util/types';
+import {
+  MarkArea1DDataItemOption,
+  MarkArea2DDataItemOption,
+} from 'echarts/types/src/component/marker/MarkAreaModel';
 import { extractForecastSeriesContext } from '../utils/prophet';
 import { ForecastSeriesEnum } from '../types';
 import { DEFAULT_FORM_DATA, EchartsTimeseriesFormData } from './types';
@@ -38,10 +51,10 @@ import {
 } from '../utils/annotation';
 
 export function transformSeries(
-  series: echarts.EChartOption.Series,
+  series: SeriesOption,
   formData: EchartsTimeseriesFormData,
   colorScale: CategoricalColorScale,
-): echarts.EChartOption.Series | undefined {
+): SeriesOption | undefined {
   const { name } = series;
   const {
     area,
@@ -52,7 +65,7 @@ export function transformSeries(
     seriesType,
     stack,
     richTooltip,
-  } = {
+  }: EchartsTimeseriesFormData = {
     ...DEFAULT_FORM_DATA,
     ...formData,
   };
@@ -93,9 +106,10 @@ export function transformSeries(
     itemStyle: {
       color: colorScale(forecastSeries.name),
     },
-    type: plotType,
     // @ts-ignore
+    type: plotType,
     smooth: seriesType === 'smooth',
+    // @ts-ignore
     step: ['start', 'middle', 'end'].includes(seriesType as string) ? seriesType : undefined,
     stack: stackId,
     lineStyle,
@@ -113,10 +127,10 @@ export function transformSeries(
 }
 
 export function transformFormulaAnnotation(
-  layer: FormulaAnnotationLayer,
+  layer: AnnotationLayer,
   data: TimeseriesDataRecord[],
   colorScale: CategoricalColorScale,
-): echarts.EChartOption.Series {
+): SeriesOption {
   const { name, color, opacity, width, style } = layer;
   return {
     name,
@@ -126,12 +140,11 @@ export function transformFormulaAnnotation(
     },
     lineStyle: {
       opacity: parseAnnotationOpacity(opacity),
-      type: style,
+      type: style as ZRLineType,
       width,
     },
     type: 'line',
     smooth: true,
-    // @ts-ignore
     data: evalFormula(layer, data),
     symbolSize: 0,
     z: 0,
@@ -143,14 +156,14 @@ export function transformIntervalAnnotation(
   data: TimeseriesDataRecord[],
   annotationData: AnnotationData,
   colorScale: CategoricalColorScale,
-): echarts.EChartOption.Series[] {
+): SeriesOption[] {
-  const series: echarts.EChartOption.Series[] = [];
+  const series: SeriesOption[] = [];
   const annotations = extractRecordAnnotations(layer, annotationData);
   annotations.forEach(annotation => {
     const { name, color, opacity } = layer;
     const { descriptions, intervalEnd, time, title } = annotation;
     const label = formatAnnotationLabel(name, title, descriptions);
-    const intervalData = [
+    const intervalData: (MarkArea1DDataItemOption | MarkArea2DDataItemOption)[] = [
       [
         {
           name: label,
@@ -173,10 +186,11 @@ export function transformIntervalAnnotation(
           emphasis: {
             opacity: 0.8,
           },
-        },
+        } as ItemStyleOption,
         label: {
           show: false,
           color: '#000000',
+          // @ts-ignore
           emphasis: {
             fontWeight: 'bold',
             show: true,
@@ -185,7 +199,6 @@ export function transformIntervalAnnotation(
             backgroundColor: '#ffffff',
           },
         },
-        // @ts-ignore
         data: intervalData,
       },
     });
@@ -198,8 +211,8 @@ export function transformEventAnnotation(
   data: TimeseriesDataRecord[],
   annotationData: AnnotationData,
   colorScale: CategoricalColorScale,
-): echarts.EChartOption.Series[] {
+): SeriesOption[] {
-  const series: echarts.EChartOption.Series[] = [];
+  const series: SeriesOption[] = [];
   const annotations = extractRecordAnnotations(layer, annotationData);
   annotations.forEach(annotation => {
     const { name, color, opacity, style, width } = layer;
@@ -208,9 +221,21 @@ export function transformEventAnnotation(
     const eventData = [
       {
         name: label,
-        xAxis: time,
+        xAxis: (time as unknown) as number,
       },
     ];
+
+    const lineStyle: LineStyleOption & DefaultExtraStateOpts['emphasis'] = {
+      width,
+      type: style as ZRLineType,
+      color: color || colorScale(name),
+      opacity: parseAnnotationOpacity(opacity),
+      emphasis: {
+        width: width ? width + 1 : width,
+        opacity: 1,
+      },
+    };
+
     series.push({
       id: `Event - ${label}`,
       type: 'line',
@@ -218,32 +243,19 @@ export function transformEventAnnotation(
       markLine: {
         silent: false,
         symbol: 'none',
-        lineStyle: {
+        lineStyle,
-          width,
-          type: style,
-          color: color || colorScale(name),
-          opacity: parseAnnotationOpacity(opacity),
-          emphasis: {
-            width: width ? width + 1 : width,
-            opacity: 1,
-          },
-        },
         label: {
           show: false,
           color: '#000000',
           position: 'insideEndTop',
+          // @ts-ignore
           emphasis: {
-            // @ts-ignore
+            formatter: (params: CallbackDataParams) => params.name,
-            formatter: params =>
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-              params.name,
-            // @ts-ignore
             fontWeight: 'bold',
             show: true,
             backgroundColor: '#ffffff',
           },
         },
-        // @ts-ignore
         data: eventData,
       },
     });
@@ -256,8 +268,8 @@ export function transformTimeseriesAnnotation(
   formData: EchartsTimeseriesFormData,
   data: TimeseriesDataRecord[],
   annotationData: AnnotationData,
-): echarts.EChartOption.Series[] {
+): SeriesOption[] {
-  const series: echarts.EChartOption.Series[] = [];
+  const series: SeriesOption[] = [];
   const { markerSize } = formData;
   const { hideLine, name, opacity, showMarkers, style, width } = layer;
   const result = annotationData[name];
@@ -268,11 +280,11 @@ export function transformTimeseriesAnnotation(
         type: 'line',
         id: key,
         name: key,
-        data: values.map(row => [row.x, row.y] as [number | string, number]),
+        data: values.map(row => [row.x, row.y] as [OptionName, number]),
         symbolSize: showMarkers ? markerSize : 0,
         lineStyle: {
           opacity: parseAnnotationOpacity(opacity),
-          type: style,
+          type: style as ZRLineType,
           width: hideLine ? 0 : width,
         },
       });

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/components/Echart.tsx

@@ -18,7 +18,7 @@
  */
 import React, { useRef, useEffect } from 'react';
 import { styled } from '@superset-ui/core';
-import { init } from 'echarts';
+import { ECharts, init } from 'echarts';
 import { EchartsProps, EchartsStylesProps } from '../types';
 
 const Styles = styled.div<EchartsStylesProps>`
@@ -28,7 +28,7 @@ const Styles = styled.div<EchartsStylesProps>`
 
 export default function Echart({ width, height, echartOptions }: EchartsProps) {
   const divRef = useRef<HTMLDivElement>(null);
-  const chartRef = useRef<echarts.ECharts>();
+  const chartRef = useRef<ECharts>();
 
   useEffect(() => {
     if (!divRef.current) return;

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

@@ -16,6 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { EChartsOption } from 'echarts';
+import { TooltipMarker } from 'echarts/types/src/util/format';
+
 export type EchartsStylesProps = {
   height: number;
   width: number;
@@ -24,7 +27,7 @@ export type EchartsStylesProps = {
 export interface EchartsProps {
   height: number;
   width: number;
-  echartOptions: echarts.EChartOption;
+  echartOptions: EChartsOption;
 }
 
 export enum ForecastSeriesEnum {
@@ -52,7 +55,7 @@ export enum LegendType {
 }
 
 export type ProphetValue = {
-  marker: string;
+  marker: TooltipMarker;
   observation?: number;
   forecastTrend?: number;
   forecastLower?: number;

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/annotation.ts

@@ -23,7 +23,6 @@ import {
   AnnotationLayer,
   AnnotationOpacity,
   AnnotationType,
-  FormulaAnnotationLayer,
   isRecordAnnotationResult,
   isTableAnnotationLayer,
   isTimeseriesAnnotationResult,
@@ -32,11 +31,11 @@ import {
 import { parse as mathjsParse } from 'mathjs';
 
 export function evalFormula(
-  formula: FormulaAnnotationLayer,
+  formula: AnnotationLayer,
   data: TimeseriesDataRecord[],
 ): [Date, number][] {
   const { value } = formula;
-  const node = mathjsParse(value);
+  const node = mathjsParse(value as string);
   const func = node.compile();
   return data.map(row => [
     new Date(Number(row.__timestamp)),

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/prophet.ts

@@ -17,14 +17,17 @@
  * under the License.
  */
 import { TimeseriesDataRecord, NumberFormatter } from '@superset-ui/core';
+import { CallbackDataParams, OptionName } from 'echarts/types/src/util/types';
+import { TooltipMarker } from 'echarts/types/src/util/format';
 import { ForecastSeriesContext, ForecastSeriesEnum, ProphetValue } from '../types';
 
 const seriesTypeRegex = new RegExp(
   `(.+)(${ForecastSeriesEnum.ForecastLower}|${ForecastSeriesEnum.ForecastTrend}|${ForecastSeriesEnum.ForecastUpper})$`,
 );
-export const extractForecastSeriesContext = (seriesName: string): ForecastSeriesContext => {
+export const extractForecastSeriesContext = (seriesName: OptionName): ForecastSeriesContext => {
-  const regexMatch = seriesTypeRegex.exec(seriesName);
+  const name = seriesName as string;
-  if (!regexMatch) return { name: seriesName, type: ForecastSeriesEnum.Observation };
+  const regexMatch = seriesTypeRegex.exec(name);
+  if (!regexMatch) return { name, type: ForecastSeriesEnum.Observation };
   return {
     name: regexMatch[1],
     type: regexMatch[2] as ForecastSeriesEnum,
@@ -32,7 +35,7 @@ export const extractForecastSeriesContext = (seriesName: string): ForecastSeries
 };
 
 export const extractProphetValuesFromTooltipParams = (
-  params: (echarts.EChartOption.Tooltip.Format & { seriesId: string })[],
+  params: (CallbackDataParams & { seriesId: string })[],
 ): Record<string, ProphetValue> => {
   const values: Record<string, ProphetValue> = {};
   params.forEach(param => {
@@ -67,7 +70,7 @@ export const formatProphetTooltipSeries = ({
   formatter,
 }: ProphetValue & {
   seriesName: string;
-  marker: string;
+  marker: TooltipMarker;
   formatter: NumberFormatter;
 }): string => {
   let row = `${marker}${seriesName}: `;

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/series.ts

@@ -24,13 +24,12 @@ import {
   TimeFormatter,
   TimeseriesDataRecord,
 } from '@superset-ui/core';
+import { LegendComponentOption, SeriesOption } from 'echarts';
 import { NULL_STRING } from '../constants';
 import { LegendOrientation, LegendType } from '../types';
 import { defaultLegendPadding } from '../defaults';
 
-export function extractTimeseriesSeries(
+export function extractTimeseriesSeries(data: TimeseriesDataRecord[]): SeriesOption[] {
-  data: TimeseriesDataRecord[],
-): echarts.EChartOption.Series[] {
   if (data.length === 0) return [];
   const rows = data.map(datum => ({
     ...datum,
@@ -42,9 +41,10 @@ export function extractTimeseriesSeries(
     .map(key => ({
       id: key,
       name: key,
-      // @ts-ignore
+      data: rows.map((datum: { [p: string]: DataRecordValue; __timestamp: Date | null }) => [
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        datum.__timestamp,
-      data: rows.map(datum => [datum.__timestamp, datum[key]]),
+        datum[key],
+      ]),
     }));
 }
 
@@ -93,8 +93,8 @@ export function getLegendProps(
   type: LegendType,
   orientation: LegendOrientation,
   show: boolean,
-): echarts.EChartOption.Legend {
+): LegendComponentOption | LegendComponentOption[] {
-  const legend: echarts.EChartOption.Legend = {
+  const legend: LegendComponentOption | LegendComponentOption[] = {
     orient: [LegendOrientation.Top, LegendOrientation.Bottom].includes(orientation)
       ? 'horizontal'
       : 'vertical',