[TooltipContext] Replace on:click event handler with onClick prop (easier to consume when using <Chart tooltip={{ ... }} />)

Author: techniq

.changeset/neat-rockets-dress.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+[TooltipContext] Replace `on:click` event handler with `onClick` prop (easier to consume when using `<Chart tooltip={{ onClick(e) => { ... } }} />`)

packages/layerchart/src/lib/components/Chart.svelte

@@ -108,7 +108,8 @@
 >
   <GeoContext {...geo} let:projection>
     {#if tooltip}
-      <TooltipContext {...tooltip} let:tooltip>
+      {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
+      <TooltipContext {...tooltipProps} let:tooltip>
         <slot
           {aspectRatio}
           {containerHeight}

packages/layerchart/src/lib/components/TooltipContext.svelte

@@ -32,7 +32,6 @@
 
 <script lang="ts">
   import { raise } from 'layercake';
-  import { createEventDispatcher } from 'svelte';
   import { writable } from 'svelte/store';
   import { bisector, max, min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
@@ -46,8 +45,6 @@
   import { isScaleBand, scaleInvert } from '$lib/utils/scales';
   import { quadtreeRects } from '$lib/utils/quadtree';
 
-  const dispatch = createEventDispatcher<{ click: { data: any } }>();
-
   const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, padding } =
     getContext('LayerCake');
 
@@ -89,6 +86,8 @@
   /** Enable debug view (show hit targets, etc) */
   export let debug = false;
 
+  export let onClick: ({ data }: { data: any }) => any = () => {};
+
   const tooltip = writable({ y: 0, x: 0, data: null, show: showTooltip, hide: hideTooltip });
   setTooltipContext(tooltip);
 
@@ -319,13 +318,13 @@
             width: Array.isArray(xValue)
               ? xValue[1] - xValue[0]
               : isScaleBand($xScale)
-              ? $xScale.step()
-              : min($xRange) + x,
+                ? $xScale.step()
+                : min($xRange) + x,
             height: Array.isArray(yValue)
               ? yValue[1] - yValue[0]
               : isScaleBand($yScale)
-              ? $yScale.step()
-              : max($yRange) - y,
+                ? $yScale.step()
+                : max($yRange) - y,
             data: d,
           };
         }
@@ -349,7 +348,7 @@
       on:mousemove={showTooltip}
       on:mouseleave={hideTooltip}
       on:click={(e) => {
-        dispatch('click', { data: $tooltip?.data });
+        onClick({ data: $tooltip?.data });
       }}
     />
   </Html>
@@ -365,7 +364,7 @@
           on:mousemove={(e) => showTooltip(e, point.data)}
           on:mouseleave={hideTooltip}
           on:click={(e) => {
-            dispatch('click', { data: point.data });
+            onClick({ data: point.data });
           }}
         />
       </g>
@@ -386,7 +385,7 @@
           on:mousemove={(e) => showTooltip(e, rect.data)}
           on:mouseleave={hideTooltip}
           on:click={(e) => {
-            dispatch('click', { data: rect.data });
+            onClick({ data: rect.data });
           }}
         />
       {/each}