layerchart 2.0.0-next.47 → 2.0.0-next.49

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

@@ -0,0 +1,70 @@
+export type MonthCell = {
+    x: number;
+    y: number;
+    color: any;
+    data: any;
+    date: Date;
+};
+export type MonthPropsWithoutHTML = {
+    /**
+     * The start date of the calendar.
+     */
+    start: Date;
+    /**
+     * The end date of the calendar.
+     */
+    end: Date;
+    /**
+     * Size of the cell in the calendar.
+     *
+     * @default 25
+     */
+    cellSize?: number;
+    /**
+     * Number of months to display per row. If undefined, automatically calculated based on available width.
+     */
+    monthsPerRow?: number;
+    /**
+     * Padding multiplier between months (relative to cellSize).
+     *
+     * @default 1.2
+     */
+    monthPadding?: number;
+    /**
+     * Vertical spacing multiplier between month rows (in number of cell heights).
+     *
+     * @default 8
+     */
+    rowSpacing?: number;
+    /**
+     * Whether to show the day number in each cell.
+     *
+     * @default true
+     */
+    showDayNumber?: boolean;
+    /**
+     * Props to pass to the `<text>` element for month labels.
+     */
+    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
+    /**
+     * Props to pass to the `<text>` element for day numbers.
+     */
+    dayNumberProps?: Partial<ComponentProps<typeof Text>>;
+    /**
+     * Setup pointer events to show tooltip for related data
+     */
+    tooltip?: boolean;
+    children?: Snippet<[{
+        cells: MonthCell[];
+        cellSize: number;
+    }]>;
+} & Omit<RectPropsWithoutHTML, 'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'>;
+export type MonthProps = MonthPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, MonthPropsWithoutHTML>;
+import { type ComponentProps, type Snippet } from 'svelte';
+import { type RectPropsWithoutHTML } from './Rect.svelte';
+import Text from './Text.svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../utils/types.js';
+declare const Month: import("svelte").Component<MonthPropsWithoutHTML, {}, "">;
+type Month = ReturnType<typeof Month>;
+export default Month;

package/dist/components/Path.svelte

@@ -118,6 +118,14 @@
     endContent,
     opacity,
     pathRef: pathRefProp = $bindable(),
+    onclick,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    onpointerdown,
+    onpointerover,
+    onpointerout,
+    ontouchmove,
     ...restProps
   }: PathProps = $props();
 
@@ -185,26 +193,26 @@
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   if (layerCtx === 'canvas') {
     ctx.registerComponent({ name: 'Path', kind: 'mark', canvasRender: {
       render,
       events: {
-        click: restProps.onclick,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-        pointerdown: restProps.onpointerdown,
-        pointerover: restProps.onpointerover,
-        pointerout: restProps.onpointerout,
-        touchmove: restProps.ontouchmove,
+        get click() { return onclick; },
+        get pointerenter() { return onpointerenter; },
+        get pointermove() { return onpointermove; },
+        get pointerleave() { return onpointerleave; },
+        get pointerdown() { return onpointerdown; },
+        get pointerover() { return onpointerover; },
+        get pointerout() { return onpointerout; },
+        get touchmove() { return ontouchmove; },
       },
       deps: () => [
-        fillKey.current,
+        fillKey!.current,
         fillOpacity,
-        strokeKey.current,
+        strokeKey!.current,
         strokeOpacity,
         strokeWidth,
         opacity,
@@ -275,6 +283,14 @@
     <path
       d={tweenedState.current}
       {...restProps}
+      {onclick}
+      {onpointerenter}
+      {onpointermove}
+      {onpointerleave}
+      {onpointerdown}
+      {onpointerover}
+      {onpointerout}
+      {ontouchmove}
       class={cls('lc-path', className)}
       {fill}
       fill-opacity={fillOpacity}

package/dist/components/Polygon.svelte

@@ -257,26 +257,28 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      // Polygon resolve returns a path string, so resolve coords separately for motion
-      let resolvedCx: number, resolvedCy: number;
-      if (geo.projection) {
-        [resolvedCx, resolvedCy] = resolveGeoDataPair(cx, cy, d, geo.projection);
-      } else {
-        resolvedCx = resolveDataProp(cx, d, chartCtx.xScale, 0);
-        resolvedCy = resolveDataProp(cy, d, chartCtx.yScale, 0);
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        // Polygon resolve returns a path string, so resolve coords separately for motion
+        let resolvedCx: number, resolvedCy: number;
+        if (geo.projection) {
+          [resolvedCx, resolvedCy] = resolveGeoDataPair(cx, cy, d, geo.projection);
+        } else {
+          resolvedCx = resolveDataProp(cx, d, chartCtx.xScale, 0);
+          resolvedCy = resolveDataProp(cy, d, chartCtx.yScale, 0);
+        }
+        const resolvedR = resolveDataProp(r, d, chartCtx.rScale, typeof r === 'number' ? r : 1);
+        untrack(() => dataMotionMap.update(key, { cx: resolvedCx, cy: resolvedCy, r: resolvedR }));
       }
-      const resolvedR = resolveDataProp(r, d, chartCtx.rScale, typeof r === 'number' ? r : 1);
-      untrack(() => dataMotionMap.update(key, { cx: resolvedCx, cy: resolvedCy, r: resolvedR }));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // TODO: Apply animated values from dataMotionMap to SVG/HTML/Canvas templates.
   // Polygon uses a path string from resolvePolygon(), so animated cx/cy/r values
@@ -395,8 +397,8 @@
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   chartCtx.registerComponent({
     name: 'Polygon',
@@ -425,9 +427,9 @@
       deps: () => [
         dataMode,
         dataMode ? resolvedItems : null,
-        fillKey.current,
+        fillKey!.current,
         fillOpacity,
-        strokeKey.current,
+        strokeKey!.current,
         strokeWidth,
         opacity,
         className,

package/dist/components/RadialGradient.svelte

@@ -144,7 +144,7 @@
   }
 
   if (layerCtx === 'canvas') {
-    ctx.registerComponent({ name: 'Gradient', kind: 'mark', canvasRender: {
+    ctx.registerComponent({ name: 'Gradient', kind: 'group', canvasRender: {
       render,
       deps: () => [stops, cx, cy, fx, fy, ctx.width, ctx.height],
     } });

package/dist/components/Raster.svelte

@@ -17,6 +17,15 @@
     /** 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)
@@ -50,20 +59,27 @@
   import { cls } from '@layerstack/tailwind';
   import { scaleSequential } from 'd3-scale';
   import { interpolateYlGnBu } from 'd3-scale-chromatic';
-  import { max, min, blur2 } from 'd3-array';
+  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,
@@ -78,6 +94,15 @@
 
   // 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({
@@ -87,8 +112,8 @@
       if (!isGridMode) return {};
       return {
         data: [
-          { x: 0, y: 0 },
-          { x: widthProp, y: heightProp },
+          { x: gridBounds.x1, y: gridBounds.y1 },
+          { x: gridBounds.x2, y: gridBounds.y2 },
         ],
         x: 'x',
         y: 'y',
@@ -97,26 +122,23 @@
   });
 
   // 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))
-  );
+  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 gridValues = $derived.by(() => {
+  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[]);
+      return dataProp instanceof Float64Array ? dataProp : Float64Array.from(dataProp as number[]);
     }
 
     // Mode 2: Continuous function
@@ -143,7 +165,7 @@
 
     const xAcc = xProp ? resolveAccessor(xProp) : ctx.x;
     const yAcc = yProp ? resolveAccessor(yProp) : ctx.y;
-    const valAcc = resolveAccessor(valueProp ?? 'value');
+    const valAcc = resolveAccessor((valueProp ?? 'value') as Accessor);
 
     const points: [number, number, number][] = chartData.map((d: any) => [
       ctx.xScale(xAcc(d)) / scaleX,
@@ -154,21 +176,43 @@
     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;
+  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 = blurredValues.filter((v) => !isNaN(v));
+    const validValues = rasterValues.filter((v) => !isNaN(v));
     const minValue = min(validValues) ?? 0;
     const maxValue = max(validValues) ?? 1;
     if (ctx.cScale) {
-      return ctx.cScale.copy().domain([minValue, maxValue]);
+      const scale = ctx.cScale.copy();
+      return ctx.props.cDomain ? scale : scale.domain([minValue, maxValue]);
     }
     return scaleSequential([minValue, maxValue], interpolateYlGnBu);
   });
@@ -191,23 +235,56 @@
     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 (blurredValues.length === 0 || gridW <= 0 || gridH <= 0) 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 < blurredValues.length; i++) {
-      const v = blurredValues[i];
+    for (let i = 0; i < rasterValues.length; i++) {
+      const v = rasterValues[i];
       const offset = i * 4;
 
       if (isNaN(v)) {
@@ -228,6 +305,17 @@
     }
 
     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>
@@ -235,10 +323,10 @@
 {#if imageDataUrl}
   <Image
     href={imageDataUrl}
-    x={ctx.width / 2}
-    y={ctx.height / 2}
-    width={ctx.width}
-    height={ctx.height}
+    x={imagePlacement.x}
+    y={imagePlacement.y}
+    width={imagePlacement.width}
+    height={imagePlacement.height}
     {imageRendering}
     {opacity}
     preserveAspectRatio="none"

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

@@ -14,6 +14,14 @@ export type RasterPropsWithoutHTML = {
     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)

package/dist/components/Rect.svelte

@@ -240,18 +240,21 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion as MotionOptions | undefined);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveRect(d);
-      untrack(() => dataMotionMap.update(key, resolved));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  // Only create the data motion tracking effect when motion is actually configured
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveRect(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {
@@ -288,25 +291,27 @@
   const _initialWidth = initialWidth ?? (width ?? 0);
   const _initialHeight = initialHeight ?? (height ?? 0);
 
+  // Parse motion config once, then pass resolved config to each axis
+  // (avoids 4 separate parseMotionProp calls that re-parse the same prop)
   const motionX = createMotion(
     _initialX,
     () => (typeof x === 'number' ? x : 0),
-    parseMotionProp(motion, 'x')
+    motion === undefined ? undefined : parseMotionProp(motion, 'x')
   );
   const motionY = createMotion(
     _initialY,
     () => (typeof y === 'number' ? y : 0),
-    parseMotionProp(motion, 'y')
+    motion === undefined ? undefined : parseMotionProp(motion, 'y')
   );
   const motionWidth = createMotion(
     _initialWidth,
     () => width ?? 0,
-    parseMotionProp(motion, 'width')
+    motion === undefined ? undefined : parseMotionProp(motion, 'width')
   );
   const motionHeight = createMotion(
     _initialHeight,
     () => height ?? 0,
-    parseMotionProp(motion, 'height')
+    motion === undefined ? undefined : parseMotionProp(motion, 'height')
   );
 
   const layerCtx = getLayerContext();
@@ -378,8 +383,9 @@
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
+  // Only create key trackers when in canvas mode (they're only used for canvas dep tracking)
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   chartCtx.registerComponent({
     name: 'Rect',
@@ -411,8 +417,8 @@
         motionY.current,
         motionWidth.current,
         motionHeight.current,
-        fillKey.current,
-        strokeKey.current,
+        fillKey!.current,
+        strokeKey!.current,
         fillOpacity,
         strokeOpacity,
         strokeWidth,