layerchart 0.2.3 → 0.3.0

package/components/Arc.svelte

@@ -15,12 +15,12 @@
 import { getContext } from 'svelte';
 import { arc as d3arc } from 'd3-shape';
 import { scaleLinear } from 'd3-scale';
-import { getMotionStore } from '../stores/motionStore';
+import { createMotionStore } from '../stores/motionStore';
 import { degreesToRadians } from '../utils/math';
 export let spring = undefined;
 export let tweened = undefined;
 export let value = 0;
-let tweened_value = getMotionStore(value, { spring, tweened });
+let tweened_value = createMotionStore(value, { spring, tweened });
 $: tweened_value.set(value);
 export let domain = [0, 100];
 /**

package/components/Area.svelte

@@ -1,7 +1,7 @@
 <script >import { getContext } from 'svelte';
 import { area as d3Area } from 'd3-shape';
 import { interpolatePath } from 'd3-interpolate-path';
-import { getMotionStore } from '../stores/motionStore';
+import { createMotionStore } from '../stores/motionStore';
 import Path from './Path.svelte';
 const { data: contextData, xGet, yGet, yRange } = getContext('LayerCake');
 // Properties to override what is used from context
@@ -18,7 +18,7 @@ export let color = 'var(--color-blue-500)';
 export let opacity = 0.3;
 export let line = false;
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
-$: tweened_d = getMotionStore('', { tweened: tweenedOptions });
+$: tweened_d = createMotionStore('', { tweened: tweenedOptions });
 $: {
     const path = d3Area()
         .x(x ?? $xGet)

package/components/Bars.svelte

@@ -31,7 +31,6 @@ export let spring = undefined;
 export let tweened = undefined;
 // See: https://svelte.dev/repl/7000c5ce05b84cd98ccbfb2768b4be3d?version=3.38.3
 export let groupBy = undefined;
-// export let delay = 300;
 // 	$: console.log({ $data, $flatData, groupBy, stackBy })
 $: groupKeys = unique($flatData.map((d) => d[groupBy]));
 $: x1Scale = scaleBand().domain(groupKeys).range([0, $xScale.bandwidth()]).paddingInner(0.2);
@@ -42,7 +41,7 @@ $: getDimensions = (item) => {
     //   const width = $xScale.bandwidth
     //     ? $xScale.bandwidth()
     //     : Math.max(0, $xGet(d)[1] - $xGet(d)[0]);
-    const width = (groupBy ? x1Scale.bandwidth() : $xScale.bandwidth()) + widthOffset;
+    const width = Math.max(0, (groupBy ? x1Scale.bandwidth() : $xScale.bandwidth()) + widthOffset);
     const yValue = _y(item);
     let yTop = 0;
     let yBottom = 0;

package/components/Circle.svelte

@@ -1,12 +1,12 @@
-<script >import { getMotionStore } from '../stores/motionStore';
+<script >import { createMotionStore } from '../stores/motionStore';
 export let cx;
 export let cy;
 export let r;
 export let spring = undefined;
 export let tweened = undefined;
-let tweened_cx = getMotionStore(cx, { spring, tweened });
-let tweened_cy = getMotionStore(cy, { spring, tweened });
-let tweened_r = getMotionStore(r, { spring, tweened });
+let tweened_cx = createMotionStore(cx, { spring, tweened });
+let tweened_cy = createMotionStore(cy, { spring, tweened });
+let tweened_r = createMotionStore(r, { spring, tweened });
 $: tweened_cx.set(cx);
 $: tweened_cy.set(cy);
 $: tweened_r.set(r);

package/components/CircleClipPath.svelte

@@ -0,0 +1,21 @@
+<script >import { uniqueId } from 'svelte-ux/utils/string';
+import ClipPath from './ClipPath.svelte';
+import Circle from './Circle.svelte';
+/** Unique id for clipPath */
+export let id = uniqueId('clipPath-');
+export let cx = 0;
+export let cy = 0;
+export let r;
+export let spring = undefined;
+export let tweened = undefined;
+</script>
+
+<ClipPath {id}>
+	<Circle {cx} {cy} {r} {spring} {tweened} />
+</ClipPath>
+
+{#if $$slots.default}
+	<g style="clip-path: url(#{id})">
+		<slot {id} />
+	</g>
+{/if}

package/components/CircleClipPath.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+declare const __propDef: {
+    props: {
+        /** Unique id for clipPath */ id?: string;
+        cx?: number;
+        cy?: number;
+        r: number;
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            id: string;
+        };
+    };
+};
+export declare type CircleClipPathProps = typeof __propDef.props;
+export declare type CircleClipPathEvents = typeof __propDef.events;
+export declare type CircleClipPathSlots = typeof __propDef.slots;
+export default class CircleClipPath extends SvelteComponentTyped<CircleClipPathProps, CircleClipPathEvents, CircleClipPathSlots> {
+}
+export {};

package/components/ClipPath.svelte

@@ -0,0 +1,10 @@
+<script >import { uniqueId } from 'svelte-ux/utils/string';
+/** Unique id for clipPath */
+export let id = uniqueId('clipPath-');
+</script>
+
+<defs>
+	<clipPath {id} {...$$restProps}>
+		<slot {id} />
+	</clipPath>
+</defs>

package/components/ClipPath.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            id: string;
+        };
+    };
+};
+export declare type ClipPathProps = typeof __propDef.props;
+export declare type ClipPathEvents = typeof __propDef.events;
+export declare type ClipPathSlots = typeof __propDef.slots;
+export default class ClipPath extends SvelteComponentTyped<ClipPathProps, ClipPathEvents, ClipPathSlots> {
+}
+export {};

package/components/Group.svelte

@@ -1,4 +1,6 @@
 <script >import { getContext } from 'svelte';
+import { createMotionStore } from '../stores/motionStore';
+const { width, height } = getContext('LayerCake');
 /**
  * Translate x
  */
@@ -11,16 +13,21 @@ export let y = undefined;
  * Center within chart
  */
 export let center = false;
-const { width, height } = getContext('LayerCake');
+export let spring = undefined;
+export let tweened = undefined;
+let tweened_x = createMotionStore(x, { spring, tweened });
+let tweened_y = createMotionStore(y, { spring, tweened });
+$: tweened_x.set(x);
+$: tweened_y.set(y);
 let transform = undefined;
 $: if (x != null || y != null) {
-    transform = `translate(${x ?? 0}, ${y ?? 0})`;
+    transform = `translate(${$tweened_x ?? 0}, ${$tweened_y ?? 0})`;
 }
 $: if (center) {
     transform = `translate(${$width / 2}, ${$height / 2})`;
 }
 </script>
 
-<g {transform} {...$$restProps}>
+<g {transform} {...$$restProps} on:click>
 	<slot />
 </g>

package/components/Group.svelte.d.ts

@@ -1,12 +1,17 @@
 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;
         center?: boolean;
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/Line.svelte

@@ -1,14 +1,14 @@
-<script >import { getMotionStore } from '../stores/motionStore';
+<script >import { createMotionStore } from '../stores/motionStore';
 export let x1;
 export let y1;
 export let x2;
 export let y2;
 export let spring = undefined;
 export let tweened = undefined;
-let tweened_x1 = getMotionStore(x1, { spring, tweened });
-let tweened_y1 = getMotionStore(y1, { spring, tweened });
-let tweened_x2 = getMotionStore(x2, { spring, tweened });
-let tweened_y2 = getMotionStore(y2, { spring, tweened });
+let tweened_x1 = createMotionStore(x1, { spring, tweened });
+let tweened_y1 = createMotionStore(y1, { spring, tweened });
+let tweened_x2 = createMotionStore(x2, { spring, tweened });
+let tweened_y2 = createMotionStore(y2, { spring, tweened });
 $: tweened_x1.set(x1);
 $: tweened_y1.set(y1);
 $: tweened_x2.set(x2);

package/components/Link.svelte

@@ -0,0 +1,35 @@
+<script >import { linkHorizontal } from 'd3-shape';
+import { interpolatePath } from 'd3-interpolate-path';
+import { createMotionStore } from '../stores/motionStore';
+// Properties to override what is used from context
+export let data = undefined; // TODO: Update Type
+/**
+ * Update source and target accessors to be compatibke with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
+ */
+export let sankey = false;
+export let source = sankey ? (d) => [d.source.x1, d.y0] : (d) => d.source;
+export let target = sankey ? (d) => [d.target.x0, d.y1] : (d) => d.target;
+export let tweened = undefined;
+export let color = 'black';
+export let width = undefined;
+$: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+$: tweened_d = createMotionStore('', { tweened: tweenedOptions });
+$: {
+    const link = linkHorizontal().source(source).target(target);
+    const d = link(data);
+    tweened_d.set(d);
+}
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<path
+	class="path-link"
+	d={$tweened_d}
+	stroke={color}
+	stroke-width={width}
+	fill="none"
+	on:click
+	on:mouseover
+	on:mouseout
+	{...$$restProps}
+/>

package/components/Link.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { tweened as tweenedStore } from 'svelte/motion';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        data?: any;
+        sankey?: boolean;
+        source?: (d: any) => any;
+        target?: (d: any) => any;
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        color?: string;
+        width?: any;
+    };
+    events: {
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type LinkProps = typeof __propDef.props;
+export declare type LinkEvents = typeof __propDef.events;
+export declare type LinkSlots = typeof __propDef.slots;
+export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
+}
+export {};

package/components/Path.svelte

@@ -6,7 +6,7 @@ import { getContext } from 'svelte';
 import { line as d3Line } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
 import { interpolatePath } from 'd3-interpolate-path';
-import { getMotionStore } from '../stores/motionStore';
+import { createMotionStore } from '../stores/motionStore';
 const { data: contextData, xGet, yGet, zGet } = getContext('LayerCake');
 // Properties to override what is used from context
 export let data = undefined; // TODO: Update Type
@@ -19,7 +19,7 @@ export let defined = undefined;
 export let color = 'black';
 export let width = undefined;
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
-$: tweened_d = getMotionStore('', { tweened: tweenedOptions });
+$: tweened_d = createMotionStore('', { tweened: tweenedOptions });
 $: {
     const path = d3Line()
         .x(x ?? $xGet)

package/components/Pie.svelte

@@ -3,7 +3,7 @@ import { pie as d3pie } from 'd3-shape';
 import Arc from './Arc.svelte';
 import Group from './Group.svelte';
 import { degreesToRadians } from '../utils/math';
-import { getMotionStore } from '../stores/motionStore';
+import { createMotionStore } from '../stores/motionStore';
 /*
 TODO:
 - [ ] Offset (always, on hover)
@@ -48,7 +48,7 @@ export let tweened = undefined;
 export let offset = 0;
 const { data: contextData, x, y, xRange, rGet, config } = getContext('LayerCake');
 $: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? $xRange[1] : range[1]);
-let tweened_endAngle = getMotionStore(0, { spring, tweened });
+let tweened_endAngle = createMotionStore(0, { spring, tweened });
 $: tweened_endAngle.set(resolved_endAngle);
 $: pie = d3pie()
     .startAngle(startAngle ?? degreesToRadians($config.xRange ? $xRange[0] : range[0]))

package/components/Rect.svelte

@@ -1,20 +1,21 @@
-<script >import { getMotionStore } from '../stores/motionStore';
-export let x;
-export let y;
+<script >import { createMotionStore } 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 = getMotionStore(x, { spring, tweened });
-let tweened_y = getMotionStore(y, { spring, tweened });
-let tweened_width = getMotionStore(width, { spring, tweened });
-let tweened_height = getMotionStore(height, { spring, tweened });
+let tweened_x = createMotionStore(x, { spring, tweened });
+let tweened_y = createMotionStore(y, { spring, tweened });
+let tweened_width = createMotionStore(width, { spring, tweened });
+let tweened_height = createMotionStore(height, { spring, tweened });
 $: tweened_x.set(x);
 $: tweened_y.set(y);
 $: tweened_width.set(width);
 $: tweened_height.set(height);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <rect
 	x={$tweened_x}
 	y={$tweened_y}
@@ -22,4 +23,6 @@ $: tweened_height.set(height);
 	height={$tweened_height}
 	{...$$restProps}
 	on:click
+	on:mouseover
+	on:mouseout
 />

package/components/Rect.svelte.d.ts

@@ -3,8 +3,8 @@ import type { spring as springStore, tweened as tweenedStore } from 'svelte/moti
 declare const __propDef: {
     props: {
         [x: string]: any;
-        x: number;
-        y: number;
+        x?: number;
+        y?: number;
         width: number;
         height: number;
         spring?: boolean | Parameters<typeof springStore>[1];
@@ -12,6 +12,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/RectClipPath.svelte

@@ -0,0 +1,22 @@
+<script >import { uniqueId } from 'svelte-ux/utils/string';
+import ClipPath from './ClipPath.svelte';
+import Rect from './Rect.svelte';
+/** Unique id for clipPath */
+export let id = uniqueId('clipPath-');
+export let x = 0;
+export let y = 0;
+export let width;
+export let height;
+export let spring = undefined;
+export let tweened = undefined;
+</script>
+
+<ClipPath {id}>
+	<Rect {x} {y} {width} {height} {spring} {tweened} />
+</ClipPath>
+
+{#if $$slots.default}
+	<g style="clip-path: url(#{id})">
+		<slot {id} />
+	</g>
+{/if}

package/components/RectClipPath.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+declare const __propDef: {
+    props: {
+        /** Unique id for clipPath */ id?: string;
+        x?: number;
+        y?: number;
+        width: number;
+        height: number;
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            id: string;
+        };
+    };
+};
+export declare type RectClipPathProps = typeof __propDef.props;
+export declare type RectClipPathEvents = typeof __propDef.events;
+export declare type RectClipPathSlots = typeof __propDef.slots;
+export default class RectClipPath extends SvelteComponentTyped<RectClipPathProps, RectClipPathEvents, RectClipPathSlots> {
+}
+export {};

package/components/Sankey.svelte

@@ -0,0 +1,39 @@
+<script >// https://github.com/d3/d3-sankey
+import { createEventDispatcher, getContext } from 'svelte';
+import { sankey as d3Sankey, sankeyLeft, sankeyCenter, sankeyRight, sankeyJustify } from 'd3-sankey';
+const dispatch = createEventDispatcher();
+const { data, width, height, padding } = getContext('LayerCake');
+export let nodes = (d) => d.nodes;
+export let nodeId = (d) => d.index;
+/**
+ * see: https://github.com/d3/d3-sankey#alignments
+ */
+export let nodeAlign = sankeyJustify;
+export let nodeWidth = 4;
+export let nodePadding = 10;
+export let nodeSort = undefined;
+export let links = (d) => d.links;
+export let linkSort = undefined;
+$: sankey = d3Sankey()
+    .size([$width, $height])
+    .nodes(nodes)
+    .nodeId(nodeId)
+    .nodeAlign(nodeAlign === 'left'
+    ? sankeyLeft
+    : nodeAlign === 'center'
+        ? sankeyCenter
+        : nodeAlign === 'right'
+            ? sankeyRight
+            : nodeAlign === 'justify'
+                ? sankeyJustify
+                : nodeAlign)
+    .nodeWidth(nodeWidth)
+    .nodePadding(nodePadding)
+    .nodeSort(nodeSort)
+    .links(links)
+    .linkSort(linkSort);
+$: sankeyData = sankey($data);
+$: dispatch('update', sankeyData);
+</script>
+
+<slot nodes={sankeyData.nodes} links={sankeyData.links} />

package/components/Sankey.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+import { type SankeyNode } from 'd3-sankey';
+declare const __propDef: {
+    props: {
+        nodes?: (d: any) => any;
+        nodeId?: (d: any) => any;
+        /**
+             * see: https://github.com/d3/d3-sankey#alignments
+             */ nodeAlign?: "center" | "left" | "right" | "justify" | ((node: SankeyNode<any, any>, n: number) => number);
+        nodeWidth?: number;
+        nodePadding?: number;
+        nodeSort?: any;
+        links?: (d: any) => any;
+        linkSort?: any;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            nodes: any;
+            links: any;
+        };
+    };
+};
+export declare type SankeyProps = typeof __propDef.props;
+export declare type SankeyEvents = typeof __propDef.events;
+export declare type SankeySlots = typeof __propDef.slots;
+export default class Sankey extends SvelteComponentTyped<SankeyProps, SankeyEvents, SankeySlots> {
+}
+export {};

package/components/Treemap.svelte

@@ -0,0 +1,105 @@
+<script >/**
+ * TODO:
+ *   - [ ] Improve zoomable nested (apply extent ratio?  const extentRatio = ($extents.y1 - $extents.y0) / $height;
+ */
+import { getContext } from 'svelte';
+import { tweened } from 'svelte/motion';
+import { cubicOut } from 'svelte/easing';
+import * as d3 from 'd3-hierarchy';
+import { scaleLinear } from 'd3-scale';
+import { group } from 'd3-array';
+import Group from './Group.svelte';
+import RectClipPath from './RectClipPath.svelte';
+import { aspectTile } from '../utils/treemap';
+const { data, width, height } = getContext('LayerCake');
+export let tile = d3.treemapSquarify;
+export let padding = 0;
+export let paddingInner = 0;
+export let paddingOuter = 0;
+export let paddingTop = 0;
+export let paddingBottom = 0;
+export let paddingLeft = undefined;
+export let paddingRight = undefined;
+export let selected = null;
+$: tileFunc =
+    tile === 'squarify'
+        ? d3.treemapSquarify
+        : tile === 'resquarify'
+            ? d3.treemapResquarify
+            : tile === 'binary'
+                ? d3.treemapBinary
+                : tile === 'dice'
+                    ? d3.treemapDice
+                    : tile === 'slice'
+                        ? d3.treemapSlice
+                        : tile === 'sliceDice'
+                            ? d3.treemapSliceDice
+                            : tile;
+$: treemap = d3.treemap().size([$width, $height]).tile(aspectTile(tileFunc, $width, $height));
+$: if (padding) {
+    treemap.padding(padding);
+}
+$: if (paddingInner) {
+    treemap.paddingInner(paddingInner);
+}
+$: if (paddingOuter) {
+    treemap.paddingOuter(paddingOuter);
+}
+$: if (paddingTop) {
+    treemap.paddingTop(paddingTop);
+}
+$: if (paddingBottom) {
+    treemap.paddingBottom(paddingBottom);
+}
+$: if (paddingLeft) {
+    treemap.paddingLeft(paddingLeft);
+}
+$: if (paddingLeft) {
+    treemap.paddingRight(paddingRight);
+}
+$: root = treemap($data);
+$: selected = root; // set initial selection
+// group nodes by height so can be rendered lowest to highest
+$: nodesByHeight = group(root, (d) => d.height);
+const duration = 800;
+const extents = tweened(undefined, { easing: cubicOut, duration });
+$: $extents = selected
+    ? {
+        x0: selected.x0,
+        y0: selected.y0,
+        x1: selected.x1,
+        y1: selected.y1
+    }
+    : {
+        x0: 0,
+        y0: 0,
+        x1: $width,
+        y1: $height
+    };
+$: xScale = scaleLinear().domain([$extents.x0, $extents.x1]).rangeRound([0, $width]);
+$: yScale = scaleLinear().domain([$extents.y0, $extents.y1]).rangeRound([0, $height]);
+</script>
+
+<RectClipPath width={$width} height={$height}>
+	{#each Array.from(nodesByHeight) as [height, nodes]}
+		<g>
+			{#each nodes as node}
+				{@const nodeWidth = xScale(node.x1) - xScale(node.x0)}
+				{@const nodeHeight = yScale(node.y1) - yScale(node.y0)}
+				<Group x={xScale(node.x0)} y={yScale(node.y0)}>
+					<RectClipPath width={nodeWidth} height={nodeHeight}>
+						<slot
+							{node}
+							rect={{
+								x: 0, // applied by Group
+								y: 0, // applied by Group
+								width: nodeWidth,
+								height: nodeHeight
+							}}
+						/>
+					</RectClipPath>
+				</Group>
+			{/each}
+		</g>
+	{/each}
+</RectClipPath>

package/components/Treemap.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import * as d3 from 'd3-hierarchy';
+declare const __propDef: {
+    props: {
+        tile?: typeof d3.treemapSquarify | 'binary' | 'squarify' | 'resquarify' | 'dice' | 'slice' | 'sliceDice';
+        padding?: number;
+        paddingInner?: number;
+        paddingOuter?: number;
+        paddingTop?: number;
+        paddingBottom?: number;
+        paddingLeft?: any;
+        paddingRight?: any;
+        selected?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            node: d3.HierarchyRectangularNode<unknown>;
+            rect: {
+                x: number;
+                y: number;
+                width: any;
+                height: any;
+            };
+        };
+    };
+};
+export declare type TreemapProps = typeof __propDef.props;
+export declare type TreemapEvents = typeof __propDef.events;
+export declare type TreemapSlots = typeof __propDef.slots;
+export default class Treemap extends SvelteComponentTyped<TreemapProps, TreemapEvents, TreemapSlots> {
+}
+export {};

package/package.json

@@ -3,12 +3,15 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.29",
+    "@sveltejs/adapter-vercel": "^1.0.0-next.47",
     "@sveltejs/kit": "^1.0.0-next.303",
     "@tailwindcss/typography": "^0.5.2",
     "@types/d3-array": "^3.0.2",
+    "@types/d3-dsv": "^3.0.0",
+    "@types/d3-hierarchy": "^3.0.2",
+    "@types/d3-sankey": "^0.11.2",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.0.2",
     "@types/lodash-es": "^4.17.6",
@@ -32,13 +35,17 @@
   "dependencies": {
     "@mdi/js": "^6.6.96",
     "d3-array": "^3.1.1",
+    "d3-dsv": "^3.0.1",
+    "d3-hierarchy": "^3.1.2",
     "d3-interpolate-path": "^2.2.3",
+    "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.1.0",
     "date-fns": "^2.28.0",
     "layercake": "^6.1.0",
     "lodash-es": "^4.17.21",
-    "svelte-ux": "^0.3.2"
+    "svelte-ux": "^0.4.7"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -51,6 +58,8 @@
     "./components/Baseline.svelte": "./components/Baseline.svelte",
     "./components/Chart.svelte": "./components/Chart.svelte",
     "./components/Circle.svelte": "./components/Circle.svelte",
+    "./components/CircleClipPath.svelte": "./components/CircleClipPath.svelte",
+    "./components/ClipPath.svelte": "./components/ClipPath.svelte",
     "./components/ConnectedPoints.svelte": "./components/ConnectedPoints.svelte",
     "./components/Group.svelte": "./components/Group.svelte",
     "./components/HighlightLine.svelte": "./components/HighlightLine.svelte",
@@ -58,14 +67,18 @@
     "./components/Labels.svelte": "./components/Labels.svelte",
     "./components/Line.svelte": "./components/Line.svelte",
     "./components/LinearGradient.svelte": "./components/LinearGradient.svelte",
+    "./components/Link.svelte": "./components/Link.svelte",
     "./components/Path.svelte": "./components/Path.svelte",
     "./components/Pattern.svelte": "./components/Pattern.svelte",
     "./components/Pie.svelte": "./components/Pie.svelte",
     "./components/Points.svelte": "./components/Points.svelte",
     "./components/Rect.svelte": "./components/Rect.svelte",
+    "./components/RectClipPath.svelte": "./components/RectClipPath.svelte",
+    "./components/Sankey.svelte": "./components/Sankey.svelte",
     "./components/Text.svelte": "./components/Text.svelte",
     "./components/Threshold.svelte": "./components/Threshold.svelte",
     "./components/Tooltip.svelte": "./components/Tooltip.svelte",
+    "./components/Treemap.svelte": "./components/Treemap.svelte",
     "./components": "./components/index.js",
     "./docs/Blockquote.svelte": "./docs/Blockquote.svelte",
     "./docs/Code.svelte": "./docs/Code.svelte",
@@ -77,6 +90,7 @@
     "./stores/motionStore": "./stores/motionStore.js",
     "./utils/event": "./utils/event.js",
     "./utils/genData": "./utils/genData.js",
+    "./utils/graph": "./utils/graph.js",
     "./utils": "./utils/index.js",
     "./utils/math": "./utils/math.js",
     "./utils/path": "./utils/path.js",
@@ -84,7 +98,8 @@
     "./utils/scales": "./utils/scales.js",
     "./utils/stack": "./utils/stack.js",
     "./utils/string": "./utils/string.js",
-    "./utils/ticks": "./utils/ticks.js"
+    "./utils/ticks": "./utils/ticks.js",
+    "./utils/treemap": "./utils/treemap.js"
   },
   "svelte": "./index.js"
 }

package/stores/motionStore.d.ts

@@ -1,8 +1,8 @@
 import { spring, tweened } from 'svelte/motion';
 /**
- * Convenient wrapper to get motion store based on properties, or fall back to basic writable() store
+ * Convenient wrapper to create a motion store (spring(), tweened()) based on properties, or fall back to basic writable() store
  */
-export declare function getMotionStore(value: any, options: {
+export declare function createMotionStore(value: any, options: {
     spring?: boolean | Parameters<typeof spring>[1];
     tweened?: boolean | Parameters<typeof tweened>[1];
 }): import("svelte/motion").Tweened<unknown> | import("svelte/motion").Spring<any> | import("svelte/store").Writable<any>;

package/stores/motionStore.js

@@ -1,9 +1,9 @@
 import { writable } from 'svelte/store';
 import { spring, tweened } from 'svelte/motion';
 /**
- * Convenient wrapper to get motion store based on properties, or fall back to basic writable() store
+ * Convenient wrapper to create a motion store (spring(), tweened()) based on properties, or fall back to basic writable() store
  */
-export function getMotionStore(value, options) {
+export function createMotionStore(value, options) {
     if (options.spring) {
         return spring(value, options.spring === true ? undefined : options.spring);
     }

package/utils/graph.d.ts

@@ -0,0 +1,24 @@
+import type { SankeyGraph, SankeyNodeMinimal } from 'd3-sankey';
+import type { hierarchy as d3Hierarchy } from 'd3-hierarchy';
+/**
+ * Convert CSV rows in format: 'source,target,value' to SankeyGraph
+ */
+export declare function graphFromCsv(csv: string): SankeyGraph<any, any>;
+/**
+ * Convert d3-hierarchy to graph (nodes/links)
+ */
+export declare function graphFromHierarchy(hierarchy: ReturnType<typeof d3Hierarchy>): {
+    nodes: import("d3-hierarchy").HierarchyNode<unknown>[];
+    links: {
+        value: number;
+        source: import("d3-hierarchy").HierarchyNode<unknown>;
+        target: import("d3-hierarchy").HierarchyNode<unknown>;
+    }[];
+};
+/**
+ * Create graph from node (and target node/links downward)
+ */
+export declare function graphFromNode(node: SankeyNodeMinimal<any, any>): {
+    nodes: SankeyNodeMinimal<any, any>[];
+    links: any[];
+};

package/utils/graph.js

@@ -0,0 +1,60 @@
+import { csvParseRows } from 'd3-dsv';
+/**
+ * Convert CSV rows in format: 'source,target,value' to SankeyGraph
+ */
+export function graphFromCsv(csv) {
+    const links = csvParseRows(csv, ([source, target, value /*, linkColor = color*/]) => source && target
+        ? {
+            source,
+            target,
+            // @ts-ignore
+            value: !value || isNaN((value = +value)) ? 1 : value
+            // color: linkColor,
+        }
+        : null);
+    const nodeByName = new Map();
+    for (const link of links) {
+        if (!nodeByName.has(link.source)) {
+            nodeByName.set(link.source, { name: link.source });
+        }
+        if (!nodeByName.has(link.target)) {
+            nodeByName.set(link.target, { name: link.target });
+        }
+    }
+    return { nodes: Array.from(nodeByName.values()), links };
+}
+/**
+ * Convert d3-hierarchy to graph (nodes/links)
+ */
+export function graphFromHierarchy(hierarchy) {
+    return {
+        nodes: hierarchy.descendants(),
+        links: hierarchy.links().map((link) => ({ ...link, value: link.target.value }))
+    };
+}
+/**
+ * Create graph from node (and target node/links downward)
+ */
+export function graphFromNode(node) {
+    const nodes = [node];
+    const links = [];
+    node.sourceLinks.forEach((link) => {
+        nodes.push(link.target);
+        links.push(link);
+        if (link.target.sourceLinks.length) {
+            const targetData = graphFromNode(link.target);
+            // Only add new nodes
+            targetData.nodes.forEach((node) => {
+                if (!nodes.includes(node)) {
+                    nodes.push(node);
+                }
+            });
+            targetData.links.forEach((link) => {
+                if (!links.includes(link)) {
+                    links.push(link);
+                }
+            });
+        }
+    });
+    return { nodes, links };
+}

package/utils/treemap.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This custom tiling function adapts the built-in binary tiling function
+ * for the appropriate aspect ratio when the treemap is zoomed-in.
+ * see: https://observablehq.com/@d3/zoomable-treemap#tile and https://observablehq.com/@d3/stretched-treemap
+ */
+export declare function aspectTile(tile: any, width: any, height: any): (node: any, x0: any, y0: any, x1: any, y1: any) => void;

package/utils/treemap.js

@@ -0,0 +1,16 @@
+/**
+ * This custom tiling function adapts the built-in binary tiling function
+ * for the appropriate aspect ratio when the treemap is zoomed-in.
+ * see: https://observablehq.com/@d3/zoomable-treemap#tile and https://observablehq.com/@d3/stretched-treemap
+ */
+export function aspectTile(tile, width, height) {
+    return (node, x0, y0, x1, y1) => {
+        tile(node, 0, 0, width, height);
+        for (const child of node.children) {
+            child.x0 = x0 + (child.x0 / width) * (x1 - x0);
+            child.x1 = x0 + (child.x1 / width) * (x1 - x0);
+            child.y0 = y0 + (child.y0 / height) * (y1 - y0);
+            child.y1 = y0 + (child.y1 / height) * (y1 - y0);
+        }
+    };
+}