From 06b1d3cf716868fb50fa79282583fb4509c005a0 Mon Sep 17 00:00:00 2001
From: ChepteaCatalin <71984989+ChepteaCatalin@users.noreply.github.com>
Date: Sun, 17 Sep 2023 18:08:55 +0300
Subject: [PATCH] feat(tooltip): add dataIndex to valueFormatter callback.
 close #18997

---
 src/component/tooltip/seriesFormatTooltip.ts |  3 +-
 src/component/tooltip/tooltipMarkup.ts       |  5 ++-
 src/util/types.ts                            |  2 +-
 test/tooltip-valueFormatter.html             | 39 +++++++++++++++++++-
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/component/tooltip/seriesFormatTooltip.ts b/src/component/tooltip/seriesFormatTooltip.ts
index 6e5f7be099..714cac2dfd 100644
--- a/src/component/tooltip/seriesFormatTooltip.ts
+++ b/src/component/tooltip/seriesFormatTooltip.ts
@@ -93,7 +93,8 @@ export function defaultSeriesFormatTooltip(opt: {
                 // be not readable. So we check trim here.
                 noName: !trim(inlineName),
                 value: inlineValue,
-                valueType: inlineValueType
+                valueType: inlineValueType,
+                dataIndex
             })
         ].concat(subBlocks || [] as any)
     });
diff --git a/src/component/tooltip/tooltipMarkup.ts b/src/component/tooltip/tooltipMarkup.ts
index c8296b7e62..c416dad5d4 100644
--- a/src/component/tooltip/tooltipMarkup.ts
+++ b/src/component/tooltip/tooltipMarkup.ts
@@ -162,6 +162,7 @@ export interface TooltipMarkupNameValueBlock extends TooltipMarkupBlock {
     // null/undefined/NaN/''... (displayed as '-').
     noName?: boolean;
     noValue?: boolean;
+    dataIndex?: number;
 
     valueFormatter?: CommonTooltipOption<unknown>['valueFormatter']
 }
@@ -330,7 +331,9 @@ function buildNameValue(
         ? ''
         : makeValueReadable(name, 'ordinal', useUTC);
     const valueTypeOption = fragment.valueType;
-    const readableValueList = noValue ? [] : valueFormatter(fragment.value as OptionDataValue);
+    const readableValueList = noValue
+        ? []
+        : valueFormatter(fragment.value as OptionDataValue, fragment.dataIndex);
     const valueAlignRight = !noMarker || !noName;
     // It little weird if only value next to marker but far from marker.
     const valueCloseToMarker = !noMarker && noName;
diff --git a/src/util/types.ts b/src/util/types.ts
index c15e8c2639..c57975b0b2 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -1264,7 +1264,7 @@ export interface CommonTooltipOption<FormatterParams> {
      *
      * Will be ignored if tooltip.formatter is specified.
      */
-    valueFormatter?: (value: OptionDataValue | OptionDataValue[]) => string
+    valueFormatter?: (value: OptionDataValue | OptionDataValue[], dataIndex: number) => string
     /**
      * Absolution pixel [x, y] array. Or relative percent string [x, y] array.
      * If trigger is 'item'. position can be set to 'inside' / 'top' / 'left' / 'right' / 'bottom',
diff --git a/test/tooltip-valueFormatter.html b/test/tooltip-valueFormatter.html
index be4f2270b9..3d48e8e975 100644
--- a/test/tooltip-valueFormatter.html
+++ b/test/tooltip-valueFormatter.html
@@ -40,7 +40,7 @@
         <div id="main0"></div>
         <div id="main1"></div>
         <div id="main2"></div>
-
+        <div id="main3"></div>
 
 
 
@@ -268,6 +268,43 @@
                 });
             });
             </script>
+
+            <script>
+                require(['echarts'], function (echarts) {
+                    var option = {
+                        animation: false,
+                        tooltip: {
+                            position: 'top',
+                            valueFormatter: (_, dataIndex) => 'dataIndex: ' + dataIndex
+                        },
+                        xAxis: {
+                            type: 'category',
+                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                        },
+                        yAxis: {
+                            type: 'value'
+                        },
+                        series: [
+                            {
+                                type: 'bar',
+                                data: [50, 80, 70, 20, 30, 10, 100]
+                            }
+                        ]
+                    };
+
+                    var chart = testHelper.create(echarts, 'main3', {
+                        title: ['dataIndex in valueFormatter'],
+                        option: option
+                    });
+
+                    chart.dispatchAction({
+                        type: 'showTip',
+                        dataIndex: 4,
+                        seriesIndex: 0
+                    });
+                });
+            </script>
+
     </body>
 </html>