Simplified chart click event / callbacks (#322)

* docs: Reorder some examples * feat(Highlight): Add `onAreaClick`, `onBarClick`, and `onPointClick` callback events * feat(AreaChart|LineChart): Add `onPointClick` callback event (useful for multi-series charts) * feat(Bars): Add `onBarClick` callback event * feat(BarChart): Add `onBarClick` callback event (useful for multi-series charts) * docs: Refine comments and click examples * feat(PieChart): Add `onArcClick` callback event * feat: Add `onTooltipClick` callback event for all simplified charts (AreaChart, BarChart, LineChart, PieChart, and ScatterChart)
techniq · Jan 15, 2025 · c4a2a60 · c4a2a60
1 parent 42796f6
commit c4a2a60
Show file tree

Hide file tree

Showing 19 changed files with 409 additions and 102 deletions.
diff --git a/.changeset/chatty-apes-wink.md b/.changeset/chatty-apes-wink.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Highlight): Add `onAreaClick`, `onBarClick`, and `onPointClick` callback events
diff --git a/.changeset/cuddly-poems-prove.md b/.changeset/cuddly-poems-prove.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(BarChart): Add `onBarClick` callback event (useful for multi-series charts)
diff --git a/.changeset/lazy-weeks-dance.md b/.changeset/lazy-weeks-dance.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(AreaChart|LineChart): Add `onPointClick` callback event (useful for multi-series charts)
diff --git a/.changeset/pretty-taxis-sin.md b/.changeset/pretty-taxis-sin.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Bars): Add `onBarClick` callback event
diff --git a/.changeset/real-shrimps-attend.md b/.changeset/real-shrimps-attend.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(PieChart): Add `onArcClick` callback event
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/Bars.svelte b/packages/layerchart/src/lib/components/Bars.svelte
@@ -47,6 +47,9 @@
   export let spring: ComponentProps<Rect>['spring'] = undefined;
   export let tweened: ComponentProps<Rect>['tweened'] = undefined;
 
+  /** Event dispatched when individual Bar is clicked */
+  export let onBarClick: (e: { data: any }) => void = () => {};
+
   $: _data = chartDataArray(data ?? $contextData);
 </script>
 
@@ -66,6 +69,7 @@
         {inset}
         {spring}
         {tweened}
+        on:click={() => onBarClick({ data: d })}
         {...$$restProps}
       />
     {/each}

diff --git a/packages/layerchart/src/lib/components/Highlight.svelte b/packages/layerchart/src/lib/components/Highlight.svelte
@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+  export type HighlightPointData = { x: any; y: any };
+</script>
+
 <script lang="ts">
   import { type ComponentProps } from 'svelte';
   import { max, min } from 'd3-array';
@@ -62,10 +66,14 @@
   /** Set to false to disable spring transitions */
   export let motion = true;
 
+  export let onAreaClick: (e: { data: any }) => void = () => {};
+  export let onBarClick: (e: { data: any }) => void = () => {};
+  export let onPointClick: (e: { point: (typeof _points)[number]; data: any }) => void = () => {};
+
   const _x = accessor(x);
   const _y = accessor(y);
 
-  let _points: { x: number; y: number; fill: string }[] = [];
+  let _points: { x: number; y: number; fill: string; data: HighlightPointData }[] = [];
   let _lines: { x1: number; y1: number; x2: number; y2: number }[] = [];
   let _area = {
     x: 0,
@@ -217,6 +225,10 @@
               x: $xScale(seriesPoint.point[1]) + xOffset,
               y: yCoord + yOffset,
               fill: $config.c ? $cGet(seriesPoint.series) : null,
+              data: {
+                x: seriesPoint.point[1],
+                y: yValue,
+              },
             };
           });
         }
@@ -229,6 +241,10 @@
             y: yCoord + yOffset,
             // TODO: is there a better way to expose the series key/value?
             fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
+            data: {
+              x: xValue, // TODO: use highlightData[$key]?
+              y: yValue,
+            },
           };
         });
       }
@@ -256,6 +272,10 @@
             x: xCoord + xOffset,
             y: $yScale(seriesPoint.point[1]) + yOffset,
             fill: $config.c ? $cGet(seriesPoint.series) : null,
+            data: {
+              x: xValue,
+              y: seriesPoint.point[1],
+            },
           }));
         }
       } else {
@@ -267,6 +287,10 @@
             y: yItem + yOffset,
             // TODO: is there a better way to expose the series key/value?
             fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
+            data: {
+              x: xValue,
+              y: yValue, // TODO: use highlightData[$key] ?
+            },
           };
         });
       }
@@ -276,6 +300,10 @@
           x: xCoord + xOffset,
           y: yCoord + yOffset,
           fill: $config.c ? $cGet(highlightData) : null,
+          data: {
+            x: xValue,
+            y: yValue,
+          },
         },
       ];
     } else {
@@ -322,7 +350,7 @@
           !area.fill && 'fill-surface-content/5',
           typeof area === 'object' ? area.class : null
         )}
-        on:click
+        on:click={() => onAreaClick({ data: highlightData })}
       />
     </slot>
   {/if}
@@ -343,7 +371,7 @@
           !bar.fill && 'fill-primary',
           typeof bar === 'object' ? bar.class : null
         )}
-        on:click
+        on:click={() => onBarClick({ data: highlightData })}
       />
     </slot>
   {/if}
@@ -382,6 +410,7 @@
             !point.fill && (typeof points === 'boolean' || !points.fill) && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}
+          on:click={() => onPointClick({ point, data: highlightData })}
         />
       {/each}
     </slot>

diff --git a/packages/layerchart/src/lib/components/charts/AreaChart.svelte b/packages/layerchart/src/lib/components/charts/AreaChart.svelte
@@ -10,7 +10,7 @@
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
-  import Highlight from '../Highlight.svelte';
+  import Highlight, { type HighlightPointData } from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
   import Legend from '../Legend.svelte';
   import Line from '../Line.svelte';
@@ -38,6 +38,8 @@
     series?: typeof series;
     seriesLayout?: typeof seriesLayout;
     renderContext?: typeof renderContext;
+    onPointClick?: typeof onPointClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -69,6 +71,15 @@
   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;
+    series: (typeof series)[number];
+  }) => void = () => {};
+
   export let props: {
     xAxis?: Partial<ComponentProps<Axis>>;
     yAxis?: Partial<ComponentProps<Axis>>;
@@ -162,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
@@ -262,6 +273,7 @@
             y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? (s.data ? undefined : s.key))}
             points={{ fill: s.color }}
             lines={i == 0}
+            onPointClick={(e) => onPointClick({ ...e, series: s })}
             {...props.highlight}
           />
         {/each}

diff --git a/packages/layerchart/src/lib/components/charts/BarChart.svelte b/packages/layerchart/src/lib/components/charts/BarChart.svelte
@@ -40,6 +40,8 @@
     series?: typeof series;
     seriesLayout?: typeof seriesLayout;
     renderContext?: typeof renderContext;
+    onBarClick?: typeof onBarClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -82,6 +84,13 @@
   /** 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 = () => {};
+
   $: xScale = $$props.xScale ?? (isVertical ? scaleBand().padding(bandPadding) : scaleLinear());
   $: xBaseline = isVertical ? undefined : 0;
 
@@ -173,6 +182,7 @@
       radius: 4,
       strokeWidth: 1,
       fill: s.color,
+      onBarClick: (e) => onBarClick({ data: e.data, series: s }),
       ...props.bars,
       ...s.props,
     };
@@ -206,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
@@ -7,7 +7,7 @@
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
-  import Highlight from '../Highlight.svelte';
+  import Highlight, { type HighlightPointData } from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
   import Legend from '../Legend.svelte';
   import Points from '../Points.svelte';
@@ -34,6 +34,8 @@
     rule?: typeof rule;
     series?: typeof series;
     renderContext?: typeof renderContext;
+    onPointClick?: typeof onPointClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -61,6 +63,15 @@
   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;
+    series: (typeof series)[number];
+  }) => void = () => {};
+
   export let props: {
     xAxis?: Partial<ComponentProps<Axis>>;
     yAxis?: Partial<ComponentProps<Axis>>;
@@ -110,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
@@ -206,6 +217,7 @@
             y={s.value ?? (s.data ? undefined : s.key)}
             points={{ fill: s.color }}
             lines={i === 0}
+            onPointClick={(e) => onPointClick({ ...e, series: s })}
             {...props.highlight}
           />
         {/each}

diff --git a/packages/layerchart/src/lib/components/charts/PieChart.svelte b/packages/layerchart/src/lib/components/charts/PieChart.svelte
@@ -30,8 +30,10 @@
     props?: typeof props;
     range?: typeof range;
     series?: typeof series;
-    value?: typeof label;
+    value?: typeof value;
     renderContext?: typeof renderContext;
+    onArcClick?: typeof onArcClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: ChartProps['data'] = [];
@@ -93,6 +95,13 @@
   /** Center chart.  Override and use `props.group` for more control */
   export let center = placement === 'center';
 
+  // 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: {
     pie?: Partial<ComponentProps<Pie>>;
     group?: Partial<ComponentProps<Group>>;
@@ -184,6 +193,11 @@
                 track={{ fill: s.color ?? cScale?.(c(d)), 'fill-opacity': 0.1 }}
                 {tooltip}
                 data={d}
+                on:click={() => {
+                  onArcClick({ data: d, series: s });
+                  // Workaround for `tooltip={{ mode: 'manual' }}
+                  onTooltipClick({ data: d });
+                }}
                 {...props.arc}
                 {...s.props}
               />
@@ -209,6 +223,11 @@
                     fill={cScale?.(c(arc.data))}
                     data={arc.data}
                     {tooltip}
+                    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