feat: Update applyLanes() util to support nested string key and function accessors for start/end properties. Add as top-level export

Author: techniq

.changeset/slow-streets-look.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Update `applyLanes()` util to support nested string key and function accessors for start/end properties

.changeset/solid-badgers-tan.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix: Add `applyLanes()` as top-level export

packages/layerchart/src/lib/utils/array.test.ts

@@ -92,6 +92,50 @@ describe('applyLanes', () => {
     ]);
   });
 
+  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: any[] = [];
     const result = applyLanes(data);

packages/layerchart/src/lib/utils/array.ts

@@ -1,5 +1,6 @@
 import type { Numeric } from 'd3-array';
 import { extent as d3extent } from 'd3-array';
+import { accessor, type Accessor } from './common.js';
 
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
@@ -27,14 +28,20 @@ export function arraysEqual(arr1: unknown[], arr2: unknown[]) {
  */
 export function applyLanes<T extends Record<string, any>>(
   data: T[],
-  options: { start: keyof T; end: keyof T } = { start: 'start' as keyof T, end: 'end' as keyof T }
+  options: { start: Accessor<T>; end: Accessor<T> } = {
+    start: 'start',
+    end: 'end',
+  }
 ) {
   const result: (T & { lane: number })[] = [];
   let stack: T[] = [];
 
+  const startAccessor = accessor(options.start as any);
+  const endAccessor = accessor(options.end as any);
+
   for (const d of data) {
     let lane = stack.findIndex(
-      (s) => s[options.end] <= d[options.start] && s[options.start] < d[options.start]
+      (s) => endAccessor(s) <= startAccessor(d) && startAccessor(s) < startAccessor(d)
     );
     if (lane === -1) {
       lane = stack.length;

packages/layerchart/src/lib/utils/index.ts

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