From 041561e5a2a37bc615a72d8713644f3ba7e26da5 Mon Sep 17 00:00:00 2001
From: fcl <63338728+fuchunlan@users.noreply.github.com>
Date: Tue, 27 Feb 2024 14:36:08 +0800
Subject: [PATCH] Support customTooltip on AreaChart,BarChart and LineChart 
 (#195)

* fix: Support customTooltip on AreaChart,BarChart and LineChart

Signed-off-by: lannyfu <lannyfu@kubesphere.io>

* add changeset

Signed-off-by: lannyfu <lannyfu@kubesphere.io>

* update changeset

Signed-off-by: lannyfu <lannyfu@kubesphere.io>

---------

Signed-off-by: lannyfu <lannyfu@kubesphere.io>
---
 .changeset/violet-carrots-clean.md            |  5 +++++
 .../charts/src/charts/AreaChart/AreaChart.tsx |  2 ++
 .../charts/src/charts/BarChart/BarChart.tsx   |  4 +++-
 .../charts/src/charts/LineChart/LineChart.tsx | 21 +++++++++++--------
 packages/charts/src/types.ts                  |  1 +
 5 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/violet-carrots-clean.md

diff --git a/.changeset/violet-carrots-clean.md b/.changeset/violet-carrots-clean.md
new file mode 100644
index 00000000..649d99c1
--- /dev/null
+++ b/.changeset/violet-carrots-clean.md
@@ -0,0 +1,5 @@
+---
+'@kubed/charts': patch
+---
+
+Support customTooltip on Some charts
diff --git a/packages/charts/src/charts/AreaChart/AreaChart.tsx b/packages/charts/src/charts/AreaChart/AreaChart.tsx
index fdef42b8..b33b7cf7 100644
--- a/packages/charts/src/charts/AreaChart/AreaChart.tsx
+++ b/packages/charts/src/charts/AreaChart/AreaChart.tsx
@@ -46,6 +46,7 @@ export const AreaChart = ({
   minValue,
   maxValue,
   colors,
+  customTooltip,
   legendVerticalAlign = 'top',
   legendAlign = 'right',
   legendFormatter,
@@ -131,6 +132,7 @@ export const AreaChart = ({
           <Tooltip
             wrapperStyle={{ outline: 'none' }}
             content={({ active, payload, label }) => (
+              customTooltip && customTooltip(payload)) || (
               <TooltipContent
                 active={active}
                 payload={payload}
diff --git a/packages/charts/src/charts/BarChart/BarChart.tsx b/packages/charts/src/charts/BarChart/BarChart.tsx
index fa5c4936..42a72d4d 100644
--- a/packages/charts/src/charts/BarChart/BarChart.tsx
+++ b/packages/charts/src/charts/BarChart/BarChart.tsx
@@ -46,6 +46,7 @@ export const BarChart = ({
   minValue,
   maxValue,
   colors,
+  customTooltip,
   legendVerticalAlign = 'top',
   legendAlign = 'right',
   legendFormatter,
@@ -174,7 +175,8 @@ export const BarChart = ({
         {showTooltip ? (
           <Tooltip
             wrapperStyle={{ outline: 'none' }}
-            content={({ active, payload, label }) => (
+            content={({ active, payload, label }) =>  (
+              customTooltip && customTooltip(payload)) || (
               <TooltipContent
                 active={active}
                 payload={payload}
diff --git a/packages/charts/src/charts/LineChart/LineChart.tsx b/packages/charts/src/charts/LineChart/LineChart.tsx
index db34018b..9ce46a42 100644
--- a/packages/charts/src/charts/LineChart/LineChart.tsx
+++ b/packages/charts/src/charts/LineChart/LineChart.tsx
@@ -38,6 +38,7 @@ export const LineChart = ({
   minValue,
   maxValue,
   colors,
+  customTooltip,
   legendVerticalAlign = 'top',
   legendAlign = 'right',
   legendFormatter,
@@ -118,15 +119,17 @@ export const LineChart = ({
         {showTooltip ? (
           <Tooltip
             wrapperStyle={{ outline: 'none' }}
-            content={({ active, payload, label }) => (
-              <TooltipContent
-                active={active}
-                payload={payload}
-                label={label}
-                valueFormatter={valueFormatter}
-                legendFormatter={legendFormatter}
-              />
-            )}
+            content={({ active, payload, label }) =>
+              (customTooltip && customTooltip(payload)) || (
+                <TooltipContent
+                  active={active}
+                  payload={payload}
+                  label={label}
+                  valueFormatter={valueFormatter}
+                  legendFormatter={legendFormatter}
+                />
+              )
+            }
           />
         ) : null}
         {categories.map((category) => (
diff --git a/packages/charts/src/types.ts b/packages/charts/src/types.ts
index a0572785..44ab30b2 100644
--- a/packages/charts/src/types.ts
+++ b/packages/charts/src/types.ts
@@ -23,6 +23,7 @@ export interface ChartBaseProps extends CategoricalChartProps {
   legendAlign?: 'left' | 'center' | 'right';
   legendFormatter?: LegendFormatter;
   maxActiveCategories?: number;
+  customTooltip?: (payload: any[]) => React.ReactNode;
 }
 
 export type ValueFormatter = {