layerchart 2.0.0-next.5 → 2.0.0-next.50

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/genData.d.ts

@@ -23,21 +23,21 @@ export declare function createSeries<TKey extends string>(options: {
 }): ({
     x: number;
 } & { [K in TKey]: number; })[];
-export declare function createDateSeries<TKey extends string>(options: {
+export declare function createDateSeries<TKey extends string>(options?: {
     count?: number;
-    min: number;
-    max: number;
+    min?: number;
+    max?: number;
     keys?: TKey[];
     value?: 'number' | 'integer';
 }): ({
     date: Date;
 } & { [K in TKey]: number; })[];
-export declare function createTimeSeries<TKey extends string>(options: {
+export declare function createTimeSeries<TKey extends string>(options?: {
     count?: number;
-    min: number;
-    max: number;
-    keys: TKey[];
-    value: 'number' | 'integer';
+    min?: number;
+    max?: number;
+    keys?: TKey[];
+    value?: 'number' | 'integer';
 }): ({
     name: string;
     startDate: Date;
@@ -75,3 +75,17 @@ export declare function getSpiral({ angle, radius, count, width, height, }: {
     x: number;
     y: number;
 }[];
+interface SineWaveOptions {
+    numPoints: number;
+    frequency?: number;
+    amplitude?: number;
+    noiseLevel?: number;
+    phase?: number;
+    xMin?: number;
+    xMax?: number;
+}
+export declare function generateSineWave(options: SineWaveOptions): {
+    x: number;
+    y: number;
+}[];
+export {};

package/dist/utils/genData.js

@@ -1,4 +1,4 @@
-import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
+import { timeMinute, timeDay } from 'd3-time';
 import { cumsum } from 'd3-array';
 import { randomNormal } from 'd3-random';
 import { degreesToRadians, radiansToDegrees } from './math.js';
@@ -43,33 +43,35 @@ export function createSeries(options) {
         };
     });
 }
-export function createDateSeries(options) {
-    const now = startOfToday();
+export function createDateSeries(options = {}) {
+    const now = timeDay.floor(new Date());
     const count = options.count ?? 10;
-    const min = options.min;
-    const max = options.max;
+    const min = options.min ?? 0;
+    const max = options.max ?? 100;
     const keys = options.keys ?? ['value'];
+    const valueType = options.value ?? 'number';
     return Array.from({ length: count }).map((_, i) => {
         return {
-            date: subDays(now, count - i - 1),
+            date: timeDay.offset(now, -count + i),
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
+                    valueType === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
             })),
         };
     });
 }
-export function createTimeSeries(options) {
+export function createTimeSeries(options = {}) {
     const count = options.count ?? 10;
-    const min = options.min;
-    const max = options.max;
+    const min = options.min ?? 0;
+    const max = options.max ?? 100;
     const keys = options.keys ?? ['value'];
-    let lastStartDate = startOfDay(new Date());
+    const valueType = options.value ?? 'number';
+    let lastStartDate = timeDay.floor(new Date());
     const timeSeries = Array.from({ length: count }).map((_, i) => {
-        const startDate = addMinutes(lastStartDate, getRandomInteger(0, 60));
-        const endDate = addMinutes(startDate, getRandomInteger(5, 60));
+        const startDate = timeMinute.offset(lastStartDate, getRandomInteger(0, 60));
+        const endDate = timeMinute.offset(startDate, getRandomInteger(5, 60));
         lastStartDate = startDate;
         return {
             name: `item ${i + 1}`,
@@ -78,7 +80,7 @@ export function createTimeSeries(options) {
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
+                    valueType === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
             })),
         };
@@ -124,3 +126,21 @@ export function getSpiral({ angle, radius, count, width, height, }) {
         };
     });
 }
+export function generateSineWave(options) {
+    const { numPoints, frequency = 1, amplitude = 1, noiseLevel = 0, phase = 0, xMin = 0, xMax = 2 * Math.PI, } = options;
+    if (numPoints <= 0) {
+        throw new Error('Number of points must be greater than 0');
+    }
+    const points = [];
+    const xStep = (xMax - xMin) / (numPoints - 1);
+    for (let i = 0; i < numPoints; i++) {
+        const x = xMin + i * xStep;
+        // Generate base sine wave
+        const sineValue = amplitude * Math.sin(frequency * x + phase);
+        // Add random noise if specified
+        const noise = noiseLevel > 0 ? (Math.random() - 0.5) * 2 * noiseLevel : 0;
+        const y = sineValue + noise;
+        points.push({ x, y });
+    }
+    return points;
+}

package/dist/utils/graph/dagre.js

@@ -49,7 +49,7 @@ export function dagreGraph(data, { nodes = (d) => d.nodes, nodeId = (d) => d.id,
     return g;
 }
 /**
- * Get all upstream predecessors for dagre nodeId
+ * Get all upstream predecessors ids for dagre nodeId
  */
 export function dagreAncestors(graph, nodeId, maxDepth = Infinity, currentDepth = 0) {
     if (currentDepth === maxDepth) {
@@ -58,21 +58,19 @@ export function dagreAncestors(graph, nodeId, maxDepth = Infinity, currentDepth
     const predecessors = graph.predecessors(nodeId) ?? [];
     return [
         ...predecessors,
-        // @ts-expect-error: Types from dagre appear incorrect
         ...predecessors.flatMap((pId) => dagreAncestors(graph, pId, maxDepth, currentDepth + 1)),
     ];
 }
 /**
- * Get all downstream descendants for dagre nodeId
+ * Get all downstream descendants ids for dagre nodeId
  */
 export function dagreDescendants(graph, nodeId, maxDepth = Infinity, currentDepth = 0) {
     if (currentDepth === maxDepth) {
         return [];
     }
-    const predecessors = graph.successors(nodeId) ?? [];
+    const successors = graph.successors(nodeId) ?? [];
     return [
-        ...predecessors,
-        // @ts-expect-error: Types from dagre appear incorrect
-        ...predecessors.flatMap((pId) => dagreDescendants(graph, pId, maxDepth, currentDepth + 1)),
+        ...successors,
+        ...successors.flatMap((pId) => dagreDescendants(graph, pId, maxDepth, currentDepth + 1)),
     ];
 }

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,13 +1,21 @@
+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';
 export * from './path.js';
 export * from './pivot.js';
+export * from './scales.svelte.js';
 export * from './stack.js';
 export * from './ticks.js';
+export * from './treemap.js';
 export * from './threshold.js';
+export * from './rasterInterpolate.js';
+export * from './rasterBounds.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,13 +1,21 @@
+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';
 export * from './path.js';
 export * from './pivot.js';
+export * from './scales.svelte.js';
 export * from './stack.js';
 export * from './ticks.js';
+export * from './treemap.js';
 export * from './threshold.js';
+export * from './rasterInterpolate.js';
+export * from './rasterBounds.js';
+export * from './stats.js';
 export * from './types.js';
 export * from './graph/dagre.js';
 export * from './graph/sankey.js';

package/dist/utils/math.d.ts

@@ -23,6 +23,23 @@ export declare function cartesianToPolar(x: number, y: number): {
     radius: number;
     radians: number;
 };
+/**
+ * Calculate the angle and length between two points
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Angle in degrees and length
+ */
+export declare function pointsToAngleAndLength(point1: {
+    x: number;
+    y: number;
+}, point2: {
+    x: number;
+    y: number;
+}): {
+    radians: number;
+    angle: number;
+    length: number;
+};
 /** Convert celsius temperature to fahrenheit */
 export declare function celsiusToFahrenheit(temperature: number): number;
 /** Convert fahrenheit temperature to celsius */

package/dist/utils/math.js

@@ -37,6 +37,23 @@ export function cartesianToPolar(x, y) {
         radians,
     };
 }
+/**
+ * Calculate the angle and length between two points
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Angle in degrees and length
+ */
+export function pointsToAngleAndLength(point1, point2) {
+    const dx = point2.x - point1.x;
+    const dy = point2.y - point1.y;
+    const radians = Math.atan2(dy, dx);
+    const length = Math.sqrt(dx * dx + dy * dy);
+    return {
+        radians,
+        angle: radiansToDegrees(radians),
+        length,
+    };
+}
 /** Convert celsius temperature to fahrenheit */
 export function celsiusToFahrenheit(temperature) {
     return temperature * (9 / 5) + 32;

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

@@ -108,12 +108,22 @@ type InternalMotionOptions = {
      */
     controlled?: boolean;
 };
-export declare function createMotion<T = any>(initialValue: T, getValue: () => T, motionProp: MotionOptions | undefined, options?: InternalMotionOptions): MotionSpring<T> | MotionTween<any> | MotionNone<T>;
+export declare function createMotion<T = any>(initialValue: T, getValue: () => T, motionProp: MotionOptions | undefined, options?: InternalMotionOptions): MotionSpring<T> | MotionTween<any> | MotionNone<T> | {
+    type: "none";
+    readonly current: T;
+    target: T;
+    set(_value: T, _options?: any): Promise<void>;
+};
 /**
  * Creates a controlled motion state that only updates when explicitly set
  * rather than automatically tracking changes to the source value
  */
-export declare function createControlledMotion<T = any>(initialValue: T, motionProp: MotionOptions | undefined): MotionTween<any> | MotionSpring<T> | MotionNone<T>;
+export declare function createControlledMotion<T = any>(initialValue: T, motionProp: MotionOptions | undefined): MotionTween<any> | MotionSpring<T> | MotionNone<T> | {
+    type: "none";
+    readonly current: T;
+    target: T;
+    set(_value: T, _options?: any): Promise<void>;
+};
 /**
  * Creates a state tracker for animation completion
  * This helps track whether any motion transitions are currently in progress
@@ -124,6 +134,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