layerchart 2.0.0-next.5 → 2.0.0-next.51

package/dist/states/geo.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { GeoProjection, GeoPermissibleObjects } from 'd3-geo';
+import type { TransformState } from './transform.svelte.js';
+export type GeoStateProps = {
+    /**
+     * A d3 projection function. Pass this in as an uncalled function, e.g.
+     * `projection={geoAlbersUsa}`.
+     */
+    projection?: () => GeoProjection;
+    fitGeojson?: GeoPermissibleObjects;
+    /**
+     * By default, the map fills to fit the $width and $height. If instead you want a
+     * fixed-aspect ratio, like for a server-side rendered map, set that here.
+     */
+    fixedAspectRatio?: number;
+    clipAngle?: number;
+    clipExtent?: [[number, number], [number, number]];
+    rotate?: {
+        /** Lambda (Center Meridian) */
+        yaw: number;
+        /** Phi */
+        pitch: number;
+        /** Gamma */
+        roll: number;
+    };
+    scale?: number;
+    translate?: [number, number];
+    center?: [number, number];
+    reflectX?: boolean;
+    reflectY?: boolean;
+};
+export declare class GeoState {
+    private _propsGetter;
+    private _dimensionsGetter?;
+    props: GeoStateProps;
+    chartWidth: number;
+    chartHeight: number;
+    transformState: TransformState | null;
+    transformApply: {
+        rotation: boolean;
+        scale: boolean;
+        translate: boolean;
+    };
+    projection: GeoProjection | undefined;
+    constructor(propsGetter: () => GeoStateProps, dimensionsGetter?: () => {
+        width: number;
+        height: number;
+    });
+    fitSizeRange: [number, number];
+}

package/dist/states/geo.svelte.js

@@ -0,0 +1,100 @@
+export class GeoState {
+    // Props getter function - set in constructor
+    _propsGetter;
+    _dimensionsGetter;
+    // Props - accessed via getter function for fine-grained reactivity
+    props = $derived(this._propsGetter());
+    // Context references — used by GeoProjection.svelte (client-side only)
+    chartWidth = $state(100);
+    chartHeight = $state(100);
+    transformState = $state(null);
+    transformApply = $state({ rotation: false, scale: true, translate: true });
+    // The actual projection instance — derived so it works during SSR
+    projection = $derived.by(() => {
+        if (!this.props.projection)
+            return undefined;
+        const _projection = this.props.projection();
+        // Apply fitSize if fitGeojson is provided
+        if (this.props.fitGeojson && 'fitSize' in _projection) {
+            _projection.fitSize(this.fitSizeRange, this.props.fitGeojson);
+        }
+        // Apply scale
+        if ('scale' in _projection) {
+            if (this.props.scale) {
+                _projection.scale(this.props.scale);
+            }
+            if (this.transformState?.mode === 'projection' && this.transformApply.scale) {
+                _projection.scale(this.transformState.scale);
+            }
+        }
+        // Apply rotate
+        if ('rotate' in _projection) {
+            if (this.props.rotate) {
+                _projection.rotate([
+                    this.props.rotate.yaw,
+                    this.props.rotate.pitch,
+                    this.props.rotate.roll,
+                ]);
+            }
+            if (this.transformState?.mode === 'projection' && this.transformApply.rotation) {
+                _projection.rotate([
+                    this.transformState.translate.x, // yaw
+                    this.transformState.translate.y, // pitch
+                ]);
+            }
+        }
+        // Apply translate
+        if ('translate' in _projection) {
+            if (this.props.translate) {
+                _projection.translate(this.props.translate);
+            }
+            else if (!this.props.fitGeojson) {
+                // Default translate to container center when not explicitly set
+                // and not already positioned via fitSize/fitGeojson
+                _projection.translate([
+                    (this._dimensionsGetter?.().width ?? this.chartWidth) / 2,
+                    (this._dimensionsGetter?.().height ?? this.chartHeight) / 2,
+                ]);
+            }
+            if (this.transformState?.mode === 'projection' && this.transformApply.translate) {
+                _projection.translate([
+                    this.transformState.translate.x,
+                    this.transformState.translate.y,
+                ]);
+            }
+        }
+        // Apply center
+        if (this.props.center && 'center' in _projection) {
+            _projection.center(this.props.center);
+        }
+        // Apply reflectX
+        if (this.props.reflectX) {
+            _projection.reflectX(this.props.reflectX);
+        }
+        // Apply reflectY
+        if (this.props.reflectY) {
+            _projection.reflectY(this.props.reflectY);
+        }
+        // Apply clipAngle
+        if (this.props.clipAngle && 'clipAngle' in _projection) {
+            _projection.clipAngle(this.props.clipAngle);
+        }
+        // Apply clipExtent
+        if (this.props.clipExtent && 'clipExtent' in _projection) {
+            _projection.clipExtent(this.props.clipExtent);
+        }
+        return _projection;
+    });
+    constructor(propsGetter, dimensionsGetter) {
+        this._propsGetter = propsGetter;
+        this._dimensionsGetter = dimensionsGetter;
+    }
+    // Derived properties — use dimensions getter (from ChartState) when available,
+    // falling back to $state values (set by GeoProjection.svelte via $effect)
+    fitSizeRange = $derived(this.props.fixedAspectRatio
+        ? [100, 100 / this.props.fixedAspectRatio]
+        : [
+            this._dimensionsGetter?.().width ?? this.chartWidth,
+            this._dimensionsGetter?.().height ?? this.chartHeight,
+        ]);
+}

package/dist/states/series.svelte.d.ts

@@ -0,0 +1,83 @@
+import type { Component } from 'svelte';
+import type { SeriesData } from '../components/charts/types.js';
+import { type Accessor } from '../utils/common.js';
+import { SelectionState } from '@layerstack/svelte-state';
+export type StackLayout = 'overlap' | 'stack' | 'stackExpand' | 'stackDiverging';
+export type StackConfig<TData> = {
+    layout: StackLayout;
+    data?: TData[];
+    keyBy: Accessor<TData>;
+    valueAccessor?: Accessor<TData>;
+};
+export declare class SeriesState<TData, TComponent extends Component> {
+    #private;
+    private _getSeries;
+    private _getStackConfig;
+    selectedKeys: SelectionState<string>;
+    /**
+     * The current highlight series key for the chart.
+     */
+    highlightKey: string | null;
+    constructor(getSeries: () => SeriesData<TData, TComponent>[], getStackConfig?: () => StackConfig<TData> | null);
+    /**
+     * Whether stacking is enabled
+     */
+    get isStacked(): boolean;
+    /**
+     * Current stack layout mode
+     */
+    get stackLayout(): StackLayout;
+    /**
+     * For stackDiverging layout, returns the set of series keys that are "tips"
+     * (outermost in each direction) and should have rounded edges.
+     * Returns null for non-diverging layouts.
+     */
+    get divergingEdgeKeys(): Set<string> | null;
+    /**
+     * Get stack [y0, y1] values for a data point in a specific series.
+     * Returns null if stacking is not enabled or series/data not found.
+     */
+    getStackValue(seriesKey: string, d: TData): [number, number] | null;
+    /**
+     * Create stack-aware y0/y1 accessor functions for a series.
+     * Use these in Area, Bars, etc. when stacking is enabled.
+     */
+    getStackAccessors(seriesKey: string): {
+        y0: (d: TData) => number;
+        y1: (d: TData) => number;
+        /** Returns the [y0, y1] tuple, useful for Bars */
+        value: (d: TData) => [number, number] | null;
+    };
+    /**
+     * Get all series for the chart.
+     */
+    get series(): SeriesData<TData, TComponent>[];
+    /**
+     * Get only visible series for the chart.
+     */
+    get visibleSeries(): SeriesData<TData, TComponent>[];
+    /**
+     * Check if series is visible
+     */
+    isVisible(seriesKey: SeriesData<TData, TComponent>['key']): boolean;
+    /**
+     * Check if the series is the default
+     */
+    get isDefaultSeries(): boolean;
+    /**
+     * Check if series is highlighted
+     * Changing default to `true` is useful to determine if series should be faded
+     */
+    isHighlighted(seriesKey: SeriesData<TData, TComponent>['key'], defaultValue?: boolean): boolean;
+    get allSeriesData(): Array<TData & {
+        seriesKey: string;
+    }>;
+    /**
+     * Get data from only visible series (filtered by selectedKeys).
+     * Use this for domain calculations when series can be shown/hidden.
+     */
+    get visibleSeriesData(): Array<TData & {
+        seriesKey: string;
+    }>;
+    get allSeriesColors(): Array<NonNullable<SeriesData<TData, TComponent>["color"]>>;
+}

package/dist/states/series.svelte.js

@@ -0,0 +1,248 @@
+import { InternMap } from 'd3-array';
+import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
+import { accessor } from '../utils/common.js';
+import { SelectionState } from '@layerstack/svelte-state';
+export class SeriesState {
+    // Getter functions — set once in constructor, called lazily by $derived
+    _getSeries;
+    _getStackConfig;
+    #series = $derived(this._getSeries());
+    #stackConfig = $derived(this._getStackConfig());
+    selectedKeys;
+    /**
+     * Reactively syncs selectedKeys when series `selected` props change.
+     * When any series explicitly sets `selected: false`, the remaining series
+     * (with `selected` undefined or true) are pre-selected.
+     */
+    #_syncSelectedFromProps = $effect.root(() => {
+        $effect(() => {
+            const keys = SeriesState.#selectedKeysFromSeries(this.#series);
+            if (keys) {
+                this.selectedKeys.current = keys;
+            }
+        });
+    });
+    /**
+     * The current highlight series key for the chart.
+     */
+    highlightKey = $state(null);
+    constructor(getSeries, getStackConfig) {
+        this._getSeries = getSeries;
+        this._getStackConfig = getStackConfig ?? (() => null);
+        // Compute initial selectedKeys synchronously from series `selected` props
+        const initialKeys = SeriesState.#selectedKeysFromSeries(getSeries());
+        this.selectedKeys = new SelectionState({ initial: initialKeys ?? undefined });
+    }
+    /**
+     * Extract selected keys from series definitions.
+     * Returns keys of visible series when any series has `selected: false`, or null if all are visible.
+     */
+    static #selectedKeysFromSeries(series) {
+        const hasExplicitDeselection = series.some((s) => s.selected === false);
+        if (!hasExplicitDeselection)
+            return null;
+        return series.filter((s) => s.selected !== false).map((s) => s.key);
+    }
+    /**
+     * Whether stacking is enabled
+     */
+    get isStacked() {
+        return this.#stackConfig?.layout?.startsWith('stack') ?? false;
+    }
+    /**
+     * Current stack layout mode
+     */
+    get stackLayout() {
+        return this.#stackConfig?.layout ?? 'overlap';
+    }
+    /**
+     * Build wide-format data from per-series data arrays for d3 stack().
+     * Each row has a category key and one property per series key with that series' value.
+     */
+    #alignSeriesData() {
+        const config = this.#stackConfig;
+        if (!config)
+            return [];
+        const keyByAcc = accessor(config.keyBy);
+        const visibleSeries = this.visibleSeries;
+        // Collect all unique category values across visible series
+        const categoryMap = new InternMap();
+        for (const s of visibleSeries) {
+            if (!s.data)
+                continue;
+            const valueAcc = accessor(s.value ?? config.valueAccessor ?? s.key);
+            for (const d of s.data) {
+                const catKey = keyByAcc(d);
+                if (!categoryMap.has(catKey)) {
+                    categoryMap.set(catKey, { __key: catKey });
+                }
+                categoryMap.get(catKey)[s.key] = valueAcc(d) ?? 0;
+            }
+        }
+        // Ensure all series keys exist on every row (default to 0)
+        for (const row of categoryMap.values()) {
+            for (const s of visibleSeries) {
+                if (!(s.key in row)) {
+                    row[s.key] = 0;
+                }
+            }
+        }
+        return Array.from(categoryMap.values());
+    }
+    /**
+     * Computed stack data using InternMap for value-based lookup.
+     * Outer map: categoryValue -> InternMap<seriesKey, [y0, y1]>
+     */
+    #stackMap = $derived.by(() => {
+        const config = this.#stackConfig;
+        if (!config || !config.layout.startsWith('stack'))
+            return null;
+        const visibleKeys = this.visibleSeries.map((s) => s.key);
+        const hasSeparateData = this.visibleSeries.some((s) => s.data != null);
+        const data = hasSeparateData ? this.#alignSeriesData() : (config.data ?? []);
+        if (visibleKeys.length === 0 || data.length === 0)
+            return null;
+        const keyByAcc = accessor(config.keyBy);
+        const offset = config.layout === 'stackExpand'
+            ? stackOffsetExpand
+            : config.layout === 'stackDiverging'
+                ? stackOffsetDiverging
+                : stackOffsetNone;
+        const stackResult = stack()
+            .keys(visibleKeys)
+            .value((d, key) => {
+            if (hasSeparateData) {
+                // Wide-format aligned data — value is directly on the row
+                return d[key] ?? 0;
+            }
+            const s = this.#series.find((s) => s.key === key);
+            const acc = s.value ?? config.valueAccessor ?? s.key;
+            return accessor(acc)(d) ?? 0;
+        })
+            .offset(offset)(data);
+        // Build InternMap: categoryValue -> Map<seriesKey, [y0, y1]>
+        const map = new InternMap();
+        for (let i = 0; i < data.length; i++) {
+            const d = data[i];
+            const catKey = hasSeparateData ? d.__key : keyByAcc(d);
+            const seriesMap = new Map();
+            for (let seriesIdx = 0; seriesIdx < visibleKeys.length; seriesIdx++) {
+                seriesMap.set(visibleKeys[seriesIdx], stackResult[seriesIdx][i]);
+            }
+            map.set(catKey, seriesMap);
+        }
+        return map;
+    });
+    /**
+     * For stackDiverging layout, returns the set of series keys that are "tips"
+     * (outermost in each direction) and should have rounded edges.
+     * Returns null for non-diverging layouts.
+     */
+    get divergingEdgeKeys() {
+        if (this.stackLayout !== 'stackDiverging' || !this.#stackMap)
+            return null;
+        const firstEntry = this.#stackMap.values().next().value;
+        if (!firstEntry)
+            return null;
+        let maxPosY1 = -Infinity;
+        let minNegY0 = Infinity;
+        let posTipKey = null;
+        let negTipKey = null;
+        for (const s of this.visibleSeries) {
+            const stackVal = firstEntry.get(s.key);
+            if (!stackVal)
+                continue;
+            const [y0, y1] = stackVal;
+            if (y1 > maxPosY1) {
+                maxPosY1 = y1;
+                posTipKey = s.key;
+            }
+            if (y0 < minNegY0) {
+                minNegY0 = y0;
+                negTipKey = s.key;
+            }
+        }
+        const tips = new Set();
+        if (posTipKey != null && maxPosY1 > 0)
+            tips.add(posTipKey);
+        if (negTipKey != null && minNegY0 < 0)
+            tips.add(negTipKey);
+        return tips;
+    }
+    /**
+     * Get stack [y0, y1] values for a data point in a specific series.
+     * Returns null if stacking is not enabled or series/data not found.
+     */
+    getStackValue(seriesKey, d) {
+        if (!this.#stackMap || !this.#stackConfig)
+            return null;
+        const keyByAcc = accessor(this.#stackConfig.keyBy);
+        const catKey = keyByAcc(d);
+        return this.#stackMap.get(catKey)?.get(seriesKey) ?? null;
+    }
+    /**
+     * Create stack-aware y0/y1 accessor functions for a series.
+     * Use these in Area, Bars, etc. when stacking is enabled.
+     */
+    getStackAccessors(seriesKey) {
+        return {
+            y0: (d) => this.getStackValue(seriesKey, d)?.[0] ?? 0,
+            y1: (d) => this.getStackValue(seriesKey, d)?.[1] ?? 0,
+            /** Returns the [y0, y1] tuple, useful for Bars */
+            value: (d) => this.getStackValue(seriesKey, d),
+        };
+    }
+    /**
+     * Get all series for the chart.
+     */
+    get series() {
+        return this.#series;
+    }
+    /**
+     * Get only visible series for the chart.
+     */
+    get visibleSeries() {
+        return this.#series.filter((s) => this.isVisible(s.key));
+    }
+    /**
+     * Check if series is visible
+     */
+    isVisible(seriesKey) {
+        return this.selectedKeys.isEmpty() || this.selectedKeys.isSelected(seriesKey);
+    }
+    /**
+     * Check if the series is the default
+     */
+    get isDefaultSeries() {
+        return this.#series.length === 0 || (this.#series.length === 1 && this.#series[0].key === 'default');
+    }
+    /**
+     * Check if series is highlighted
+     * Changing default to `true` is useful to determine if series should be faded
+     */
+    isHighlighted(seriesKey, defaultValue = false) {
+        if (this.highlightKey === null) {
+            return defaultValue;
+        }
+        else {
+            return this.highlightKey === seriesKey;
+        }
+    }
+    get allSeriesData() {
+        return this.#series
+            .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+            .filter((d) => d);
+    }
+    /**
+     * Get data from only visible series (filtered by selectedKeys).
+     * Use this for domain calculations when series can be shown/hidden.
+     */
+    get visibleSeriesData() {
+        return this.visibleSeries
+            .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+            .filter((d) => d);
+    }
+    get allSeriesColors() {
+        return this.#series.map((s) => s.color).filter((c) => c != null);
+    }
+}

package/dist/states/series.svelte.test.d.ts

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