Feat: tooltipCallback (#41)

* add area draft * fix tooltipCallback * update tooltip callback * tootlip callback barchart * fix tooltip callbacks * update changelog * update callback deps * update callback * fix * Update deps --------- Co-authored-by: mbauchet <[email protected]>
tremorlabs · Jun 20, 2024 · 2799a49 · 2799a49
1 parent 1f15a5d
commit 2799a49
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 11 deletions.
diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
@@ -1,4 +1,4 @@
-// Tremor Raw AreaChart [v0.2.0]
+// Tremor Raw AreaChart [v0.2.1]
 
 "use client"
 
@@ -403,15 +403,37 @@ interface ChartTooltipProps {
   label: string
   categoryColors: Map<string, string>
   valueFormatter: (value: number) => string
+  tooltipCallback?: TooltipCallback
 }
 
+type TooltipCallbackProps = Pick<
+  ChartTooltipProps,
+  "active" | "payload" | "label"
+>
+
+type TooltipCallback = (tooltipCallbackContent: TooltipCallbackProps) => void
+
 const ChartTooltip = ({
   active,
   payload,
   label,
   categoryColors,
   valueFormatter,
+  tooltipCallback,
 }: ChartTooltipProps) => {
+  React.useEffect(() => {
+    if (tooltipCallback && payload) {
+      const filteredPayload = payload.map((item: any) => ({
+        category: item.dataKey,
+        value: item.value,
+        index: item.payload.date,
+        color: categoryColors.get(item.dataKey) as AvailableChartColorsKeys,
+        payload: item.payload,
+      }))
+      tooltipCallback({ active, payload: filteredPayload, label })
+    }
+  }, [label, active])
+
   if (active && payload) {
     const filteredPayload = payload.filter((item: any) => item.type !== "none")
 
@@ -509,6 +531,7 @@ interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   yAxisLabel?: string
   type?: "default" | "stacked" | "percent"
   legendPosition?: "left" | "center" | "right"
+  tooltipCallback?: TooltipCallback
   fill?: "gradient" | "solid" | "none"
 }
 
@@ -541,6 +564,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
       yAxisLabel,
       type = "default",
       legendPosition = "right",
+      tooltipCallback,
       fill = "gradient",
       ...other
     } = props
@@ -756,6 +780,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
                       label={label}
                       valueFormatter={valueFormatter}
                       categoryColors={categoryColors}
+                      tooltipCallback={tooltipCallback}
                     />
                   )
                 ) : (
@@ -785,7 +810,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
               />
             ) : null}
             {categories.map((category) => {
-              const categoryId = `${areaId}-${category}`
+              const categoryId = `${areaId}-${category.replace(/[^a-zA-Z0-9]/g, "")}`
               return (
                 <React.Fragment key={category}>
                   <defs key={category}>
@@ -957,4 +982,4 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
 
 AreaChart.displayName = "AreaChart"
 
-export { AreaChart, type AreaChartEventProps }
+export { AreaChart, type AreaChartEventProps, type TooltipCallbackProps }
diff --git a/src/components/AreaChart/areachart.stories.tsx b/src/components/AreaChart/areachart.stories.tsx
@@ -294,6 +294,12 @@ export const WithOnValueChange: Story = {
   },
 }
 
+export const WithTooltipCallback: Story = {
+  args: {
+    tooltipCallback: (props) => console.log(JSON.stringify(props.payload)),
+  },
+}
+
 export const WithLargeTickGap: Story = {
   args: {
     tickGap: 300,

diff --git a/src/components/AreaChart/changelog.md b/src/components/AreaChart/changelog.md
@@ -1,9 +1,16 @@
 # Tremor Raw AreaChart Changelog
 
+## 0.2.1
+
+### Changes
+
+- Fix: Gradient category id
+
 ## 0.2.0
 
 ### Changes
 
+- Feat: Add tooltipCallback prop
 - Feat: Add fill prop
 
 ## 0.1.0

diff --git 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"
 
@@ -460,15 +460,37 @@ interface ChartTooltipProps {
   label: string
   categoryColors: Map<string, string>
   valueFormatter: (value: number) => string
+  tooltipCallback?: TooltipCallback
 }
 
+type TooltipCallbackProps = Pick<
+  ChartTooltipProps,
+  "active" | "payload" | "label"
+>
+
+type TooltipCallback = (tooltipCallbackContent: TooltipCallbackProps) => void
+
 const ChartTooltip = ({
   active,
   payload,
   label,
   categoryColors,
   valueFormatter,
+  tooltipCallback,
 }: ChartTooltipProps) => {
+  React.useEffect(() => {
+    if (tooltipCallback && payload) {
+      const filteredPayload = payload.map((item: any) => ({
+        category: item.dataKey,
+        value: item.value,
+        index: item.payload.date,
+        color: categoryColors.get(item.dataKey) as AvailableChartColorsKeys,
+        payload: item.payload,
+      }))
+      tooltipCallback({ active, payload: filteredPayload, label })
+    }
+  }, [label, active])
+
   if (active && payload) {
     const filteredPayload = payload.filter((item: any) => item.type !== "none")
 
@@ -562,6 +584,7 @@ interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
   layout?: "vertical" | "horizontal"
   type?: "default" | "stacked" | "percent"
   legendPosition?: "left" | "center" | "right"
+  tooltipCallback?: TooltipCallback
 }
 
 const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
@@ -594,6 +617,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
       layout = "horizontal",
       type = "default",
       legendPosition = "right",
+      tooltipCallback,
       ...other
     } = props
     const paddingValue = !showXAxis && !showYAxis ? 0 : 20
@@ -796,6 +820,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
                       label={label}
                       valueFormatter={valueFormatter}
                       categoryColors={categoryColors}
+                      tooltipCallback={tooltipCallback}
                     />
                   )
                 ) : (
@@ -855,4 +880,4 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
 
 BarChart.displayName = "BarChart"
 
-export { BarChart, type BarChartEventProps }
+export { BarChart, type BarChartEventProps, type TooltipCallbackProps }
diff --git a/src/components/BarChart/barchart.stories.tsx b/src/components/BarChart/barchart.stories.tsx
@@ -267,6 +267,12 @@ export const WithOnValueChange: Story = {
   },
 }
 
+export const WithTooltipCallback: Story = {
+  args: {
+    tooltipCallback: (props) => console.log(JSON.stringify(props.payload)),
+  },
+}
+
 export const WithLargeTickGap: Story = {
   args: {
     tickGap: 300,

diff --git 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
@@ -1,4 +1,4 @@
-// Tremor Raw LineChart [v0.1.0]
+// Tremor Raw LineChart [v0.2.0]
 
 "use client"
 
@@ -402,15 +402,37 @@ interface ChartTooltipProps {
   label: string
   categoryColors: Map<string, string>
   valueFormatter: (value: number) => string
+  tooltipCallback?: TooltipCallback
 }
 
+type TooltipCallbackProps = Pick<
+  ChartTooltipProps,
+  "active" | "payload" | "label"
+>
+
+type TooltipCallback = (tooltipCallbackContent: TooltipCallbackProps) => void
+
 const ChartTooltip = ({
   active,
   payload,
   label,
   categoryColors,
   valueFormatter,
+  tooltipCallback,
 }: ChartTooltipProps) => {
+  React.useEffect(() => {
+    if (tooltipCallback && payload) {
+      const filteredPayload = payload.map((item: any) => ({
+        category: item.dataKey,
+        value: item.value,
+        index: item.payload.date,
+        color: categoryColors.get(item.dataKey) as AvailableChartColorsKeys,
+        payload: item.payload,
+      }))
+      tooltipCallback({ active, payload: filteredPayload, label })
+    }
+  }, [label, active])
+
   if (active && payload) {
     const filteredPayload = payload.filter((item: any) => item.type !== "none")
 
@@ -507,6 +529,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 +560,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
       xAxisLabel,
       yAxisLabel,
       legendPosition = "right",
+      tooltipCallback,
       ...other
     } = props
     const paddingValue = !showXAxis && !showYAxis ? 0 : 20
@@ -708,6 +732,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
                       label={label}
                       valueFormatter={valueFormatter}
                       categoryColors={categoryColors}
+                      tooltipCallback={tooltipCallback}
                     />
                   )
                 ) : (
@@ -875,4 +900,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
@@ -1,7 +1,13 @@
 # Tremor Raw LineChart Changelog
 
+## 0.2.0
+
+### Changes
+
+- Feat: Add tooltipCallback 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
@@ -298,6 +298,12 @@ export const WithOnValueChange: Story = {
   },
 }
 
+export const WithTooltipCallback: Story = {
+  args: {
+    tooltipCallback: (props) => console.log(JSON.stringify(props.payload)),
+  },
+}
+
 export const WithLargeTickGap: Story = {
   args: {
     tickGap: 300,

diff --git a/src/components/SparkChart/SparkChart.tsx b/src/components/SparkChart/SparkChart.tsx
@@ -1,4 +1,4 @@
-// Tremor Raw Spark Chart [v0.0.0]
+// Tremor Raw Spark Chart [v0.1.1]
 
 "use client"
 
@@ -96,7 +96,7 @@ const SparkAreaChart = React.forwardRef<HTMLDivElement, SparkAreaChartProps>(
             <YAxis hide={true} domain={yAxisDomain as AxisDomain} />
 
             {categories.map((category) => {
-              const categoryId = `${areaId}-${category}`
+              const categoryId = `${areaId}-${category.replace(/[^a-zA-Z0-9]/g, "")}`
               return (
                 <React.Fragment key={category}>
                   <defs>

diff --git a/src/components/SparkChart/changelog.md b/src/components/SparkChart/changelog.md
@@ -1,7 +1,13 @@
 # Tremor Raw SparkChart Changelog
 
+## 0.1.1
+
+### Changes
+
+- Fix: Gradient category id
+
 ## 0.1.0
 
 ### Changes
 
-Feat: Add legendPosition prop
+- Feat: Add legendPosition prop