layerchart 0.7.3 → 0.7.6

package/components/Area.svelte

@@ -35,7 +35,7 @@ $: {
 </script>
 
 {#if line}
-	<Path {curve} {defined} {color} {tweened} {...line} />
+	<Path {data} {curve} {defined} {color} {tweened} {...line} />
 {/if}
 
 <path

package/components/Labels.svelte

@@ -10,7 +10,7 @@ import Text from './Text.svelte';
 import { formatNumberAsStyle } from 'svelte-ux/utils/number';
 import { isScaleBand } from '../utils/scales';
 import { greatestAbs, unique } from 'svelte-ux/utils/array';
-const { data, flatData, xGet, yRange, xScale, yScale, x, y, custom } = getContext('LayerCake');
+const { flatData, xGet, yRange, xScale, yScale, x, y, custom } = getContext('LayerCake');
 export let orientation = 'auto';
 export let significantDigits = 3;
 export let formatStyle = null;
@@ -82,7 +82,7 @@ $: getValue = (item) => {
 </script>
 
 <g class="label-group">
-	{#each $data as item, index}
+	{#each $flatData as item, index}
 		<Text
 			class="group-rect"
 			textAnchor="middle"

package/components/Path.svelte

@@ -7,7 +7,7 @@ import { line as d3Line } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
 import { interpolatePath } from 'd3-interpolate-path';
 import { motionStore } from '../stores/motionStore';
-const { data: contextData, xGet, yGet, zGet } = getContext('LayerCake');
+const { data: contextData, xGet, yGet } = getContext('LayerCake');
 // Properties to override what is used from context
 export let data = undefined; // TODO: Update Type
 export let x = undefined; // TODO: Update Type

package/components/Rect.svelte

@@ -1,14 +1,14 @@
-<script>import { motionStore } from '../stores/motionStore';
+<script>import { motionStore, resolveOptions } from '../stores/motionStore';
 export let x = 0;
 export let y = 0;
 export let width;
 export let height;
 export let spring = undefined;
 export let tweened = undefined;
-let tweened_x = motionStore(x, { spring, tweened });
-let tweened_y = motionStore(y, { spring, tweened });
-let tweened_width = motionStore(width, { spring, tweened });
-let tweened_height = motionStore(height, { spring, tweened });
+let tweened_x = motionStore(x, resolveOptions('x', { spring, tweened }));
+let tweened_y = motionStore(y, resolveOptions('y', { spring, tweened }));
+let tweened_width = motionStore(width, resolveOptions('width', { spring, tweened }));
+let tweened_height = motionStore(height, resolveOptions('height', { spring, tweened }));
 $: tweened_x.set(x);
 $: tweened_y.set(y);
 $: tweened_width.set(width);

package/docs/Layout.svelte

@@ -13,31 +13,32 @@
 
 <script>
 	// frontmatter: https://mdsvex.com/docs#frontmatter-1
-	export let component;
-	export let filename;
+	export let name;
+	export let sourceUrl;
+	export let docUrl;
 	export let description;
 </script>
 
-{#if component}
+{#if name}
 	<div class="flex items-center gap-2">
-		<span class="text-2xl font-bold">{component}</span>
-		{#if component}
+		<span class="text-2xl font-bold">{name}</span>
+		{#if sourceUrl}
 			<Tooltip title="View source">
 				<Button
 					class="text-black/50"
 					icon={mdiCodeTags}
-					href="https://github.com/techniq/layerchart/blob/master/src/lib/components/{component}.svelte"
+					href="https://github.com/techniq/layerchart/blob/master/{sourceUrl}"
 					target="_blank"
 				/>
 			</Tooltip>
 		{/if}
 
-		{#if filename}
+		{#if docUrl}
 			<Tooltip title="Edit this page">
 				<Button
 					class="text-black/50"
 					icon={mdiFileDocumentEditOutline}
-					href="https://github.com/techniq/layerchart/blob/master/{filename}"
+					href="https://github.com/techniq/layerchart/blob/master/{docUrl}"
 					target="_blank"
 				/>
 			</Tooltip>

package/docs/Layout.svelte.d.ts

@@ -2,8 +2,9 @@
 /** @typedef {typeof __propDef.events}  LayoutEvents */
 /** @typedef {typeof __propDef.slots}  LayoutSlots */
 export default class Layout extends SvelteComponentTyped<{
-    component: any;
-    filename: any;
+    name: any;
+    sourceUrl: any;
+    docUrl: any;
     description: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -21,8 +22,9 @@ import h1 from "./Header1.svelte";
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        component: any;
-        filename: any;
+        name: any;
+        sourceUrl: any;
+        docUrl: any;
         description: any;
     };
     events: {

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.7.3",
+  "version": "0.7.6",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.59",
@@ -49,7 +49,7 @@
     "date-fns": "^2.28.0",
     "layercake": "^6.1.0",
     "lodash-es": "^4.17.21",
-    "svelte-ux": "^0.6.10"
+    "svelte-ux": "^0.7.0"
   },
   "exports": {
     "./package.json": "./package.json",

package/stores/motionStore.d.ts

@@ -1,9 +1,26 @@
 import { spring, tweened } from 'svelte/motion';
+export declare type SpringOptions = Parameters<typeof spring>[1];
+export declare type TweenedOptions = Parameters<typeof tweened>[1];
 export declare type MotionOptions = {
-    spring?: boolean | Parameters<typeof spring>[1];
-    tweened?: boolean | Parameters<typeof tweened>[1];
+    spring?: boolean | SpringOptions;
+    tweened?: boolean | TweenedOptions;
+};
+export declare type PropMotionOptions = {
+    spring?: boolean | SpringOptions | {
+        [prop: string]: SpringOptions;
+    };
+    tweened?: boolean | TweenedOptions | {
+        [prop: string]: TweenedOptions;
+    };
 };
 /**
  * Convenient wrapper to create a motion store (spring(), tweened()) based on properties, or fall back to basic writable() store
  */
 export declare function motionStore(value: any, options: MotionOptions): import("svelte/motion").Tweened<unknown> | import("svelte/motion").Spring<any> | import("svelte/store").Writable<any>;
+/**
+ * Helper to resolve motion options with specific property option (useful for specifying per-prop delays)
+ */
+export declare function resolveOptions(prop: string, options: PropMotionOptions): {
+    spring: any;
+    tweened: any;
+};

package/stores/motionStore.js

@@ -14,3 +14,20 @@ export function motionStore(value, options) {
         return writable(value);
     }
 }
+/**
+ * Helper to resolve motion options with specific property option (useful for specifying per-prop delays)
+ */
+export function resolveOptions(prop, options) {
+    return {
+        spring: typeof options.spring === 'boolean' || options.spring == null
+            ? options.spring
+            : prop in options.spring
+                ? options.spring[prop]
+                : options.spring,
+        tweened: typeof options.tweened === 'boolean' || options.tweened == null
+            ? options.tweened
+            : prop in options.tweened
+                ? options.tweened[prop]
+                : options.tweened
+    };
+}

package/utils/scales.js

@@ -1,6 +1,5 @@
 import { derived } from 'svelte/store';
 import { tweened, spring } from 'svelte/motion';
-import { min } from 'd3-array';
 import { motionStore } from '../stores/motionStore';
 /**
  * Implemenation for missing `scaleBand().invert()`
@@ -14,8 +13,8 @@ import { motionStore } from '../stores/motionStore';
  */
 export function scaleBandInvert(scale) {
     const domain = scale.domain();
-    const paddingOuter = scale(min(domain));
     const eachBand = scale.step();
+    const paddingOuter = eachBand * (scale.paddingOuter?.() ?? scale.padding()); // `scaleBand` uses paddingOuter(), while `scalePoint` uses padding() for outer paddding - https://github.com/d3/d3-scale#point_padding
     return function (value) {
         // TODO: Should this use Math.round to better select? https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales/50846323#comment104743795_50846323
         const index = Math.floor((value - paddingOuter) / eachBand);

package/utils/stack.js

@@ -1,4 +1,4 @@
-import { flatGroup, max, sum } from 'd3-array';
+import { flatGroup, max, rollup, sum } from 'd3-array';
 import { stack } from 'd3-shape';
 import { pivotWider } from './pivot';
 export function createStackData(data, options) {
@@ -42,8 +42,13 @@ export function createStackData(data, options) {
         return result;
     }
     else {
-        // TODO: Do anything if no group or stack? Convert to { ...d, keys: [...}, values: [...] ]}?
-        return data;
+        // No grouping or stacking.  Aggregate based on `xKey`
+        return Array.from(rollup(data, (items) => {
+            return {
+                keys: [items[0][options.xKey]],
+                values: [0, sum(items, (d) => d.value)]
+            };
+        }, (d) => d[options.xKey]).values());
     }
 }
 /**

package/components/Rect.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        x?: number;
-        y?: number;
-        width: number;
-        height: number;
-        spring?: boolean | Parameters<typeof springStore>[1];
-        tweened?: boolean | Parameters<typeof tweenedStore>[1];
-    };
-    events: {
-        click: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type RectProps = typeof __propDef.props;
-export declare type RectEvents = typeof __propDef.events;
-export declare type RectSlots = typeof __propDef.slots;
-export default class Rect extends SvelteComponentTyped<RectProps, RectEvents, RectSlots> {
-}
-export {};