From 3a5bfa6488472a38ef874bba6ee07dcd1819d3d9 Mon Sep 17 00:00:00 2001
From: Stephen Liu <750188453@qq.com>
Date: Wed, 27 Oct 2021 00:34:06 +0800
Subject: [PATCH] fix: show value on the selected series (#1429)

* fix: show value on the selected series

* fix: callback
---
 .../src/Timeseries/EchartsTimeseries.tsx      | 49 ++++++++++---------
 .../src/Timeseries/transformers.ts            |  6 ++-
 .../plugin-chart-echarts/src/controls.tsx     |  4 +-
 .../plugin-chart-echarts/src/utils/series.ts  |  1 +
 4 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
index 9ebd049021fa..f2a7c881600f 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
@@ -44,28 +44,33 @@ export default function EchartsTimeseries({
   const lastSelectedLegend = useRef('');
   const clickTimer = useRef<ReturnType<typeof setTimeout>>();
 
-  const handleDoubleClickChange = useCallback((name?: string) => {
-    const echartInstance = echartRef.current?.getEchartInstance();
-    if (!name) {
-      echartInstance?.dispatchAction({
-        type: 'legendAllSelect',
-      });
-    } else {
-      legendData.forEach(datum => {
-        if (datum === name) {
-          echartInstance?.dispatchAction({
-            type: 'legendSelect',
-            name: datum,
-          });
-        } else {
-          echartInstance?.dispatchAction({
-            type: 'legendUnSelect',
-            name: datum,
-          });
-        }
-      });
-    }
-  }, []);
+  const handleDoubleClickChange = useCallback(
+    (name?: string) => {
+      const echartInstance = echartRef.current?.getEchartInstance();
+      if (!name) {
+        currentSeries.legend = '';
+        echartInstance?.dispatchAction({
+          type: 'legendAllSelect',
+        });
+      } else {
+        legendData.forEach(datum => {
+          if (datum === name) {
+            currentSeries.legend = datum;
+            echartInstance?.dispatchAction({
+              type: 'legendSelect',
+              name: datum,
+            });
+          } else {
+            echartInstance?.dispatchAction({
+              type: 'legendUnSelect',
+              name: datum,
+            });
+          }
+        });
+      }
+    },
+    [legendData],
+  );
 
   const getModelInfo = (target: ViewRootGroup, globalModel: GlobalModel) => {
     let el = target;
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 c66b5433ba0b..daad2ede27db 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
@@ -58,7 +58,7 @@ import {
   formatAnnotationLabel,
   parseAnnotationOpacity,
 } from '../utils/annotation';
-import { getChartPadding } from '../utils/series';
+import { currentSeries, getChartPadding } from '../utils/series';
 import { OpacityEnum, TIMESERIES_CONSTANTS } from '../constants';
 
 export function transformSeries(
@@ -194,9 +194,11 @@ export function transformSeries(
           value: [, numericValue],
           dataIndex,
           seriesIndex,
+          seriesName,
         } = params;
+        const isSelectedLegend = currentSeries.legend === seriesName;
         if (!formatter) return numericValue;
-        if (!stack || !onlyTotal) {
+        if (!stack || !onlyTotal || isSelectedLegend) {
           return formatter(numericValue);
         }
         if (seriesIndex === showValueIndexes[dataIndex]) {
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx
index e170febf7c35..503f1c912dce 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx
@@ -123,7 +123,9 @@ const onlyTotalControl = {
     label: t('Only Total'),
     default: true,
     renderTrigger: true,
-    description: t('Only show the total value on the stacked chart'),
+    description: t(
+      'Only show the total value on the stacked chart, and not show on the selected category',
+    ),
     visibility: ({ controls }: ControlPanelsContainerProps) =>
       Boolean(controls?.show_value?.value) && Boolean(controls?.stack?.value),
   },
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 4863007a3feb..552046d4d560 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
@@ -208,4 +208,5 @@ export function sanitizeHtml(text: string): string {
 // TODO: Better use other method to maintain this state
 export const currentSeries = {
   name: '',
+  legend: '',
 };