From de8ced31b11a6be0f723568880fb2fe2c5fcff58 Mon Sep 17 00:00:00 2001
From: severinlandolt <sev.landolt@gmail.com>
Date: Wed, 19 Jun 2024 18:47:34 +0200
Subject: [PATCH] fix tooltip callbacks

---
 src/components/BarChart/BarChart.tsx          |  2 +-
 src/components/BarChart/changelog.md          |  6 ++++++
 src/components/LineChart/LineChart.tsx        | 19 ++++++++++++++++++-
 src/components/LineChart/changelog.md         |  9 ++++++++-
 .../LineChart/linechart.stories.tsx           |  6 ++++++
 5 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/BarChart/BarChart.tsx b/src/components/BarChart/BarChart.tsx
index 0a7bab8..c9372a6 100644
--- a/src/components/BarChart/BarChart.tsx
+++ b/src/components/BarChart/BarChart.tsx
@@ -1,4 +1,4 @@
-// Tremor Raw BarChart [v0.0.1]
+// Tremor Raw BarChart [v0.1.0]
 
 "use client"
 
diff --git a/src/components/BarChart/changelog.md b/src/components/BarChart/changelog.md
index 99e43fb..ab485bb 100644
--- a/src/components/BarChart/changelog.md
+++ b/src/components/BarChart/changelog.md
@@ -1,5 +1,11 @@
 # Tremor Raw BarChart Changelog
 
+## 0.1.0
+
+### Changes
+
+- Feat: Add tooltipCallback prop
+
 ## 0.0.1
 
 ### Changes
diff --git a/src/components/LineChart/LineChart.tsx b/src/components/LineChart/LineChart.tsx
index 0a72dfb..8293ffd 100644
--- a/src/components/LineChart/LineChart.tsx
+++ b/src/components/LineChart/LineChart.tsx
@@ -402,15 +402,29 @@ interface ChartTooltipProps {
   label: string
   categoryColors: Map<string, string>
   valueFormatter: (value: number) => string
+  tooltipCallback?: TooltipCallback
 }
 
+type TooltipCallbackProps = Pick<
+  ChartTooltipProps,
+  "active" | "payload" | "label"
+>
+
+type TooltipCallback = (props: TooltipCallbackProps) => void
+
 const ChartTooltip = ({
   active,
   payload,
   label,
   categoryColors,
   valueFormatter,
+  tooltipCallback,
 }: ChartTooltipProps) => {
+  React.useEffect(() => {
+    if (tooltipCallback) {
+      tooltipCallback({ active, payload, label })
+    }
+  }, [tooltipCallback, active, payload, label])
   if (active && payload) {
     const filteredPayload = payload.filter((item: any) => item.type !== "none")
 
@@ -507,6 +521,7 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   xAxisLabel?: string
   yAxisLabel?: string
   legendPosition?: "left" | "center" | "right"
+  tooltipCallback?: TooltipCallback
 }
 
 const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
@@ -537,6 +552,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
       xAxisLabel,
       yAxisLabel,
       legendPosition = "right",
+      tooltipCallback,
       ...other
     } = props
     const paddingValue = !showXAxis && !showYAxis ? 0 : 20
@@ -708,6 +724,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
                       label={label}
                       valueFormatter={valueFormatter}
                       categoryColors={categoryColors}
+                      tooltipCallback={tooltipCallback}
                     />
                   )
                 ) : (
@@ -875,4 +892,4 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
 
 LineChart.displayName = "LineChart"
 
-export { LineChart, type LineChartEventProps }
+export { LineChart, type LineChartEventProps, type TooltipCallbackProps }
diff --git a/src/components/LineChart/changelog.md b/src/components/LineChart/changelog.md
index b6e7de2..f78aafb 100644
--- a/src/components/LineChart/changelog.md
+++ b/src/components/LineChart/changelog.md
@@ -1,7 +1,14 @@
 # Tremor Raw LineChart Changelog
 
+## 0.2.0
+
+### Changes
+
+- Feat: Add tooltipCallback prop
+- Feat: Add fill prop
+
 ## 0.1.0
 
 ### Changes
 
-Feat: Added legendPosition prop
+- Feat: Added legendPosition prop
diff --git a/src/components/LineChart/linechart.stories.tsx b/src/components/LineChart/linechart.stories.tsx
index 5fdcded..0ccf3ca 100644
--- a/src/components/LineChart/linechart.stories.tsx
+++ b/src/components/LineChart/linechart.stories.tsx
@@ -298,6 +298,12 @@ export const WithOnValueChange: Story = {
   },
 }
 
+export const WithTooltipCallback: Story = {
+  args: {
+    tooltipCallback: (props) => console.log(props),
+  },
+}
+
 export const WithLargeTickGap: Story = {
   args: {
     tickGap: 300,