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>
kubesphere · Feb 27, 2024 · 041561e · 041561e
1 parent e8157b9
commit 041561e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 10 deletions.
diff --git a/.changeset/violet-carrots-clean.md 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
@@ -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
@@ -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
@@ -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
@@ -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 = {