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
apache · Nov 26, 2021 · d3d343d · d3d343d
1 parent 2a4cc71
commit d3d343d
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 142 deletions.
diff --git a/...rset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/package.json b/...rset-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": {

diff --git a/...porary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts b/...porary_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,8 +104,43 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
   else if (xTicksLayout === 'staggered') axisLabel = { rotate: -45 };
   else axisLabel = { show: true };
 
-  // @ts-ignore
-  const echartOptions: echarts.EChartOption<echarts.EChartOption.SeriesBoxplot> = {
+  const series: BoxplotSeriesOption[] = [
+    {
+      name: 'boxplot',
+      type: 'boxplot',
+      data: transformedData,
+      tooltip: {
+        formatter: (param: CallbackDataParams) => {
+          // @ts-ignore
+          const {
+            value,
+            name,
+          }: {
+            value: [number, number, number, number, number, number, number, number, number[]];
+            name: string;
+          } = param;
+          const headline = name ? `<p><strong>${name}</strong></p>` : '';
+          const stats = [
+            `Max: ${numberFormatter(value[5])}`,
+            `3rd Quartile: ${numberFormatter(value[4])}`,
+            `Mean: ${numberFormatter(value[6])}`,
+            `Median: ${numberFormatter(value[3])}`,
+            `1st Quartile: ${numberFormatter(value[2])}`,
+            `Min: ${numberFormatter(value[1])}`,
+            `# Observations: ${numberFormatter(value[7])}`,
+          ];
+          if (value[8].length > 0) {
+            stats.push(`# Outliers: ${numberFormatter(value[8].length)}`);
+          }
+          return headline + stats.join('<br/>');
+        },
+      },
+    },
+    // @ts-ignore
+    ...outlierData,
+  ];
+
+  const echartOptions: EChartsOption = {
     grid: {
       ...defaultGrid,
       top: 30,
@@ -128,43 +165,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
         type: 'shadow',
       },
     },
-    series: [
-      {
-        name: 'boxplot',
-        type: 'boxplot',
-        avoidLabelOverlap: true,
-        // @ts-ignore
-        data: transformedData,
-        tooltip: {
-          formatter: param => {
-            // @ts-ignore
-            const {
-              value,
-              name,
-            }: {
-              value: [number, number, number, number, number, number, number, number, number[]];
-              name: string;
-            } = param;
-            const headline = name ? `<p><strong>${name}</strong></p>` : '';
-            const stats = [
-              `Max: ${numberFormatter(value[5])}`,
-              `3rd Quartile: ${numberFormatter(value[4])}`,
-              `Mean: ${numberFormatter(value[6])}`,
-              `Median: ${numberFormatter(value[3])}`,
-              `1st Quartile: ${numberFormatter(value[2])}`,
-              `Min: ${numberFormatter(value[1])}`,
-              `# Observations: ${numberFormatter(value[7])}`,
-            ];
-            if (value[8].length > 0) {
-              stats.push(`# Outliers: ${numberFormatter(value[8].length)}`);
-            }
-            return headline + stats.join('<br/>');
-          },
-        },
-      },
-      // @ts-ignore
-      ...outlierData,
-    ],
+    series,
   };
 
   return {

diff --git a/...ntend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/types.ts b/...ntend/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;

diff --git a/.../temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/transformProps.ts b/.../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,16 +115,47 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
     color: '#000000',
   };
 
-  const echartOptions: echarts.EChartOption<echarts.EChartOption.SeriesPie> = {
+  const series: PieSeriesOption[] = [
+    {
+      type: 'pie',
+      ...getChartPadding(showLegend, legendOrientation, legendMargin),
+      animation: false,
+      radius: [`${donut ? innerRadius : 0}%`, `${outerRadius}%`],
+      center: ['50%', '50%'],
+      avoidLabelOverlap: true,
+      labelLine: labelsOutside && labelLine ? { show: true } : { show: false },
+      label: labelsOutside
+        ? {
+            ...defaultLabel,
+            position: 'outer',
+            alignTo: 'none',
+            bleedMargin: 5,
+          }
+        : {
+            ...defaultLabel,
+            position: 'inner',
+          },
+      emphasis: {
+        label: {
+          show: true,
+          fontWeight: 'bold',
+          backgroundColor: 'white',
+        },
+      },
+      data: transformedData,
+    },
+  ];
+
+  const echartOptions: EChartsOption = {
     grid: {
       ...defaultGrid,
     },
     tooltip: {
       ...defaultTooltip,
       trigger: 'item',
-      formatter: params =>
+      formatter: (params: any) =>
         formatPieLabel({
-          params: params as echarts.EChartOption.Tooltip.Format,
+          params,
           numberFormatter,
           labelType: EchartsPieLabelType.KeyValuePercent,
         }),
@@ -131,37 +164,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
       ...getLegendProps(legendType, legendOrientation, showLegend),
       data: keys,
     },
-    series: [
-      {
-        type: 'pie',
-        ...getChartPadding(showLegend, legendOrientation, legendMargin),
-        animation: false,
-        radius: [`${donut ? innerRadius : 0}%`, `${outerRadius}%`],
-        center: ['50%', '50%'],
-        avoidLabelOverlap: true,
-        labelLine: labelsOutside && labelLine ? { show: true } : { show: false },
-        label: labelsOutside
-          ? {
-              ...defaultLabel,
-              position: 'outer',
-              alignTo: 'none',
-              bleedMargin: 5,
-            }
-          : {
-              ...defaultLabel,
-              position: 'inner',
-            },
-        emphasis: {
-          label: {
-            show: true,
-            fontWeight: 'bold',
-            backgroundColor: 'white',
-          },
-        },
-        // @ts-ignore
-        data: transformedData,
-      },
-    ],
+    series,
   };
 
   return {

diff --git a/...ary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/...ary_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,