layerchart 2.0.0-next.25 → 2.0.0-next.27

package/dist/utils/array.d.ts

@@ -1,5 +1,6 @@
 import type { Numeric } from 'd3-array';
 import { extent as d3extent } from 'd3-array';
+import { type Accessor } from './common.js';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
@@ -11,3 +12,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: Accessor<T>;
+    end: Accessor<T>;
+}): (T & {
+    lane: number;
+})[];

package/dist/utils/array.js

@@ -1,4 +1,5 @@
 import { extent as d3extent } from 'd3-array';
+import { accessor } from './common.js';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
@@ -18,3 +19,25 @@ 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 = [];
+    const startAccessor = accessor(options.start);
+    const endAccessor = accessor(options.end);
+    for (const d of data) {
+        let lane = stack.findIndex((s) => endAccessor(s) <= startAccessor(d) && startAccessor(s) < startAccessor(d));
+        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,200 @@
+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 work with nested string keys for start and end', () => {
+        const data = [
+            { name: 'Task 1', duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') } },
+            { name: 'Task 2', duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') } },
+        ];
+        const result = applyLanes(data, { start: 'duration.start', end: 'duration.end' });
+        expect(result).toEqual([
+            {
+                name: 'Task 1',
+                duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+                lane: 0,
+            },
+            {
+                name: 'Task 2',
+                duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') },
+                lane: 0,
+            },
+        ]);
+    });
+    it('should work with function accessors for start and end', () => {
+        const data = [
+            { name: 'Task 1', duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') } },
+            { name: 'Task 2', duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') } },
+        ];
+        const result = applyLanes(data, { start: (d) => d.duration.start, end: (d) => d.duration.end });
+        expect(result).toEqual([
+            {
+                name: 'Task 1',
+                duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+                lane: 0,
+            },
+            {
+                name: 'Task 2',
+                duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') },
+                lane: 0,
+            },
+        ]);
+    });
+    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/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { applyLanes } from './array.js';
 export * from './canvas.js';
 export * from './common.js';
 export * from './geo.js';

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export { applyLanes } from './array.js';
 export * from './canvas.js';
 export * from './common.js';
 export * from './geo.js';

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.25",
+  "version": "2.0.0-next.27",
   "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",