layerchart 0.44.0 → 0.51.0

package/dist/components/tooltip/TooltipHeader.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string | undefined;
+        classes?: {
+            root?: string;
+            color?: string;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TooltipHeaderProps = typeof __propDef.props;
+export type TooltipHeaderEvents = typeof __propDef.events;
+export type TooltipHeaderSlots = typeof __propDef.slots;
+export default class TooltipHeader extends SvelteComponentTyped<TooltipHeaderProps, TooltipHeaderEvents, TooltipHeaderSlots> {
+}
+export {};

package/dist/components/tooltip/TooltipItem.svelte

@@ -0,0 +1,37 @@
+<script>import { format as formatUtil } from '@layerstack/utils';
+import { cls } from '@layerstack/tailwind';
+export let label;
+/** Value to be formatted and displayed.  Can also be passed as default slot */
+export let value = undefined;
+export let format = undefined;
+export let valueAlign = 'left';
+export let color = undefined;
+export let classes = {};
+</script>
+
+<div class={cls('contents', classes.root, $$props.class)} {...$$restProps}>
+  <div class={cls('label', 'flex items-center gap-2 whitespace-nowrap', classes.label)}>
+    {#if color}
+      <div
+        class={cls('color', 'inline-block size-2 rounded-full bg-[--color]', classes.color)}
+        style:--color={color}
+      ></div>
+    {/if}
+    <slot name="label">{label}</slot>
+  </div>
+
+  <div
+    class={cls(
+      'value',
+      'tabular-nums',
+      {
+        'text-right': valueAlign === 'right',
+        'text-center': valueAlign === 'center',
+      },
+      classes.value,
+      $$props.class
+    )}
+  >
+    <slot>{format ? formatUtil(value, format) : value}</slot>
+  </div>
+</div>

package/dist/components/{TooltipItem.svelte.d.ts → tooltip/TooltipItem.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FormatType } from 'svelte-ux';
+import { type FormatType } from '@layerstack/utils';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,9 +7,12 @@ declare const __propDef: {
         value?: any;
         format?: FormatType | undefined;
         valueAlign?: ("left" | "right" | "center") | undefined;
+        color?: string | undefined;
         classes?: {
+            root?: string;
             label?: string;
             value?: string;
+            color?: string;
         } | undefined;
     };
     events: {

package/dist/components/tooltip/TooltipList.svelte

@@ -0,0 +1,12 @@
+<script>import { cls } from '@layerstack/tailwind';
+</script>
+
+<div
+  class={cls(
+    'TooltipList',
+    'grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center',
+    $$props.class
+  )}
+>
+  <slot />
+</div>

package/dist/components/tooltip/TooltipList.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TooltipListProps = typeof __propDef.props;
+export type TooltipListEvents = typeof __propDef.events;
+export type TooltipListSlots = typeof __propDef.slots;
+export default class TooltipList extends SvelteComponentTyped<TooltipListProps, TooltipListEvents, TooltipListSlots> {
+}
+export {};

package/dist/components/tooltip/TooltipSeparator.svelte

@@ -0,0 +1,4 @@
+<script>import { cls } from '@layerstack/tailwind';
+</script>
+
+<div class={cls('rounded bg-surface-content/20 my-1 col-span-full h-px', $$props.class)} />

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Context } from './TooltipContext.svelte';
+export { default as Header } from './TooltipHeader.svelte';
+export { default as Item } from './TooltipItem.svelte';
+export { default as List } from './TooltipList.svelte';
+export { default as Separator } from './TooltipSeparator.svelte';
+export { default as Root } from './Tooltip.svelte';

package/dist/components/tooltip/index.js

@@ -0,0 +1,6 @@
+export { default as Context } from './TooltipContext.svelte';
+export { default as Header } from './TooltipHeader.svelte';
+export { default as Item } from './TooltipItem.svelte';
+export { default as List } from './TooltipList.svelte';
+export { default as Separator } from './TooltipSeparator.svelte';
+export { default as Root } from './Tooltip.svelte';

package/dist/docs/Blockquote.svelte

@@ -1,5 +1,6 @@
 <script>import { mdiInformation } from '@mdi/js';
-import { Icon, cls } from 'svelte-ux';
+import { Icon } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 </script>
 
 <div

package/dist/docs/Code.svelte

@@ -1,6 +1,7 @@
 <script>import Prism from 'prismjs';
 import 'prism-svelte';
-import { CopyButton, cls } from 'svelte-ux';
+import { CopyButton } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 export let source = null;
 export let language = 'svelte';
 export let highlightedSource = source

package/dist/docs/CurveMenuField.svelte

@@ -1,5 +1,6 @@
 <script>import * as d3shapes from 'd3-shape';
-import { MenuField, entries } from 'svelte-ux';
+import { MenuField } from 'svelte-ux';
+import { entries } from '@layerstack/utils';
 export let value = d3shapes['curveLinear'];
 export let showOpenClosed = false;
 const options = entries(d3shapes)

package/dist/docs/GeoDebug.svelte

@@ -1,4 +1,6 @@
-<script>import { format, Checkbox, cls } from 'svelte-ux';
+<script>import { Checkbox } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
+import { format } from '@layerstack/utils';
 import { chartContext } from '../components/ChartContext.svelte';
 import { geoContext } from '../components/GeoContext.svelte';
 const { width, height } = chartContext();

package/dist/docs/Json.svelte

@@ -1,5 +1,5 @@
 <script>import JsonTree from 'svelte-json-tree';
-import { cls } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 export let value;
 export let defaultExpandedPaths = ['$'];
 </script>

package/dist/docs/Preview.svelte

@@ -3,7 +3,8 @@
 import Prism from 'prismjs';
 import 'prism-svelte';
 import { mdiCodeTags, mdiTable } from '@mdi/js';
-import { Button, CopyButton, Dialog, Toggle, Tooltip, cls } from 'svelte-ux';
+import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 import Code from './Code.svelte';
 import Json from './Json.svelte';
 export let code = undefined;

package/dist/docs/TransformDebug.svelte

@@ -1,4 +1,5 @@
-<script>import { format, cls } from 'svelte-ux';
+<script>import { cls } from '@layerstack/tailwind';
+import { format } from '@layerstack/utils';
 import { transformContext } from '../components/TransformContext.svelte';
 const transform = transformContext();
 const { translate, scale } = transform;

package/dist/utils/common.d.ts

@@ -1,6 +1,6 @@
 import type Chart from '../components/Chart.svelte';
 import type { ComponentProps } from 'svelte';
-export type Accessor<TData = any> = number | string | ((d: TData) => any) | undefined | Accessor<TData>[];
+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[];

package/dist/utils/common.js

@@ -7,8 +7,8 @@ export function accessor(prop) {
         // function
         return prop;
     }
-    else if (typeof prop === 'string') {
-        // path string
+    else if (typeof prop === 'string' || typeof prop === 'number') {
+        // path string or number (array index)
         return (d) => get(d, prop);
     }
     else {

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

@@ -0,0 +1,8 @@
+export declare const testData: {
+    one: number;
+    two: number;
+    obj: {
+        value: number;
+    };
+    arr: string[];
+};

package/dist/utils/common.test.js

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { accessor } from './common.js';
+export const testData = {
+    one: 1,
+    two: 2,
+    obj: { value: 2 },
+    arr: ['one', 'two', 'three'],
+};
+describe('accessor', () => {
+    it('string path', () => {
+        const actual = accessor('one')(testData);
+        expect(actual).toEqual(testData.one);
+    });
+    it('nested path', () => {
+        const actual = accessor('obj.value')(testData);
+        expect(actual).toEqual(testData.obj.value);
+    });
+    it('multiple properties', () => {
+        const actual = accessor(['one', 'two', 'obj.value', (d) => d.arr[0]])(testData);
+        expect(actual).toEqual([testData.one, testData.two, testData.obj.value, testData.arr[0]]);
+    });
+    it('multiple properties as numbers (index)', () => {
+        const actual = accessor([0, 1])(testData.arr);
+        expect(actual).toEqual([testData.arr[0], testData.arr[1]]);
+    });
+    it('function', () => {
+        const actual = accessor((d) => d.obj.value)(testData);
+        expect(actual).toEqual(testData.obj.value);
+    });
+    it('string path with array value', () => {
+        const actual = accessor('arr[0]')(testData);
+        expect(actual).toEqual(testData.arr[0]);
+    });
+    it('null returns full object', () => {
+        const actual = accessor(null)(testData);
+        expect(actual).toEqual(testData);
+    });
+});

package/dist/utils/event.js

@@ -1,4 +1,4 @@
-import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isTouchEvent } from 'svelte-ux';
+import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isTouchEvent, } from '@layerstack/utils';
 // See: https://github.com/airbnb/visx/blob/master/packages/visx-event/src/localPointGeneric.ts
 // TODO: Matches event.layerX/Y, but are deprecated (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/layerX).
 //       Similar and could be replaced by event.offsetX/Y (but not identical)

package/dist/utils/genData.d.ts

@@ -44,14 +44,14 @@ export declare function createTimeSeries<TKey extends string>(options: {
     endDate: Date;
 } & { [K in TKey]: number; })[];
 export declare const wideData: {
-    year: string;
+    year: number;
     apples: number;
     bananas: number;
     cherries: number;
     dates: number;
 }[];
 export declare const longData: {
-    year: string;
+    year: number;
     basket: number;
     fruit: string;
     value: number;

package/dist/utils/genData.js

@@ -86,28 +86,28 @@ export function createTimeSeries(options) {
     return timeSeries;
 }
 export const wideData = [
-    { year: '2019', apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
-    { year: '2018', apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
-    { year: '2017', apples: 820, bananas: 1000, cherries: 640, dates: 400 },
-    { year: '2016', apples: 820, bananas: 560, cherries: 720, dates: 400 },
+    { year: 2019, apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
+    { year: 2018, apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
+    { year: 2017, apples: 820, bananas: 1000, cherries: 640, dates: 400 },
+    { year: 2016, apples: 820, bananas: 560, cherries: 720, dates: 400 },
 ];
 export const longData = [
-    { year: '2019', basket: 1, fruit: 'apples', value: 3840 },
-    { year: '2019', basket: 1, fruit: 'bananas', value: 1920 },
-    { year: '2019', basket: 2, fruit: 'cherries', value: 960 },
-    { year: '2019', basket: 2, fruit: 'dates', value: 400 },
-    { year: '2018', basket: 1, fruit: 'apples', value: 1600 },
-    { year: '2018', basket: 1, fruit: 'bananas', value: 1440 },
-    { year: '2018', basket: 2, fruit: 'cherries', value: 960 },
-    { year: '2018', basket: 2, fruit: 'dates', value: 400 },
-    { year: '2017', basket: 1, fruit: 'apples', value: 820 },
-    { year: '2017', basket: 1, fruit: 'bananas', value: 1000 },
-    { year: '2017', basket: 2, fruit: 'cherries', value: 640 },
-    { year: '2017', basket: 2, fruit: 'dates', value: 400 },
-    { year: '2016', basket: 1, fruit: 'apples', value: 820 },
-    { year: '2016', basket: 1, fruit: 'bananas', value: 560 },
-    { year: '2016', basket: 2, fruit: 'cherries', value: 720 },
-    { year: '2016', basket: 2, fruit: 'dates', value: 400 },
+    { year: 2019, basket: 1, fruit: 'apples', value: 3840 },
+    { year: 2019, basket: 1, fruit: 'bananas', value: 1920 },
+    { year: 2019, basket: 2, fruit: 'cherries', value: 960 },
+    { year: 2019, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2018, basket: 1, fruit: 'apples', value: 1600 },
+    { year: 2018, basket: 1, fruit: 'bananas', value: 1440 },
+    { year: 2018, basket: 2, fruit: 'cherries', value: 960 },
+    { year: 2018, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2017, basket: 1, fruit: 'apples', value: 820 },
+    { year: 2017, basket: 1, fruit: 'bananas', value: 1000 },
+    { year: 2017, basket: 2, fruit: 'cherries', value: 640 },
+    { year: 2017, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2016, basket: 1, fruit: 'apples', value: 820 },
+    { year: 2016, basket: 1, fruit: 'bananas', value: 560 },
+    { year: 2016, basket: 2, fruit: 'cherries', value: 720 },
+    { year: 2016, basket: 2, fruit: 'dates', value: 400 },
 ];
 export function getPhyllotaxis({ radius, count, width, height, }) {
     // Phyllotaxis: https://www.youtube.com/watch?v=KWoJgHFYWxY

package/dist/utils/math.d.ts

@@ -17,11 +17,11 @@ export declare function polarToCartesian(angle: number, radius: number): {
     y: number;
 };
 /**
- * Convert cartesian to polar coordinate system.  Angle in radians
+ * Convert cartesian to polar coordinate system.  Angle in radians with 0 at the 12 o'clock position
  */
 export declare function cartesianToPolar(x: number, y: number): {
     radius: number;
-    angle: number;
+    radians: number;
 };
 /** Convert celsius temperature to fahrenheit */
 export declare function celsiusToFahrenheit(temperature: number): number;

package/dist/utils/math.js

@@ -23,12 +23,18 @@ export function polarToCartesian(angle, radius) {
     };
 }
 /**
- * Convert cartesian to polar coordinate system.  Angle in radians
+ * Convert cartesian to polar coordinate system.  Angle in radians with 0 at the 12 o'clock position
  */
 export function cartesianToPolar(x, y) {
+    let radians = Math.atan2(y, x);
+    radians += Math.PI / 2;
+    // Ensure the result is between 0 and 2π
+    if (radians < 0) {
+        radians += 2 * Math.PI;
+    }
     return {
         radius: Math.sqrt(x ** 2 + y ** 2),
-        angle: Math.atan(y / x),
+        radians,
     };
 }
 /** Convert celsius temperature to fahrenheit */

package/dist/utils/rect.d.ts

@@ -5,20 +5,14 @@ type DimensionGetterOptions = {
     x?: Accessor;
     /** Override `y` accessor from context */
     y?: Accessor;
-    groupBy?: string;
+    /** Override `x1` accessor from context */
+    x1?: Accessor;
+    /** Override `y1` accessor from context */
+    y1?: Accessor;
     inset?: number;
-    groupPadding?: {
-        inner?: number;
-        outer?: number;
-    };
 };
 export declare function createDimensionGetter<TData>(context: ChartContext<TData>, options?: DimensionGetterOptions): import("svelte/store").Readable<(item: any) => {
     x: any;
-    y: number;
-    width: number;
-    height: number;
-} | {
-    x: number;
     y: any;
     width: number;
     height: number;

package/dist/utils/rect.js

@@ -1,27 +1,26 @@
 import { derived } from 'svelte/store';
 import { max, min } from 'd3-array';
-import { groupScaleBand, isScaleBand } from './scales.js';
+import { isScaleBand } from './scales.js';
 import { accessor } from './common.js';
-// TOOD: Pass in overrides for `x` and `y` accessors
 export function createDimensionGetter(context, options) {
-    const { flatData, xGet, yGet, xScale, yScale, x: xAccessor, y: yAccessor } = context;
-    const groupBy = options?.groupBy;
+    const { xScale, yScale, x: xAccessor, y: yAccessor, x1: x1Accessor, y1: y1Accessor, x1Scale, y1Scale, } = context;
     const inset = options?.inset ?? 0;
-    return derived([flatData, xGet, yGet, xScale, yScale, xAccessor, yAccessor], ([$flatData, $xGet, $yGet, $xScale, $yScale, $xAccessor, $yAccessor]) => {
+    return derived([xScale, x1Scale, yScale, y1Scale, xAccessor, yAccessor, x1Accessor, y1Accessor], ([$xScale, $x1Scale, $yScale, $y1Scale, $xAccessor, $yAccessor, $x1Accessor, $y1Accessor]) => {
         // Use `xscale.domain()` instead of `$xDomain` to include `nice()` being applied
         const [minXDomain, maxXDomain] = $xScale.domain();
         const [minYDomain, maxYDomain] = $yScale.domain();
+        const _x = accessor(options?.x ?? $xAccessor);
+        const _y = accessor(options?.y ?? $yAccessor);
+        const _x1 = accessor(options?.x1 ?? $x1Accessor);
+        const _y1 = accessor(options?.y1 ?? $y1Accessor);
         // @ts-expect-error
         return function getter(item) {
             if (isScaleBand($yScale)) {
                 // Horizontal band
-                const y1Scale = groupBy
-                    ? groupScaleBand($yScale, $flatData, groupBy, options?.groupPadding)
-                    : null;
-                // @ts-expect-error
-                const y = firstValue($yGet(item)) + (y1Scale ? y1Scale(item[groupBy]) : 0) + inset / 2;
-                const height = Math.max(0, $yScale.bandwidth ? (y1Scale ? y1Scale.bandwidth() : $yScale.bandwidth()) - inset : 0);
-                const _x = accessor(options?.x ?? $xAccessor);
+                const y = firstValue($yScale(_y(item)) ?? 0) + ($y1Scale ? $y1Scale(_y1(item)) : 0) + inset / 2;
+                const height = Math.max(0, $yScale.bandwidth
+                    ? ($y1Scale ? ($y1Scale.bandwidth?.() ?? 0) : $yScale.bandwidth()) - inset
+                    : 0);
                 const xValue = _x(item);
                 let left = 0;
                 let right = 0;
@@ -54,13 +53,10 @@ export function createDimensionGetter(context, options) {
             }
             else {
                 // Vertical band or linear
-                const x1Scale = groupBy && isScaleBand($xScale)
-                    ? groupScaleBand($xScale, $flatData, groupBy, options?.groupPadding)
-                    : null;
-                // @ts-expect-error
-                const x = firstValue($xGet(item)) + (x1Scale ? x1Scale(item[groupBy]) : 0) + inset / 2;
-                const width = Math.max(0, $xScale.bandwidth ? (x1Scale ? x1Scale.bandwidth() : $xScale.bandwidth()) - inset : 0);
-                const _y = accessor(options?.y ?? $yAccessor);
+                const x = firstValue($xScale(_x(item))) + ($x1Scale ? $x1Scale(_x1(item)) : 0) + inset / 2;
+                const width = Math.max(0, $xScale.bandwidth
+                    ? ($x1Scale ? ($x1Scale.bandwidth?.() ?? 0) : $xScale.bandwidth()) - inset
+                    : 0);
                 const yValue = _y(item);
                 let top = 0;
                 let bottom = 0;

package/dist/utils/scales.d.ts

@@ -1,15 +1,19 @@
 import { tweened, spring } from 'svelte/motion';
 import { type MotionOptions } from '../stores/motionStore.js';
 import { type ScaleBand } from 'd3-scale';
-export type AnyScale<Domain = any, Range = any, Input = Domain, Output = any> = {
+export interface AnyScale<Domain = any, Range = any, Input = Domain, Output = any> {
     (value: Input): Output;
     invert?: (value: Output) => Input;
     domain(): Domain[];
+    domain(domain: Iterable<Domain>): this;
     range(): Range[];
+    range(range: Iterable<Range>): this;
     bandwidth?: Function;
     ticks?: Function;
     tickFormat?: Function;
-};
+    copy(): Function;
+}
+export type DomainType = (number | string | Date | null | undefined)[] | null;
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
@@ -27,6 +31,8 @@ export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBa
  *  Useful to map mouse event location (x,y) to domain value
  */
 export declare function scaleInvert(scale: AnyScale<any, any>, value: number): any;
+/** Create new copy of scale with domain and range */
+export declare function createScale(scale: AnyScale, domain: DomainType, range: any[] | Function, context?: Record<any, any>): AnyScale<any, any, any, any>;
 /** Create a `scaleBand()` within another scaleBand()'s bandwidth (typically a x1 of an x0 scale, used for grouping) */
 export declare function groupScaleBand<Domain extends {
     toString(): string;

package/dist/utils/scales.js

@@ -2,7 +2,7 @@ import { derived } from 'svelte/store';
 import { tweened, spring } from 'svelte/motion';
 import { motionStore } from '../stores/motionStore.js';
 import { scaleBand } from 'd3-scale';
-import { unique } from 'svelte-ux/utils/array';
+import { unique } from '@layerstack/utils/array';
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
@@ -37,6 +37,20 @@ export function scaleInvert(scale, value) {
         return scale.invert?.(value);
     }
 }
+/** Create new copy of scale with domain and range */
+export function createScale(scale, domain, range, context) {
+    const scaleCopy = scale.copy();
+    if (domain) {
+        scaleCopy.domain(domain);
+    }
+    if (typeof range === 'function') {
+        scaleCopy.range(range(context));
+    }
+    else {
+        scaleCopy.range(range);
+    }
+    return scaleCopy;
+}
 /** Create a `scaleBand()` within another scaleBand()'s bandwidth (typically a x1 of an x0 scale, used for grouping) */
 export function groupScaleBand(scale, flatData, groupBy, padding) {
     //

package/dist/utils/stack.d.ts

@@ -1,14 +1,14 @@
 import { stackOffsetNone, stackOrderNone } from 'd3-shape';
 type OrderType = typeof stackOrderNone;
 type OffsetType = typeof stackOffsetNone;
-export declare function createStackData<TData>(data: TData[], options: {
+export declare function groupStackData<TData>(data: TData[], options: {
     xKey: string;
     groupBy?: string;
     stackBy?: string;
     order?: OrderType;
     offset?: OffsetType;
 }): {
-    keys: (string | number)[];
+    keys: Record<string, any>;
     values: number[];
 }[];
 /**

package/dist/utils/stack.js

@@ -1,29 +1,36 @@
-import { flatGroup, max, rollup, sum } from 'd3-array';
+import { flatGroup, group, max, rollup, sum } from 'd3-array';
 import { stack, stackOffsetNone, stackOrderNone } from 'd3-shape';
 import { pivotWider } from './pivot.js';
-export function createStackData(data, options) {
+export function groupStackData(data, options) {
+    const dataByKey = group(data, (d) => d[options.xKey]);
     if (options.groupBy) {
         // Group then Stack (if needed)
-        const groupedData = flatGroup(data, 
-        // @ts-expect-error
-        (d) => d[options.xKey], 
-        // @ts-expect-error
-        (d) => d[options.groupBy ?? '']);
+        const groupedData = flatGroup(data, (d) => d[options.xKey], (d) => d[options.groupBy ?? '']);
         const result = groupedData.flatMap((d, i) => {
             const groupKeys = d.slice(0, -1); // all but last item
-            const itemData = d.slice(-1)[0]; // last item
-            const pivotData = pivotWider(itemData, options.xKey, options.stackBy ?? '', 'value');
+            const groupData = d.slice(-1)[0]; // last item
+            const pivotData = pivotWider(groupData, options.xKey, options.stackBy ?? '', 'value');
             const stackKeys = [
-                ...new Set(itemData.map((d) => d[options.stackBy ?? ''])),
+                ...new Set(groupData.map((d) => d[options.stackBy ?? ''])),
             ];
             // @ts-expect-error
             const stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(pivotData);
             return stackData.flatMap((series) => {
                 return series.flatMap((s) => {
+                    const keys = {
+                        [options.xKey]: groupKeys[0],
+                        [options.groupBy ?? '']: groupKeys[1],
+                    };
+                    if (options.stackBy) {
+                        keys[options.stackBy] = series.key;
+                    }
+                    const value = sum(groupData, (d) => d.value);
                     return {
-                        ...itemData[0], // TODO: More than one should use stacks or aggregate values?
-                        keys: options.stackBy ? [...groupKeys, series.key] : groupKeys,
-                        values: options.stackBy ? [s[0], s[1]] : [0, sum(itemData, (d) => d.value)],
+                        ...keys,
+                        keys,
+                        value,
+                        values: options.stackBy ? [s[0], s[1]] : [0, value],
+                        data: dataByKey.get(keys[options.xKey]),
                     };
                 });
             });
@@ -39,10 +46,16 @@ export function createStackData(data, options) {
         const stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(pivotData);
         const result = stackData.flatMap((series) => {
             return series.flatMap((s) => {
+                const keys = {
+                    [options.xKey]: s.data[options.xKey],
+                    [options.stackBy ?? '']: series.key,
+                };
                 return {
-                    ...s.data,
-                    keys: [s.data[options.xKey], series.key],
+                    ...keys,
+                    keys,
+                    value: s[1] - s[0],
                     values: [s[0], s[1]],
+                    data: dataByKey.get(keys[options.xKey]),
                 };
             });
         });
@@ -51,11 +64,15 @@ export function createStackData(data, options) {
     else {
         // No grouping or stacking.  Aggregate based on `xKey`
         return Array.from(rollup(data, (items) => {
+            // @ts-expect-error
+            const keys = { [options.xKey]: items[0][options.xKey] };
+            const value = sum(items, (d) => d.value);
             return {
-                // @ts-expect-error
-                keys: [items[0][options.xKey]],
-                // @ts-expect-error
-                values: [0, sum(items, (d) => d.value)],
+                ...keys,
+                keys,
+                value,
+                values: [0, value],
+                data: dataByKey.get(keys[options.xKey]),
             };
         }, 
         // @ts-expect-error
@@ -66,7 +83,7 @@ export function createStackData(data, options) {
  * Function to offset each layer by the maximum of the previous layer
  *   - see: https://observablehq.com/@mkfreeman/separated-bar-chart
  */
-// TODO: Try to find way to support separated with createStackData() (which has isolated stacked per group)
+// TODO: Try to find way to support separated with groupStackData() (which has isolated stacked per group)
 // @ts-expect-error
 export function stackOffsetSeparated(series, order) {
     const gap = 200; // TODO: Determine way to pass in as option (curry?)