From d3d343d6c48b4d3de61d21bf784e8c424f006c01 Mon Sep 17 00:00:00 2001 From: Victor Malai Date: Thu, 4 Feb 2021 11:34:51 +0200 Subject: [PATCH] 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 --- .../plugins/plugin-chart-echarts/package.json | 3 +- .../src/BoxPlot/transformProps.ts | 81 ++++++++--------- .../plugin-chart-echarts/src/BoxPlot/types.ts | 2 +- .../src/Pie/transformProps.ts | 77 +++++++++-------- .../src/Timeseries/transformProps.ts | 11 +-- .../src/Timeseries/transformers.ts | 86 +++++++++++-------- .../src/components/Echart.tsx | 4 +- .../plugins/plugin-chart-echarts/src/types.ts | 7 +- .../src/utils/annotation.ts | 5 +- .../plugin-chart-echarts/src/utils/prophet.ts | 13 +-- .../plugin-chart-echarts/src/utils/series.ts | 16 ++-- 11 files changed, 163 insertions(+), 142 deletions(-) diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/package.json index 051e263d7a..3ae9603d0b 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/package.json +++ b/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": { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts index 28acb009f4..933552c0f8 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts +++ b/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,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 = { + 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 ? `

${name}

` : ''; + 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('
'); + }, + }, + }, + // @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 ? `

${name}

` : ''; - 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('
'); - }, - }, - }, - // @ts-ignore - ...outlierData, - ], + series, }; return { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/types.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/types.ts index d46704f346..39d7a8be23 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/types.ts +++ b/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; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/transformProps.ts index da96223f96..29e2b8f650 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/transformProps.ts +++ b/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,16 +115,47 @@ export default function transformProps(chartProps: ChartProps): EchartsProps { color: '#000000', }; - const echartOptions: echarts.EChartOption = { + 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/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 98e727a932..dfb0a388b0 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/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, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index fa84f76a55..36873e76be 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/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[] { - const series: echarts.EChartOption.Series[] = []; +): SeriesOption[] { + 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[] { - const series: echarts.EChartOption.Series[] = []; +): SeriesOption[] { + 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: { - width, - type: style, - color: color || colorScale(name), - opacity: parseAnnotationOpacity(opacity), - emphasis: { - width: width ? width + 1 : width, - opacity: 1, - }, - }, + lineStyle, label: { show: false, color: '#000000', position: 'insideEndTop', + // @ts-ignore emphasis: { - // @ts-ignore - formatter: params => - // eslint-disable-next-line @typescript-eslint/no-unsafe-return - params.name, - // @ts-ignore + formatter: (params: CallbackDataParams) => params.name, 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[] { - const series: echarts.EChartOption.Series[] = []; +): SeriesOption[] { + 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, }, }); diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/components/Echart.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/components/Echart.tsx index 16390bd7bc..909ac3f8ac 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/components/Echart.tsx +++ b/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` @@ -28,7 +28,7 @@ const Styles = styled.div` export default function Echart({ width, height, echartOptions }: EchartsProps) { const divRef = useRef(null); - const chartRef = useRef(); + const chartRef = useRef(); useEffect(() => { if (!divRef.current) return; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/types.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/types.ts index 23c5d1be60..def54b6371 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/types.ts +++ b/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; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/annotation.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/annotation.ts index fc8560e86f..70dfb9f6d2 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/annotation.ts +++ b/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)), diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/prophet.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/prophet.ts index 891dab55c8..86af47b19c 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/prophet.ts +++ b/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 => { - const regexMatch = seriesTypeRegex.exec(seriesName); - if (!regexMatch) return { name: seriesName, type: ForecastSeriesEnum.Observation }; +export const extractForecastSeriesContext = (seriesName: OptionName): ForecastSeriesContext => { + const name = seriesName as string; + 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 => { const values: Record = {}; 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}: `; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/series.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/series.ts index a2f7ed31fd..c972fa26b9 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/utils/series.ts +++ b/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( - data: TimeseriesDataRecord[], -): echarts.EChartOption.Series[] { +export function extractTimeseriesSeries(data: TimeseriesDataRecord[]): SeriesOption[] { 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 - // eslint-disable-next-line @typescript-eslint/no-unsafe-return - data: rows.map(datum => [datum.__timestamp, datum[key]]), + data: rows.map((datum: { [p: string]: DataRecordValue; __timestamp: Date | null }) => [ + datum.__timestamp, + datum[key], + ]), })); } @@ -93,8 +93,8 @@ export function getLegendProps( type: LegendType, orientation: LegendOrientation, show: boolean, -): echarts.EChartOption.Legend { - const legend: echarts.EChartOption.Legend = { +): LegendComponentOption | LegendComponentOption[] { + const legend: LegendComponentOption | LegendComponentOption[] = { orient: [LegendOrientation.Top, LegendOrientation.Bottom].includes(orientation) ? 'horizontal' : 'vertical',