layerchart 0.3.6 → 0.5.0

package/components/Arc.svelte

@@ -1,4 +1,4 @@
-<script >/*
+<script>/*
     TODO:
     - [ ] Allow spring/tweened to be reactive (but ignore value)
 */
@@ -110,6 +110,6 @@ $: yOffset = -Math.cos(angle) * offset;
 	<path d={trackArc()} class="track" bind:this={trackArcEl} {...track} />
 {/if}
 
-<path d={arc()} transform="translate({xOffset}, {yOffset})" {...$$restProps} />
+<path d={arc()} transform="translate({xOffset}, {yOffset})" {...$$restProps} on:click />
 
 <slot value={$tweened_value} centroid={trackArcCentroid} {boundingBox} />

package/components/Arc.svelte.d.ts

@@ -18,6 +18,8 @@ declare const __propDef: {
         offset?: number;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/Area.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { area as d3Area } from 'd3-shape';
 import { interpolatePath } from 'd3-interpolate-path';
 import { createMotionStore } from '../stores/motionStore';

package/components/AreaStack.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import Area from './Area.svelte';
 import Path from './Path.svelte';
 const { data, yScale, zGet } = getContext('LayerCake');

package/components/AxisX.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { format } from 'svelte-ux/utils/format';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
@@ -39,7 +39,7 @@ $: tickVals = Array.isArray(ticks)
 	{/each}
 </g>
 
-<style >
+<style>
 	.tick {
 		font-size: 0.725em;
 		font-weight: 200;

package/components/AxisY.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { format } from 'svelte-ux/utils/format';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
@@ -53,7 +53,7 @@ $: tickVals = Array.isArray(ticks)
 	{/each}
 </g>
 
-<style >
+<style>
 	.tick {
 		font-size: 0.725em;
 		font-weight: 200;

package/components/Bars.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { scaleBand } from 'd3-scale';
 import { max, min } from 'd3-array';
 import { unique } from 'svelte-ux/utils/array';

package/components/Baseline.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 const { xRange, yScale, yRange } = getContext('LayerCake');
 export let x = false;
 export let y = false;
@@ -14,7 +14,7 @@ export let y = false;
 	{/if}
 </g>
 
-<style >
+<style>
 	.baseline {
 		stroke: #777;
 	}

package/components/Bounds.svelte

@@ -0,0 +1,24 @@
+<script>import { getContext } from 'svelte';
+import { cubicOut } from 'svelte/easing';
+import { scaleLinear } from 'd3-scale';
+import { tweenedScale } from '../utils/scales';
+const { width, height } = getContext('LayerCake');
+export let domain;
+export let range;
+const tweenedOptions = { easing: cubicOut, duration: 800 };
+function getExtents(extents, axis, fallback) {
+    const resolvedExtents = typeof extents === 'function' ? extents({ width: $width, height: $height }) : extents;
+    return [
+        resolvedExtents?.[axis + '0'] ?? 0,
+        resolvedExtents?.[axis + '1'] ?? fallback // x1 or y1, fallback as $width or $height
+    ];
+}
+const xScale = tweenedScale(scaleLinear, tweenedOptions);
+$: xScale.domain(getExtents(domain, 'x', $width));
+$: xScale.range(getExtents(range, 'x', $width));
+const yScale = tweenedScale(scaleLinear, tweenedOptions);
+$: yScale.domain(getExtents(domain, 'y', $height));
+$: yScale.range(getExtents(range, 'y', $height));
+</script>
+
+<slot xScale={$xScale} yScale={$yScale} />

package/components/Bounds.svelte.d.ts

@@ -0,0 +1,48 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        domain: {
+            x0: number;
+            y0: number;
+            x1: number;
+            y1: number;
+        } | ((dimensions: {
+            width: number;
+            height: number;
+        }) => {
+            x0: number;
+            y0: number;
+            x1: number;
+            y1: number;
+        });
+        range: {
+            x0: number;
+            y0: number;
+            x1: number;
+            y1: number;
+        } | ((dimensions: {
+            width: number;
+            height: number;
+        }) => {
+            x0: number;
+            y0: number;
+            x1: number;
+            y1: number;
+        });
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            xScale: any;
+            yScale: any;
+        };
+    };
+};
+export declare type BoundsProps = typeof __propDef.props;
+export declare type BoundsEvents = typeof __propDef.events;
+export declare type BoundsSlots = typeof __propDef.slots;
+export default class Bounds extends SvelteComponentTyped<BoundsProps, BoundsEvents, BoundsSlots> {
+}
+export {};

package/components/Chart.svelte

@@ -1,8 +1,8 @@
-<script context="module" >import { LayerCake, Svg, Html } from 'layercake';
+<script context="module">import { LayerCake, Svg, Html } from 'layercake';
 export { Svg, Html };
 </script>
 
-<script >import { max, min } from 'd3-array';
+<script>import { max, min } from 'd3-array';
 import { get } from 'lodash-es';
 /**
  *  Resolve a value from data based on the accessor type

package/components/ChartClipPath.svelte

@@ -0,0 +1,14 @@
+<script>import { getContext } from 'svelte';
+import RectClipPath from './RectClipPath.svelte';
+const { width, height, padding } = getContext('LayerCake');
+</script>
+
+<RectClipPath
+	x={-$padding.left}
+	y={-$padding.top}
+	width={$width + $padding.left + $padding.right}
+	height={$height + $padding.top + $padding.bottom}
+	{...$$restProps}
+>
+	<slot />
+</RectClipPath>

package/components/ChartClipPath.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 declare type ChartClipPathProps = typeof __propDef.props;
+export declare type ChartClipPathEvents = typeof __propDef.events;
+export declare type ChartClipPathSlots = typeof __propDef.slots;
+export default class ChartClipPath extends SvelteComponentTyped<ChartClipPathProps, ChartClipPathEvents, ChartClipPathSlots> {
+}
+export {};

package/components/Circle.svelte

@@ -1,4 +1,4 @@
-<script >import { createMotionStore } from '../stores/motionStore';
+<script>import { createMotionStore } from '../stores/motionStore';
 export let cx;
 export let cy;
 export let r;

package/components/CircleClipPath.svelte

@@ -1,4 +1,4 @@
-<script >import { uniqueId } from 'svelte-ux/utils/string';
+<script>import { uniqueId } from 'svelte-ux/utils/string';
 import ClipPath from './ClipPath.svelte';
 import Circle from './Circle.svelte';
 /** Unique id for clipPath */

package/components/ClipPath.svelte

@@ -1,4 +1,4 @@
-<script >import { uniqueId } from 'svelte-ux/utils/string';
+<script>import { uniqueId } from 'svelte-ux/utils/string';
 /** Unique id for clipPath */
 export let id = uniqueId('clipPath-');
 </script>

package/components/ConnectedPoints.svelte

@@ -1,4 +1,4 @@
-<script >/*
+<script>/*
     TODO:
         - [ ] Consider becoming LinkLine using d3-path buider https://github.com/d3/d3-path
           - https://github.com/airbnb/visx/blob/master/packages/visx-shape/src/shapes/link/line/LinkHorizontalLine.tsx

package/components/Group.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { createMotionStore } from '../stores/motionStore';
 const { width, height } = getContext('LayerCake');
 /**

package/components/HighlightLine.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { get } from 'svelte/store';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';

package/components/HighlightRect.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { isScaleBand } from '../utils/scales';
 import Rect from './Rect.svelte';
 export let data;

package/components/Labels.svelte

@@ -1,4 +1,4 @@
-<script >/*
+<script>/*
  * TODO
  *   - [ ] Support step curves (center like scaleBand())
  *   - [ ] Support multiple values (threshold, stacks, etc)

package/components/Line.svelte

@@ -1,4 +1,4 @@
-<script >import { createMotionStore } from '../stores/motionStore';
+<script>import { createMotionStore } from '../stores/motionStore';
 export let x1;
 export let y1;
 export let x2;

package/components/LinearGradient.svelte

@@ -1,4 +1,4 @@
-<script >export let id;
+<script>export let id;
 export let from;
 export let via; // TODO: Currently --tw-gradient-via is not the color but the full stops
 export let to;

package/components/Link.svelte

@@ -1,21 +1,26 @@
-<script >import { linkHorizontal } from 'd3-shape';
+<script>import { link as d3Link, curveBumpX, curveBumpY } 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
+export let orientation = 'horizontal';
 /**
  * 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 x = sankey ? (d) => d[0] : (d) => (orientation === 'horizontal' ? d.y : d.x);
+export let y = sankey ? (d) => d[1] : (d) => (orientation === 'horizontal' ? d.x : d.y);
+export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
 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);
+    orientation; // subscribe to orientation changes to link is update
+    const link = d3Link(curve).source(source).target(target).x(x).y(y);
     const d = link(data);
     tweened_d.set(d);
 }

package/components/Link.svelte.d.ts

@@ -4,9 +4,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
+        orientation?: 'vertical' | 'horizontal';
         sankey?: boolean;
         source?: (d: any) => any;
         target?: (d: any) => any;
+        x?: (d: any) => any;
+        y?: (d: any) => any;
+        curve?: import("d3-shape").CurveFactory;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         color?: string;
         width?: any;

package/components/Partition.svelte

@@ -0,0 +1,27 @@
+<script>import { getContext } from 'svelte';
+import { partition as d3Partition } from 'd3-hierarchy';
+const { data, width, height } = getContext('LayerCake');
+export let orientation = 'horizontal';
+export let size = undefined;
+/**
+ * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+ */
+export let padding = undefined;
+/**
+ * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+ */
+export let round = undefined;
+let partition;
+$: {
+    partition = d3Partition().size(size ?? (orientation === 'horizontal' ? [$height, $width] : [$width, $height]));
+    if (padding) {
+        partition.padding(padding);
+    }
+    if (round) {
+        partition.round(round);
+    }
+}
+$: partitionData = partition($data);
+</script>
+
+<slot nodes={partitionData.descendants()} />

package/components/Partition.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        orientation?: 'vertical' | 'horizontal';
+        size?: [number, number] | undefined;
+        /**
+             * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+             */ padding?: number | undefined;
+        /**
+             * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+             */ round?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            nodes: import("d3-hierarchy").HierarchyRectangularNode<unknown>[];
+        };
+    };
+};
+export declare type PartitionProps = typeof __propDef.props;
+export declare type PartitionEvents = typeof __propDef.events;
+export declare type PartitionSlots = typeof __propDef.slots;
+export default class Partition extends SvelteComponentTyped<PartitionProps, PartitionEvents, PartitionSlots> {
+}
+export {};

package/components/Path.svelte

@@ -1,4 +1,4 @@
-<script >/*
+<script>/*
     TODO:
     - [ ] Show path progressively show / animated in on load.  Also fix sliding in from left side (at last in from bottom)
 */
@@ -35,7 +35,7 @@ $: {
 
 <path class="path-line" d={$tweened_d} stroke={color} stroke-width={width} {...$$restProps} />
 
-<style >
+<style>
 	.path-line {
 		fill: none;
 		stroke-linejoin: round;

package/components/Pattern.svelte

@@ -1,4 +1,4 @@
-<script >// https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern
+<script>// https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern
 // https://airbnb.io/visx/patterns
 // https://github.com/airbnb/visx/tree/master/packages/visx-pattern/src/patterns
 export let id;

package/components/Pie.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { pie as d3pie } from 'd3-shape';
 import Arc from './Arc.svelte';
 import Group from './Group.svelte';

package/components/Points.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import Circle from './Circle.svelte';
 import { isScaleBand } from '../utils/scales';
 const context = getContext('LayerCake');
@@ -58,8 +58,10 @@ $: points = $data.flatMap((d) => {
 });
 </script>
 
-<g class="point-group">
-	{#each points as p}
-		<Circle cx={p.x} cy={p.y} {r} {...$$restProps} />
-	{/each}
-</g>
+<slot {points}>
+	<g class="point-group">
+		{#each points as point}
+			<Circle cx={point.x} cy={point.y} {r} {...$$restProps} />
+		{/each}
+	</g>
+</slot>

package/components/Points.svelte.d.ts

@@ -9,7 +9,11 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {
+            points: any;
+        };
+    };
 };
 export declare type PointsProps = typeof __propDef.props;
 export declare type PointsEvents = typeof __propDef.events;

package/components/Rect.svelte

@@ -1,4 +1,4 @@
-<script >import { createMotionStore } from '../stores/motionStore';
+<script>import { createMotionStore } from '../stores/motionStore';
 export let x = 0;
 export let y = 0;
 export let width;

package/components/RectClipPath.svelte

@@ -1,4 +1,4 @@
-<script >import { uniqueId } from 'svelte-ux/utils/string';
+<script>import { uniqueId } from 'svelte-ux/utils/string';
 import ClipPath from './ClipPath.svelte';
 import Rect from './Rect.svelte';
 /** Unique id for clipPath */

package/components/Sankey.svelte

@@ -1,4 +1,4 @@
-<script >// https://github.com/d3/d3-sankey
+<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();

package/components/Text.svelte

@@ -1,4 +1,4 @@
-<script >import { getStringWidth } from '../utils/string';
+<script>import { getStringWidth } from '../utils/string';
 /*
 TODO:
   - [ ] Handle styled text (use <slot /> to measure?)

package/components/Threshold.svelte

@@ -1,4 +1,4 @@
-<script >/*
+<script>/*
 See also:
   - https://observablehq.com/@d3/difference-chart
   - https://github.com/airbnb/visx/issues/245

package/components/Tooltip.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext, createEventDispatcher } from 'svelte';
+<script>import { getContext, createEventDispatcher } from 'svelte';
 import { spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
 import { writable } from 'svelte/store';

package/components/Tree.svelte

@@ -0,0 +1,30 @@
+<script>import { getContext } from 'svelte';
+import { tree as d3Tree } from 'd3-hierarchy';
+const { data, width, height, padding } = getContext('LayerCake');
+/**
+ * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
+ * If unset, layout size is used instead.  When a node size is specified, the root node is always
+ * positioned at `⟨0, 0⟩`.
+ *
+ * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+ */
+export let nodeSize = undefined;
+/**
+ * see: https://github.com/d3/d3-hierarchy#tree_separation
+ */
+export let separation = undefined;
+export let orientation = 'horizontal';
+let tree;
+$: {
+    tree = d3Tree().size(orientation === 'horizontal' ? [$height, $width] : [$width, $height]);
+    if (nodeSize) {
+        tree.nodeSize(nodeSize);
+    }
+    if (separation) {
+        tree.separation(separation);
+    }
+}
+$: treeData = tree($data);
+</script>
+
+<slot nodes={treeData.descendants()} links={treeData.links()} />

package/components/Tree.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import { HierarchyPointNode } from 'd3-hierarchy';
+declare const __propDef: {
+    props: {
+        /**
+             * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
+             * If unset, layout size is used instead.  When a node size is specified, the root node is always
+             * positioned at `⟨0, 0⟩`.
+             *
+             * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+             */ nodeSize?: [number, number] | undefined;
+        /**
+             * see: https://github.com/d3/d3-hierarchy#tree_separation
+             */ separation?: (a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number;
+        orientation?: 'vertical' | 'horizontal';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            nodes: any;
+            links: any;
+        };
+    };
+};
+export declare type TreeProps = typeof __propDef.props;
+export declare type TreeEvents = typeof __propDef.events;
+export declare type TreeSlots = typeof __propDef.slots;
+export default class Tree extends SvelteComponentTyped<TreeProps, TreeEvents, TreeSlots> {
+}
+export {};

package/components/Treemap.svelte

@@ -1,14 +1,10 @@
-<script >/**
+<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 RectClipPath from './RectClipPath.svelte';
 import { aspectTile } from '../utils/treemap';
 const { data, width, height } = getContext('LayerCake');
 export let tile = d3.treemapSquarify;
@@ -61,43 +57,16 @@ $: {
     }
 }
 $: root = treemap($data);
+// TODO: Remove selected
 $: selected = root; // set initial selection
-// group nodes by depth so can be rendered lowest to highest
+// group nodes by depth so can be rendered lowest to highest, to stack properly
 $: nodesByDepth = group(root, (d) => d.depth);
-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(nodesByDepth) as [depth, nodes]}
-		<g>
-			{#each nodes as node, i (nodeKey(node, i))}
-				<slot
-					name="node"
-					{node}
-					rect={{
-						x: xScale(node.x0),
-						y: yScale(node.y0),
-						width: xScale(node.x1) - xScale(node.x0),
-						height: yScale(node.y1) - yScale(node.y0)
-					}}
-				/>
-			{/each}
-		</g>
-	{/each}
-</RectClipPath>
+{#each Array.from(nodesByDepth) as [depth, nodes]}
+	<g>
+		{#each nodes as node, i (nodeKey(node, i))}
+			<slot name="node" {node} />
+		{/each}
+	</g>
+{/each}

package/components/Treemap.svelte.d.ts

@@ -19,12 +19,6 @@ declare const __propDef: {
     slots: {
         node: {
             node: unknown;
-            rect: {
-                x: number;
-                y: number;
-                width: number;
-                height: number;
-            };
         };
     };
 };

package/components/Zoom.svelte

@@ -0,0 +1,108 @@
+<script>import { getContext } from 'svelte';
+import { spring } from 'svelte/motion';
+const { width, height, padding } = getContext('LayerCake');
+let dragging = false;
+let translate = spring({ x: 0, y: 0 });
+let scale = spring({ x: 1, y: 1 });
+let startPoint;
+let startTranslate;
+let svgEl = null;
+export function reset() {
+    $translate = { x: 0, y: 0 };
+    $scale = { x: 1, y: 1 };
+}
+export function increase() {
+    $scale = {
+        x: $scale.x * 1.25,
+        y: $scale.y * 1.25
+    };
+}
+export function decrease() {
+    $scale = {
+        x: $scale.x * 0.8,
+        y: $scale.y * 0.8
+    };
+}
+export function translateCenter() {
+    $translate = {
+        x: 0,
+        y: 0
+    };
+}
+function handleMouseDown(e) {
+    dragging = true;
+    svgEl = e.target.ownerSVGElement;
+    startPoint = localPoint(svgEl, e);
+    startTranslate = $translate;
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+}
+function handleMouseUp(e) {
+    dragging = false;
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+}
+function handleMouseMove(e) {
+    if (!dragging)
+        return;
+    const endPoint = localPoint(svgEl, e);
+    const deltaX = endPoint.x - startPoint.x;
+    const deltaY = endPoint.y - startPoint.y;
+    translate.set({
+        x: startTranslate.x + deltaX / $scale.x,
+        y: startTranslate.y + deltaY / $scale.y
+    }, { hard: true });
+}
+function handleDoubleClick() {
+    increase();
+}
+function handleWheel(e) {
+    e.preventDefault();
+    const scaleBy = -e.deltaY > 0 ? 1.1 : 0.9;
+    // TODO: Update to match d3-zoom delta
+    // https://github.com/d3/d3-zoom#zoom_wheelDelta
+    // const scaleBy = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002);
+    scale.set({
+        x: $scale.x * scaleBy,
+        y: $scale.y * scaleBy
+    }, { hard: true });
+}
+function localPoint(svgEl, e) {
+    const screenCTM = svgEl.getScreenCTM();
+    const coords = {
+        x: e.clientX,
+        y: e.clientY
+    };
+    let point = svgEl.createSVGPoint();
+    point.x = coords.x;
+    point.y = coords.y;
+    point = point.matrixTransform(screenCTM.inverse());
+    return {
+        x: point.x,
+        y: point.y
+    };
+}
+$: center = { x: $width / 2, y: $height / 2 };
+$: viewportCenter = {
+    x: center.x - $translate.x,
+    y: center.y - $translate.y
+};
+$: newTranslate = {
+    x: $translate.x * $scale.x + center.x - center.x * $scale.x,
+    y: $translate.y * $scale.y + center.y - center.y * $scale.y
+};
+</script>
+
+<rect
+	x={-$padding.left}
+	y={-$padding.top}
+	width={$width + $padding.left + $padding.right}
+	height={$height + $padding.top + $padding.bottom}
+	on:mousewheel={handleWheel}
+	on:mousedown={handleMouseDown}
+	on:dblclick={handleDoubleClick}
+	fill="transparent"
+/>
+<g transform="translate({newTranslate.x},{newTranslate.y}) scale({$scale.x},{$scale.y})">
+	<slot />
+</g>

package/components/Zoom.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        reset?: () => void;
+        increase?: () => void;
+        decrease?: () => void;
+        translateCenter?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ZoomProps = typeof __propDef.props;
+export declare type ZoomEvents = typeof __propDef.events;
+export declare type ZoomSlots = typeof __propDef.slots;
+export default class Zoom extends SvelteComponentTyped<ZoomProps, ZoomEvents, ZoomSlots> {
+    get reset(): () => void;
+    get increase(): () => void;
+    get decrease(): () => void;
+    get translateCenter(): () => void;
+}
+export {};

package/components/index.d.ts

@@ -6,6 +6,7 @@ export { default as AxisY } from './AxisY.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Baseline } from './Baseline.svelte';
 export { default as Chart } from './Chart.svelte';
+export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
@@ -28,3 +29,4 @@ export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as Treemap } from './Treemap.svelte';
+export { default as Zoom } from './Zoom.svelte';

package/components/index.js

@@ -6,6 +6,7 @@ export { default as AxisY } from './AxisY.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Baseline } from './Baseline.svelte';
 export { default as Chart } from './Chart.svelte';
+export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
@@ -28,3 +29,4 @@ export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as Treemap } from './Treemap.svelte';
+export { default as Zoom } from './Zoom.svelte';

package/docs/Preview.svelte

@@ -1,4 +1,4 @@
-<script >import Prism from 'prismjs';
+<script>import Prism from 'prismjs';
 import 'prism-svelte';
 export let code = null;
 export let language = 'svelte';

package/package.json

@@ -3,39 +3,38 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.3.6",
+  "version": "0.5.0",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
-    "@sveltejs/adapter-vercel": "^1.0.0-next.47",
-    "@sveltejs/kit": "^1.0.0-next.303",
+    "@sveltejs/adapter-vercel": "^1.0.0-next.58",
+    "@sveltejs/kit": "^1.0.0-next.350",
     "@tailwindcss/typography": "^0.5.2",
-    "@types/d3-array": "^3.0.2",
+    "@types/d3-array": "^3.0.3",
     "@types/d3-dsv": "^3.0.0",
-    "@types/d3-hierarchy": "^3.0.2",
+    "@types/d3-hierarchy": "^3.1.0",
     "@types/d3-sankey": "^0.11.2",
     "@types/d3-scale": "^4.0.2",
-    "@types/d3-shape": "^3.0.2",
+    "@types/d3-shape": "^3.1.0",
     "@types/lodash-es": "^4.17.6",
-    "autoprefixer": "^10.4.4",
-    "mdsvex": "^0.10.5",
-    "prettier": "^2.6.1",
-    "prettier-plugin-svelte": "^2.6.0",
+    "autoprefixer": "^10.4.7",
+    "mdsvex": "^0.10.6",
+    "prettier": "^2.6.2",
+    "prettier-plugin-svelte": "^2.7.0",
     "prism-themes": "^1.9.0",
-    "svelte": "^3.46.6",
-    "svelte-check": "^2.4.6",
-    "svelte-preprocess": "^4.10.4",
-    "svelte2tsx": "^0.5.6",
-    "tailwindcss": "^3.0.23",
-    "tailwindcss-elevation": "^1.0.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.6.3",
+    "svelte": "^3.48.0",
+    "svelte-check": "^2.7.2",
+    "svelte-preprocess": "^4.10.7",
+    "svelte2tsx": "^0.5.10",
+    "tailwindcss": "^3.1.0",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.3",
     "unist-util-visit": "^4.1.0",
     "vite-plugin-sveld": "^1.0.3"
   },
   "type": "module",
   "dependencies": {
-    "@mdi/js": "^6.6.96",
-    "d3-array": "^3.1.1",
+    "@mdi/js": "^6.7.96",
+    "d3-array": "^3.1.6",
     "d3-dsv": "^3.0.1",
     "d3-hierarchy": "^3.1.2",
     "d3-interpolate-path": "^2.2.3",
@@ -46,7 +45,7 @@
     "date-fns": "^2.28.0",
     "layercake": "^6.1.0",
     "lodash-es": "^4.17.21",
-    "svelte-ux": "^0.4.7"
+    "svelte-ux": "^0.5.1"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -57,7 +56,9 @@
     "./components/AxisY.svelte": "./components/AxisY.svelte",
     "./components/Bars.svelte": "./components/Bars.svelte",
     "./components/Baseline.svelte": "./components/Baseline.svelte",
+    "./components/Bounds.svelte": "./components/Bounds.svelte",
     "./components/Chart.svelte": "./components/Chart.svelte",
+    "./components/ChartClipPath.svelte": "./components/ChartClipPath.svelte",
     "./components/Circle.svelte": "./components/Circle.svelte",
     "./components/CircleClipPath.svelte": "./components/CircleClipPath.svelte",
     "./components/ClipPath.svelte": "./components/ClipPath.svelte",
@@ -69,6 +70,7 @@
     "./components/Line.svelte": "./components/Line.svelte",
     "./components/LinearGradient.svelte": "./components/LinearGradient.svelte",
     "./components/Link.svelte": "./components/Link.svelte",
+    "./components/Partition.svelte": "./components/Partition.svelte",
     "./components/Path.svelte": "./components/Path.svelte",
     "./components/Pattern.svelte": "./components/Pattern.svelte",
     "./components/Pie.svelte": "./components/Pie.svelte",
@@ -79,7 +81,9 @@
     "./components/Text.svelte": "./components/Text.svelte",
     "./components/Threshold.svelte": "./components/Threshold.svelte",
     "./components/Tooltip.svelte": "./components/Tooltip.svelte",
+    "./components/Tree.svelte": "./components/Tree.svelte",
     "./components/Treemap.svelte": "./components/Treemap.svelte",
+    "./components/Zoom.svelte": "./components/Zoom.svelte",
     "./components": "./components/index.js",
     "./docs/Blockquote.svelte": "./docs/Blockquote.svelte",
     "./docs/Code.svelte": "./docs/Code.svelte",

package/utils/genData.d.ts

@@ -30,3 +30,22 @@ export declare const longData: {
     fruit: string;
     value: number;
 }[];
+export declare function getPhyllotaxis({ radius, count, width, height }: {
+    radius: any;
+    count: any;
+    width: any;
+    height: any;
+}): {
+    x: number;
+    y: number;
+}[];
+export declare function getSpiral({ angle, radius, count, width, height }: {
+    angle: any;
+    radius: any;
+    count: any;
+    width: any;
+    height: any;
+}): {
+    x: number;
+    y: number;
+}[];

package/utils/genData.js

@@ -1,4 +1,5 @@
 import { subDays } from 'date-fns';
+import { degreesToRadians, radiansToDegrees } from './math';
 /**
  * Get random number between min (inclusive) and max (exclusive)
  *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_number_between_0_inclusive_and_1_exclusive
@@ -57,3 +58,18 @@ export const longData = [
     { 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
+    const rads = Math.PI * (3 - Math.sqrt(5)); // ~2.4 rads or ~137.5 degrees
+    return getSpiral({ angle: radiansToDegrees(rads), radius, count, width, height });
+}
+export function getSpiral({ angle, radius, count, width, height }) {
+    return Array.from({ length: count }, (_, i) => {
+        const r = radius * Math.sqrt(i);
+        const a = degreesToRadians(angle * i);
+        return {
+            x: width / 2 + r * Math.cos(a),
+            y: height / 2 + r * Math.sin(a)
+        };
+    });
+}

package/utils/math.d.ts

@@ -2,3 +2,7 @@
  * Convert degrees to radians
  */
 export declare function degreesToRadians(degrees: number): number;
+/**
+ * Convert radians to degrees
+ */
+export declare function radiansToDegrees(radians: number): number;

package/utils/math.js

@@ -4,3 +4,9 @@
 export function degreesToRadians(degrees) {
     return (degrees * Math.PI) / 180;
 }
+/**
+ * Convert radians to degrees
+ */
+export function radiansToDegrees(radians) {
+    return radians * (180 / Math.PI);
+}

package/utils/scales.d.ts

@@ -1,3 +1,4 @@
+import { tweened, spring } from 'svelte/motion';
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
@@ -8,3 +9,19 @@
  */
 export declare function scaleBandInvert(scale: any): (value: any) => any;
 export declare function isScaleBand(scale: any): boolean;
+/**
+ * Animate d3-scale as domain and/or range are updated using tweened store
+ */
+export declare function tweenedScale(scale: any, tweenedOptions?: Parameters<typeof tweened>[1]): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: (value?: any) => void) => import("svelte/store").Unsubscriber;
+    domain: (values: any) => Promise<void>;
+    range: (values: any) => Promise<void>;
+};
+/**
+ * Animate d3-scale as domain and/or range are updated using spring store
+ */
+export declare function springScale(scale: any, springOptions?: Parameters<typeof spring>[1]): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: (value?: any) => void) => import("svelte/store").Unsubscriber;
+    domain: (values: any) => Promise<void>;
+    range: (values: any) => Promise<void>;
+};

package/utils/scales.js

@@ -1,3 +1,5 @@
+import { derived } from 'svelte/store';
+import { tweened, spring } from 'svelte/motion';
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
@@ -19,3 +21,47 @@ export function scaleBandInvert(scale) {
 export function isScaleBand(scale) {
     return typeof scale.bandwidth === 'function';
 }
+/**
+ * Animate d3-scale as domain and/or range are updated using tweened store
+ */
+export function tweenedScale(scale, tweenedOptions = {}) {
+    const tweenedDomain = tweened(undefined, tweenedOptions);
+    const tweenedRange = tweened(undefined, tweenedOptions);
+    const tweenedScale = derived([tweenedDomain, tweenedRange], ([domain, range]) => {
+        const scaleInstance = scale.domain ? scale : scale(); // support `scaleLinear` or `scaleLinear()` (which could have `.interpolate()` and others set)
+        if (domain) {
+            scaleInstance.domain(domain);
+        }
+        if (range) {
+            scaleInstance.range(range);
+        }
+        return scaleInstance;
+    });
+    return {
+        subscribe: tweenedScale.subscribe,
+        domain: (values) => tweenedDomain.set(values),
+        range: (values) => tweenedRange.set(values)
+    };
+}
+/**
+ * Animate d3-scale as domain and/or range are updated using spring store
+ */
+export function springScale(scale, springOptions = {}) {
+    const springDomain = spring(undefined, springOptions);
+    const springRange = spring(undefined, springOptions);
+    const tweenedScale = derived([springDomain, springRange], ([domain, range]) => {
+        const scaleInstance = scale.domain ? scale : scale(); // support `scaleLinear` or `scaleLinear()` (which could have `.interpolate()` and others set)
+        if (domain) {
+            scaleInstance.domain(domain);
+        }
+        if (range) {
+            scaleInstance.range(range);
+        }
+        return scaleInstance;
+    });
+    return {
+        subscribe: tweenedScale.subscribe,
+        domain: (values) => springDomain.set(values),
+        range: (values) => springRange.set(values)
+    };
+}