fix: show value on the selected series (#1429)

* fix: show value on the selected series

* fix: callback

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;

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]) {

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),
   },

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: '',
 };