layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/BrushContext.svelte.d.ts

@@ -1,21 +1,7 @@
-export type BrushRange = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-export type BrushContextValue = {
-    xDomain: DomainType;
-    yDomain: DomainType;
-    isActive: boolean;
-    range: BrushRange;
-    handleSize: number;
-};
-export declare function getBrushContext(): BrushContextValue;
-export declare function setBrushContext(brush: BrushContextValue): BrushContextValue;
+import type { Snippet } from 'svelte';
+import { BrushState, type BrushDomainType } from '../states/brush.svelte.js';
 type BrushEventPayload = {
-    xDomain: DomainType | null;
-    yDomain: DomainType | null;
+    brush: BrushState;
 };
 type BrushContextPropsWithoutHTML = {
     /**
@@ -31,31 +17,21 @@ type BrushContextPropsWithoutHTML = {
      */
     handleSize?: number;
     /**
-     * Only show range while actively brushing.
-     * Useful with `brushEnd` event
+     * Whether clicking on the empty area resets the brush.
      *
-     * @default false
+     * @default true
      */
-    resetOnEnd?: boolean;
+    clickToReset?: boolean;
     /**
-     * Ignore click to reset.
-     * Useful to add click handlers to marks.  Requires external resetting (button, another chart, etc)
-     *
-     * @default false
+     * External x domain to sync the brush to.
+     * When provided, the brush reactively updates to reflect this value.
      */
-    ignoreResetClick?: boolean;
-    xDomain?: DomainType;
-    yDomain?: DomainType;
+    x?: BrushDomainType;
     /**
-     * Mode of operation
-     *  - `integrated`: use with single chart
-     *  - `separated`: use with separate (typically smaller) chart and state can be managed
-     * externally (sync with other charts, etc).  Show active selection when domain does not equal
-     * original
-     *
-     * @default 'integrated'
+     * External y domain to sync the brush to.
+     * When provided, the brush reactively updates to reflect this value.
      */
-    mode?: 'integrated' | 'separated';
+    y?: BrushDomainType;
     /**
      * Disable brush
      *
@@ -82,24 +58,20 @@ type BrushContextPropsWithoutHTML = {
         handle?: string;
         labels?: string;
     };
-    onChange?: (detail: BrushEventPayload) => void;
     onBrushStart?: (detail: BrushEventPayload) => void;
+    onChange?: (detail: BrushEventPayload) => void;
     onBrushEnd?: (detail: BrushEventPayload) => void;
-    onReset?: (detail: BrushEventPayload) => void;
     /**
-     * A reference to this brush's context for use in parent
-     * components.
+     * A reference to this brush's state for use in parent components.
      *
      * @bindable
      */
-    brushContext?: BrushContextValue;
+    state?: BrushState;
     children?: Snippet<[{
-        brushContext: BrushContextValue;
+        state: BrushState;
     }]>;
 };
-import { type DomainType } from '../utils/scales.svelte.js';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Snippet } from 'svelte';
-declare const BrushContext: import("svelte").Component<BrushContextPropsWithoutHTML, {}, "brushContext">;
+declare const BrushContext: import("svelte").Component<BrushContextPropsWithoutHTML, {}, "state">;
 type BrushContext = ReturnType<typeof BrushContext>;
 export default BrushContext;

package/dist/components/BrushContext.svelte.test.d.ts

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

package/dist/components/BrushContext.svelte.test.js

@@ -0,0 +1,308 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { tick } from 'svelte';
+import Chart from './Chart.svelte';
+import BrushTestHarness from './tests/BrushTestHarness.svelte';
+const data = [
+    { x: 0, y: 10 },
+    { x: 1, y: 20 },
+    { x: 2, y: 30 },
+    { x: 3, y: 40 },
+    { x: 4, y: 50 },
+    { x: 5, y: 60 },
+    { x: 6, y: 70 },
+    { x: 7, y: 80 },
+    { x: 8, y: 90 },
+    { x: 9, y: 100 },
+];
+const defaultChartProps = {
+    data,
+    x: 'x',
+    y: 'y',
+    xDomain: [0, 10],
+    yDomain: [0, 100],
+    height: 200,
+};
+function getBrushElements(container) {
+    return {
+        context: container.querySelector('.lc-brush-context'),
+        range: container.querySelector('.lc-brush-range'),
+        handles: container.querySelectorAll('.lc-brush-handle'),
+    };
+}
+// BrushContext is lazy-loaded inside Chart, so tests that enable brush must
+// wait for the dynamic import to resolve before querying brush DOM.
+async function awaitBrushReady(container) {
+    await vi.waitFor(() => {
+        expect(container.querySelector('.lc-brush-context')).not.toBeNull();
+    });
+}
+describe('BrushContext', () => {
+    describe('rendering', () => {
+        it('should not render brush UI when brush is disabled', async () => {
+            const { container } = render(Chart, {
+                ...defaultChartProps,
+                brush: false,
+            });
+            await tick();
+            const { context } = getBrushElements(container);
+            expect(context).toBeNull();
+        });
+        it('should render brush context when brush is enabled', async () => {
+            const { container } = render(Chart, {
+                ...defaultChartProps,
+                brush: true,
+            });
+            await awaitBrushReady(container);
+            const { context } = getBrushElements(container);
+            expect(context).not.toBeNull();
+        });
+        it('should not render range or handles initially', async () => {
+            const { container } = render(Chart, {
+                ...defaultChartProps,
+                brush: true,
+            });
+            await awaitBrushReady(container);
+            const { range, handles } = getBrushElements(container);
+            expect(range).toBeNull();
+            expect(handles.length).toBe(0);
+        });
+    });
+    describe('programmatic control', () => {
+        it('should show brush when moved programmatically via context', async () => {
+            let chartContext;
+            const { container } = render(BrushTestHarness, {
+                chartProps: {
+                    ...defaultChartProps,
+                    brush: true,
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
+            let { range } = getBrushElements(container);
+            expect(range).toBeNull();
+            chartContext.brush.move({ x: [2, 8] });
+            await tick();
+            ({ range } = getBrushElements(container));
+            expect(range).not.toBeNull();
+            expect(range.style.width).not.toBe('0px');
+        });
+        it('should compute correct pixel width for brush.move()', async () => {
+            let chartContext;
+            const { container } = render(BrushTestHarness, {
+                chartProps: {
+                    ...defaultChartProps,
+                    brush: true,
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
+            chartContext.brush.move({ x: [2, 5] });
+            await tick();
+            const { range } = getBrushElements(container);
+            expect(range).not.toBeNull();
+            const brushContext = container.querySelector('.lc-brush-context');
+            const contextWidth = brushContext.getBoundingClientRect().width;
+            // 3 units out of 10 total → 30% of width
+            const expectedWidth = (3 / 10) * contextWidth;
+            const actualWidth = parseFloat(range.style.width);
+            expect(Math.abs(actualWidth - expectedWidth)).toBeLessThan(1);
+        });
+        it('should update width when brush.move() is called again', async () => {
+            let chartContext;
+            const { container } = render(BrushTestHarness, {
+                chartProps: {
+                    ...defaultChartProps,
+                    brush: true,
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
+            chartContext.brush.move({ x: [2, 5] });
+            await tick();
+            let { range } = getBrushElements(container);
+            const firstWidth = parseFloat(range.style.width);
+            chartContext.brush.move({ x: [2, 8] });
+            await tick();
+            ({ range } = getBrushElements(container));
+            const secondWidth = parseFloat(range.style.width);
+            expect(secondWidth).toBeGreaterThan(firstWidth);
+        });
+        it('should clear brush when reset programmatically', async () => {
+            let chartContext;
+            const { container } = render(BrushTestHarness, {
+                chartProps: {
+                    ...defaultChartProps,
+                    brush: true,
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
+            chartContext.brush.move({ x: [2, 8] });
+            await tick();
+            let { range } = getBrushElements(container);
+            expect(range).not.toBeNull();
+            chartContext.brush.reset();
+            await tick();
+            ({ range } = getBrushElements(container));
+            expect(range).toBeNull();
+        });
+        it('should select full domain with selectAll', async () => {
+            let chartContext;
+            const { container } = render(BrushTestHarness, {
+                chartProps: {
+                    ...defaultChartProps,
+                    brush: true,
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
+            chartContext.brush.selectAll();
+            await tick();
+            const { range } = getBrushElements(container);
+            expect(range).not.toBeNull();
+            const brushContext = container.querySelector('.lc-brush-context');
+            const contextWidth = brushContext.getBoundingClientRect().width;
+            const rangeWidth = parseFloat(range.style.width);
+            expect(Math.abs(rangeWidth - contextWidth)).toBeLessThan(1);
+        });
+        it('should move only y when x is not specified', async () => {
+            let chartContext;
+            const { container } = render(BrushTestHarness, {
+                chartProps: {
+                    ...defaultChartProps,
+                    brush: { axis: 'both' },
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
+            chartContext.brush.move({ y: [20, 80] });
+            await tick();
+            const { range } = getBrushElements(container);
+            expect(range).not.toBeNull();
+            expect(chartContext.brush.x).toEqual([null, null]);
+            expect(chartContext.brush.y).toEqual([20, 80]);
+        });
+    });
+    describe('zoomOnBrush with onBrushEnd', () => {
+        it('should pass brush domain values to onBrushEnd before resetting', async () => {
+            let chartContext;
+            let receivedX = null;
+            const { container } = render(BrushTestHarness, {
+                chartProps: {
+                    ...defaultChartProps,
+                    brush: {
+                        zoomOnBrush: true,
+                        onBrushEnd: (e) => {
+                            receivedX = [...e.brush.x];
+                        },
+                    },
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
+            const brushEl = container.querySelector('.lc-brush-context');
+            const rect = brushEl.getBoundingClientRect();
+            // Simulate a brush drag: pointerdown → pointermove → pointerup
+            // All dispatched on the brush element so e.target has classList/getBoundingClientRect.
+            const startX = rect.left + rect.width * 0.2;
+            const endX = rect.left + rect.width * 0.8;
+            const y = rect.top + rect.height / 2;
+            brushEl.dispatchEvent(new PointerEvent('pointerdown', { clientX: startX, clientY: y, bubbles: true }));
+            brushEl.dispatchEvent(new PointerEvent('pointermove', { clientX: endX, clientY: y, bubbles: true }));
+            brushEl.dispatchEvent(new PointerEvent('pointerup', { clientX: endX, clientY: y, bubbles: true }));
+            await tick();
+            // The user's onBrushEnd callback should have received domain values before reset
+            expect(receivedX).not.toBeNull();
+            expect(receivedX[0]).not.toBeNull();
+            expect(receivedX[1]).not.toBeNull();
+            expect(receivedX[0]).toBeLessThan(receivedX[1]);
+            // After the enhanced handler runs, brush should be reset
+            expect(chartContext.brush.x).toEqual([null, null]);
+        });
+    });
+    describe('external sync (x/y props)', () => {
+        it('should show brush when x prop is provided with a sub-domain', async () => {
+            const { container } = render(Chart, {
+                ...defaultChartProps,
+                brush: {
+                    x: [3, 7],
+                },
+            });
+            await awaitBrushReady(container);
+            const { range } = getBrushElements(container);
+            expect(range).not.toBeNull();
+        });
+        it('should not show brush when x prop matches full domain', async () => {
+            const { container } = render(Chart, {
+                ...defaultChartProps,
+                brush: {
+                    x: [0, 10],
+                },
+            });
+            await awaitBrushReady(container);
+            const { range } = getBrushElements(container);
+            expect(range).toBeNull();
+        });
+        it('should not show brush when x prop is null', async () => {
+            const { container } = render(Chart, {
+                ...defaultChartProps,
+                brush: {
+                    x: null,
+                },
+            });
+            await awaitBrushReady(container);
+            const { range } = getBrushElements(container);
+            expect(range).toBeNull();
+        });
+        it('should update brush width when x prop changes', async () => {
+            const props = $state({
+                ...defaultChartProps,
+                brush: {
+                    x: [2, 5],
+                },
+            });
+            const { container } = render(Chart, props);
+            await awaitBrushReady(container);
+            let { range } = getBrushElements(container);
+            expect(range).not.toBeNull();
+            const initialWidth = parseFloat(range.style.width);
+            props.brush = { x: [1, 8] };
+            await tick();
+            ({ range } = getBrushElements(container));
+            expect(range).not.toBeNull();
+            const updatedWidth = parseFloat(range.style.width);
+            expect(updatedWidth).toBeGreaterThan(initialWidth);
+        });
+        it('should clear brush when x prop changes to [null, null]', async () => {
+            const props = $state({
+                ...defaultChartProps,
+                brush: {
+                    x: [2, 5],
+                },
+            });
+            const { container } = render(Chart, props);
+            await awaitBrushReady(container);
+            let { range } = getBrushElements(container);
+            expect(range).not.toBeNull();
+            props.brush = { x: [null, null] };
+            await tick();
+            ({ range } = getBrushElements(container));
+            expect(range).toBeNull();
+        });
+    });
+});

package/dist/components/Calendar.svelte

@@ -36,14 +36,14 @@
     /**
      * Props to pass to the `<text>` element for month labels.
      */
-    monthLabel?: Partial<ComponentProps<typeof Text>>;
+    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
 
     /**
-     * Tooltip context to setup mouse events to show tooltip for related data
+     * Setup pointer events to show tooltip for related data
      */
-    tooltipContext?: TooltipContextValue;
+    tooltip?: boolean;
 
-    children?: Snippet<[{ cells: CalendarCell[] }]>;
+    children?: Snippet<[{ cells: CalendarCell[]; cellSize: [number, number] }]>;
   } & Omit<
     RectPropsWithoutHTML,
     'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'
@@ -55,16 +55,15 @@
 
 <script lang="ts">
   import { type ComponentProps, type Snippet } from 'svelte';
-  import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
+  import { timeDays, timeMonths, timeWeek } from 'd3-time';
   import { index } from 'd3-array';
-  import { format } from 'date-fns';
+  import { format } from '@layerstack/utils';
 
   import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
-  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import MonthPath from './MonthPath.svelte';
   import Text from './Text.svelte';
   import { chartDataArray } from '../utils/common.js';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { Without } from '../utils/types.js';
   import { extractLayerProps } from '../utils/attributes.js';
@@ -74,9 +73,9 @@
     start,
     cellSize: cellSizeProp,
     monthPath = false,
-    tooltipContext: tooltip,
+    monthLabel = true,
+    tooltip,
     children,
-    monthLabel,
     ...restProps
   }: CalendarPropsWithoutHTML = $props();
 
@@ -107,7 +106,7 @@
     yearDays.map((date) => {
       const cellData = dataByDate.get(date) ?? { date };
       return {
-        x: timeWeek.count(timeYear(date), date) * cellSize[0],
+        x: timeWeek.count(start, date) * cellSize[0],
         y: date.getDay() * cellSize[1],
         color: ctx.config.c ? ctx.cGet(cellData) : 'transparent',
         data: cellData,
@@ -117,7 +116,7 @@
 </script>
 
 {#if children}
-  {@render children({ cells })}
+  {@render children({ cells, cellSize })}
 {:else}
   {#each cells as cell}
     <Rect
@@ -126,22 +125,48 @@
       width={cellSize[0]}
       height={cellSize[1]}
       fill={cell.color}
-      onpointermove={(e) => tooltip?.show(e, cell.data)}
-      onpointerleave={(e) => tooltip?.hide()}
-      {...extractLayerProps(restProps, 'calendar-cell', 'stroke-surface-content/5')}
+      onpointermove={(e) => tooltip && ctx.tooltip?.show(e, cell.data)}
+      onpointerleave={(e) => tooltip && ctx.tooltip?.hide()}
+      strokeWidth={1}
+      {...extractLayerProps(restProps, 'lc-calendar-cell')}
     />
   {/each}
 {/if}
 
 {#if monthPath}
   {#each yearMonths as date}
-    <MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'calendar-month-path')} />
+    <MonthPath
+      {date}
+      startOfRange={start}
+      {cellSize}
+      {...extractLayerProps(monthPath, 'lc-calendar-month-path')}
+    />
+  {/each}
+{/if}
 
+{#if monthLabel}
+  {#each yearMonths as date}
     <Text
-      x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellSize[0]}
-      y={-4}
-      value={format(date, 'MMM')}
-      {...extractLayerProps(monthLabel, 'calendar-month-label', 'text-xs')}
+      x={timeWeek.count(start, timeWeek.ceil(date)) * cellSize[0]}
+      value={format(date, 'month', { variant: 'short' })}
+      capHeight="7px"
+      {...extractLayerProps(monthLabel, 'lc-calendar-month-label')}
     />
   {/each}
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-calendar-cell)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 5%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-calendar-month-label)) {
+      font-size: 12px;
+    }
+  }
+</style>

package/dist/components/Calendar.svelte.d.ts

@@ -30,19 +30,19 @@ export type CalendarPropsWithoutHTML = {
     /**
      * Props to pass to the `<text>` element for month labels.
      */
-    monthLabel?: Partial<ComponentProps<typeof Text>>;
+    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
     /**
-     * Tooltip context to setup mouse events to show tooltip for related data
+     * Setup pointer events to show tooltip for related data
      */
-    tooltipContext?: TooltipContextValue;
+    tooltip?: boolean;
     children?: Snippet<[{
         cells: CalendarCell[];
+        cellSize: [number, number];
     }]>;
 } & Omit<RectPropsWithoutHTML, 'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'>;
 export type CalendarProps = CalendarPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, CalendarPropsWithoutHTML>;
 import { type ComponentProps, type Snippet } from 'svelte';
 import { type RectPropsWithoutHTML } from './Rect.svelte';
-import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
 import MonthPath from './MonthPath.svelte';
 import Text from './Text.svelte';
 import type { SVGAttributes } from 'svelte/elements';

package/dist/components/Cell.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" module>
+  import type { RectProps } from './Rect.svelte';
+  import type { DataProp } from '../utils/dataProp.js';
+
+  type BaseRectCellProps = Omit<
+    RectProps,
+    | 'width'
+    | 'height'
+    | 'x0'
+    | 'x1'
+    | 'y0'
+    | 'y1'
+    | 'initialX'
+    | 'initialY'
+    | 'initialWidth'
+    | 'initialHeight'
+    | 'motion'
+    | 'ref'
+  >;
+
+  export type CellProps = BaseRectCellProps & {
+    /**
+     * Shape to render for each cell.
+     * - `'rect'`: renders a rectangle filling the band (default)
+     * - `'circle'`: renders a circle centered within the band cell
+     *
+     * @default 'rect'
+     */
+    shape?: 'rect' | 'circle';
+
+    /**
+     * Radius for circle shape.
+     * - `number`: direct pixel value
+     * - `string`: data property name, resolved via rScale
+     * - `function(d)`: accessor called per data item, result passed through rScale
+     *
+     * When not provided, defaults to half the minimum of cell width and height.
+     */
+    r?: DataProp;
+  };
+</script>
+
+<script lang="ts">
+  import { getChartContext } from '../contexts/chart.js';
+  import { isScaleBand } from '../utils/scales.svelte.js';
+  import Rect from './Rect.svelte';
+  import Circle from './Circle.svelte';
+  import Group from './Group.svelte';
+
+  let { shape = 'rect', r, x, y, ...restProps }: CellProps = $props();
+
+  const chartCtx = getChartContext();
+  const cellWidth = $derived(isScaleBand(chartCtx.xScale) ? chartCtx.xScale.bandwidth() : 0);
+  const cellHeight = $derived(isScaleBand(chartCtx.yScale) ? chartCtx.yScale.bandwidth() : 0);
+  const defaultR = $derived(Math.min(cellWidth, cellHeight) / 2);
+</script>
+
+{#if shape === 'circle'}
+  <Group x={cellWidth / 2} y={cellHeight / 2}>
+    <Circle cx={x} cy={y} r={r ?? defaultR} {...restProps as any} />
+  </Group>
+{:else}
+  <Rect width={cellWidth} height={cellHeight} {x} {y} {...restProps} />
+{/if}

package/dist/components/Cell.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { RectProps } from './Rect.svelte';
+import type { DataProp } from '../utils/dataProp.js';
+type BaseRectCellProps = Omit<RectProps, 'width' | 'height' | 'x0' | 'x1' | 'y0' | 'y1' | 'initialX' | 'initialY' | 'initialWidth' | 'initialHeight' | 'motion' | 'ref'>;
+export type CellProps = BaseRectCellProps & {
+    /**
+     * Shape to render for each cell.
+     * - `'rect'`: renders a rectangle filling the band (default)
+     * - `'circle'`: renders a circle centered within the band cell
+     *
+     * @default 'rect'
+     */
+    shape?: 'rect' | 'circle';
+    /**
+     * Radius for circle shape.
+     * - `number`: direct pixel value
+     * - `string`: data property name, resolved via rScale
+     * - `function(d)`: accessor called per data item, result passed through rScale
+     *
+     * When not provided, defaults to half the minimum of cell width and height.
+     */
+    r?: DataProp;
+};
+declare const Cell: import("svelte").Component<CellProps, {}, "">;
+type Cell = ReturnType<typeof Cell>;
+export default Cell;