From ff2309a77a561594db8f7bdf33555444593bf533 Mon Sep 17 00:00:00 2001
From: Yaozong Liu <750188453@qq.com>
Date: Mon, 16 Aug 2021 13:52:21 +0800
Subject: [PATCH] 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
---
.../EchartsMixedTimeseries.tsx | 7 ++++++
.../src/MixedTimeseries/transformProps.ts | 25 +++++++++++++------
.../src/Timeseries/EchartsTimeseries.tsx | 7 ++++++
.../src/Timeseries/transformProps.ts | 25 +++++++++++++------
.../plugin-chart-echarts/src/utils/series.ts | 5 ++++
5 files changed, 53 insertions(+), 16 deletions(-)
diff --git a/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx
index ae1a1f3c70..10eea4c663 100644
--- a/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx
+++ b/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 (
diff --git a/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
index 636921ee43..64950b148c 100644
--- a/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
+++ b/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(`${content}`);
+ } else {
+ rows.push(`${content}`);
+ }
});
return rows.join('
');
},
diff --git a/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
index 309fcb93e1..1c75dd916b 100644
--- a/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
+++ b/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 (
diff --git a/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
index 5996f5b2ec..587b1ba38b 100644
--- a/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
+++ b/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(`${content}`);
+ } else {
+ rows.push(`${content}`);
+ }
});
return rows.join('
');
},
diff --git a/plugins/plugin-chart-echarts/src/utils/series.ts b/plugins/plugin-chart-echarts/src/utils/series.ts
index 0e1db573ba..4863007a3f 100644
--- a/plugins/plugin-chart-echarts/src/utils/series.ts
+++ b/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: '',
+};