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

package/dist/utils/chart.js

@@ -58,6 +58,14 @@ export function createChartScale(axis, { domain, scale, padding, nice, reverse,
             console.error(`[Layer Chart] You set \`${axis}Nice: true\` but the ${axis}Scale does not have a \`.nice\` method. Ignoring...`);
         }
     }
+    // Guard against degenerate domains where min === max (e.g. all-zero data).
+    // A degenerate domain causes the scale to return NaN for all inputs.
+    if (typeof trueScale.domain === 'function' && typeof trueScale.invert === 'function') {
+        const [dMin, dMax] = trueScale.domain();
+        if (typeof dMin === 'number' && typeof dMax === 'number' && dMin === dMax) {
+            trueScale.domain([dMin, dMin + 1]);
+        }
+    }
     return trueScale;
 }
 // These scales have a discrete range so they can't be padded

package/dist/utils/common.d.ts

@@ -1,13 +1,13 @@
-import type { Component, ComponentProps } from 'svelte';
+import type { ComponentProps } from 'svelte';
 import type Chart from '../components/Chart.svelte';
-import type { SimplifiedChartProps } from '../components/charts/types.js';
+import type { ChartProps } from '../components/Chart.svelte';
 export type Accessor<TData = any> = number | string | ((d: TData) => any) | undefined | null | Accessor<TData>[];
 export declare function accessor<TData = any>(prop: Accessor<TData>): (d: TData) => any;
 /** Guarantee chart data is an array */
 export declare function chartDataArray<TData = any>(data: ComponentProps<Chart<TData>>['data']): any[];
-export declare function defaultChartPadding<TData, SeriesComponent extends Component, TSnippetProps>(options?: {
-    axis?: SimplifiedChartProps<TData, SeriesComponent, TSnippetProps>['axis'];
-    legend?: SimplifiedChartProps<TData, SeriesComponent, TSnippetProps>['legend'];
+export declare function defaultChartPadding<TData>(options?: {
+    axis?: ChartProps<TData>['axis'];
+    legend?: ChartProps<TData>['legend'];
     top?: number;
     left?: number;
     bottom?: number;

package/dist/utils/common.js

@@ -49,6 +49,9 @@ export function defaultChartPadding(options = {}) {
  * Handles complex objects such as `Date` by invoking `.valueOf()`
  */
 export function findRelatedData(data, original, accessor) {
+    if (data.includes(original)) {
+        return original;
+    }
     return data.find((d) => {
         return accessor(d)?.valueOf() === accessor(original)?.valueOf();
     });

package/dist/utils/common.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { accessor, resolveMaybeFn, getObjectOrNull } from './common.js';
+import { accessor, findRelatedData, resolveMaybeFn, getObjectOrNull } from './common.js';
 export const testData = {
     one: 1,
     two: 2,
@@ -52,6 +52,15 @@ describe('getObjectOrNull', () => {
         expect(getObjectOrNull(obj)).toBe(obj);
     });
 });
+describe('findRelatedData', () => {
+    it('prefers exact object identity before accessor matching', () => {
+        const first = { id: 'first', value: 10 };
+        const second = { id: 'second', value: 10 };
+        const data = [first, second];
+        const actual = findRelatedData(data, second, accessor('value'));
+        expect(actual).toBe(second);
+    });
+});
 describe('resolveMaybeFn', () => {
     it('returns value if not a function', () => {
         expect(resolveMaybeFn(5)).toBe(5);

package/dist/utils/dataProp.d.ts

@@ -0,0 +1,120 @@
+import type { AnyScale } from './scales.svelte.js';
+/**
+ * A prop that can be a direct pixel value, a data property name (resolved via scale),
+ * or an accessor function (whose result is passed through a scale).
+ *
+ * - `number` → pixel value (direct, no scale applied)
+ * - `string` → data property path, resolved via accessor then passed through scale
+ * - `function(d)` → called with data item, result passed through scale
+ */
+export type DataProp<T = any> = number | string | ((d: T) => any);
+/**
+ * Returns true if the value is a data-space prop (string or function),
+ * meaning it needs scale resolution rather than being a direct pixel value.
+ */
+export declare function isDataProp(value: any): value is string | Function;
+/**
+ * Returns true if ANY of the provided values is a data-space prop.
+ * Used to detect whether a component should enter "data mode".
+ */
+export declare function hasAnyDataProp(...values: any[]): boolean;
+/**
+ * Resolves a DataProp value for a specific data item through a scale.
+ *
+ * - `number`: returned directly (pixel value, no scale)
+ * - `string`: used as property path on data item, result passed through scale
+ * - `function`: called with data item, result passed through scale
+ * - `undefined`/`null`: returns defaultValue
+ *
+ * If no scale is provided and the raw value is numeric, it passes through directly.
+ */
+export declare function resolveDataProp<T>(value: DataProp<T> | undefined | null, d: T, scale: AnyScale | null | undefined, defaultValue?: number): number;
+/**
+ * Extract the raw value from a DataProp without applying any scale.
+ * Numbers pass through, strings do property lookup, functions are called.
+ */
+export declare function extractRawDataValue<T>(value: DataProp<T> | undefined | null, d: T): any;
+/**
+ * Resolve a pair of x/y DataProps through a geo projection.
+ * x = longitude, y = latitude → projection([lon, lat]) → [px, py]
+ */
+export declare function resolveGeoDataPair<T>(xProp: DataProp<T> | undefined | null, yProp: DataProp<T> | undefined | null, d: T, projection: (coords: [number, number]) => [number, number] | null, defaults?: [number, number]): [number, number];
+/**
+ * A color prop that can be a literal CSS color string, a data property name
+ * (resolved through cScale), or an accessor function (result passed through cScale).
+ *
+ * - `string` → in data mode, if it matches a data property, the value is extracted
+ *   and passed through cScale. Otherwise used as a literal CSS color.
+ * - `function(d)` → called per data item, result passed through cScale.
+ */
+export type ColorProp<T = any> = string | ((d: T) => any);
+/**
+ * A style prop that can be a static value or a per-item accessor function.
+ * In data mode, if a function is provided, it is called with the data item.
+ */
+export type StyleProp<V, T = any> = V | ((d: T) => V);
+/**
+ * Style props for primitives that support data-driven styling.
+ * All style props accept either a static value or a per-item accessor function.
+ */
+export type DataDrivenStyleProps<T = any> = {
+    /**
+     * The fill color.
+     * - `string`: in data mode, if it matches a data property name, the value is
+     *   extracted and passed through cScale. Otherwise used as a literal CSS color.
+     * - `function(d)`: accessor called per data item, result passed through cScale.
+     */
+    fill?: ColorProp<T>;
+    /**
+     * The stroke color.
+     * - `string`: in data mode, if it matches a data property name, the value is
+     *   extracted and passed through cScale. Otherwise used as a literal CSS color.
+     * - `function(d)`: accessor called per data item, result passed through cScale.
+     */
+    stroke?: ColorProp<T>;
+    /**
+     * The fill opacity (0 to 1).
+     * - `number`: static value
+     * - `function(d)`: accessor called per data item
+     */
+    fillOpacity?: StyleProp<number | undefined, T>;
+    /**
+     * The stroke opacity (0 to 1).
+     * - `number`: static value
+     * - `function(d)`: accessor called per data item
+     */
+    strokeOpacity?: StyleProp<number | undefined, T>;
+    /**
+     * The stroke width.
+     * - `number`: static value
+     * - `function(d)`: accessor called per data item
+     */
+    strokeWidth?: StyleProp<number | undefined, T>;
+    /**
+     * The opacity (0 to 1).
+     * - `number`: static value
+     * - `function(d)`: accessor called per data item
+     */
+    opacity?: StyleProp<number | undefined, T>;
+    /**
+     * CSS class name(s).
+     * - `string`: static class string
+     * - `function(d)`: accessor called per data item, returns class string
+     */
+    class?: StyleProp<string | undefined, T>;
+};
+/**
+ * Resolves a ColorProp for a specific data item, optionally through a color scale.
+ *
+ * - `string`: checks if `get(d, value)` is defined → data property, passed through cScale.
+ *   Otherwise returns the string as a literal CSS color.
+ * - `function`: called with data item, result passed through cScale.
+ * - `undefined`/`null`: returns undefined.
+ */
+export declare function resolveColorProp<T>(value: ColorProp<T> | undefined | null, d: T, cScale: AnyScale | null | undefined): string | undefined;
+/**
+ * Resolves a StyleProp for a specific data item.
+ * If the value is a function, calls it with the data item.
+ * Otherwise returns the static value.
+ */
+export declare function resolveStyleProp<V, T>(value: StyleProp<V, T> | undefined, d: T): V | undefined;

package/dist/utils/dataProp.js

@@ -0,0 +1,114 @@
+import { get } from '@layerstack/utils';
+/**
+ * Returns true if the value is a data-space prop (string or function),
+ * meaning it needs scale resolution rather than being a direct pixel value.
+ */
+export function isDataProp(value) {
+    return typeof value === 'string' || typeof value === 'function';
+}
+/**
+ * Returns true if ANY of the provided values is a data-space prop.
+ * Used to detect whether a component should enter "data mode".
+ */
+export function hasAnyDataProp(...values) {
+    return values.some((v) => v !== undefined && isDataProp(v));
+}
+/**
+ * Resolves a DataProp value for a specific data item through a scale.
+ *
+ * - `number`: returned directly (pixel value, no scale)
+ * - `string`: used as property path on data item, result passed through scale
+ * - `function`: called with data item, result passed through scale
+ * - `undefined`/`null`: returns defaultValue
+ *
+ * If no scale is provided and the raw value is numeric, it passes through directly.
+ */
+export function resolveDataProp(value, d, scale, defaultValue = 0) {
+    if (value === undefined || value === null)
+        return defaultValue;
+    if (typeof value === 'number')
+        return value;
+    let rawValue;
+    if (typeof value === 'string') {
+        rawValue = get(d, value);
+    }
+    else if (typeof value === 'function') {
+        rawValue = value(d);
+    }
+    else {
+        return defaultValue;
+    }
+    if (scale) {
+        const result = scale(rawValue);
+        return typeof result === 'number' && isFinite(result) ? result : defaultValue;
+    }
+    // No scale: if raw value is a number, use it directly
+    return typeof rawValue === 'number' ? rawValue : defaultValue;
+}
+/**
+ * Extract the raw value from a DataProp without applying any scale.
+ * Numbers pass through, strings do property lookup, functions are called.
+ */
+export function extractRawDataValue(value, d) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string')
+        return get(d, value);
+    if (typeof value === 'function')
+        return value(d);
+    return undefined;
+}
+/**
+ * Resolve a pair of x/y DataProps through a geo projection.
+ * x = longitude, y = latitude → projection([lon, lat]) → [px, py]
+ */
+export function resolveGeoDataPair(xProp, yProp, d, projection, defaults = [0, 0]) {
+    const rawX = extractRawDataValue(xProp, d);
+    const rawY = extractRawDataValue(yProp, d);
+    if (rawX == null || rawY == null)
+        return defaults;
+    const result = projection([rawX, rawY]);
+    return result ?? defaults;
+}
+/**
+ * Resolves a ColorProp for a specific data item, optionally through a color scale.
+ *
+ * - `string`: checks if `get(d, value)` is defined → data property, passed through cScale.
+ *   Otherwise returns the string as a literal CSS color.
+ * - `function`: called with data item, result passed through cScale.
+ * - `undefined`/`null`: returns undefined.
+ */
+export function resolveColorProp(value, d, cScale) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === 'function') {
+        const rawValue = value(d);
+        if (rawValue === undefined || rawValue === null)
+            return undefined;
+        return cScale ? String(cScale(rawValue)) : String(rawValue);
+    }
+    if (typeof value === 'string') {
+        const dataValue = get(d, value);
+        if (dataValue !== undefined) {
+            // Data property — resolve through cScale
+            return cScale ? String(cScale(dataValue)) : String(dataValue);
+        }
+        // Not a data property — literal CSS color
+        return value;
+    }
+    return undefined;
+}
+/**
+ * Resolves a StyleProp for a specific data item.
+ * If the value is a function, calls it with the data item.
+ * Otherwise returns the static value.
+ */
+export function resolveStyleProp(value, d) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === 'function')
+        return value(d);
+    return value;
+}

package/dist/utils/dataProp.test.d.ts

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

package/dist/utils/dataProp.test.js

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { isDataProp, hasAnyDataProp, resolveDataProp, resolveColorProp } from './dataProp.js';
+describe('isDataProp', () => {
+    it('returns true for strings', () => {
+        expect(isDataProp('date')).toBe(true);
+        expect(isDataProp('nested.path')).toBe(true);
+    });
+    it('returns true for functions', () => {
+        expect(isDataProp((d) => d.value)).toBe(true);
+    });
+    it('returns false for numbers', () => {
+        expect(isDataProp(0)).toBe(false);
+        expect(isDataProp(42)).toBe(false);
+    });
+    it('returns false for undefined and null', () => {
+        expect(isDataProp(undefined)).toBe(false);
+        expect(isDataProp(null)).toBe(false);
+    });
+});
+describe('hasAnyDataProp', () => {
+    it('returns true if any value is a string', () => {
+        expect(hasAnyDataProp(10, 'date', 20)).toBe(true);
+    });
+    it('returns true if any value is a function', () => {
+        expect(hasAnyDataProp(10, (d) => d.x, 20)).toBe(true);
+    });
+    it('returns false if all values are numbers', () => {
+        expect(hasAnyDataProp(10, 20, 30)).toBe(false);
+    });
+    it('returns false if all values are undefined', () => {
+        expect(hasAnyDataProp(undefined, undefined)).toBe(false);
+    });
+    it('ignores undefined values but detects strings', () => {
+        expect(hasAnyDataProp(undefined, 'date')).toBe(true);
+    });
+});
+describe('resolveDataProp', () => {
+    const data = { date: '2024-01-01', value: 42, nested: { x: 10 } };
+    const mockScale = vi.fn((v) => v * 2);
+    beforeEach(() => {
+        mockScale.mockClear();
+    });
+    it('returns number directly without calling scale', () => {
+        expect(resolveDataProp(100, data, mockScale)).toBe(100);
+        expect(mockScale).not.toHaveBeenCalled();
+    });
+    it('resolves string as property path and passes through scale', () => {
+        expect(resolveDataProp('value', data, mockScale)).toBe(84); // 42 * 2
+        expect(mockScale).toHaveBeenCalledWith(42);
+    });
+    it('resolves nested string paths', () => {
+        expect(resolveDataProp('nested.x', data, mockScale)).toBe(20); // 10 * 2
+        expect(mockScale).toHaveBeenCalledWith(10);
+    });
+    it('resolves function accessor and passes through scale', () => {
+        const accessor = (d) => d.value;
+        expect(resolveDataProp(accessor, data, mockScale)).toBe(84); // 42 * 2
+        expect(mockScale).toHaveBeenCalledWith(42);
+    });
+    it('returns defaultValue for undefined', () => {
+        expect(resolveDataProp(undefined, data, mockScale)).toBe(0);
+        expect(resolveDataProp(undefined, data, mockScale, 99)).toBe(99);
+    });
+    it('returns defaultValue for null', () => {
+        expect(resolveDataProp(null, data, mockScale)).toBe(0);
+        expect(resolveDataProp(null, data, mockScale, 99)).toBe(99);
+    });
+    it('returns raw numeric value when no scale provided', () => {
+        expect(resolveDataProp('value', data, null)).toBe(42);
+        expect(resolveDataProp('value', data, undefined)).toBe(42);
+    });
+    it('returns defaultValue when no scale and raw value is not numeric', () => {
+        expect(resolveDataProp('date', data, null)).toBe(0); // '2024-01-01' is not a number
+    });
+    it('returns defaultValue when scale returns non-finite value', () => {
+        const badScale = vi.fn(() => NaN);
+        expect(resolveDataProp('value', data, badScale)).toBe(0);
+    });
+    it('returns defaultValue when scale returns Infinity', () => {
+        const badScale = vi.fn(() => Infinity);
+        expect(resolveDataProp('value', data, badScale)).toBe(0);
+    });
+    it('handles function returning a number without scale', () => {
+        const accessor = (d) => d.value;
+        expect(resolveDataProp(accessor, data, null)).toBe(42);
+    });
+});
+describe('resolveColorProp', () => {
+    const data = { category: 'A', value: 42, color: '#ff0000' };
+    const mockCScale = vi.fn((v) => (v === 'A' ? 'steelblue' : v === 'B' ? 'coral' : 'gray'));
+    beforeEach(() => {
+        mockCScale.mockClear();
+    });
+    it('returns undefined for undefined input', () => {
+        expect(resolveColorProp(undefined, data, mockCScale)).toBeUndefined();
+    });
+    it('returns undefined for null input', () => {
+        expect(resolveColorProp(null, data, mockCScale)).toBeUndefined();
+    });
+    it('resolves string data property through cScale', () => {
+        expect(resolveColorProp('category', data, mockCScale)).toBe('steelblue');
+        expect(mockCScale).toHaveBeenCalledWith('A');
+    });
+    it('returns literal CSS color when string does not match a data property', () => {
+        expect(resolveColorProp('red', data, mockCScale)).toBe('red');
+        expect(mockCScale).not.toHaveBeenCalled();
+    });
+    it('returns hex color literal when not a data property', () => {
+        expect(resolveColorProp('#00ff00', data, mockCScale)).toBe('#00ff00');
+        expect(mockCScale).not.toHaveBeenCalled();
+    });
+    it('resolves function accessor through cScale', () => {
+        expect(resolveColorProp((d) => d.category, data, mockCScale)).toBe('steelblue');
+        expect(mockCScale).toHaveBeenCalledWith('A');
+    });
+    it('returns stringified data value when no cScale', () => {
+        expect(resolveColorProp('category', data, null)).toBe('A');
+    });
+    it('returns data property value directly when it is a color string and no cScale', () => {
+        expect(resolveColorProp('color', data, null)).toBe('#ff0000');
+    });
+    it('returns undefined when function accessor returns undefined', () => {
+        expect(resolveColorProp((d) => d.nonexistent, data, mockCScale)).toBeUndefined();
+    });
+    it('returns stringified function result when no cScale', () => {
+        expect(resolveColorProp((d) => d.value, data, null)).toBe('42');
+    });
+});

package/dist/utils/download.d.ts

@@ -0,0 +1,98 @@
+export type ChartImageOptions = {
+    /**
+     * Background fill color for the exported image.
+     * Defaults to transparent (PNG) or white (JPEG/WebP).
+     */
+    background?: string;
+    /**
+     * Output image format.
+     *
+     * @default 'png'
+     */
+    format?: 'png' | 'jpeg' | 'webp';
+    /**
+     * Quality for lossy formats (`'jpeg'` / `'webp'`), between 0 and 1.
+     *
+     * @default 0.92
+     */
+    quality?: number;
+    /**
+     * Device pixel ratio to use when rasterising SVG layers.
+     * Higher values produce crisper images on retina displays.
+     * Defaults to `window.devicePixelRatio` (usually 1 or 2).
+     */
+    pixelRatio?: number;
+};
+/**
+ * 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 declare function getChartImageBlob(container: HTMLElement, options?: ChartImageOptions): Promise<Blob>;
+export type ChartSvgOptions = {
+    /**
+     * File name without extension.
+     *
+     * @default 'chart'
+     */
+    filename?: string;
+};
+/**
+ * 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 declare function getChartSvgString(container: HTMLElement): string | null;
+/**
+ * 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 declare function downloadSvg(container: HTMLElement, options?: ChartSvgOptions): boolean;
+/**
+ * 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 declare function downloadImage(container: HTMLElement, options?: ChartImageOptions & {
+    /**
+     * File name without extension.
+     *
+     * @default 'chart'
+     */
+    filename?: string;
+}): Promise<void>;