From dbcb473040b7e8ef1d41a81ba594387b66c04ebe Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Wed, 27 Nov 2024 15:29:09 -0300
Subject: [PATCH] fix: Time-series Line Chart Display unnecessary total
 (#31181)

---
 .../src/Timeseries/transformProps.ts          | 17 +++++++---
 .../src/Timeseries/types.ts                   |  2 ++
 .../plugin-chart-echarts/src/controls.tsx     | 31 +++++++++++++++++++
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
index 435dc0123f5f1..c62b7284b29b1 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -171,6 +171,8 @@ export default function transformProps(
     stack,
     tooltipTimeFormat,
     tooltipSortByMetric,
+    showTooltipTotal,
+    showTooltipPercentage,
     truncateXAxis,
     truncateYAxis,
     xAxis: xAxisOrig,
@@ -192,7 +194,9 @@ export default function transformProps(
   }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
   const refs: Refs = {};
   const groupBy = ensureIsArray(groupby);
-  const labelMap = Object.entries(label_map).reduce((acc, entry) => {
+  const labelMap: { [key: string]: string[] } = Object.entries(
+    label_map,
+  ).reduce((acc, entry) => {
     if (
       entry[1].length > groupBy.length &&
       Array.isArray(timeCompare) &&
@@ -487,7 +491,9 @@ export default function transformProps(
     minorTick: { show: minorTicks },
     minInterval:
       xAxisType === AxisType.Time && timeGrainSqla
-        ? TIMEGRAIN_TO_TIMESTAMP[timeGrainSqla]
+        ? TIMEGRAIN_TO_TIMESTAMP[
+            timeGrainSqla as keyof typeof TIMEGRAIN_TO_TIMESTAMP
+          ]
         : 0,
     ...getMinAndMaxFromBounds(
       xAxisType,
@@ -567,8 +573,9 @@ export default function transformProps(
             value.observation !== undefined ? acc + value.observation : acc,
           0,
         );
-        const showTotal = Boolean(isMultiSeries) && richTooltip && !isForecast;
-        const showPercentage = showTotal && !forcePercentFormatter;
+        const allowTotal = Boolean(isMultiSeries) && richTooltip && !isForecast;
+        const showPercentage =
+          allowTotal && !forcePercentFormatter && showTooltipPercentage;
         const keys = Object.keys(forecastValues);
         let focusedRow;
         sortedKeys
@@ -599,7 +606,7 @@ export default function transformProps(
             focusedRow = rows.length - focusedRow - 1;
           }
         }
-        if (showTotal) {
+        if (allowTotal && showTooltipTotal) {
           const totalRow = ['Total', formatter.format(total)];
           if (showPercentage) {
             totalRow.push(percentFormatter.format(1));
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
index b7a9db55894d3..88a55b46be488 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
@@ -76,6 +76,8 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   stack: StackType;
   timeCompare?: string[];
   tooltipTimeFormat?: string;
+  showTooltipTotal?: boolean;
+  showTooltipPercentage?: boolean;
   truncateXAxis: boolean;
   truncateYAxis: boolean;
   yAxisFormat?: string;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
index d6e9d6c688413..52651356b14d8 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
@@ -210,9 +210,40 @@ const tooltipSortByMetricControl: ControlSetItem = {
   },
 };
 
+const tooltipTotalControl: ControlSetItem = {
+  name: 'showTooltipTotal',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Show total'),
+    renderTrigger: true,
+    default: true,
+    description: t('Whether to display the total value in the tooltip'),
+    visibility: ({ controls, form_data }: ControlPanelsContainerProps) =>
+      Boolean(controls?.rich_tooltip?.value) &&
+      form_data.viz_type !== 'mixed_timeseries',
+  },
+};
+
+const tooltipPercentageControl: ControlSetItem = {
+  name: 'showTooltipPercentage',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Show percentage'),
+    renderTrigger: true,
+    default: true,
+    description: t('Whether to display the percentage value in the tooltip'),
+    visibility: ({ controls, form_data }: ControlPanelsContainerProps) =>
+      Boolean(controls?.rich_tooltip?.value) &&
+      !controls?.contributionMode?.value &&
+      form_data.viz_type !== 'mixed_timeseries',
+  },
+};
+
 export const richTooltipSection: ControlSetRow[] = [
   [<ControlSubSectionHeader>{t('Tooltip')}</ControlSubSectionHeader>],
   [richTooltipControl],
+  [tooltipTotalControl],
+  [tooltipPercentageControl],
   [tooltipSortByMetricControl],
   [tooltipTimeFormatControl],
 ];