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
apache · Nov 26, 2021 · 3f9a5d2 · 3f9a5d2
1 parent 2345e34
commit 3f9a5d2
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 9 deletions.
diff --git a/...rary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/...rary_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
+        [<h1 className="section-header">{t('Tooltip')}</h1>],
+        [
+          {
+            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
         [<h1 className="section-header">{t('Y Axis')}</h1>],
         ['y_axis_format'],
         [

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
@@ -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<string> = [`${smartDateFormatter(value)}`];
+        const prophetValues: Record<string, ProphetValue> = extractProphetValuesFromTooltipParams(
+          prophetValue,
+        );
+
         Object.keys(prophetValues).forEach(key => {
           const value = prophetValues[key];
           rows.push(

diff --git a/...orary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/...orary_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/...nd/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/...nd/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,
 };