feat: Add onTooltipClick callback event for all simplified charts (…

…AreaChart, BarChart, LineChart, PieChart, and ScatterChart)
techniq · Jan 15, 2025 · 63bb548 · 63bb548
1 parent da2fdba
commit 63bb548
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 9 deletions.
diff --git a/.changeset/shaggy-cameras-double.md b/.changeset/shaggy-cameras-double.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat: Add `onTooltipClick` callback event for all simplified charts (AreaChart, BarChart, LineChart, PieChart, and ScatterChart)
diff --git a/packages/layerchart/src/lib/components/charts/AreaChart.svelte b/packages/layerchart/src/lib/components/charts/AreaChart.svelte
@@ -39,6 +39,7 @@
     seriesLayout?: typeof seriesLayout;
     renderContext?: typeof renderContext;
     onPointClick?: typeof onPointClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -70,6 +71,9 @@
   export let legend: ComponentProps<Legend> | boolean = false;
   export let points: ComponentProps<Points> | boolean = false;
 
+  /** Event dispatched with current tooltip data */
+  export let onTooltipClick: (e: { data: any }) => void = () => {};
+
   /** Event dispatched when Highlight point is clicked (useful with multiple series) */
   export let onPointClick: (e: {
     data: HighlightPointData;
@@ -169,7 +173,7 @@
   yNice
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'bisect-x' }}
+  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick }}
   {...$$restProps}
   let:x
   let:xScale

diff --git a/packages/layerchart/src/lib/components/charts/BarChart.svelte b/packages/layerchart/src/lib/components/charts/BarChart.svelte
@@ -41,6 +41,7 @@
     seriesLayout?: typeof seriesLayout;
     renderContext?: typeof renderContext;
     onBarClick?: typeof onBarClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -83,6 +84,9 @@
   /** Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding() */
   export let groupPadding = 0;
 
+  /** Event dispatched with current tooltip data */
+  export let onTooltipClick: (e: { data: any }) => void = () => {};
+
   // TODO: Need to find a way to have this play nice with `tooltip={{ mode: 'band' }}`
   /** Event dispatched when individual Bar is clicked (useful with multiple series) */
   export let onBarClick: (e: { data: any; series: (typeof series)[number] }) => void = () => {};
@@ -212,7 +216,7 @@
   c={isVertical ? y : x}
   cRange={['hsl(var(--color-primary))']}
   padding={defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'band' }}
+  tooltip={{ mode: 'band', onClick: onTooltipClick }}
   {...$$restProps}
   let:x
   let:xScale

diff --git a/packages/layerchart/src/lib/components/charts/LineChart.svelte b/packages/layerchart/src/lib/components/charts/LineChart.svelte
@@ -35,6 +35,7 @@
     series?: typeof series;
     renderContext?: typeof renderContext;
     onPointClick?: typeof onPointClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -62,6 +63,9 @@
   export let legend: ComponentProps<Legend> | boolean = false;
   export let points: ComponentProps<Points> | boolean = false;
 
+  /** Event dispatched with current tooltip data */
+  export let onTooltipClick: (e: { data: any }) => void = () => {};
+
   /** Event dispatched when Highlight point is clicked (useful with multiple series) */
   export let onPointClick: (e: {
     data: HighlightPointData;
@@ -117,7 +121,7 @@
   yNice
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'bisect-x' }}
+  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick }}
   {...$$restProps}
   let:x
   let:xScale

diff --git a/packages/layerchart/src/lib/components/charts/PieChart.svelte b/packages/layerchart/src/lib/components/charts/PieChart.svelte
@@ -33,6 +33,7 @@
     value?: typeof value;
     renderContext?: typeof renderContext;
     onArcClick?: typeof onArcClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: ChartProps['data'] = [];
@@ -94,7 +95,11 @@
   /** Center chart.  Override and use `props.group` for more control */
   export let center = placement === 'center';
 
-  /** Event dispatched when individual Arc is clicked */
+  // TODO: Not usable with manual tooltip / arc path.  Use `onArcClick`?
+  /** Event dispatched with current tooltip data */
+  export let onTooltipClick: (e: { data: any }) => void = () => {};
+
+  /** Event dispatched when individual Arc is clicked  (useful with multiple series) */
   export let onArcClick: (e: { data: any; series: (typeof series)[number] }) => void = () => {};
 
   export let props: {
@@ -188,7 +193,11 @@
                 track={{ fill: s.color ?? cScale?.(c(d)), 'fill-opacity': 0.1 }}
                 {tooltip}
                 data={d}
-                on:click={() => onArcClick({ data: d, series: s })}
+                on:click={() => {
+                  onArcClick({ data: d, series: s });
+                  // Workaround for `tooltip={{ mode: 'manual' }}
+                  onTooltipClick({ data: d });
+                }}
                 {...props.arc}
                 {...s.props}
               />
@@ -214,7 +223,11 @@
                     fill={cScale?.(c(arc.data))}
                     data={arc.data}
                     {tooltip}
-                    on:click={() => onArcClick({ data: arc.data, series: s })}
+                    on:click={() => {
+                      onArcClick({ data: arc.data, series: s });
+                      // Workaround for `tooltip={{ mode: 'manual' }}
+                      onTooltipClick({ data: arc.data });
+                    }}
                     {...props.arc}
                     {...s.props}
                   />

diff --git a/packages/layerchart/src/lib/components/charts/ScatterChart.svelte b/packages/layerchart/src/lib/components/charts/ScatterChart.svelte
@@ -30,6 +30,7 @@
     props?: typeof props;
     series?: typeof series;
     renderContext?: typeof renderContext;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -51,6 +52,9 @@
   export let legend: ComponentProps<Legend> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Event dispatched with current tooltip data */
+  export let onTooltipClick: (e: { data: any }) => void = () => {};
+
   export let props: {
     xAxis?: Partial<ComponentProps<Axis>>;
     yAxis?: Partial<ComponentProps<Axis>>;
@@ -100,7 +104,7 @@
   {yScale}
   yNice
   padding={defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'voronoi' }}
+  tooltip={{ mode: 'voronoi', onClick: onTooltipClick }}
   {...$$restProps}
   let:x
   let:xScale

diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -566,6 +566,23 @@
   </div>
 </Preview>
 
+<h2>Tooltip click</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      onTooltipClick={(e) => {
+        console.log(e);
+        alert(JSON.stringify(e));
+      }}
+      {renderContext}
+    />
+  </div>
+</Preview>
+
 <h2>Custom tooltip</h2>
 
 <Preview data={dateSeriesData}>

diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
@@ -988,6 +988,23 @@
   </div>
 </Preview>
 
+<h2>Tooltip click</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      onTooltipClick={(e) => {
+        console.log(e);
+        alert(JSON.stringify(e));
+      }}
+      {renderContext}
+    />
+  </div>
+</Preview>
+
 <h2>Custom tooltip</h2>
 
 <Preview data={dateSeriesData}>

diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -627,6 +627,23 @@
   </div>
 </Preview>
 
+<h2>Tooltip click</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      onTooltipClick={(e) => {
+        console.log(e);
+        alert(JSON.stringify(e));
+      }}
+      {renderContext}
+    />
+  </div>
+</Preview>
+
 <h2>Custom tooltip</h2>
 
 <Preview data={dateSeriesData}>

diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
@@ -49,15 +49,15 @@
   </div>
 </Preview>
 
-<h2>onArcClick</h2>
+<h2>onTooltipClick</h2>
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
     <PieChart
       {data}
       key="fruit"
       value="value"
-      onArcClick={(e) => {
+      onTooltipClick={(e) => {
         console.log(e);
         alert(JSON.stringify(e));
       }}
@@ -301,6 +301,27 @@
   </div>
 </Preview>
 
+<h2>Series data (arc click)</h2>
+
+<Preview data={dataByYear}>
+  <div class="h-[300px] p-4 border rounded">
+    <PieChart
+      key="fruit"
+      value="value"
+      series={Array.from(dataByYear, ([key, data]) => ({ key, data }))}
+      outerRadius={-25}
+      innerRadius={-20}
+      cornerRadius={5}
+      padAngle={0.01}
+      onArcClick={(e) => {
+        console.log(e);
+        alert(JSON.stringify(e));
+      }}
+      {renderContext}
+    />
+  </div>
+</Preview>
+
 <h2>Inner component props (Arc class)</h2>
 
 <Preview {data}>

diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
@@ -286,6 +286,23 @@
   </div>
 </Preview>
 
+<h2>Tooltip click</h2>
+
+<Preview data={spiralData}>
+  <div class="h-[400px] p-4 border rounded">
+    <ScatterChart
+      data={spiralData}
+      x="x"
+      y="y"
+      onTooltipClick={(e) => {
+        console.log(e);
+        alert(JSON.stringify(e));
+      }}
+      {renderContext}
+    />
+  </div>
+</Preview>
+
 <h2>Custom tooltip</h2>
 
 <Preview data={spiralData}>