svelteplot 0.4.4-pr-205.0 → 0.4.4-pr-105.1

package/dist/core/Plot.svelte

@@ -69,6 +69,7 @@
         numberFormat: {
             style: 'decimal',
             // notation: 'compact',
+            useGrouping: 'min2',
             compactDisplay: 'short'
         },
         markerDotRadius: 3,

package/dist/marks/AreaY.svelte

@@ -10,9 +10,10 @@
     import Area from './Area.svelte';
     import { renameChannels } from '../transforms/rename.js';
     import { stackY } from '../transforms/stack.js';
-    import { recordizeY } from '../transforms/recordize.js';
+    import { RAW_VALUE, recordizeY } from '../transforms/recordize.js';
     import type { ChannelAccessor, DataRow, PlotDefaults } from '../types/index.js';
     import { getContext, type Component, type ComponentProps } from 'svelte';
+    import { area } from 'd3-shape';
 
     let markProps: AreaYMarkProps = $props();
 

package/dist/marks/ColorLegend.svelte

@@ -26,7 +26,7 @@
             ? plot.options.color.tickFormat
             : Intl.NumberFormat(
                   plot.options.locale,
-                  plot.options.color.tickFormat || DEFAULTS.numberFormat
+                  plot.options.color.tickFormat || { ...DEFAULTS.numberFormat, notation: 'compact' }
               ).format
     );
     const randId = Math.round(Math.random() * 1e6).toFixed(32);

package/dist/transforms/recordize.js

@@ -13,12 +13,15 @@ export function indexData(data) {
 export function recordizeX({ data, ...channels }, { withIndex } = { withIndex: true }) {
     const dataIsRawValueArray = !isDataRecord(data[0]) && !Array.isArray(data[0]) && channels.x == null;
     if (dataIsRawValueArray) {
+        // we remove x, x1 and x2 from the channels since they make no sense when
+        // the data is a raw value array
+        const { x, x1, x2, ...nonXChannels } = channels;
         return {
             data: data.map((value, index) => ({
                 [RAW_VALUE]: value,
                 [INDEX]: index
             })),
-            ...channels,
+            ...nonXChannels,
             x: RAW_VALUE,
             ...(withIndex ? { y: INDEX } : {})
         };
@@ -34,12 +37,15 @@ export function recordizeY({ data, ...channels }, { withIndex } = { withIndex: t
         return { data, ...channels };
     const dataIsRawValueArray = !isDataRecord(data[0]) && !Array.isArray(data[0]) && channels.y == null;
     if (dataIsRawValueArray) {
+        // we remove y, y1 and y2 from the channels since they make no sense when
+        // the data is a raw value array
+        const { y, y1, y2, ...nonYChannels } = channels;
         return {
             data: Array.from(data).map((value, index) => ({
                 [INDEX]: index,
                 [RAW_VALUE]: value
             })),
-            ...channels,
+            ...nonYChannels,
             ...(withIndex ? { x: INDEX } : {}),
             y: RAW_VALUE
         };

package/dist/transforms/sort.js

@@ -27,7 +27,19 @@ export function sort({ data, ...channels }, options = {}) {
                     ...d,
                     [SORT_KEY]: resolveChannel('sort', d, { ...channels, sort })
                 }))
-                    .toSorted((a, b) => (a[SORT_KEY] > b[SORT_KEY] ? 1 : a[SORT_KEY] < b[SORT_KEY] ? -1 : 0) *
+                    .map((d) => ({
+                    ...d,
+                    [SORT_KEY]: typeof d[SORT_KEY] === 'number' && !Number.isFinite(d[SORT_KEY])
+                        ? Number.POSITIVE_INFINITY
+                        : d[SORT_KEY]
+                }))
+                    .toSorted((a, b) => (typeof a[SORT_KEY] === 'string' && typeof b[SORT_KEY] === 'string'
+                    ? a[SORT_KEY].localeCompare(b[SORT_KEY])
+                    : a[SORT_KEY] > b[SORT_KEY]
+                        ? 1
+                        : a[SORT_KEY] < b[SORT_KEY]
+                            ? -1
+                            : 0) *
                     (options.reverse ||
                         (isDataRecord(sort) && sort?.order === 'descending')
                         ? -1

package/dist/transforms/stack.d.ts

@@ -6,7 +6,7 @@ export type StackOptions = {
     order: null | StackOrder;
     reverse: boolean;
 };
-export declare function stackY<T>({ data, ...channels }: T, opts?: Partial<StackOptions>): T;
-export declare function stackX({ data, ...channels }: TransformArg, opts?: Partial<StackOptions>): TransformArg;
+export declare function stackY<T>({ data, ...channels }: TransformArg<T>, opts?: Partial<StackOptions>): TransformArg<T>;
+export declare function stackX<T>({ data, ...channels }: TransformArg<T>, opts?: Partial<StackOptions>): TransformArg<T>;
 export declare function stackMosaicX<T>(args: any, opts: any): any;
 export declare function stackMosaicY<T>(args: any, opts: any): any;

package/dist/transforms/stack.js

@@ -1,12 +1,22 @@
 import isDataRecord from '../helpers/isDataRecord.js';
 import { resolveChannel, resolveProp } from '../helpers/resolve.js';
 import { stack, stackOffsetExpand, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAppearance, stackOrderAscending, stackOrderInsideOut, stackOrderNone, stackOffsetDiverging } from 'd3-shape';
-import { index, union, sum, groups as d3Groups, extent, min } from 'd3-array';
+import { sum, groups as d3Groups, min, range } from 'd3-array';
 import { groupFacetsAndZ } from '../helpers/group';
 import { filter } from './filter.js';
 import { sort } from './sort.js';
+import { INDEX } from '../constants.js';
+import { indexData, RAW_VALUE } from './recordize.js';
+const S = {
+    x: Symbol('x'),
+    x1: Symbol('x1'),
+    x2: Symbol('x2'),
+    y: Symbol('y'),
+    y1: Symbol('y1'),
+    y2: Symbol('y2')
+};
 const GROUP = Symbol('group');
-const FACET = Symbol('group');
+const FACET = Symbol('facet');
 const DEFAULT_STACK_OPTIONS = {
     order: null,
     offset: null,
@@ -41,16 +51,16 @@ function stackXY(byDim, data, channels, options) {
         channels[`${byLow}`] === undefined &&
         channels[`${byHigh}`] === undefined) {
         // resolve all channels for easier computation below
-        const resolvedData = data.map((d) => ({
-            ...(isDataRecord(d) ? d : { __orig: d }),
-            [`__${secondDim}`]: resolveChannel(secondDim, d, channels),
+        const resolvedData = indexData(data).map((d, i) => ({
+            ...(isDataRecord(d) ? d : { [RAW_VALUE]: d }),
+            [S[secondDim]]: resolveChannel(secondDim, d, channels),
             [GROUP]: groupBy === true ? 'G' : resolveChannel(groupBy, d, channels),
             [FACET]: groupFacetsBy.length > 0
                 ? groupFacetsBy
                     .map((channel) => String(resolveChannel(channel, d, channels)))
                     .join('---')
                 : 'F',
-            [`__${byDim}`]: resolveChannel(byDim, d, channels)
+            [S[byDim]]: resolveChannel(byDim, d, channels)
         }));
         // the final data ends up here
         const out = [];
@@ -58,9 +68,53 @@ function stackXY(byDim, data, channels, options) {
         // in separate panels
         const groups = d3Groups(resolvedData, (d) => d[FACET]);
         for (const [, facetData] of groups) {
-            // now we index the data on the second dimension, e.g. over x
-            // when stacking over y
-            const indexed = index(facetData, (d) => d[`__${secondDim}`], (d) => d[GROUP]);
+            // create a temporary dataset for stacking
+            // If we have a grouping channel (fill/stroke/z), build objects keyed by group value
+            // so that series identities remain consistent across the secondary dimension.
+            // This is required for offsets like 'wiggle' and 'inside-out'.
+            let keys;
+            const groupedBySecondDim = d3Groups(facetData, (d) => d[S[secondDim]]);
+            let stackData;
+            const hasUniqueGroups = groupBy !== true &&
+                groupedBySecondDim.every(([, items]) => {
+                    const groupSet = new Set(items.map((d) => d[GROUP]));
+                    return groupSet.size === items.length;
+                });
+            if (groupBy === true || !hasUniqueGroups) {
+                // Unit stacking: map each secondary-dimension bucket to an array of values.
+                // Series are positional (0..N-1) within each bucket.
+                let maxKeys = 0;
+                stackData = groupedBySecondDim.map(([k, items]) => {
+                    const values = items
+                        // keep original order within bucket; no stable series identity across buckets
+                        .map((d) => ({ i: d[INDEX], v: d[S[byDim]] }));
+                    if (values.length > maxKeys)
+                        maxKeys = values.length;
+                    return values;
+                });
+                keys = range(maxKeys);
+            }
+            else {
+                // Grouped stacking: keep consistent series identities using the group key
+                const keySet = new Set(facetData.map((d) => d[GROUP]));
+                stackData = groupedBySecondDim.map(([k, items]) => {
+                    const obj = {};
+                    items.forEach((d) => {
+                        const key = d[GROUP];
+                        // If duplicates exist for the same (secondDim, group) pair, sum values
+                        // and keep the latest index for back-reference.
+                        if (obj[key] == null)
+                            obj[key] = { i: d[INDEX], v: d[S[byDim]] };
+                        else
+                            obj[key] = {
+                                i: d[INDEX],
+                                v: obj[key].v + d[S[byDim]]
+                            };
+                    });
+                    return obj;
+                });
+                keys = Array.from(keySet);
+            }
             const stackOrder = (series) => {
                 const f = STACK_ORDER[options.order || 'none'];
                 return options.reverse ? f(series).reverse() : f(series);
@@ -68,35 +122,31 @@ function stackXY(byDim, data, channels, options) {
             // now stack the values for each index
             const series = stack()
                 .order(stackOrder)
-                .offset(STACK_OFFSET[options.offset])
-                .keys(union(facetData.map((d) => d[GROUP])))
-                .value(([, group], key) => (group.get(key) ? group.get(key)[`__${byDim}`] : 0))(indexed);
+                // Wiggle requires consistent series identities; fall back to 'center' for unit stacking
+                .offset(groupBy === true && options.offset === 'wiggle'
+                ? STACK_OFFSET['center']
+                : STACK_OFFSET[options.offset])
+                .keys(keys)
+                .value((d, key, i, data) => {
+                return d[key]?.v;
+            })(stackData);
             // and combine it all back into a flat array
             const newData = series
-                .map((values) => {
-                const groupKey = values.key;
-                return values
-                    .filter((d) => d.data[1].get(groupKey))
-                    .map((d) => {
-                    const datum = d.data[1].get(groupKey);
-                    // cleanup our internal keys
-                    delete datum[GROUP];
-                    delete datum[FACET];
-                    return { ...datum, [`__${byLow}`]: d[0], [`__${byHigh}`]: d[1] };
-                });
-            })
-                .flat(1);
+                .flatMap((s) => s.map((d) => [d[0], d[1], d.data[s.key]?.i]))
+                .filter((d) => d[2] !== undefined)
+                .map((d) => ({ [S[byLow]]: d[0], [S[byHigh]]: d[1], ...resolvedData[d[2]] }));
+            out.push(...newData);
             // which we then add to the output data
-            out.push(newData);
+            // out.push(...newData);
         }
         return {
-            data: out.flat(1),
+            data: out,
             ...channels,
             [byDim]: undefined,
             ...(typeof channels[byDim] === 'string' && !channels[`__${byDim}_origField`]
                 ? { [`__${byDim}_origField`]: channels[byDim] }
                 : {}),
-            ...{ [byLow]: `__${byLow}`, [byHigh]: `__${byHigh}` }
+            ...{ [byLow]: S[byLow], [byHigh]: S[byHigh] }
         };
     }
     return { data, ...channels };
@@ -113,12 +163,6 @@ function applyDefaults(opts) {
     }
     return { ...DEFAULT_STACK_OPTIONS, ...opts };
 }
-const X = Symbol('x');
-const X1 = Symbol('x1');
-const X2 = Symbol('x2');
-const Y = Symbol('y');
-const Y1 = Symbol('y1');
-const Y2 = Symbol('y2');
 function stackMosaic({ data, x, y, value, fx, fy, ...rest }, { outer, inner }, { x: xOpt, y: yOpt } = {}) {
     const out = [];
     const { data: filtered, ...restArgs } = sort(filter({ data, x, y, value, fx, fy, ...rest }));
@@ -137,10 +181,10 @@ function stackMosaic({ data, x, y, value, fx, fy, ...rest }, { outer, inner }, {
         let outerPos = 0;
         const outerChannel = outer === 'x' ? x : y;
         const innerChannel = inner === 'x' ? x : y;
-        const outerSym1 = outer === 'x' ? X1 : Y1;
-        const outerSym2 = outer === 'x' ? X2 : Y2;
-        const innerSym1 = inner === 'x' ? X1 : Y1;
-        const innerSym2 = inner === 'x' ? X2 : Y2;
+        const outerSym1 = outer === 'x' ? S.x1 : S.y1;
+        const outerSym2 = outer === 'x' ? S.x2 : S.y2;
+        const innerSym1 = inner === 'x' ? S.x1 : S.y1;
+        const innerSym2 = inner === 'x' ? S.x2 : S.y2;
         const outerOpt = outer === 'x' ? xOpt : yOpt;
         const innerOpt = inner === 'x' ? xOpt : yOpt;
         const grouped = d3Groups(data, (d) => resolveProp(d[outerChannel], d));
@@ -165,13 +209,24 @@ function stackMosaic({ data, x, y, value, fx, fy, ...rest }, { outer, inner }, {
                 result[outerSym2] = normO2;
                 result[innerSym1] = normI1;
                 result[innerSym2] = normI2;
-                result[X] = (result[X1] + result[X2]) / 2;
-                result[Y] = (result[Y1] + result[Y2]) / 2;
+                result[S.x] = (result[S.x1] + result[S.x2]) / 2;
+                result[S.y] = (result[S.y1] + result[S.y2]) / 2;
                 out.push(result);
             });
         });
     });
-    return { ...rest, fx, fy, data: out, x: X, x1: X1, x2: X2, y: Y, y1: Y1, y2: Y2 };
+    return {
+        ...rest,
+        fx,
+        fy,
+        data: out,
+        x: S.x,
+        x1: S.x1,
+        x2: S.x2,
+        y: S.y,
+        y1: S.y1,
+        y2: S.y2
+    };
 }
 export function stackMosaicX(args, opts) {
     return stackMosaic(args, { outer: 'x', inner: 'y' }, opts);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.4.4-pr-205.0",
+    "version": "0.4.4-pr-105.1",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",