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

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

@@ -0,0 +1,121 @@
+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 Polygon from './Polygon.svelte';
+describe('Polygon', () => {
+    describe('pixel mode', () => {
+        it('should render a polygon with pixel values', async () => {
+            render(TestHarness, {
+                component: Polygon,
+                componentProps: {
+                    cx: 50,
+                    cy: 50,
+                    r: 20,
+                    points: 6,
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+        });
+    });
+    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 polygon per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Polygon,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 8,
+                    points: 6,
+                },
+            });
+            const polygons = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => polygons.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: Polygon,
+                chartProps: {
+                    data: colorData,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 8,
+                    points: 6,
+                    fill: 'category',
+                },
+            });
+            const polygons = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => polygons.length).toBe(3);
+            expect(polygons[0].getAttribute('fill')).toBe('steelblue');
+            expect(polygons[1].getAttribute('fill')).toBe('coral');
+            expect(polygons[2].getAttribute('fill')).toBe('steelblue');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Polygon,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 8,
+                    points: 6,
+                    fill: 'red',
+                },
+            });
+            const polygons = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => polygons.length).toBe(3);
+            expect(polygons[0].getAttribute('fill')).toBe('red');
+            expect(polygons[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: Polygon,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    cx: 'date',
+                    cy: 'value',
+                    r: 8,
+                    points: 6,
+                },
+            });
+            const polygons = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => polygons.length).toBe(1);
+        });
+    });
+});

package/dist/components/RadialGradient.svelte

@@ -83,13 +83,12 @@
 </script>
 
 <script lang="ts">
-  import { getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
   import { getComputedStyles } from '../utils/canvas.js';
   import { parsePercent } from '../utils/math.js';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
 
   const uid = $props.id();
@@ -102,6 +101,7 @@
     fx = cx,
     fy = cy,
     r = '50%',
+    // fr = '0%'; // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
     spreadMethod = 'pad',
     transform = undefined,
     units = 'objectBoundingBox',
@@ -111,12 +111,9 @@
     ...restProps
   }: RadialGradientProps = $props();
 
-  // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
-  // export let fr = '0%';
-
   const ctx = getChartContext();
 
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   let canvasGradient = $state<CanvasGradient>();
 
@@ -146,18 +143,21 @@
     canvasGradient = gradient;
   }
 
-  if (renderCtx === 'canvas') {
-    registerCanvasComponent({
+  if (layerCtx === 'canvas') {
+    ctx.registerComponent({
       name: 'Gradient',
-      render,
-      deps: () => [stops, cx, cy, fx, fy, ctx.width, ctx.height],
+      kind: 'group',
+      canvasRender: {
+        render,
+        deps: () => [stops, cx, cy, fx, fy, ctx.width, ctx.height],
+      },
     });
   }
 </script>
 
-{#if renderCtx === 'canvas'}
+{#if layerCtx === 'canvas'}
   {@render children?.({ id, gradient: canvasGradient as any })}
-{:else if renderCtx === 'svg'}
+{:else if layerCtx === 'svg'}
   <defs>
     <radialGradient
       {id}
@@ -169,12 +169,12 @@
       {spreadMethod}
       gradientTransform={transform}
       gradientUnits={units}
-      {...extractLayerProps({ ...restProps, class: className }, 'radial-gradient')}
+      {...extractLayerProps({ ...restProps, class: className }, 'lc-radial-gradient')}
     >
       {#if stopsContent}
         {@render stopsContent()}
       {:else if stops}
-        {@const stopClass = cls(layerClass('radial-gradient-stop'), className)}
+        {@const stopClass = cls('lc-radial-gradient-stop', className)}
         {#each stops as stop, i}
           {#if Array.isArray(stop)}
             <stop offset={stop[0]} stop-color={stop[1]} class={stopClass} />

package/dist/components/Raster.svelte

@@ -0,0 +1,335 @@
+<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 RasterPropsWithoutHTML = {
+    /**
+     * 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;
+
+    /** Left bound of the raster in data coordinates. Defaults to `0` in grid mode. */
+    x1?: number;
+    /** Top bound of the raster in data coordinates. Defaults to `0` in grid mode. */
+    y1?: number;
+    /** Right bound of the raster in data coordinates. Defaults to `width` in grid mode. */
+    x2?: number;
+    /** Bottom bound of the raster in data coordinates. Defaults to `height` in grid mode. */
+    y2?: 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;
+
+    /** Pixel size (downsampling factor). Higher = fewer pixels, faster. @default 1 */
+    pixelSize?: number;
+    /** Gaussian blur radius applied to grid values. @default 0 */
+    blur?: number;
+
+    /** Image rendering quality hint. @default 'auto' */
+    imageRendering?: 'auto' | 'pixelated' | 'crisp-edges';
+  } & Pick<CommonStyleProps, 'opacity'>;
+
+  export type RasterProps = RasterPropsWithoutHTML &
+    Without<SVGAttributes<SVGImageElement>, RasterPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { scaleSequential } from 'd3-scale';
+  import { interpolateYlGnBu } from 'd3-scale-chromatic';
+  import { max, min } from 'd3-array';
+  import { rgb } from 'd3-color';
+
+  import { accessor as resolveAccessor, chartDataArray } from '../utils/common.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import { gridCellCenterToBounds, resolveRasterBounds } from '../utils/index.js';
+  import { interpolateGrid } from '../utils/rasterInterpolate.js';
+  import Image from './Image.svelte';
+
+  const ctx = getChartContext();
+  const geo = getGeoContext();
+
+  let {
+    data: dataProp,
+    width: widthProp,
+    height: heightProp,
+    x1: x1Prop,
+    y1: y1Prop,
+    x2: x2Prop,
+    y2: y2Prop,
+    value: valueProp,
+    x: xProp,
+    y: yProp,
+    interpolate: interpolateMethod = 'barycentric',
+    pixelSize = 1,
+    blur: blurRadius = 0,
+    imageRendering = 'auto',
+    opacity,
+    class: className,
+    ...restProps
+  }: RasterProps = $props();
+
+  // Detect grid mode: data + width/height
+  const isGridMode = $derived(!!(dataProp && widthProp && heightProp));
+  const hasExplicitBounds = $derived(
+    x1Prop !== undefined || y1Prop !== undefined || x2Prop !== undefined || y2Prop !== undefined
+  );
+  const gridBounds = $derived(
+    resolveRasterBounds(widthProp ?? 0, heightProp ?? 0, x1Prop, y1Prop, x2Prop, y2Prop)
+  );
+  const useProjectedGridSampling = $derived(
+    !!(geo.projection && geo.projection.invert && isGridMode && hasExplicitBounds)
+  );
+
+  // Register as composite-mark with markInfo for grid mode domain participation
+  ctx.registerComponent({
+    name: 'Raster',
+    kind: 'composite-mark',
+    markInfo: () => {
+      if (!isGridMode) return {};
+      return {
+        data: [
+          { x: gridBounds.x1, y: gridBounds.y1 },
+          { x: gridBounds.x2, y: gridBounds.y2 },
+        ],
+        x: 'x',
+        y: 'y',
+      };
+    },
+  });
+
+  // Grid dimensions (accounting for pixelSize downsampling)
+  const gridW = $derived(widthProp ?? Math.max(1, Math.ceil(ctx.width / pixelSize)));
+  const gridH = $derived(heightProp ?? Math.max(1, Math.ceil(ctx.height / pixelSize)));
+
+  // Scale factors from grid to chart pixel coordinates
+  const scaleX = $derived(ctx.width / gridW);
+  const scaleY = $derived(ctx.height / gridH);
+
+  const rasterScaleX = $derived(gridW / ctx.width);
+  const rasterScaleY = $derived(gridH / ctx.height);
+
+  // Resolve grid values
+  const sourceGridValues = $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
+    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
+    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') as Accessor);
+
+    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);
+  });
+
+  const projectedGridPoints = $derived.by(() => {
+    if (!useProjectedGridSampling || !widthProp || !heightProp || !geo.projection) return [];
+
+    const points: [number, number, number][] = [];
+    for (let row = 0; row < heightProp; row++) {
+      for (let column = 0; column < widthProp; column++) {
+        const value = sourceGridValues[row * widthProp + column];
+        if (!Number.isFinite(value)) continue;
+
+        const point = gridCellCenterToBounds(column, row, widthProp, heightProp, gridBounds);
+        const projected = geo.projection([point.x, point.y]);
+        if (!projected || !Number.isFinite(projected[0]) || !Number.isFinite(projected[1]))
+          continue;
+
+        points.push([projected[0] * rasterScaleX, projected[1] * rasterScaleY, value]);
+      }
+    }
+
+    return points;
+  });
+
+  const rasterValues = $derived.by(() => {
+    if (useProjectedGridSampling) {
+      return interpolateGrid(projectedGridPoints, gridW, gridH, interpolateMethod);
+    }
+
+    return sourceGridValues;
+  });
+
+  // Color scale: use chart's cScale (with auto-computed domain) or fall back to default
+  const colorScale = $derived.by(() => {
+    const validValues = rasterValues.filter((v) => !isNaN(v));
+    const minValue = min(validValues) ?? 0;
+    const maxValue = max(validValues) ?? 1;
+    if (ctx.cScale) {
+      const scale = ctx.cScale.copy();
+      return ctx.props.cDomain ? scale : scale.domain([minValue, maxValue]);
+    }
+    return scaleSequential([minValue, maxValue], interpolateYlGnBu);
+  });
+
+  // Pre-compute color lookup table (256 entries) for fast pixel mapping
+  const LUT_SIZE = 256;
+  const colorLut = $derived.by(() => {
+    const lut = new Uint8ClampedArray(LUT_SIZE * 4);
+    for (let i = 0; i < LUT_SIZE; i++) {
+      const t = i / (LUT_SIZE - 1);
+      // Map through the color scale's domain
+      const [lo, hi] = colorScale.domain();
+      const value = lo + t * (hi - lo);
+      const c = rgb(String(colorScale(value)));
+      lut[i * 4] = c.r;
+      lut[i * 4 + 1] = c.g;
+      lut[i * 4 + 2] = c.b;
+      lut[i * 4 + 3] = 255;
+    }
+    return lut;
+  });
+
+  const imagePlacement = $derived.by(() => {
+    if (useProjectedGridSampling) {
+      return {
+        x: ctx.width / 2,
+        y: ctx.height / 2,
+        width: ctx.width,
+        height: ctx.height,
+      };
+    }
+
+    if (isGridMode && hasExplicitBounds) {
+      const x1 = ctx.xScale(gridBounds.x1);
+      const x2 = ctx.xScale(gridBounds.x2);
+      const y1 = ctx.yScale(gridBounds.y1);
+      const y2 = ctx.yScale(gridBounds.y2);
+
+      return {
+        x: (x1 + x2) / 2,
+        y: (y1 + y2) / 2,
+        width: Math.abs(x2 - x1),
+        height: Math.abs(y2 - y1),
+      };
+    }
+
+    return {
+      x: ctx.width / 2,
+      y: ctx.height / 2,
+      width: ctx.width,
+      height: ctx.height,
+    };
+  });
+
+  // Generate image data URL via offscreen canvas
+  const imageDataUrl = $derived.by(() => {
+    if (typeof document === 'undefined') return '';
+    if (rasterValues.length === 0 || gridW <= 0 || gridH <= 0) return '';
+
+    const [minValue, maxValue] = colorScale.domain();
+    const range = maxValue - minValue || 1;
+
+    const canvas = document.createElement('canvas');
+
+    canvas.width = gridW;
+    canvas.height = gridH;
+    const canvasCtx = canvas.getContext('2d')!;
+    const imageData = canvasCtx.createImageData(gridW, gridH);
+    const pixels = imageData.data;
+
+    for (let i = 0; i < rasterValues.length; i++) {
+      const v = rasterValues[i];
+      const offset = i * 4;
+
+      if (isNaN(v)) {
+        pixels[offset] = 0;
+        pixels[offset + 1] = 0;
+        pixels[offset + 2] = 0;
+        pixels[offset + 3] = 0;
+        continue;
+      }
+
+      const t = Math.max(0, Math.min(1, (v - minValue) / range));
+      const lutIndex = Math.round(t * (LUT_SIZE - 1));
+      const lutOffset = lutIndex * 4;
+      pixels[offset] = colorLut[lutOffset];
+      pixels[offset + 1] = colorLut[lutOffset + 1];
+      pixels[offset + 2] = colorLut[lutOffset + 2];
+      pixels[offset + 3] = colorLut[lutOffset + 3];
+    }
+
+    canvasCtx.putImageData(imageData, 0, 0);
+
+    if (blurRadius > 0) {
+      const blurredCanvas = document.createElement('canvas');
+      blurredCanvas.width = gridW;
+      blurredCanvas.height = gridH;
+      const blurredCtx = blurredCanvas.getContext('2d')!;
+      blurredCtx.filter = `blur(${blurRadius}px)`;
+      blurredCtx.drawImage(canvas, 0, 0);
+      return blurredCanvas.toDataURL();
+    }
+
+    return canvas.toDataURL();
+  });
+</script>
+
+{#if imageDataUrl}
+  <Image
+    href={imageDataUrl}
+    x={imagePlacement.x}
+    y={imagePlacement.y}
+    width={imagePlacement.width}
+    height={imagePlacement.height}
+    {imageRendering}
+    {opacity}
+    preserveAspectRatio="none"
+    class={cls('lc-raster', className)}
+  />
+{/if}

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

@@ -0,0 +1,48 @@
+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 RasterPropsWithoutHTML = {
+    /**
+     * 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;
+    /** Left bound of the raster in data coordinates. Defaults to `0` in grid mode. */
+    x1?: number;
+    /** Top bound of the raster in data coordinates. Defaults to `0` in grid mode. */
+    y1?: number;
+    /** Right bound of the raster in data coordinates. Defaults to `width` in grid mode. */
+    x2?: number;
+    /** Bottom bound of the raster in data coordinates. Defaults to `height` in grid mode. */
+    y2?: 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;
+    /** Pixel size (downsampling factor). Higher = fewer pixels, faster. @default 1 */
+    pixelSize?: number;
+    /** Gaussian blur radius applied to grid values. @default 0 */
+    blur?: number;
+    /** Image rendering quality hint. @default 'auto' */
+    imageRendering?: 'auto' | 'pixelated' | 'crisp-edges';
+} & Pick<CommonStyleProps, 'opacity'>;
+export type RasterProps = RasterPropsWithoutHTML & Without<SVGAttributes<SVGImageElement>, RasterPropsWithoutHTML>;
+declare const Raster: import("svelte").Component<RasterProps, {}, "">;
+type Raster = ReturnType<typeof Raster>;
+export default Raster;