layerchart 2.0.0-next.45 → 2.0.0-next.47

package/dist/utils/download.js

@@ -0,0 +1,250 @@
+/**
+ * SVG presentation and style properties that need to be inlined
+ * to ensure correct rendering when the SVG is exported as an image
+ * (CSS variables and class-based styles won't be available outside the DOM).
+ */
+const SVG_STYLE_PROPERTIES = [
+    'fill',
+    'fill-opacity',
+    'fill-rule',
+    'stroke',
+    'stroke-opacity',
+    'stroke-width',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'opacity',
+    'color',
+    'font-family',
+    'font-size',
+    'font-weight',
+    'font-style',
+    'font-variant',
+    'text-anchor',
+    'dominant-baseline',
+    'alignment-baseline',
+    'visibility',
+    'display',
+    'paint-order',
+    'shape-rendering',
+    'text-rendering',
+    'letter-spacing',
+    'word-spacing',
+];
+/**
+ * Clone an SVG element and inline all computed styles so the exported image
+ * renders correctly without access to the page's stylesheets or CSS variables.
+ */
+function inlineSvgStyles(svg) {
+    const clone = svg.cloneNode(true);
+    const originalElements = Array.from(svg.querySelectorAll('*'));
+    const clonedElements = Array.from(clone.querySelectorAll('*'));
+    for (let i = 0; i < originalElements.length; i++) {
+        const original = originalElements[i];
+        const cloneEl = clonedElements[i];
+        if (!(cloneEl instanceof SVGElement))
+            continue;
+        const computed = window.getComputedStyle(original);
+        for (const prop of SVG_STYLE_PROPERTIES) {
+            const value = computed.getPropertyValue(prop);
+            if (value) {
+                cloneEl.style.setProperty(prop, value);
+            }
+        }
+    }
+    return clone;
+}
+/**
+ * Draw an SVG element onto a canvas context at the given pixel dimensions.
+ */
+function drawSvgToCanvas(svg, ctx, pixelWidth, pixelHeight) {
+    const inlined = inlineSvgStyles(svg);
+    inlined.setAttribute('width', String(pixelWidth));
+    inlined.setAttribute('height', String(pixelHeight));
+    const svgStr = new XMLSerializer().serializeToString(inlined);
+    const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            ctx.drawImage(img, 0, 0);
+            URL.revokeObjectURL(url);
+            resolve();
+        };
+        img.onerror = (e) => {
+            URL.revokeObjectURL(url);
+            reject(e);
+        };
+        img.src = url;
+    });
+}
+/**
+ * Composite all SVG and Canvas layers within a chart container element into
+ * an offscreen canvas and return the result as a `Blob`.
+ *
+ * Layers are drawn in ascending z-index order (DOM order used as tiebreaker).
+ * SVG layer styles (CSS variables, class-based colours, etc.) are inlined
+ * before serialisation so the image renders correctly outside the DOM.
+ */
+export async function getChartImageBlob(container, options = {}) {
+    const { background, format = 'png', quality = 0.92 } = options;
+    const dpr = options.pixelRatio ?? window.devicePixelRatio ?? 1;
+    const cssWidth = container.clientWidth;
+    const cssHeight = container.clientHeight;
+    const pixelWidth = Math.round(cssWidth * dpr);
+    const pixelHeight = Math.round(cssHeight * dpr);
+    const offscreen = document.createElement('canvas');
+    offscreen.width = pixelWidth;
+    offscreen.height = pixelHeight;
+    const ctx = offscreen.getContext('2d');
+    // Default white background for lossy formats that don't support transparency
+    const bg = background ?? (format !== 'png' ? 'white' : undefined);
+    if (bg) {
+        ctx.fillStyle = bg;
+        ctx.fillRect(0, 0, pixelWidth, pixelHeight);
+    }
+    // Find all SVG and Canvas layers within the container, sorted by z-index.
+    // `.lc-hit-canvas` is excluded via the class selector (it uses `.lc-layout-canvas`).
+    const layers = Array.from(container.querySelectorAll('.lc-layout-svg, .lc-layout-canvas')).sort((a, b) => {
+        const aZ = parseFloat(window.getComputedStyle(a).zIndex) || 0;
+        const bZ = parseFloat(window.getComputedStyle(b).zIndex) || 0;
+        return aZ - bZ;
+    });
+    for (const layer of layers) {
+        if (layer instanceof SVGElement) {
+            await drawSvgToCanvas(layer, ctx, pixelWidth, pixelHeight);
+        }
+        else if (layer instanceof HTMLCanvasElement) {
+            // Canvas layers are already rendered at physical pixel resolution via scaleCanvas().
+            // Draw them at full natural size to preserve sharpness.
+            ctx.drawImage(layer, 0, 0);
+        }
+    }
+    return new Promise((resolve, reject) => {
+        offscreen.toBlob((blob) => {
+            if (blob)
+                resolve(blob);
+            else
+                reject(new Error('Failed to create image blob'));
+        }, `image/${format}`, quality);
+    });
+}
+/**
+ * Collect and sort all `.lc-layout-svg` layers within a chart container by z-index,
+ * preserving DOM order as a tiebreaker (Array.from + stable sort).
+ */
+function getSvgLayers(container) {
+    return Array.from(container.querySelectorAll('.lc-layout-svg')).sort((a, b) => {
+        const aZ = parseFloat(window.getComputedStyle(a).zIndex) || 0;
+        const bZ = parseFloat(window.getComputedStyle(b).zIndex) || 0;
+        return aZ - bZ;
+    });
+}
+/**
+ * Return a self-contained SVG string for all SVG layers within a chart container.
+ *
+ * - Computed styles (CSS variables, class-based colours, etc.) are inlined so
+ *   the file renders correctly in editors, browsers, and other tools.
+ * - When multiple `<Svg>` layers are present they are composited into a single
+ *   `<svg>` in z-index order by merging their `<defs>` and content `<g>` elements.
+ * - Returns `null` when the container has no SVG layers (e.g. Canvas-only charts).
+ */
+export function getChartSvgString(container) {
+    const layers = getSvgLayers(container);
+    if (layers.length === 0)
+        return null;
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+    // Single layer — inline styles, stamp dimensions, serialise.
+    if (layers.length === 1) {
+        const inlined = inlineSvgStyles(layers[0]);
+        inlined.setAttribute('width', String(width));
+        inlined.setAttribute('height', String(height));
+        return new XMLSerializer().serializeToString(inlined);
+    }
+    // Multiple layers — composite into one <svg>.
+    const ns = 'http://www.w3.org/2000/svg';
+    const wrapper = document.createElementNS(ns, 'svg');
+    wrapper.setAttribute('xmlns', ns);
+    wrapper.setAttribute('width', String(width));
+    wrapper.setAttribute('height', String(height));
+    wrapper.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    const combinedDefs = document.createElementNS(ns, 'defs');
+    wrapper.appendChild(combinedDefs);
+    for (const layer of layers) {
+        const inlined = inlineSvgStyles(layer);
+        // Collect <defs> children (gradients, clip paths, filters, etc.)
+        for (const child of Array.from(inlined.querySelectorAll(':scope > defs > *'))) {
+            combinedDefs.appendChild(child);
+        }
+        // Append the content <g> (carries the padding translate and any zoom transform)
+        const contentG = inlined.querySelector('.lc-layout-svg-g');
+        if (contentG)
+            wrapper.appendChild(contentG);
+    }
+    return new XMLSerializer().serializeToString(wrapper);
+}
+/**
+ * Download the SVG layers of a chart container as a `.svg` file.
+ *
+ * Canvas layers are not included — use `downloadImage` when the chart uses
+ * `<Canvas>` layers or contains a mix of SVG and Canvas.
+ *
+ * Returns `false` without throwing if the container has no SVG layers.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { downloadSvg } from '../index.js';
+ *   let chartRef = $state<HTMLElement>();
+ * </script>
+ *
+ * <Chart bind:ref={chartRef} ...>...</Chart>
+ * <button onclick={() => downloadSvg(chartRef, { filename: 'my-chart' })}>
+ *   Download SVG
+ * </button>
+ * ```
+ */
+export function downloadSvg(container, options = {}) {
+    const { filename = 'chart' } = options;
+    const svgStr = getChartSvgString(container);
+    if (svgStr === null)
+        return false;
+    const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${filename}.svg`;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+    return true;
+}
+/**
+ * Download a chart container as an image file.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { downloadImage } from '../index.js';
+ *   let chartRef = $state<HTMLElement>();
+ * </script>
+ *
+ * <Chart bind:ref={chartRef} ...>...</Chart>
+ * <button onclick={() => downloadImage(chartRef, { filename: 'my-chart' })}>
+ *   Download PNG
+ * </button>
+ * ```
+ */
+export async function downloadImage(container, options = {}) {
+    const { filename = 'chart', format = 'png', ...imageOptions } = options;
+    const blob = await getChartImageBlob(container, { format, ...imageOptions });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${filename}.${format}`;
+    a.click();
+    // Revoke after a short delay to ensure the browser has started the download
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/dist/utils/graph/sankey.js

@@ -3,15 +3,17 @@ import { csvParseRows } from 'd3-dsv';
  * Convert CSV rows in format: 'source,target,value' to SankeyGraph
  */
 export function sankeyGraphFromCsv(csv) {
-    const links = csvParseRows(csv, ([source, target, value /*, linkColor = color*/]) => source && target
-        ? {
+    const links = csvParseRows(csv, (row) => {
+        const [source, target, rawValue] = row;
+        if (!source || !target)
+            return null;
+        const num = rawValue ? +rawValue : NaN;
+        return {
             source,
             target,
-            // @ts-expect-error
-            value: !value || isNaN((value = +value)) ? 1 : +value,
-            // color: linkColor,
-        }
-        : null);
+            value: isNaN(num) ? 1 : num,
+        };
+    });
     return { nodes: sankeyNodesFromLinks(links), links };
 }
 /**

package/dist/utils/index.d.ts

@@ -1,6 +1,8 @@
 export { applyLanes } from './array.js';
+export * from './download.js';
 export * from './canvas.js';
 export * from './common.js';
+export * from './dataProp.js';
 export * from './geo.js';
 export * from './hierarchy.js';
 export * from './math.js';
@@ -11,6 +13,8 @@ export * from './stack.js';
 export * from './ticks.js';
 export * from './treemap.js';
 export * from './threshold.js';
+export * from './rasterInterpolate.js';
+export * from './stats.js';
 export * from './types.js';
 export * from './graph/dagre.js';
 export * from './graph/sankey.js';

package/dist/utils/index.js

@@ -1,6 +1,8 @@
 export { applyLanes } from './array.js';
+export * from './download.js';
 export * from './canvas.js';
 export * from './common.js';
+export * from './dataProp.js';
 export * from './geo.js';
 export * from './hierarchy.js';
 export * from './math.js';
@@ -11,6 +13,8 @@ export * from './stack.js';
 export * from './ticks.js';
 export * from './treemap.js';
 export * from './threshold.js';
+export * from './rasterInterpolate.js';
+export * from './stats.js';
 export * from './types.js';
 export * from './graph/dagre.js';
 export * from './graph/sankey.js';

package/dist/utils/motion.svelte.d.ts

@@ -124,6 +124,20 @@ export declare function createMotionTracker(): {
     handle: (promise: Promise<void> | void) => void;
     readonly current: boolean;
 };
+/**
+ * Creates a motion state map for data mode rendering.
+ * Tracks per-item animated values keyed by the item key.
+ * Returns null if no motion is configured (type: 'none').
+ */
+export declare function createDataMotionMap(motionProp: MotionOptions | undefined): {
+    /** Update motion targets for an item. Creates states on first call per key/prop. */
+    update(key: any, values: Record<string, number>): void;
+    /** Get current animated values for an item, or null if not tracked yet. */
+    get(key: any): Record<string, number> | null;
+    /** Remove items no longer in the active set. */
+    cleanup(activeKeys: Set<any>): void;
+} | null;
+export type DataMotionMap = NonNullable<ReturnType<typeof createDataMotionMap>>;
 /**
  * Extracts tween configuration from a motion prop
  * @returns Resolved tween configuration or undefined if not a tween

package/dist/utils/motion.svelte.js

@@ -1,3 +1,4 @@
+import { untrack } from 'svelte';
 import { Spring, Tween } from 'svelte/motion';
 /**
  * Extended Spring class that adds a type discriminator to help with
@@ -62,7 +63,14 @@ function setupTracking(motion, getValue, options) {
     if (options.controlled)
         return;
     $effect(() => {
-        motion.set(getValue(), { instant: motion.target == null });
+        const value = getValue();
+        if (value == null)
+            return;
+        // Use untrack to prevent reactive reads inside motion.set() and motion.target
+        // from being tracked as dependencies of this effect (which would cause infinite loops)
+        untrack(() => {
+            motion.set(value, { instant: motion.target == null });
+        });
     });
 }
 export function createMotion(initialValue, getValue, motionProp, options = {}) {
@@ -114,6 +122,60 @@ export function createMotionTracker() {
         },
     };
 }
+/**
+ * Creates a motion state map for data mode rendering.
+ * Tracks per-item animated values keyed by the item key.
+ * Returns null if no motion is configured (type: 'none').
+ */
+export function createDataMotionMap(motionProp) {
+    const config = parseMotionProp(motionProp);
+    if (config.type === 'none')
+        return null;
+    const map = new Map();
+    function create(value) {
+        return config.type === 'spring'
+            ? new MotionSpring(value, config.options)
+            : new MotionTween(value, config.options);
+    }
+    return {
+        /** Update motion targets for an item. Creates states on first call per key/prop. */
+        update(key, values) {
+            let itemMap = map.get(key);
+            if (!itemMap) {
+                itemMap = new Map();
+                map.set(key, itemMap);
+            }
+            for (const [prop, value] of Object.entries(values)) {
+                let state = itemMap.get(prop);
+                if (!state) {
+                    state = create(value);
+                    itemMap.set(prop, state);
+                }
+                else {
+                    state.set(value);
+                }
+            }
+        },
+        /** Get current animated values for an item, or null if not tracked yet. */
+        get(key) {
+            const itemMap = map.get(key);
+            if (!itemMap)
+                return null;
+            const result = {};
+            for (const [prop, state] of itemMap) {
+                result[prop] = state.current;
+            }
+            return result;
+        },
+        /** Remove items no longer in the active set. */
+        cleanup(activeKeys) {
+            for (const key of map.keys()) {
+                if (!activeKeys.has(key))
+                    map.delete(key);
+            }
+        },
+    };
+}
 /**
  * Extracts tween configuration from a motion prop
  * @returns Resolved tween configuration or undefined if not a tween

package/dist/utils/path.d.ts

@@ -10,7 +10,10 @@ export declare function circlePath(dimensions: {
     r: number;
     sweep?: 'inside' | 'outside';
 }): string;
-/** Create spike (triangle) using path data  */
+/**
+ * @deprecated Use `vectorSpikePath` or the `Vector` component with `shape="spike"` instead.
+ * Create spike (triangle) using path data
+ */
 export declare function spikePath({ x, y, width, height, }: {
     x: number;
     y: number;
@@ -27,5 +30,45 @@ export declare function roundedPolygonPath(coords: {
     x: number;
     y: number;
 }[], radius: number): string;
+/** Vector anchor position */
+export type VectorAnchor = 'start' | 'middle' | 'end';
+/**
+ * Create arrow vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ *
+ * The arrow consists of a stem line with a V-shaped arrowhead at the tip.
+ */
+export declare function vectorArrowPath({ length, anchor, width, }: {
+    length: number;
+    anchor?: VectorAnchor;
+    /** Total width of the arrowhead (wing tip to wing tip). */
+    width?: number;
+}): string;
+/**
+ * Create spike (filled triangle) vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ */
+export declare function vectorSpikePath({ length, anchor, width, }: {
+    length: number;
+    anchor?: VectorAnchor;
+    width?: number;
+}): string;
+/**
+ * Create filled arrow vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ *
+ * The shape has a tapered tail that widens into a triangular arrowhead at the tip.
+ */
+export declare function vectorArrowFilledPath({ length, anchor, width, }: {
+    length: number;
+    anchor?: VectorAnchor;
+    /** Total width of the arrowhead. Defaults to 30% of length. */
+    width?: number;
+}): string;
+/**
+ * Apply rotation (degrees) and translation to a path string containing only M and L commands
+ * with absolute coordinates. Converts local vector path data to absolute positioned coordinates.
+ */
+export declare function transformVectorPath(pathData: string, cx: number, cy: number, rotateDeg: number): string;
 /** Flatten all `y` coordinates to `0` */
 export declare function flattenPathData(pathData: string, yOverride?: number): string;

package/dist/utils/path.js

@@ -24,17 +24,12 @@ export function circlePath(dimensions) {
     a ${r},${r} 0 1,${_sweep} -${r * 2},0
   `;
 }
-/** Create spike (triangle) using path data  */
+/**
+ * @deprecated Use `vectorSpikePath` or the `Vector` component with `shape="spike"` instead.
+ * Create spike (triangle) using path data
+ */
 export function spikePath({ x, y, width, height, }) {
-    const startPoint = { x: x - width / 2, y };
-    const midPoint = { x, y: y - height };
-    const endPoint = { x: x + width / 2, y };
-    const pathData = `
-    M ${startPoint.x},${startPoint.y}
-    L ${midPoint.x},${midPoint.y}
-    L ${endPoint.x},${endPoint.y}
-  `;
-    return pathData;
+    return transformVectorPath(vectorSpikePath({ length: height, anchor: 'start', width }), x, y, 0);
 }
 /** Create rounded polygon path
  *
@@ -66,6 +61,114 @@ export function roundedPolygonPath(coords, radius) {
     path += 'Z';
     return path;
 }
+/**
+ * Create arrow vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ *
+ * The arrow consists of a stem line with a V-shaped arrowhead at the tip.
+ */
+export function vectorArrowPath({ length, anchor = 'middle', width = 5, }) {
+    const halfWidth = width / 2;
+    // Compute y-offsets for base and tip relative to anchor point at origin
+    let baseY, tipY;
+    switch (anchor) {
+        case 'start':
+            baseY = 0;
+            tipY = -length;
+            break;
+        case 'end':
+            baseY = length;
+            tipY = 0;
+            break;
+        case 'middle':
+        default:
+            baseY = length / 2;
+            tipY = -length / 2;
+            break;
+    }
+    // Stem from base to tip, then arrowhead wings at the tip
+    return `M0,${baseY}L0,${tipY}M${-halfWidth},${tipY + width}L0,${tipY}L${halfWidth},${tipY + width}`;
+}
+/**
+ * Create spike (filled triangle) vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ */
+export function vectorSpikePath({ length, anchor = 'start', width = 3, }) {
+    const halfWidth = width / 2;
+    let baseY, tipY;
+    switch (anchor) {
+        case 'start':
+            baseY = 0;
+            tipY = -length;
+            break;
+        case 'end':
+            baseY = length;
+            tipY = 0;
+            break;
+        case 'middle':
+        default:
+            baseY = length / 2;
+            tipY = -length / 2;
+            break;
+    }
+    return `M${-halfWidth},${baseY}L0,${tipY}L${halfWidth},${baseY}`;
+}
+/**
+ * Create filled arrow vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ *
+ * The shape has a tapered tail that widens into a triangular arrowhead at the tip.
+ */
+export function vectorArrowFilledPath({ length, anchor = 'middle', width = length * 0.3, }) {
+    let baseY, tipY;
+    switch (anchor) {
+        case 'start':
+            baseY = 0;
+            tipY = -length;
+            break;
+        case 'end':
+            baseY = length;
+            tipY = 0;
+            break;
+        case 'middle':
+        default:
+            baseY = length / 2;
+            tipY = -length / 2;
+            break;
+    }
+    const headLength = Math.max(3, length * 0.3);
+    const headSpike = headLength * 0.2;
+    const headWidth = Math.max(2, width);
+    const tailWidth = headWidth * 0.3;
+    // Path points (relative to base→tip axis)
+    const headStart = tipY + headLength;
+    const spikeY = headStart - headSpike;
+    return [
+        `M0,${baseY}`,
+        `L${tailWidth / 2},${spikeY}`,
+        `L${headWidth / 2},${headStart}`,
+        `L0,${tipY}`,
+        `L${-headWidth / 2},${headStart}`,
+        `L${-tailWidth / 2},${spikeY}`,
+        'Z',
+    ].join('');
+}
+/**
+ * Apply rotation (degrees) and translation to a path string containing only M and L commands
+ * with absolute coordinates. Converts local vector path data to absolute positioned coordinates.
+ */
+export function transformVectorPath(pathData, cx, cy, rotateDeg) {
+    const rad = (rotateDeg * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    return pathData.replace(/([ML])(-?\d*\.?\d+),(-?\d*\.?\d+)/g, (_match, cmd, xStr, yStr) => {
+        const lx = Number(xStr);
+        const ly = Number(yStr);
+        const ax = cx + lx * cos - ly * sin;
+        const ay = cy + lx * sin + ly * cos;
+        return `${cmd}${ax},${ay}`;
+    });
+}
 /** Flatten all `y` coordinates to `0` */
 export function flattenPathData(pathData, yOverride = 0) {
     let result = pathData;
@@ -77,12 +180,9 @@ export function flattenPathData(pathData, yOverride = 0) {
     result = result.replace(/([v])(-?\d*\.?\d+)/g, (match, command, l) => {
         return `${command}${0}`;
     });
-    // TODO: Flatten all elliptical arc commands (ex. `a4,4 0 0 1 4,4`) with `0` height
-    // result = result.replace(
-    //   /a(\d+),(\d+) (\d+) (\d+) (\d+) (\d+),(\d+)/g,
-    //   (match, rx, ry, rot, large, sweep, x, y) => {
-    //     return `a${rx},0 ${rot} ${large} ${sweep} ${x},0`;
-    //   }
-    // );
+    // Flatten relative elliptical arc commands (ex. `a4,4 0 0 1 4,4`) — zero out ry and dy
+    result = result.replace(/a(-?\d*\.?\d+),(-?\d*\.?\d+) (\d+) (\d+) (\d+) (-?\d*\.?\d+),(-?\d*\.?\d+)/g, (match, rx, ry, rot, large, sweep, dx, dy) => {
+        return `a${rx},0 ${rot} ${large} ${sweep} ${dx},0`;
+    });
     return result;
 }

package/dist/utils/rasterInterpolate.d.ts

@@ -0,0 +1,11 @@
+export type InterpolateMethod = 'none' | 'nearest' | 'barycentric';
+/**
+ * Interpolate scattered 2D points onto a regular grid.
+ *
+ * @param points - Array of [x, y, value] triples in grid coordinates
+ * @param width - Grid width (columns)
+ * @param height - Grid height (rows)
+ * @param method - Interpolation method
+ * @returns Flat Float64Array of grid values (row-major, length = width * height)
+ */
+export declare function interpolateGrid(points: [number, number, number][], width: number, height: number, method?: InterpolateMethod): Float64Array;