From 3f9a5d26c26f253bcd8b3297afeba93334eb599c Mon Sep 17 00:00:00 2001 From: Victor Malai Date: Tue, 26 Jan 2021 16:27:17 +0200 Subject: [PATCH] feat(plugin-chart-echarts): subject Add rich tooltip (#906) * feat(plugin-chart-echarts): subject Add rich tooltip * feat(plugin-chart-echarts): subject Add rich tooltip * Fix lint Fix lint Fix lint Fix lint Fix lint Fix lint & move rich tooltip separate section Fix Fix Fix Fix * Add comment * Change message --- .../src/Timeseries/controlPanel.tsx | 15 ++++++++++++++ .../src/Timeseries/transformProps.ts | 20 ++++++++++++------- .../src/Timeseries/transformers.ts | 16 +++++++++++++-- .../src/Timeseries/types.ts | 2 ++ 4 files changed, 44 insertions(+), 9 deletions(-) diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx index fc91255d124d..0a53541b42dc 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx @@ -338,6 +338,21 @@ const config: ControlPanelConfig = { }, }, ], + // eslint-disable-next-line react/jsx-key + [

{t('Tooltip')}

], + [ + { + name: 'rich_tooltip', + config: { + type: 'CheckboxControl', + label: t('Rich tooltip'), + renderTrigger: true, + default: true, + description: t('Shows a list of all series available at that point in time'), + }, + }, + ], + // eslint-disable-next-line react/jsx-key [

{t('Y Axis')}

], ['y_axis_format'], [ 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 a786485adee4..98e727a93227 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 @@ -33,7 +33,7 @@ import { TimeFormatter, } from '@superset-ui/core'; import { DEFAULT_FORM_DATA, EchartsTimeseriesFormData } from './types'; -import { EchartsProps, ForecastSeriesEnum } from '../types'; +import { EchartsProps, ForecastSeriesEnum, ProphetValue } from '../types'; import { parseYAxisBound } from '../utils/controls'; import { extractTimeseriesSeries, getChartPadding, getLegendProps } from '../utils/series'; import { extractAnnotationLabels } from '../utils/annotation'; @@ -79,6 +79,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps { yAxisBounds, timeGrainSqla, zoomable, + richTooltip, }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; const colorScale = CategoricalColorNamespace.getScale(colorScheme as string); @@ -166,12 +167,17 @@ export default function transformProps(chartProps: ChartProps): EchartsProps { }, tooltip: { ...defaultTooltip, - trigger: 'axis', - formatter: params => { - // @ts-ignore - const rows = [`${xAxisFormatter(params[0].value[0])}`]; - // @ts-ignore - const prophetValues = extractProphetValuesFromTooltipParams(params); + 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; + + const rows: Array = [`${smartDateFormatter(value)}`]; + const prophetValues: Record = extractProphetValuesFromTooltipParams( + prophetValue, + ); + Object.keys(prophetValues).forEach(key => { const value = prophetValues[key]; rows.push( 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 1e74f5aa6f13..fa84f76a55ba 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 @@ -43,7 +43,16 @@ export function transformSeries( colorScale: CategoricalColorScale, ): echarts.EChartOption.Series | undefined { const { name } = series; - const { area, forecastEnabled, markerEnabled, markerSize, opacity, seriesType, stack } = { + const { + area, + forecastEnabled, + markerEnabled, + markerSize, + opacity, + seriesType, + stack, + richTooltip, + } = { ...DEFAULT_FORM_DATA, ...formData, }; @@ -95,7 +104,10 @@ export function transformSeries( }, showSymbol: !isConfidenceBand && - (plotType === 'scatter' || (forecastEnabled && isObservation) || markerEnabled), + (plotType === 'scatter' || + (forecastEnabled && isObservation) || + markerEnabled || + !richTooltip), // TODO: forcing markers when richTooltip is enabled will be removed once ECharts supports item based tooltips without markers symbolSize: markerSize, }; } diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts index 10feaecff965..a2cb7885b451 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts @@ -62,6 +62,7 @@ export type EchartsTimeseriesFormData = { timeGrainSqla?: TimeGranularity; yAxisBounds: [number | undefined | null, number | undefined | null]; zoomable: boolean; + richTooltip: boolean; } & EchartsLegendFormData; export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = { @@ -88,4 +89,5 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = { xAxisShowMinLabel: true, xAxisShowMaxLabel: true, zoomable: false, + richTooltip: true, };