layerchart 2.0.0-next.24 → 2.0.0-next.26

package/dist/components/charts/ArcChart.svelte

@@ -384,7 +384,9 @@
         ]}
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...restProps}
-  tooltip={tooltip === false ? false : props.tooltip?.context}
+  tooltip={tooltip === false
+    ? false
+    : { ...props.tooltip?.context, ...(typeof tooltip === 'object' ? tooltip : null) }}
 >
   {#snippet children({ context })}
     {@const snippetProps = {

package/dist/components/charts/AreaChart.svelte

@@ -443,10 +443,11 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'bisect-x',
+        mode: 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

package/dist/components/charts/BarChart.svelte

@@ -455,6 +455,7 @@
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

package/dist/components/charts/LineChart.svelte

@@ -343,10 +343,11 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'bisect-x',
+        mode: 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

package/dist/components/charts/PieChart.svelte

@@ -409,7 +409,9 @@
         ]}
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...restProps}
-  tooltip={tooltip === false ? false : props.tooltip?.context}
+  tooltip={tooltip === false
+    ? false
+    : { ...props.tooltip?.context, ...(typeof tooltip === 'object' ? tooltip : null) }}
 >
   {#snippet children({ context })}
     {@const snippetProps = {

package/dist/components/charts/ScatterChart.svelte

@@ -253,10 +253,11 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'voronoi',
+        mode: 'quadtree',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

package/dist/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')}>

package/dist/components/tooltip/TooltipContext.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Without } from '../../utils/types.js';
-type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual';
+type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'quadtree-x' | 'quadtree-y' | 'manual';
 export type TooltipContextValue<T = any> = {
     x: number;
     y: number;

package/dist/utils/array.d.ts

@@ -11,3 +11,13 @@ export declare function extent<T extends Numeric>(iterable: Parameters<typeof d3
  * of making a set
  */
 export declare function arraysEqual(arr1: unknown[], arr2: unknown[]): boolean;
+/**
+ * Add `lanes` property to each element in the data array support densely packing.
+ * This is useful for visualizing overlapping events in a timeline / Gantt chart.
+ */
+export declare function applyLanes<T extends Record<string, any>>(data: T[], options?: {
+    start: keyof T;
+    end: keyof T;
+}): (T & {
+    lane: number;
+})[];

package/dist/utils/array.js

@@ -18,3 +18,20 @@ export function arraysEqual(arr1, arr2) {
         return arr2.includes(k);
     });
 }
+/**
+ * Add `lanes` property to each element in the data array support densely packing.
+ * This is useful for visualizing overlapping events in a timeline / Gantt chart.
+ */
+export function applyLanes(data, options = { start: 'start', end: 'end' }) {
+    const result = [];
+    let stack = [];
+    for (const d of data) {
+        let lane = stack.findIndex((s) => s[options.end] <= d[options.start] && s[options.start] < d[options.start]);
+        if (lane === -1) {
+            lane = stack.length;
+        }
+        result.push({ ...d, lane });
+        stack[lane] = d;
+    }
+    return result;
+}

package/dist/utils/array.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/array.test.js

@@ -0,0 +1,162 @@
+import { describe, it, expect } from 'vitest';
+import { applyLanes } from './array.js';
+describe('applyLanes', () => {
+    it('should assign same lane to non-overlapping events', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+            { id: 2, start: new Date('2023-01-03'), end: new Date('2023-01-05') },
+            { id: 3, start: new Date('2023-01-06'), end: new Date('2023-01-08') },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+            { id: 2, start: new Date('2023-01-03'), end: new Date('2023-01-05'), lane: 0 },
+            { id: 3, start: new Date('2023-01-06'), end: new Date('2023-01-08'), lane: 0 },
+        ]);
+    });
+    it('should assign different lanes to overlapping events', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-03') },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04') },
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-05') },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-03'), lane: 0 },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04'), lane: 1 },
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-05'), lane: 2 },
+        ]);
+    });
+    it('should reuse lanes when events no longer overlap', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+            { id: 2, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03') },
+            { id: 3, start: new Date('2023-01-04'), end: new Date('2023-01-06') }, // starts after id: 1 ends
+            { id: 4, start: new Date('2023-01-05'), end: new Date('2023-01-07') }, // starts after id: 2 ends
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+            { id: 2, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03'), lane: 1 },
+            { id: 3, start: new Date('2023-01-04'), end: new Date('2023-01-06'), lane: 0 }, // reuses lane 0
+            { id: 4, start: new Date('2023-01-05'), end: new Date('2023-01-07'), lane: 1 }, // reuses lane 1
+        ]);
+    });
+    it('should handle events that start exactly when another ends', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04') }, // starts exactly when id: 1 ends
+            { id: 3, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03') }, // overlaps with both
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04'), lane: 0 }, // can reuse lane 0
+            { id: 3, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03'), lane: 1 }, // overlaps, needs new lane
+        ]);
+    });
+    it('should work with string keys for start and end', () => {
+        const data = [
+            { name: 'Task 1', startTime: new Date('2023-01-01'), endTime: new Date('2023-01-03') },
+            { name: 'Task 2', startTime: new Date('2023-01-02'), endTime: new Date('2023-01-04') },
+        ];
+        const result = applyLanes(data, { start: 'startTime', end: 'endTime' });
+        expect(result).toEqual([
+            {
+                name: 'Task 1',
+                startTime: new Date('2023-01-01'),
+                endTime: new Date('2023-01-03'),
+                lane: 0,
+            },
+            {
+                name: 'Task 2',
+                startTime: new Date('2023-01-02'),
+                endTime: new Date('2023-01-04'),
+                lane: 1,
+            },
+        ]);
+    });
+    it('should handle empty array', () => {
+        const data = [];
+        const result = applyLanes(data);
+        expect(result).toEqual([]);
+    });
+    it('should handle single event', () => {
+        const data = [{ id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') }];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+        ]);
+    });
+    it('should handle complex overlapping scenario', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-05') }, // long event
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-03') }, // short event inside
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-04') }, // overlaps with both
+            { id: 4, start: new Date('2023-01-03'), end: new Date('2023-01-04T12:00:00') }, // overlaps with 1 and 3
+            { id: 5, start: new Date('2023-01-06'), end: new Date('2023-01-08') }, // separate event
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-05'), lane: 0 },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-03'), lane: 1 },
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-04'), lane: 2 },
+            { id: 4, start: new Date('2023-01-03'), end: new Date('2023-01-04T12:00:00'), lane: 1 }, // can reuse lane 1 since id: 2 ended
+            { id: 5, start: new Date('2023-01-06'), end: new Date('2023-01-08'), lane: 0 }, // can reuse lane 0 since id: 1 ended
+        ]);
+    });
+    it('should preserve all original properties', () => {
+        const data = [
+            {
+                id: 1,
+                start: new Date('2023-01-01'),
+                end: new Date('2023-01-02'),
+                name: 'First',
+                priority: 'high',
+                metadata: { foo: 'bar' },
+            },
+            {
+                id: 2,
+                start: new Date('2023-01-01T12:00:00'),
+                end: new Date('2023-01-03'),
+                name: 'Second',
+                priority: 'low',
+                metadata: { baz: 'qux' },
+            },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            {
+                id: 1,
+                start: new Date('2023-01-01'),
+                end: new Date('2023-01-02'),
+                name: 'First',
+                priority: 'high',
+                metadata: { foo: 'bar' },
+                lane: 0,
+            },
+            {
+                id: 2,
+                start: new Date('2023-01-01T12:00:00'),
+                end: new Date('2023-01-03'),
+                name: 'Second',
+                priority: 'low',
+                metadata: { baz: 'qux' },
+                lane: 1,
+            },
+        ]);
+    });
+    it('should work with numeric values', () => {
+        const data = [
+            { id: 1, start: 0, end: 3 },
+            { id: 2, start: 1, end: 4 },
+            { id: 3, start: 5, end: 7 },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: 0, end: 3, lane: 0 },
+            { id: 2, start: 1, end: 4, lane: 1 },
+            { id: 3, start: 5, end: 7, lane: 0 }, // can reuse lane 0 since id: 1 ended
+        ]);
+    });
+});

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.24",
+  "version": "2.0.0-next.26",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.48",
@@ -56,7 +56,7 @@
     "svelte": "5.34.1",
     "svelte-check": "^4.2.1",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "2.0.0-next.11",
+    "svelte-ux": "2.0.0-next.13",
     "svelte2tsx": "^0.7.39",
     "tailwindcss": "^4.1.10",
     "topojson-client": "^3.1.0",