feat(plugin-chart-echarts): rich tooltip in ts chart supports scroll …

…and highlighted (#1304)

* feat(plugin-chart-echarts): richtooltip  supports highliting and scroll

* fix: test

* fix: todo

plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx

@@ -20,6 +20,7 @@ import React, { useCallback } from 'react';
 import { EchartsMixedTimeseriesChartTransformedProps } from './types';
 import Echart from '../components/Echart';
 import { EventHandlers } from '../types';
+import { currentSeries } from '../utils/series';
 
 export default function EchartsMixedTimeseries({
   height,
@@ -93,6 +94,12 @@ export default function EchartsMixedTimeseries({
         handleChange([seriesName], seriesIndex);
       }
     },
+    mousemove: params => {
+      currentSeries.name = params.seriesName;
+    },
+    mouseout: () => {
+      currentSeries.name = '';
+    },
   };
 
   return (

plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -36,7 +36,12 @@ import {
 } from './types';
 import { ForecastSeriesEnum, ProphetValue } from '../types';
 import { parseYAxisBound } from '../utils/controls';
-import { dedupSeries, extractTimeseriesSeries, getLegendProps } from '../utils/series';
+import {
+  currentSeries,
+  dedupSeries,
+  extractTimeseriesSeries,
+  getLegendProps,
+} from '../utils/series';
 import { extractAnnotationLabels } from '../utils/annotation';
 import {
   extractForecastSeriesContext,
@@ -249,6 +254,7 @@ export default function transformProps(
     ],
     tooltip: {
       ...defaultTooltip,
+      appendToBody: true,
       trigger: richTooltip ? 'axis' : 'item',
       formatter: (params: any) => {
         const value: number = !richTooltip ? params.value : params[0].value[0];
@@ -261,13 +267,16 @@ export default function transformProps(
 
         Object.keys(prophetValues).forEach(key => {
           const value = prophetValues[key];
-          rows.push(
-            formatProphetTooltipSeries({
-              ...value,
-              seriesName: key,
-              formatter: primarySeries.has(key) ? formatter : formatterSecondary,
-            }),
-          );
+          const content = formatProphetTooltipSeries({
+            ...value,
+            seriesName: key,
+            formatter: primarySeries.has(key) ? formatter : formatterSecondary,
+          });
+          if (currentSeries.name === key) {
+            rows.push(`<span style="font-weight: 700">${content}</span>`);
+          } else {
+            rows.push(`<span style="opacity: 0.7">${content}</span>`);
+          }
         });
         return rows.join('<br />');
       },

plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

@@ -20,6 +20,7 @@ import React, { useCallback } from 'react';
 import { EventHandlers } from '../types';
 import Echart from '../components/Echart';
 import { TimeseriesChartTransformedProps } from './types';
+import { currentSeries } from '../utils/series';
 
 // @ts-ignore
 export default function EchartsTimeseries({
@@ -78,6 +79,12 @@ export default function EchartsTimeseries({
         handleChange([name]);
       }
     },
+    mousemove: params => {
+      currentSeries.name = params.seriesName;
+    },
+    mouseout: () => {
+      currentSeries.name = '';
+    },
   };
 
   return (

plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -37,7 +37,12 @@ import {
 } from './types';
 import { ForecastSeriesEnum, ProphetValue } from '../types';
 import { parseYAxisBound } from '../utils/controls';
-import { dedupSeries, extractTimeseriesSeries, getLegendProps } from '../utils/series';
+import {
+  dedupSeries,
+  extractTimeseriesSeries,
+  getLegendProps,
+  currentSeries,
+} from '../utils/series';
 import { extractAnnotationLabels } from '../utils/annotation';
 import {
   extractForecastSeriesContext,
@@ -226,6 +231,7 @@ export default function transformProps(
     },
     tooltip: {
       ...defaultTooltip,
+      appendToBody: true,
       trigger: richTooltip ? 'axis' : 'item',
       formatter: (params: any) => {
         const value: number = !richTooltip ? params.value : params[0].value[0];
@@ -238,13 +244,16 @@ export default function transformProps(
 
         Object.keys(prophetValues).forEach(key => {
           const value = prophetValues[key];
-          rows.push(
-            formatProphetTooltipSeries({
-              ...value,
-              seriesName: key,
-              formatter,
-            }),
-          );
+          const content = formatProphetTooltipSeries({
+            ...value,
+            seriesName: key,
+            formatter,
+          });
+          if (currentSeries.name === key) {
+            rows.push(`<span style="font-weight: 700">${content}</span>`);
+          } else {
+            rows.push(`<span style="opacity: 0.7">${content}</span>`);
+          }
         });
         return rows.join('<br />');
       },

plugins/plugin-chart-echarts/src/utils/series.ts

@@ -204,3 +204,8 @@ export function dedupSeries(series: SeriesOption[]): SeriesOption[] {
 export function sanitizeHtml(text: string): string {
   return format.encodeHTML(text);
 }
+
+// TODO: Better use other method to maintain this state
+export const currentSeries = {
+  name: '',
+};