svelteplot 0.0.1-alpha.11 → 0.0.1-alpha.13

package/dist/marks/GridX.svelte

@@ -5,29 +5,39 @@ import resolveChannel from "../helpers/resolveChannel.js";
 import getBaseStyles from "../helpers/getBaseStyles.js";
 const BaseMark_GridX = BaseMark;
 const plot = getContext("svelteplot");
-let {
-  ticks = [],
-  y1 = null,
-  y2 = null,
-  automatic = false,
-  ...styleProps
-} = $props();
-let autoTickCount = $derived(plot.plotWidth / get(plot, "options.x.tickSpacing", 80));
+let { ticks = [], automatic = false, ...channels } = $props();
+let autoTickCount = $derived(
+  Math.max(2, Math.round(plot.plotWidth / (plot.options?.x?.tickSpacing || 80)))
+);
+$inspect(autoTickCount);
 let autoTicks = $derived(
   ticks.length > 0 ? ticks : get(plot, "options.x.ticks", plot.xScale.ticks(autoTickCount))
 );
+let { y1, y2 } = $derived(channels);
 </script>
 
-<BaseMark_GridX type="grid-x" data={ticks} channels={['x']} {y1} {y2} {automatic}>
+<BaseMark_GridX
+    type="grid-x"
+    data={ticks.length ? ticks.map((tick) => ({ __x: tick })) : undefined}
+    channels={['y']}
+    x="__x"
+    {...channels}
+    {automatic}
+>
     <g class="grid-x">
-        {#each autoTicks as tick, t}
-            <g class="x-tick" transform="translate({plot.xScale(tick)},{plot.margins.top})">
+        {#each autoTicks as tick}
+            <g
+                class="x-tick"
+                transform="translate({plot.xScale(tick) +
+                    (plot.xScale.bandwidth ? plot.xScale.bandwidth() * 0.5 : 0)},{plot.margins
+                    .top})"
+            >
                 <line
                     class="grid"
-                    style={getBaseStyles(tick, styleProps)}
-                    y1={y1 ? plot.yScale(resolveChannel('y', tick, y1)) : 0}
+                    style={getBaseStyles(tick, channels)}
+                    y1={y1 ? plot.yScale(resolveChannel('y1', tick, channels)) : 0}
                     y2={y2
-                        ? plot.yScale(resolveChannel('y', tick, y2))
+                        ? plot.yScale(resolveChannel('y2', tick, channels))
                         : plot.height - plot.margins.top - plot.margins.bottom}
                 />
             </g>
@@ -37,6 +47,7 @@ let autoTicks = $derived(
 
 <style>
     .x-tick line.grid {
-        stroke: #d9d9d9;
+        stroke: currentColor;
+        stroke-opacity: 0.1;
     }
 </style>

package/dist/marks/GridX.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { GridOptions } from '../types.js';
+import type { GridOptions, ChannelAccessor } from '../types.js';
 declare const __propDef: {
     props: Partial<import("../types.js").MarkProps> & GridOptions & {
-        y1?: import("../types.js").ChannelAccessor | undefined;
-        y2?: import("../types.js").ChannelAccessor | undefined;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
         automatic?: boolean | undefined;
     };
     events: {

package/dist/marks/GridY.svelte

@@ -4,16 +4,26 @@ import getBaseStyles from "../helpers/getBaseStyles.js";
 import { get } from "underscore";
 const plot = getContext("svelteplot");
 let { ticks = [], automatic = false, ...styleProps } = $props();
-let autoTickCount = $derived(plot.plotHeight / get(plot, "options.y.tickSpacing", 80));
+let autoTickCount = $derived(plot.plotHeight / (plot.options.y?.tickSpacing || 80));
 let autoTicks = $derived(
   ticks.length > 0 ? ticks : plot.options.y?.ticks || plot.yScale.ticks(autoTickCount)
 );
 </script>
 
-<BaseMark type="grid-y" data={ticks} channels={['y']} {automatic}>
+<BaseMark
+    type="grid-y"
+    data={ticks.length ? ticks.map((tick) => ({ __y: tick })) : undefined}
+    channels={['y']}
+    y="__y"
+    {automatic}
+>
     <g class="grid-y">
         {#each autoTicks as tick}
-            <g class="y-tick" transform="translate({plot.margins.left},{plot.yScale(tick)})">
+            <g
+                class="y-tick"
+                transform="translate({plot.margins.left},{plot.yScale(tick) +
+                    (plot.yScale.bandwidth ? plot.yScale.bandwidth() * 0.5 : 0)})"
+            >
                 <line
                     style={getBaseStyles(tick, styleProps)}
                     class="grid"
@@ -26,6 +36,7 @@ let autoTicks = $derived(
 
 <style>
     .y-tick line.grid {
-        stroke: #d9d9d9;
+        stroke: currentColor;
+        stroke-opacity: 0.2;
     }
 </style>

package/dist/marks/Line.svelte

@@ -1,52 +1,41 @@
+<script context="module"></script>
+
 <script>import resolveChannel from "../helpers/resolveChannel.js";
 import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
 import getBaseStyles from "../helpers/getBaseStyles.js";
 import { line } from "d3-shape";
 import { groupBy } from "underscore";
-import isDataRecord from "../helpers/isDataRecord.js";
+import { maybeCurve } from "../helpers/curves.js";
 const BaseMark_Line = BaseMark;
 const plot = getContext("svelteplot");
-let {
-  data,
-  x = null,
-  y = null,
-  z = null,
-  fill,
-  stroke,
-  sort,
-  ...styleProps
-} = $props();
+let { data, curve, tension, ...channels } = $props();
+let { sort, z, fill, stroke } = $derived(channels);
 let groups = $derived(
-  z || fill || stroke ? Object.values(groupBy(data, (d) => resolveChannel("z", d, z || fill || stroke))) : [data]
+  z || fill || stroke ? Object.values(groupBy(data, (d) => resolveChannel("z", d, channels))) : [data]
 );
 let sortedGroups = $derived(
   sort ? groups.sort(
-    (a, b) => resolveChannel("sort", a[0], sort) > resolveChannel("sort", b[0], sort) ? 1 : -1
+    (a, b) => resolveChannel("sort", a[0], channels) > resolveChannel("sort", b[0], channels) ? 1 : -1
   ) : groups
 );
-let linePath = line().x((d) => plot.xScale(resolveChannel("x", d, x))).y((d) => plot.yScale(resolveChannel("y", d, y)));
+let linePath = $derived(
+  line().curve(maybeCurve(curve, tension)).x((d) => plot.xScale(resolveChannel("x", d, channels))).y((d) => plot.yScale(resolveChannel("y", d, channels)))
+);
 </script>
 
-<BaseMark_Line
-    type="line"
-    {data}
-    channels={['x', 'y', 'color']}
-    {x}
-    {y}
-    {fill}
-    {stroke}
-    {...styleProps}
->
+<BaseMark_Line type="line" {data} channels={['x', 'y', 'color']} {...channels}>
     <g class="lines">
         {#each sortedGroups as lineData}
             <path
                 d={linePath(lineData)}
                 stroke={stroke
-                    ? plot.colorScale(resolveChannel('color', lineData[0], stroke))
+                    ? plot.colorScale(resolveChannel('stroke', lineData[0], channels))
                     : 'currentColor'}
-                fill={fill ? plot.colorScale(resolveChannel('color', lineData[0], fill)) : 'none'}
-                style={getBaseStyles(lineData[0], styleProps)}
+                fill={fill
+                    ? plot.colorScale(resolveChannel('fill', lineData[0], channels))
+                    : 'none'}
+                style={getBaseStyles(lineData[0], channels)}
             />
         {/each}
     </g>

package/dist/marks/Line.svelte.d.ts

@@ -1,5 +1,17 @@
 import { SvelteComponent } from "svelte";
-import type { LineMarkProps } from '../types.js';
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve, DataRow } from '../types.js';
+export type LineMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    z?: ChannelAccessor;
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
+    };
+    curve: Curve | CurveFactory;
+    tension: number;
+};
+import { type CurveFactory } from 'd3-shape';
 declare const __propDef: {
     props: LineMarkProps;
     events: {

package/dist/marks/LineX.svelte

@@ -1,10 +1,8 @@
-<script>import Line from "./Line.svelte";
+<script context="module"></script>
+
+<script>import wrapValueArray from "../helpers/wrapValueArray.js";
+import Line from "./Line.svelte";
 let { data, ...rest } = $props();
 </script>
 
-<Line
-    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
-    x="value"
-    y="index"
-    {...rest}
-/>
+<Line data={wrapValueArray(data)} x="value" y="index" {...rest} />

package/dist/marks/LineX.svelte.d.ts

@@ -1,9 +1,16 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types.js';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
+import type { CurveFactory } from 'd3-shape';
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve, RawValue } from '../types.js';
+export type LineXMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: RawValue[];
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
     };
+    curve?: Curve | CurveFactory;
+    tension?: number;
+};
+declare const __propDef: {
+    props: LineXMarkProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/marks/LineY.svelte

@@ -1,10 +1,8 @@
+<script context="module"></script>
+
 <script>import Line from "./Line.svelte";
+import wrapValueArray from "../helpers/wrapValueArray.js";
 let { data, ...rest } = $props();
 </script>
 
-<Line
-    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
-    x="index"
-    y="value"
-    {...rest}
-/>
+<Line data={wrapValueArray(data)} x="index" y="value" {...rest} />

package/dist/marks/LineY.svelte.d.ts

@@ -1,9 +1,17 @@
 import { SvelteComponent } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
+export type LineYMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: RawValue[];
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
+    };
+    curve?: Curve | CurveFactory;
+    tension?: number;
+};
 import type { RawValue } from '../types.js';
+import type { CurveFactory } from 'd3-shape';
 declare const __propDef: {
-    props: {
-        data: RawValue[];
-    };
+    props: LineYMarkProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/marks/RuleX.svelte

@@ -4,19 +4,27 @@ import getBaseStyles from "../helpers/getBaseStyles.js";
 import resolveChannel from "../helpers/resolveChannel.js";
 const BaseMark_RuleX = BaseMark;
 const plot = getContext("svelteplot");
-let { data = [], x, y1 = null, y2 = null, ...styleProps } = $props();
-let dataWrapped = $derived(x ? data : data.map((d) => ({ x: d, ___orig___: d })));
+let { data = [], ...channels } = $props();
+let { x, y1, y2 } = $derived(channels);
+let dataWrapped = $derived(x ? data : data.map((d) => ({ __x: d, ___orig___: d })));
 </script>
 
-<BaseMark_RuleX type="rule-x" data={dataWrapped} channels={y1 || y2 ? ['x', 'y'] : ['x']} x={x || 'x'} {y1} {y2}>
+<BaseMark_RuleX
+    type="rule-x"
+    data={dataWrapped}
+    channels={['x', 'y1', 'y2']}
+    {...{ x: '__x', ...channels }}
+>
     <g class="rule-x">
         {#each data as datum}
             <line
-                transform="translate({plot.xScale(resolveChannel('x', datum, x))}, {0})"
-                style={getBaseStyles(datum, styleProps)}
-                y1={y1 != null ? plot.yScale(resolveChannel('y', datum, y1)) : plot.margins.top}
+                transform="translate({plot.xScale(resolveChannel('x', datum, channels))}, {0})"
+                style={getBaseStyles(datum, channels)}
+                y1={y1 != null
+                    ? plot.yScale(resolveChannel('y1', datum, channels))
+                    : plot.margins.top}
                 y2={y2 != null
-                    ? plot.yScale(resolveChannel('y', datum, y2))
+                    ? plot.yScale(resolveChannel('y2', datum, channels))
                     : plot.plotHeight + plot.margins.top}
             />
         {/each}

package/dist/marks/RuleY.svelte

@@ -4,19 +4,27 @@ import getBaseStyles from "../helpers/getBaseStyles.js";
 import resolveChannel from "../helpers/resolveChannel.js";
 const BaseMark_RuleY = BaseMark;
 const plot = getContext("svelteplot");
-let { data = [], y, x1, x2, ...styleProps } = $props();
-let dataWrapped = $derived(y ? data : data.map((d) => ({ y: d, ___orig___: d })));
+let { data = [], ...channels } = $props();
+let { y, x1, x2 } = $derived(channels);
+let dataWrapped = $derived(y ? data : data.map((d) => ({ __y: d, ___orig___: d })));
 </script>
 
-<BaseMark_RuleY type="rule-y" data={dataWrapped} channels={['y', 'x']} {y} {x1} {x2}>
+<BaseMark_RuleY
+    type="rule-y"
+    data={dataWrapped}
+    channels={['y', 'x1', 'x2']}
+    {...{ y: '__y', ...channels }}
+>
     <g class="rule-y">
         {#each data as datum}
             <line
-                transform="translate(0,{plot.yScale(resolveChannel('y', datum, y))})"
-                style={getBaseStyles(datum, styleProps)}
-                x1={x1 != null ? plot.xScale(resolveChannel('x', datum, x1)) : plot.margins.left}
+                transform="translate(0,{plot.yScale(resolveChannel('y', datum, channels))})"
+                style={getBaseStyles(datum, channels)}
+                x1={x1 != null
+                    ? plot.xScale(resolveChannel('x1', datum, channels))
+                    : plot.margins.left}
                 x2={x2 != null
-                    ? plot.xScale(resolveChannel('x', datum, x2))
+                    ? plot.xScale(resolveChannel('x2', datum, channels))
                     : plot.plotWidth + plot.margins.left}
             />
         {/each}

package/dist/marks/TickX.svelte

@@ -0,0 +1,30 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+const BaseMark_TickX = BaseMark;
+const plot = getContext("svelteplot");
+let { data = [], ...channels } = $props();
+</script>
+
+<BaseMark_TickX type="tick-x" {data} channels={['x', 'y', 'stroke']} {...channels}>
+    <g class="tick-x">
+        {#each data as datum}
+            <line
+                transform="translate({plot.xScale(resolveChannel('x', datum, channels))}, {0})"
+                style:stroke={channels.stroke
+                    ? plot.colorScale(resolveChannel('stroke', datum, channels))
+                    : null}
+                style={getBaseStyles(datum, channels)}
+                y1={plot.yScale(resolveChannel('y', datum, channels))}
+                y2={plot.yScale(resolveChannel('y', datum, channels)) + plot.yScale.bandwidth()}
+            />
+        {/each}
+    </g>
+</BaseMark_TickX>
+
+<style>
+    .tick-x line {
+        stroke: currentColor;
+    }
+</style>

package/dist/marks/TickX.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { TickMarkProps } from '../types.js';
+declare const __propDef: {
+    props: TickMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TickXProps = typeof __propDef.props;
+export type TickXEvents = typeof __propDef.events;
+export type TickXSlots = typeof __propDef.slots;
+export default class TickX extends SvelteComponent<TickXProps, TickXEvents, TickXSlots> {
+}
+export {};

package/dist/marks/TickY.svelte

@@ -0,0 +1,30 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+const BaseMark_TickY = BaseMark;
+const plot = getContext("svelteplot");
+let { data = [], ...channels } = $props();
+</script>
+
+<BaseMark_TickY type="tick-y" {data} channels={['x', 'y', 'stroke']} {...channels}>
+    <g class="tick-y">
+        {#each data as datum}
+            <line
+                transform="translate(0, {plot.yScale(resolveChannel('y', datum, channels))})"
+                style:stroke={channels.stroke
+                    ? plot.colorScale(resolveChannel('stroke', datum, channels))
+                    : null}
+                style={getBaseStyles(datum, channels)}
+                x1={plot.xScale(resolveChannel('x', datum, channels))}
+                x2={plot.xScale(resolveChannel('x', datum, channels)) + plot.xScale.bandwidth()}
+            />
+        {/each}
+    </g>
+</BaseMark_TickY>
+
+<style>
+    .tick-y line {
+        stroke: currentColor;
+    }
+</style>

package/dist/marks/TickY.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { TickMarkProps } from '../types.js';
+declare const __propDef: {
+    props: TickMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TickYProps = typeof __propDef.props;
+export type TickYEvents = typeof __propDef.events;
+export type TickYSlots = typeof __propDef.slots;
+export default class TickY extends SvelteComponent<TickYProps, TickYEvents, TickYSlots> {
+}
+export {};

package/dist/transforms/normalize.d.ts

@@ -0,0 +1,18 @@
+export declare function normalizeY({ data, y, y1, y2, stroke, fill, z, ...restProps }: {
+    [x: string]: any;
+    data: any;
+    y: any;
+    y1: any;
+    y2: any;
+    stroke: any;
+    fill: any;
+    z: any;
+}): {
+    data: any[];
+    y: any;
+    y1: any;
+    y2: any;
+    stroke: any;
+    fill: any;
+    z: any;
+};

package/dist/transforms/normalize.js

@@ -0,0 +1,25 @@
+import groupBy from 'underscore/modules/groupBy.js';
+export function normalizeY({ data, y, y1, y2, stroke, fill, z, ...restProps }) {
+    const groupBy = stroke || fill || z;
+    const normalizedData = normalize(data, groupBy, ['y', 'y1', 'y2']);
+    return {
+        data: normalizedData,
+        y,
+        y1,
+        y2,
+        stroke,
+        fill,
+        z,
+        ...restProps
+    };
+}
+function normalize(data, groupKey, props) {
+    const filteredProps = props.filter((p) => data[0][p] != null);
+    const groups = Object.values(groupBy(data, groupKey));
+    return groups
+        .map((data) => data.map((datum) => ({
+        ...datum,
+        ...Object.fromEntries(filteredProps.map((prop) => [prop, datum[prop] / data[0][prop]]))
+    })))
+        .flat(1);
+}

package/dist/transforms/recordize.d.ts

@@ -0,0 +1,3 @@
+import type { TransformArg } from "../types.js";
+export declare function recordizeX({ data, ...channels }: TransformArg): TransformArg;
+export declare function recordizeY({ data, ...channels }: TransformArg): TransformArg;

package/dist/transforms/recordize.js

@@ -0,0 +1,28 @@
+import isDataRecord from "../helpers/isDataRecord.js";
+// This transform takes an array of raw values as input and returns
+export function recordizeX({ data, ...channels }) {
+    const dataIsRawValueArray = !isDataRecord(data[0]);
+    if (dataIsRawValueArray) {
+        return {
+            data: data.map((value, index) => ({ __value: value, __index: index, ___orig___: value })),
+            ...channels,
+            x: '__value',
+            y: '__index',
+        };
+    }
+    return { data, ...channels };
+}
+export function recordizeY({ data, ...channels }) {
+    if (!data)
+        return { data, ...channels };
+    const dataIsRawValueArray = !isDataRecord(data[0]);
+    if (dataIsRawValueArray) {
+        return {
+            data: data.map((value, index) => ({ __value: value, __index: index, ___orig___: value })),
+            ...channels,
+            x: '__index',
+            y: '__value',
+        };
+    }
+    return { data, ...channels };
+}

package/dist/transforms/rename.d.ts

@@ -0,0 +1,4 @@
+import type { ChannelName, TransformArg } from "../types.js";
+type RenameChannelsOptions = Record<ChannelName, ChannelName>;
+export declare function renameChannels({ data, ...channels }: TransformArg, options: RenameChannelsOptions): TransformArg;
+export {};

package/dist/transforms/rename.js

@@ -0,0 +1,10 @@
+export function renameChannels({ data, ...channels }, options) {
+    const newChannels = channels;
+    for (const [from, to] of Object.entries(options)) {
+        if (newChannels[from] !== undefined) {
+            newChannels[to] = newChannels[from];
+            delete newChannels[from];
+        }
+    }
+    return { data, ...newChannels };
+}

package/dist/transforms/stack.d.ts

@@ -0,0 +1,11 @@
+import type { TransformArg } from '../types.js';
+type StackOrder = 'none' | 'appearance' | 'inside-out' | 'sum';
+type StackOffset = 'none' | 'wiggle' | 'center' | 'normalize';
+export type StackOptions = {
+    offset: null | StackOffset;
+    order: null | StackOrder;
+    reverse: boolean;
+};
+export declare function stackY({ data, ...channels }: TransformArg, opts?: Partial<StackOptions>): TransformArg;
+export declare function stackX({ data, ...channels }: TransformArg, opts?: Partial<StackOptions>): TransformArg;
+export {};

package/dist/transforms/stack.js

@@ -0,0 +1,73 @@
+import isDataRecord from '../helpers/isDataRecord.js';
+import resolveChannel from '../helpers/resolveChannel.js';
+import { stack, stackOffsetExpand, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAppearance, stackOrderAscending, stackOrderInsideOut, stackOrderNone } from 'd3-shape';
+import { index, union } from 'd3-array';
+const DEFAULT_STACK_OPTIONS = {
+    order: null,
+    offset: null,
+    reverse: false
+};
+const STACK_ORDER = {
+    // null
+    // TODO: value: ,
+    none: stackOrderNone,
+    sum: stackOrderAscending,
+    appearance: stackOrderAppearance,
+    "inside-out": stackOrderInsideOut,
+};
+const STACK_OFFSET = {
+    none: null,
+    wiggle: stackOffsetWiggle,
+    center: stackOffsetSilhouette,
+    normalize: stackOffsetExpand
+};
+function stackXY(byDim, data, channels, options) {
+    const groupBy = channels.z ? 'z' : channels.fill ? 'fill' : channels.stroke ? 'stroke' : true;
+    const secondDim = byDim === 'x' ? 'y' : 'x';
+    const byLow = `${byDim}1`;
+    const byHigh = `${byDim}2`;
+    if (channels[byDim] !== undefined && channels[`${byLow}`] === undefined && channels[`${byHigh}`] === undefined) {
+        const resolvedData = data.map((d) => ({
+            ...(isDataRecord(d) ? d : { __orig: d }),
+            [`__${secondDim}`]: resolveChannel(secondDim, d, channels),
+            __group: groupBy === true ? 'G' : resolveChannel(groupBy, d, channels),
+            [`__${byDim}`]: resolveChannel(byDim, d, channels)
+        }));
+        const indexed = index(resolvedData, (d) => d[`__${secondDim}`], (d) => d.__group);
+        const stackOrder = (series) => {
+            const f = STACK_ORDER[options.order || 'none'];
+            return options.reverse ? f(series).reverse() : f(series);
+        };
+        const series = stack()
+            .order(stackOrder)
+            .offset(STACK_OFFSET[options.offset])
+            .keys(union(resolvedData.map((d) => d.__group)))
+            .value(([, group], key) => group.get(key) ? group.get(key)[`__${byDim}`] : 0)(indexed);
+        const newData = series
+            .map((values) => {
+            const groupKey = values.key;
+            return values
+                .filter((d) => d.data[1].get(groupKey))
+                .map((d) => {
+                const { [`__${byDim}`]: unused1, [`__${secondDim}`]: unused2, ...datum } = d.data[1].get(groupKey);
+                return { ...datum, [`__${byLow}`]: d[0], [`__${byHigh}`]: d[1] };
+            });
+        })
+            .flat(1);
+        console.log({ newData });
+        return { data: newData, ...channels, [byDim]: undefined, ...{ [byLow]: `__${byLow}`, [byHigh]: `__${byHigh}` } };
+    }
+    return { data, ...channels };
+}
+export function stackY({ data, ...channels }, opts = {}) {
+    return stackXY('y', data, channels, applyDefaults(opts));
+}
+export function stackX({ data, ...channels }, opts = {}) {
+    return stackXY('x', data, channels, applyDefaults(opts));
+}
+function applyDefaults(opts) {
+    if (opts.offset === 'wiggle' && opts.order === undefined) {
+        return { ...DEFAULT_STACK_OPTIONS, order: 'inside-out', ...opts };
+    }
+    return { ...DEFAULT_STACK_OPTIONS, ...opts };
+}