layerchart 2.0.0-next.46 → 2.0.0-next.47

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

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

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

@@ -0,0 +1,141 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import Circle from './Circle.svelte';
+describe('Circle', () => {
+    describe('pixel mode', () => {
+        it('should render a circle with pixel values', async () => {
+            render(TestHarness, {
+                component: Circle,
+                componentProps: {
+                    cx: 50,
+                    cy: 50,
+                    r: 10,
+                    fill: 'red',
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+            expect(el.element()?.getAttribute('cx')).toBe('50');
+            expect(el.element()?.getAttribute('cy')).toBe('50');
+            expect(el.element()?.getAttribute('r')).toBe('10');
+        });
+    });
+    describe('data mode', () => {
+        const data = [
+            { date: new Date('2024-01-01'), value: 20 },
+            { date: new Date('2024-02-01'), value: 40 },
+            { date: new Date('2024-03-01'), value: 60 },
+        ];
+        it('should render one circle per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+        });
+        it('should render with function accessors', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: (d) => d.date,
+                    cy: (d) => d.value,
+                    r: 5,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+        });
+        it('should resolve data-driven fill through cScale', async () => {
+            const colorData = [
+                { date: new Date('2024-01-01'), value: 20, category: 'A' },
+                { date: new Date('2024-02-01'), value: 40, category: 'B' },
+                { date: new Date('2024-03-01'), value: 60, category: 'A' },
+            ];
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data: colorData,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                    fill: 'category',
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+            // First and third items have category 'A' → steelblue
+            expect(circles[0].getAttribute('fill')).toBe('steelblue');
+            expect(circles[2].getAttribute('fill')).toBe('steelblue');
+            // Second item has category 'B' → coral
+            expect(circles[1].getAttribute('fill')).toBe('coral');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                    fill: 'red',
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+            // 'red' is not a data property, so it's used as-is
+            expect(circles[0].getAttribute('fill')).toBe('red');
+            expect(circles[1].getAttribute('fill')).toBe('red');
+        });
+        it('should use explicit data prop over chart context data', async () => {
+            const explicitData = [{ date: new Date('2024-01-01'), value: 20 }];
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(1);
+        });
+    });
+});

package/dist/components/CircleClipPath.svelte

@@ -76,9 +76,18 @@
   $effect.pre(() => {
     refProp = ref;
   });
+
+  function canvasClip(ctx: CanvasRenderingContext2D) {
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  }
+
+  function canvasClipDeps() {
+    return [cx, cy, r];
+  }
 </script>
 
-<ClipPath {id} {disabled} {children}>
+<ClipPath {id} {disabled} {children} {canvasClip} {canvasClipDeps}>
   {#snippet clip()}
     <Circle
       {cx}

package/dist/components/ClipPath.svelte

@@ -36,6 +36,16 @@
      * Provides the id, url, and useId for the clipPath as snippet props.
      */
     children?: Snippet<[{ id: string; url: string; useId?: string }]>;
+    /**
+     * Canvas clip path function. When provided and in canvas mode, sets up a canvas
+     * clip region by drawing a path and calling `ctx.clip()` before rendering children.
+     */
+    canvasClip?: (ctx: CanvasRenderingContext2D) => void;
+    /**
+     * Reactive deps for canvas clip invalidation. Return array of values that,
+     * when changed, should trigger a canvas redraw.
+     */
+    canvasClipDeps?: () => any[];
   };
 
   export type ClipPathProps = ClipPathPropsWithoutHTML &
@@ -43,6 +53,8 @@
 </script>
 
 <script lang="ts">
+  import { getChartContext } from '../contexts/chart.js';
+
   const uid = $props.id();
 
   let {
@@ -51,12 +63,31 @@
     disabled = false,
     children,
     clip,
+    canvasClip,
+    canvasClipDeps,
     ...restProps
   }: ClipPathPropsWithoutHTML = $props();
 
   const url = $derived(`url(#${id})`);
 
   const layerCtx = getLayerContext();
+  const chartCtx = getChartContext();
+
+  if (layerCtx === 'canvas') {
+    chartCtx.registerComponent({
+      name: 'ClipPath',
+      kind: 'group',
+      canvasRender: {
+        render: (ctx) => {
+          if (!disabled && canvasClip) {
+            canvasClip(ctx);
+            ctx.clip();
+          }
+        },
+        deps: () => canvasClipDeps?.() ?? [],
+      },
+    });
+  }
 </script>
 
 {#if layerCtx === 'svg'}

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

@@ -34,6 +34,16 @@ export type ClipPathPropsWithoutHTML = {
         url: string;
         useId?: string;
     }]>;
+    /**
+     * Canvas clip path function. When provided and in canvas mode, sets up a canvas
+     * clip region by drawing a path and calling `ctx.clip()` before rendering children.
+     */
+    canvasClip?: (ctx: CanvasRenderingContext2D) => void;
+    /**
+     * Reactive deps for canvas clip invalidation. Return array of values that,
+     * when changed, should trigger a canvas redraw.
+     */
+    canvasClipDeps?: () => any[];
 };
 export type ClipPathProps = ClipPathPropsWithoutHTML & Without<SVGAttributes<SVGClipPathElement>, ClipPathPropsWithoutHTML>;
 declare const ClipPath: import("svelte").Component<ClipPathPropsWithoutHTML, {}, "">;

package/dist/components/Contour.svelte

@@ -0,0 +1,224 @@
+<script lang="ts" module>
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { Accessor } from '../utils/common.js';
+  import type { InterpolateMethod } from '../utils/rasterInterpolate.js';
+
+  export type ContourPropsWithoutHTML = {
+    /**
+     * Input data. Interpretation depends on other props:
+     * - With `width`/`height`: flat array of grid values (row-major order)
+     * - With `value` accessor: array of objects with x/y/value properties (scattered data)
+     * - Without: uses chart context data for scattered interpolation
+     */
+    data?: number[] | Float64Array | any[];
+    /** Grid width (columns). When set, `data` is treated as a flat grid array. */
+    width?: number;
+    /** Grid height (rows). When set, `data` is treated as a flat grid array. */
+    height?: number;
+
+    /**
+     * Value channel. Interpretation depends on the type:
+     * - `(x, y) => number`: continuous function evaluated at each pixel (function sampling mode)
+     * - `string | number | (d) => any`: accessor for scattered data interpolation
+     * @default 'value'
+     */
+    value?: Accessor | ((x: number, y: number) => number);
+
+    /** X accessor for scattered data. Defaults to chart context. */
+    x?: Accessor;
+    /** Y accessor for scattered data. Defaults to chart context. */
+    y?: Accessor;
+
+    /** Interpolation method for scattered data. @default 'barycentric' */
+    interpolate?: InterpolateMethod;
+
+    /** Number of contour thresholds or explicit threshold values. @default 10 */
+    thresholds?: number | number[];
+    /** Gaussian blur radius applied to grid values. @default 0 */
+    blur?: number;
+    /** Whether to smooth contour lines. @default true */
+    smooth?: boolean;
+  } & CommonStyleProps;
+
+  export type ContourProps = ContourPropsWithoutHTML &
+    Without<SVGAttributes<SVGGElement>, ContourPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { contours as d3Contours } from 'd3-contour';
+  import { geoPath, geoTransform } from 'd3-geo';
+  import { scaleSequential } from 'd3-scale';
+  import { interpolateYlGnBu } from 'd3-scale-chromatic';
+  import { max, min, blur2 } from 'd3-array';
+
+  import Group from './Group.svelte';
+  import Path from './Path.svelte';
+  import { accessor as resolveAccessor, chartDataArray } from '../utils/common.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { interpolateGrid } from '../utils/rasterInterpolate.js';
+
+  const ctx = getChartContext();
+
+  let {
+    data: dataProp,
+    width: widthProp,
+    height: heightProp,
+    value: valueProp,
+    x: xProp,
+    y: yProp,
+    interpolate: interpolateMethod = 'barycentric',
+    thresholds = 10,
+    blur: blurRadius = 0,
+    smooth = true,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ...restProps
+  }: ContourProps = $props();
+
+  // Detect grid mode: data + width/height
+  const isGridMode = $derived(!!(dataProp && widthProp && heightProp));
+
+  // Register as composite-mark with markInfo for grid mode domain participation
+  ctx.registerComponent({
+    name: 'Contour',
+    kind: 'composite-mark',
+    markInfo: () => {
+      if (!isGridMode) return {};
+      return {
+        data: [
+          { x: 0, y: 0 },
+          { x: widthProp, y: heightProp },
+        ],
+        x: 'x',
+        y: 'y',
+      };
+    },
+  });
+
+  // Grid dimensions: use provided, or derive from chart size
+  const gridW = $derived(widthProp ?? Math.min(Math.ceil(ctx.width), 200));
+  const gridH = $derived(heightProp ?? Math.min(Math.ceil(ctx.height), 200));
+
+  // Scale factors from grid coordinates to chart pixel coordinates
+  const scaleX = $derived(ctx.width / gridW);
+  const scaleY = $derived(ctx.height / gridH);
+
+  // Resolve grid values from one of three input modes
+  const gridValues = $derived.by(() => {
+    if (!ctx.width || !ctx.height) return new Float64Array(0);
+
+    // Mode 1: Grid data (flat array + width/height)
+    if (isGridMode) {
+      return dataProp instanceof Float64Array
+        ? dataProp
+        : Float64Array.from(dataProp as number[]);
+    }
+
+    // Mode 2: Continuous function — evaluate at each grid cell
+    if (typeof valueProp === 'function' && valueProp.length >= 2) {
+      const fn = valueProp as (x: number, y: number) => number;
+      const grid = new Float64Array(gridW * gridH);
+      const xInvert = ctx.xScale.invert;
+      const yInvert = ctx.yScale.invert;
+      for (let j = 0; j < gridH; j++) {
+        for (let i = 0; i < gridW; i++) {
+          const px = (i + 0.5) * scaleX;
+          const py = (j + 0.5) * scaleY;
+          const dataX = xInvert ? xInvert(px) : px;
+          const dataY = yInvert ? yInvert(py) : py;
+          grid[j * gridW + i] = fn(dataX, dataY);
+        }
+      }
+      return grid;
+    }
+
+    // Mode 3: Scattered data — interpolate onto grid
+    const chartData = dataProp ? (dataProp as any[]) : chartDataArray(ctx.data);
+    if (!chartData || chartData.length === 0) return new Float64Array(0);
+
+    const xAcc = xProp ? resolveAccessor(xProp) : ctx.x;
+    const yAcc = yProp ? resolveAccessor(yProp) : ctx.y;
+    const valAcc = resolveAccessor(valueProp ?? 'value');
+
+    const points: [number, number, number][] = chartData.map((d: any) => [
+      ctx.xScale(xAcc(d)) / scaleX,
+      ctx.yScale(yAcc(d)) / scaleY,
+      valAcc(d),
+    ]);
+
+    return interpolateGrid(points, gridW, gridH, interpolateMethod);
+  });
+
+  // Apply optional blur
+  const blurredValues = $derived.by(() => {
+    if (!blurRadius || gridValues.length === 0) return gridValues;
+    const copy = new Float64Array(gridValues);
+    blur2({ data: copy, width: gridW, height: gridH }, blurRadius);
+    return copy;
+  });
+
+  // Run d3 contour generator
+  const contourData = $derived.by(() => {
+    if (blurredValues.length === 0) return [];
+    const generator = d3Contours().size([gridW, gridH]).smooth(smooth);
+    generator.thresholds(thresholds);
+    return generator(Array.from(blurredValues));
+  });
+
+  // Path generator that scales from grid to chart pixel coordinates
+  const pathGenerator = $derived.by(() => {
+    if (scaleX === 1 && scaleY === 1) return geoPath();
+    return geoPath(
+      geoTransform({
+        point(x, y) {
+          this.stream.point(x * scaleX, y * scaleY);
+        },
+      })
+    );
+  });
+
+  // Color scale: use chart's cScale (with auto-computed domain) or fall back to default
+  const colorScale = $derived.by(() => {
+    if (fill) return null;
+    const minValue = min(contourData, (d) => d.value) ?? 0;
+    const maxValue = max(contourData, (d) => d.value) ?? 1;
+    if (ctx.cScale) {
+      return ctx.cScale.copy().domain([minValue, maxValue]);
+    }
+    return scaleSequential([minValue, maxValue], interpolateYlGnBu);
+  });
+
+  function getContourFill(contour: { value: number }) {
+    if (fill) return fill;
+    return colorScale ? String(colorScale(contour.value)) : 'steelblue';
+  }
+</script>
+
+{#if contourData.length > 0}
+  <Group class="lc-contour" {opacity}>
+    {#each contourData as contour, i (i)}
+      <Path
+        pathData={pathGenerator(contour) ?? ''}
+        fill={getContourFill(contour)}
+        {fillOpacity}
+        {stroke}
+        {strokeWidth}
+        class={cls('lc-contour-band', className)}
+      />
+    {/each}
+  </Group>
+{/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-contour-band)) {
+      --stroke-color: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,40 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { Accessor } from '../utils/common.js';
+import type { InterpolateMethod } from '../utils/rasterInterpolate.js';
+export type ContourPropsWithoutHTML = {
+    /**
+     * Input data. Interpretation depends on other props:
+     * - With `width`/`height`: flat array of grid values (row-major order)
+     * - With `value` accessor: array of objects with x/y/value properties (scattered data)
+     * - Without: uses chart context data for scattered interpolation
+     */
+    data?: number[] | Float64Array | any[];
+    /** Grid width (columns). When set, `data` is treated as a flat grid array. */
+    width?: number;
+    /** Grid height (rows). When set, `data` is treated as a flat grid array. */
+    height?: number;
+    /**
+     * Value channel. Interpretation depends on the type:
+     * - `(x, y) => number`: continuous function evaluated at each pixel (function sampling mode)
+     * - `string | number | (d) => any`: accessor for scattered data interpolation
+     * @default 'value'
+     */
+    value?: Accessor | ((x: number, y: number) => number);
+    /** X accessor for scattered data. Defaults to chart context. */
+    x?: Accessor;
+    /** Y accessor for scattered data. Defaults to chart context. */
+    y?: Accessor;
+    /** Interpolation method for scattered data. @default 'barycentric' */
+    interpolate?: InterpolateMethod;
+    /** Number of contour thresholds or explicit threshold values. @default 10 */
+    thresholds?: number | number[];
+    /** Gaussian blur radius applied to grid values. @default 0 */
+    blur?: number;
+    /** Whether to smooth contour lines. @default true */
+    smooth?: boolean;
+} & CommonStyleProps;
+export type ContourProps = ContourPropsWithoutHTML & Without<SVGAttributes<SVGGElement>, ContourPropsWithoutHTML>;
+declare const Contour: import("svelte").Component<ContourProps, {}, "">;
+type Contour = ReturnType<typeof Contour>;
+export default Contour;

package/dist/components/Dagre.svelte

@@ -171,6 +171,11 @@
 </script>
 
 <script lang="ts">
+  import { getChartContext } from '../contexts/chart.js';
+
+  const ctx = getChartContext();
+  ctx.registerComponent({ name: 'Dagre', kind: 'composite-mark' });
+
   let {
     data,
     nodes = (d: any) => d.nodes,

package/dist/components/Density.svelte

@@ -0,0 +1,146 @@
+<script lang="ts" module>
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { Accessor } from '../utils/common.js';
+
+  export type DensityPropsWithoutHTML = {
+    /** Override chart data. Defaults to chart context data. */
+    data?: any[];
+    /** X accessor. Defaults to chart context x accessor. */
+    x?: Accessor;
+    /** Y accessor. Defaults to chart context y accessor. */
+    y?: Accessor;
+    /** Weight accessor for weighted density estimation. */
+    weight?: Accessor;
+    /** KDE bandwidth in pixels. @default 20 */
+    bandwidth?: number;
+    /** Number of contour thresholds. @default 20 */
+    thresholds?: number;
+  } & CommonStyleProps;
+
+  export type DensityProps = DensityPropsWithoutHTML &
+    Without<SVGAttributes<SVGGElement>, DensityPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { contourDensity } from 'd3-contour';
+  import { geoPath } from 'd3-geo';
+  import { scaleSequential } from 'd3-scale';
+  import { interpolateYlGnBu } from 'd3-scale-chromatic';
+  import { max } from 'd3-array';
+
+  import Group from './Group.svelte';
+  import Path from './Path.svelte';
+  import { accessor as resolveAccessor, chartDataArray } from '../utils/common.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
+
+  const ctx = getChartContext();
+  const geo = getGeoContext();
+
+  let {
+    data: dataProp,
+    x: xProp,
+    y: yProp,
+    weight: weightProp,
+    bandwidth = 20,
+    thresholds = 20,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ...restProps
+  }: DensityProps = $props();
+
+  ctx.registerComponent({
+    name: 'Density',
+    kind: 'composite-mark',
+  });
+
+  const xAccessor = $derived(xProp ? resolveAccessor(xProp) : ctx.x);
+  const yAccessor = $derived(yProp ? resolveAccessor(yProp) : ctx.y);
+  const weightAccessor = $derived(weightProp ? resolveAccessor(weightProp) : null);
+
+  const data = $derived(dataProp ?? chartDataArray(ctx.data));
+
+  // Compute density contours in pixel space
+  const contours = $derived.by(() => {
+    if (!data || data.length === 0 || !ctx.width || !ctx.height) return [];
+
+    const projection = geo.projection;
+
+    const density = contourDensity()
+      .x((d: any) => {
+        if (projection) {
+          const p = projection([xAccessor(d), yAccessor(d)]);
+          return p ? p[0] : 0;
+        }
+        return ctx.xScale(xAccessor(d));
+      })
+      .y((d: any) => {
+        if (projection) {
+          const p = projection([xAccessor(d), yAccessor(d)]);
+          return p ? p[1] : 0;
+        }
+        return ctx.yScale(yAccessor(d));
+      })
+      .size([ctx.width, ctx.height])
+      .bandwidth(bandwidth)
+      .thresholds(thresholds);
+
+    if (weightAccessor) {
+      density.weight((d: any) => weightAccessor(d));
+    }
+
+    // Filter out data that doesn't project (e.g. points outside projection bounds)
+    const filteredData = projection
+      ? data.filter((d: any) => projection([xAccessor(d), yAccessor(d)]) !== null)
+      : data;
+
+    return density(filteredData as any);
+  });
+
+  // Identity geoPath for pixel-coordinate contours
+  const pathGenerator = $derived(geoPath());
+
+  // Color scale: use chart's cScale (with auto-computed domain) or fall back to default
+  const colorScale = $derived.by(() => {
+    if (fill) return null;
+    const maxValue = max(contours, (d) => d.value) ?? 1;
+    if (ctx.cScale) {
+      return ctx.cScale.copy().domain([0, maxValue]);
+    }
+    return scaleSequential([0, maxValue], interpolateYlGnBu);
+  });
+
+  function getContourFill(contour: { value: number }) {
+    if (fill) return fill;
+    return colorScale ? String(colorScale(contour.value)) : 'steelblue';
+  }
+</script>
+
+{#if contours.length > 0}
+  <Group class="lc-density" {opacity}>
+    {#each contours as contour, i (i)}
+      <Path
+        pathData={pathGenerator(contour) ?? ''}
+        fill={getContourFill(contour)}
+        {fillOpacity}
+        {stroke}
+        {strokeWidth}
+        class={cls('lc-density-contour', className)}
+      />
+    {/each}
+  </Group>
+{/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-density-contour)) {
+      --stroke-color: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,21 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { Accessor } from '../utils/common.js';
+export type DensityPropsWithoutHTML = {
+    /** Override chart data. Defaults to chart context data. */
+    data?: any[];
+    /** X accessor. Defaults to chart context x accessor. */
+    x?: Accessor;
+    /** Y accessor. Defaults to chart context y accessor. */
+    y?: Accessor;
+    /** Weight accessor for weighted density estimation. */
+    weight?: Accessor;
+    /** KDE bandwidth in pixels. @default 20 */
+    bandwidth?: number;
+    /** Number of contour thresholds. @default 20 */
+    thresholds?: number;
+} & CommonStyleProps;
+export type DensityProps = DensityPropsWithoutHTML & Without<SVGAttributes<SVGGElement>, DensityPropsWithoutHTML>;
+declare const Density: import("svelte").Component<DensityProps, {}, "">;
+type Density = ReturnType<typeof Density>;
+export default Density;