Merge pull request #578 from techniq:tooltip-quadtree-x/y

feat(TooltipContext): Support `quadtree-x` and `quadtree-y` modes and update AreaChart, LineChart, and ScatterChart default modes.  Resolves #525

Author: techniq

.changeset/beige-doodles-shout.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(ScatterChart): Change default tooltip mode from `voronoi` to `quadtree`

.changeset/breezy-donuts-sniff.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(TooltipContext): Support `quadtree-x` and `quadtree-y` modes. Resolves #525

.changeset/honest-hoops-peel.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(LineChart): Change default tooltip mode from `bisect-x` to `quadtree-x` (works with catagorical data and does not require data to be sorted)

.changeset/sharp-rockets-jam.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(AreaChart): Change default tooltip mode from `bisect-x` to `quadtree-x` (works with catagorical data and does not require data to be sorted)

packages/layerchart/src/lib/components/charts/AreaChart.svelte

@@ -443,7 +443,7 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'bisect-x',
+        mode: 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,

packages/layerchart/src/lib/components/charts/LineChart.svelte

@@ -343,7 +343,7 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'bisect-x',
+        mode: 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,

packages/layerchart/src/lib/components/charts/ScatterChart.svelte

@@ -253,7 +253,7 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'voronoi',
+        mode: 'quadtree',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,

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

@@ -6,13 +6,15 @@
   const _TooltipContext = new Context<TooltipContextValue>('TooltipContext');
 
   type TooltipMode =
-    | 'bisect-x'
-    | 'bisect-y'
+    | 'bisect-x' // requires values to be sorted
+    | 'bisect-y' // requires values to be sorted
     | 'band'
-    | 'bisect-band'
+    | 'bisect-band' // requires values to be sorted
     | 'bounds'
     | 'voronoi'
     | 'quadtree'
+    | 'quadtree-x' // ignores y values (constant 0)
+    | 'quadtree-y' // ignores x values (constant 0)
     | 'manual';
 
   export type TooltipContextValue<T = any> = {
@@ -298,7 +300,6 @@
     }
 
     // If tooltipData not provided already (voronoi, etc), attempt to find it
-    // TODO: When using bisect-x/y/band, values should be sorted.  Typically they are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
       switch (mode) {
         case 'bisect-x': {
@@ -311,6 +312,7 @@
             xValueAtPoint = scaleInvert(ctx.xScale, point.x - ctx.padding.left);
           }
 
+          // Requires values to be sorted
           const index = bisectX(ctx.flatData, xValueAtPoint, 1);
           const previousValue = ctx.flatData[index - 1];
           const currentValue = ctx.flatData[index];
@@ -322,6 +324,7 @@
           // `y` value at pointer coordinate
           const yValueAtPoint = scaleInvert(ctx.yScale, point.y - ctx.padding.top);
 
+          // Requires values to be sorted
           const index = bisectY(ctx.flatData, yValueAtPoint, 1);
           const previousValue = ctx.flatData[index - 1];
           const currentValue = ctx.flatData[index];
@@ -339,6 +342,7 @@
             const bandData = ctx.flatData
               .filter((d) => ctx.x(d) === xValueAtPoint)
               .sort(sortFunc(ctx.y as () => any)); // sort for bisect
+            // Requires values to be sorted
             const index = bisectY(bandData, yValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
@@ -348,6 +352,7 @@
             const bandData = ctx.flatData
               .filter((d) => ctx.y(d) === yValueAtPoint)
               .sort(sortFunc(ctx.x as () => any)); // sort for bisect
+            // Requires values to be sorted
             const index = bisectX(bandData, xValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
@@ -358,6 +363,8 @@
           break;
         }
 
+        case 'quadtree-x':
+        case 'quadtree-y':
         case 'quadtree': {
           tooltipData = quadtree?.find(
             point.x - ctx.padding.left,
@@ -406,9 +413,13 @@
   }
 
   const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
-    if (mode === 'quadtree') {
+    if (['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)) {
       return d3Quadtree()
         .x((d) => {
+          if (mode === 'quadtree-y') {
+            return 0;
+          }
+
           if (geoCtx.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
@@ -429,6 +440,10 @@
           }
         })
         .y((d) => {
+          if (mode === 'quadtree-x') {
+            return 0;
+          }
+
           if (geoCtx.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
@@ -509,7 +524,7 @@
     });
 
   const triggerPointerEvents = $derived(
-    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)
+    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)
   );
 
   function onPointerEnter(e: PointerEvent | MouseEvent | TouchEvent) {
@@ -646,7 +661,7 @@
           {/each}
         </g>
       </Svg>
-    {:else if mode === 'quadtree' && debug}
+    {:else if ['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode) && debug}
       <Svg pointerEvents={false}>
         <ChartClipPath>
           <g class={layerClass('tooltip-quadtree-g')}>

packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte

@@ -22,12 +22,13 @@
   import { curveBasis, curveCatmullRom, curveStepAfter } from 'd3-shape';
   import { group } from 'd3-array';
   import { timeDay } from 'd3-time';
+  import { scaleBand, scalePoint } from 'd3-scale';
   import { Button, Field, Kbd, Switch } from 'svelte-ux';
   import { format, sortFunc } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
-  import { createDateSeries, randomWalk } from '$lib/utils/genData.js';
+  import { createDateSeries, longData, randomWalk } from '$lib/utils/genData.js';
   import type { DomainType } from '$lib/utils/scales.svelte.js';
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
@@ -348,7 +349,7 @@
   </div>
 </Preview>
 
-<h2>Series (voronoi tooltip with highlight)</h2>
+<h2>Series (individual tooltip with highlight)</h2>
 
 <Preview data={multiSeriesDataByFruit}>
   <div class="h-[300px] p-4 border rounded-sm">
@@ -372,7 +373,7 @@
           color: 'var(--color-warning)',
         },
       ]}
-      props={{ tooltip: { context: { mode: 'voronoi' } } }}
+      props={{ tooltip: { context: { mode: 'quadtree' } } }}
       {renderContext}
       {debug}
     >
@@ -1322,6 +1323,40 @@
   </div>
 </Preview>
 
+<h2>Point scale</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded-sm">
+    <AreaChart
+      data={longData.filter((d) => d.year === 2019)}
+      xScale={scalePoint()}
+      x="fruit"
+      y="value"
+      {renderContext}
+      {debug}
+    />
+  </div>
+</Preview>
+
+<h2>Band scale</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded-sm">
+    <AreaChart
+      data={longData.filter((d) => d.year === 2019)}
+      xScale={scaleBand()}
+      x="fruit"
+      y="value"
+      tooltip={{
+        mode: 'band',
+        debug,
+      }}
+      {renderContext}
+      {debug}
+    />
+  </div>
+</Preview>
+
 <h2>Custom chart</h2>
 
 <Preview data={dateSeriesData}>

packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte

@@ -629,7 +629,7 @@
           y="value"
           yDomain={[0, null]}
           padding={{ left: 16, bottom: 24 }}
-          tooltip={{ mode: 'bisect-x' }}
+          tooltip={{ mode: 'quadtree-x' }}
           brush={{
             resetOnEnd: true,
             onBrushEnd: (e) => {