layerchart 0.4.1 → 0.5.0

package/components/Arc.svelte

@@ -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/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/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/Treemap.svelte

@@ -3,12 +3,8 @@
  *   - [ ] 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/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.58",
@@ -56,6 +56,7 @@
     "./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",
@@ -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",

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)
+    };
+}