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

package/dist/{components/GeoContext.svelte.d.ts → states/geo.svelte.d.ts}

@@ -1,7 +1,6 @@
-import type { Snippet } from 'svelte';
-import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
-import { type GeoContextValue } from '../contexts/geo.js';
-export type GeoContextProps = {
+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}`.
@@ -26,23 +25,21 @@ export type GeoContextProps = {
     scale?: number;
     translate?: [number, number];
     center?: [number, number];
-    /**
-     * Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are
-     * mutually selected
-     */
-    applyTransform?: ('scale' | 'translate' | 'rotate')[];
     reflectX?: boolean;
     reflectY?: boolean;
-    /**
-     * Exposed to allow binding in Chart
-     *
-     * @bindable
-     */
-    geoContext?: GeoContextValue;
-    children: Snippet<[{
-        geoContext: GeoContextValue;
-    }]>;
 };
-declare const GeoContext: import("svelte").Component<GeoContextProps, {}, "geoContext">;
-type GeoContext = ReturnType<typeof GeoContext>;
-export default GeoContext;
+export declare class GeoState {
+    private _propsGetter;
+    props: GeoStateProps;
+    chartWidth: number;
+    chartHeight: number;
+    transformState: TransformState | null;
+    transformApply: {
+        rotation: boolean;
+        scale: boolean;
+        translate: boolean;
+    };
+    projection: GeoProjection | undefined;
+    constructor(propsGetter: () => GeoStateProps);
+    fitSizeRange: [number, number];
+}

package/dist/states/geo.svelte.js

@@ -0,0 +1,88 @@
+export class GeoState {
+    // Props getter function - set in constructor
+    _propsGetter;
+    // Props - accessed via getter function for fine-grained reactivity
+    props = $derived(this._propsGetter());
+    // Context references
+    chartWidth = $state(100);
+    chartHeight = $state(100);
+    transformState = $state(null);
+    transformApply = $state({ rotation: false, scale: true, translate: true });
+    // The actual projection instance
+    projection = $state(undefined);
+    constructor(propsGetter) {
+        this._propsGetter = propsGetter;
+        // Main effect to build and configure the projection
+        $effect.pre(() => {
+            if (!this.props.projection)
+                return;
+            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);
+                }
+                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);
+            }
+            this.projection = _projection;
+        });
+    }
+    // Derived properties
+    fitSizeRange = $derived(this.props.fixedAspectRatio
+        ? [100, 100 / this.props.fixedAspectRatio]
+        : [this.chartWidth, this.chartHeight]);
+}

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

@@ -1,22 +1,69 @@
 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';
-declare class HighlightKey<TData, SeriesComponent extends Component> {
-    current: string | null;
-    set: (seriesKey: typeof this.current) => void;
-}
+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;
-    selectedKeys: SelectionState<string, false>;
-    highlightKey: HighlightKey<TData, TComponent>;
-    constructor(getSeries: () => SeriesData<TData, TComponent>[]);
+    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 isDefaultSeries(): boolean;
+    /**
+     * 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
@@ -25,6 +72,12 @@ export declare class SeriesState<TData, TComponent extends Component> {
     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"]>>;
 }
-export {};

package/dist/states/series.svelte.js

@@ -1,27 +1,206 @@
+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';
-class HighlightKey {
-    current = $state(null);
-    set = (seriesKey) => {
-        this.current = seriesKey;
-    };
-}
 export class SeriesState {
-    #series = $state.raw([]);
-    selectedKeys = new SelectionState();
-    highlightKey = new HighlightKey();
-    constructor(getSeries) {
-        this.#series = getSeries();
-        $effect.pre(() => {
-            // keep series state in sync with the prop
-            this.#series = getSeries();
+    // 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 isDefaultSeries() {
-        return this.#series.length === 1 && this.#series[0].key === 'default';
-    }
+    /**
+     * Get only visible series for the chart.
+     */
     get visibleSeries() {
         return this.#series.filter((s) => this.isVisible(s.key));
     }
@@ -31,16 +210,22 @@ export class SeriesState {
     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.current === null) {
+        if (this.highlightKey === null) {
             return defaultValue;
         }
         else {
-            return this.highlightKey.current === seriesKey;
+            return this.highlightKey === seriesKey;
         }
     }
     get allSeriesData() {
@@ -48,6 +233,15 @@ export class SeriesState {
             .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 {};