layerchart 0.5.0 → 0.6.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 { createMotionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore';
 import { degreesToRadians } from '../utils/math';
 export let spring = undefined;
 export let tweened = undefined;
 export let value = 0;
-let tweened_value = createMotionStore(value, { spring, tweened });
+let tweened_value = motionStore(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 { createMotionStore } from '../stores/motionStore';
+import { motionStore } 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 = createMotionStore('', { tweened: tweenedOptions });
+$: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     const path = d3Area()
         .x(x ?? $xGet)

package/components/Bounds.svelte

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

package/components/Bounds.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { motionScale } from '../utils/scales';
 declare const __propDef: {
     props: {
         domain: {
@@ -29,6 +30,8 @@ declare const __propDef: {
             x1: number;
             y1: number;
         });
+        spring?: boolean | Parameters<typeof motionScale>[1]['spring'];
+        tweened?: boolean | Parameters<typeof motionScale>[1]['tweened'];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Circle.svelte

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

package/components/Circle.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;
-        cx: number;
-        cy: number;
+        cx?: number;
+        cy?: number;
         r: number;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

package/components/Group.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import { createMotionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore';
 const { width, height } = getContext('LayerCake');
 /**
  * Translate x
@@ -15,8 +15,8 @@ export let y = undefined;
 export let center = false;
 export let spring = undefined;
 export let tweened = undefined;
-let tweened_x = createMotionStore(x, { spring, tweened });
-let tweened_y = createMotionStore(y, { spring, tweened });
+let tweened_x = motionStore(x, { spring, tweened });
+let tweened_y = motionStore(y, { spring, tweened });
 $: tweened_x.set(x);
 $: tweened_y.set(y);
 let transform = undefined;

package/components/Line.svelte

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

package/components/Link.svelte

@@ -1,6 +1,6 @@
 <script>import { link as d3Link, curveBumpX, curveBumpY } from 'd3-shape';
 import { interpolatePath } from 'd3-interpolate-path';
-import { createMotionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore';
 // Properties to override what is used from context
 export let data = undefined; // TODO: Update Type
 export let orientation = 'horizontal';
@@ -17,7 +17,7 @@ export let tweened = undefined;
 export let color = 'black';
 export let width = undefined;
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
-$: tweened_d = createMotionStore('', { tweened: tweenedOptions });
+$: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     orientation; // subscribe to orientation changes to link is update
     const link = d3Link(curve).source(source).target(target).x(x).y(y);

package/components/Pack.svelte

@@ -0,0 +1,19 @@
+<script>import { getContext } from 'svelte';
+import { pack as d3Pack } from 'd3-hierarchy';
+const { data, width, height } = getContext('LayerCake');
+export let size = undefined;
+/**
+ * see: https://github.com/d3/d3-hierarchy#pack_padding
+ */
+export let padding = undefined;
+let pack;
+$: {
+    pack = d3Pack().size(size ?? [$width, $height]);
+    if (padding) {
+        pack.padding(padding);
+    }
+}
+$: packData = pack($data);
+</script>
+
+<slot nodes={packData.descendants()} />

package/components/Pack.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: [number, number] | undefined;
+        /**
+             * see: https://github.com/d3/d3-hierarchy#pack_padding
+             */ padding?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            nodes: import("d3-hierarchy").HierarchyCircularNode<unknown>[];
+        };
+    };
+};
+export declare type PackProps = typeof __propDef.props;
+export declare type PackEvents = typeof __propDef.events;
+export declare type PackSlots = typeof __propDef.slots;
+export default class Pack extends SvelteComponentTyped<PackProps, PackEvents, PackSlots> {
+}
+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 { createMotionStore } from '../stores/motionStore';
+import { motionStore } 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 = createMotionStore('', { tweened: tweenedOptions });
+$: tweened_d = motionStore('', { 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 { createMotionStore } from '../stores/motionStore';
+import { motionStore } 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 = createMotionStore(0, { spring, tweened });
+let tweened_endAngle = motionStore(0, { spring, tweened });
 $: tweened_endAngle.set(resolved_endAngle);
 $: pie = d3pie()
     .startAngle(startAngle ?? degreesToRadians($config.xRange ? $xRange[0] : range[0]))

package/components/Rect.svelte

@@ -1,14 +1,14 @@
-<script>import { createMotionStore } from '../stores/motionStore';
+<script>import { motionStore } 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 = 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 });
+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 });
 $: tweened_x.set(x);
 $: tweened_y.set(y);
 $: tweened_width.set(width);

package/components/Treemap.svelte

@@ -1,10 +1,5 @@
-<script>/**
- * TODO:
- *   - [ ] Improve zoomable nested (apply extent ratio?  const extentRatio = ($extents.y1 - $extents.y0) / $height;
- */
-import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import * as d3 from 'd3-hierarchy';
-import { group } from 'd3-array';
 import { aspectTile } from '../utils/treemap';
 const { data, width, height } = getContext('LayerCake');
 export let tile = d3.treemapSquarify;
@@ -15,7 +10,6 @@ export let paddingTop = 0;
 export let paddingBottom = 0;
 export let paddingLeft = undefined;
 export let paddingRight = undefined;
-export let nodeKey = (node, i) => i;
 export let selected = null;
 $: tileFunc =
     tile === 'squarify'
@@ -56,17 +50,9 @@ $: {
         treemap.paddingRight(paddingRight);
     }
 }
-$: root = treemap($data);
+$: treemapData = treemap($data);
 // TODO: Remove selected
-$: selected = root; // set initial selection
-// group nodes by depth so can be rendered lowest to highest, to stack properly
-$: nodesByDepth = group(root, (d) => d.depth);
+$: selected = treemapData; // set initial selection
 </script>
 
-{#each Array.from(nodesByDepth) as [depth, nodes]}
-	<g>
-		{#each nodes as node, i (nodeKey(node, i))}
-			<slot name="node" {node} />
-		{/each}
-	</g>
-{/each}
+<slot nodes={treemapData.descendants()} />

package/components/Treemap.svelte.d.ts

@@ -10,15 +10,14 @@ declare const __propDef: {
         paddingBottom?: number;
         paddingLeft?: any;
         paddingRight?: any;
-        nodeKey?: (node: d3.HierarchyNode<any>, i: number) => any;
         selected?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        node: {
-            node: unknown;
+        default: {
+            nodes: any;
         };
     };
 };

package/components/Zoom.svelte

@@ -1,9 +1,11 @@
 <script>import { getContext } from 'svelte';
-import { spring } from 'svelte/motion';
+import { motionStore } from '../stores/motionStore';
 const { width, height, padding } = getContext('LayerCake');
+export let spring = undefined;
+export let tweened = undefined;
 let dragging = false;
-let translate = spring({ x: 0, y: 0 });
-let scale = spring({ x: 1, y: 1 });
+const translate = motionStore({ x: 0, y: 0 }, { spring, tweened });
+const scale = motionStore({ x: 1, y: 1 }, { spring, tweened });
 let startPoint;
 let startTranslate;
 let svgEl = null;
@@ -29,6 +31,18 @@ export function translateCenter() {
         y: 0
     };
 }
+export function zoomTo(newTranslate, newScale) {
+    $translate = {
+        x: $width / 2 - newTranslate.x,
+        y: $height / 2 - newTranslate.y
+    };
+    if (newScale) {
+        $scale = {
+            x: Math.min($width, $height) / newScale.x,
+            y: Math.min($width, $height) / newScale.y
+        };
+    }
+}
 function handleMouseDown(e) {
     dragging = true;
     svgEl = e.target.ownerSVGElement;
@@ -51,7 +65,7 @@ function handleMouseMove(e) {
     translate.set({
         x: startTranslate.x + deltaX / $scale.x,
         y: startTranslate.y + deltaY / $scale.y
-    }, { hard: true });
+    }, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
 }
 function handleDoubleClick() {
     increase();
@@ -65,7 +79,7 @@ function handleWheel(e) {
     scale.set({
         x: $scale.x * scaleBy,
         y: $scale.y * scaleBy
-    }, { hard: true });
+    }, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
 }
 function localPoint(svgEl, e) {
     const screenCTM = svgEl.getScreenCTM();
@@ -104,5 +118,5 @@ $: newTranslate = {
 	fill="transparent"
 />
 <g transform="translate({newTranslate.x},{newTranslate.y}) scale({$scale.x},{$scale.y})">
-	<slot />
+	<slot scale={$scale} />
 </g>

package/components/Zoom.svelte.d.ts

@@ -1,16 +1,28 @@
 import { SvelteComponentTyped } from "svelte";
+import { motionStore } from '../stores/motionStore';
 declare const __propDef: {
     props: {
+        spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
+        tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
         reset?: () => void;
         increase?: () => void;
         decrease?: () => void;
         translateCenter?: () => void;
+        zoomTo?: (newTranslate: {
+            x: number;
+            y: number;
+        }, newScale?: {
+            x: number;
+            y: number;
+        }) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            scale: any;
+        };
     };
 };
 export declare type ZoomProps = typeof __propDef.props;
@@ -21,5 +33,12 @@ export default class Zoom extends SvelteComponentTyped<ZoomProps, ZoomEvents, Zo
     get increase(): () => void;
     get decrease(): () => void;
     get translateCenter(): () => void;
+    get zoomTo(): (newTranslate: {
+        x: number;
+        y: number;
+    }, newScale?: {
+        x: number;
+        y: number;
+    }) => void;
 }
 export {};

package/components/index.d.ts

@@ -5,6 +5,7 @@ export { default as AxisX } from './AxisX.svelte';
 export { default as AxisY } from './AxisY.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Baseline } from './Baseline.svelte';
+export { default as Bounds } from './Bounds.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
@@ -18,6 +19,7 @@ export { default as Labels } from './Labels.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LinearGradient } from './LinearGradient.svelte';
 export { default as Link } from './Link.svelte';
+export { default as Partition } from './Partition.svelte';
 export { default as Path } from './Path.svelte';
 export { default as Pattern } from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
@@ -28,5 +30,6 @@ export { default as Sankey } from './Sankey.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
+export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Zoom } from './Zoom.svelte';

package/components/index.js

@@ -5,6 +5,7 @@ export { default as AxisX } from './AxisX.svelte';
 export { default as AxisY } from './AxisY.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Baseline } from './Baseline.svelte';
+export { default as Bounds } from './Bounds.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
@@ -18,6 +19,7 @@ export { default as Labels } from './Labels.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LinearGradient } from './LinearGradient.svelte';
 export { default as Link } from './Link.svelte';
+export { default as Partition } from './Partition.svelte';
 export { default as Path } from './Path.svelte';
 export { default as Pattern } from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
@@ -28,5 +30,6 @@ export { default as Sankey } from './Sankey.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
+export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Zoom } from './Zoom.svelte';

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.58",
@@ -70,6 +70,7 @@
     "./components/Line.svelte": "./components/Line.svelte",
     "./components/LinearGradient.svelte": "./components/LinearGradient.svelte",
     "./components/Link.svelte": "./components/Link.svelte",
+    "./components/Pack.svelte": "./components/Pack.svelte",
     "./components/Partition.svelte": "./components/Partition.svelte",
     "./components/Path.svelte": "./components/Path.svelte",
     "./components/Pattern.svelte": "./components/Pattern.svelte",

package/stores/motionStore.d.ts

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

package/stores/motionStore.js

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

package/utils/scales.d.ts

@@ -1,4 +1,5 @@
-import { tweened, spring } from 'svelte/motion';
+import { tweened } from 'svelte/motion';
+import { MotionOptions } from '../stores/motionStore';
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
@@ -18,10 +19,10 @@ export declare function tweenedScale(scale: any, tweenedOptions?: Parameters<typ
     range: (values: any) => Promise<void>;
 };
 /**
- * Animate d3-scale as domain and/or range are updated using spring store
+ * Create a store wrapper around a d3-scale which interpolates the domain and/or range using `tweened()` or `spring()` stores.  Fallbacks to `writable()` if not interpolating
  */
-export declare function springScale(scale: any, springOptions?: Parameters<typeof spring>[1]): {
+export declare function motionScale(scale: any, options: MotionOptions): {
     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>;
+    domain: (values: any) => void | Promise<void>;
+    range: (values: any) => void | Promise<void>;
 };

package/utils/scales.js

@@ -1,5 +1,6 @@
 import { derived } from 'svelte/store';
-import { tweened, spring } from 'svelte/motion';
+import { tweened } from 'svelte/motion';
+import { motionStore } from '../stores/motionStore';
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
@@ -44,12 +45,12 @@ export function tweenedScale(scale, tweenedOptions = {}) {
     };
 }
 /**
- * Animate d3-scale as domain and/or range are updated using spring store
+ * Create a store wrapper around a d3-scale which interpolates the domain and/or range using `tweened()` or `spring()` stores.  Fallbacks to `writable()` if not interpolating
  */
-export function springScale(scale, springOptions = {}) {
-    const springDomain = spring(undefined, springOptions);
-    const springRange = spring(undefined, springOptions);
-    const tweenedScale = derived([springDomain, springRange], ([domain, range]) => {
+export function motionScale(scale, options) {
+    const domainStore = motionStore(undefined, options);
+    const rangeStore = motionStore(undefined, options);
+    const tweenedScale = derived([domainStore, rangeStore], ([domain, range]) => {
         const scaleInstance = scale.domain ? scale : scale(); // support `scaleLinear` or `scaleLinear()` (which could have `.interpolate()` and others set)
         if (domain) {
             scaleInstance.domain(domain);
@@ -61,7 +62,7 @@ export function springScale(scale, springOptions = {}) {
     });
     return {
         subscribe: tweenedScale.subscribe,
-        domain: (values) => springDomain.set(values),
-        range: (values) => springRange.set(values)
+        domain: (values) => domainStore.set(values),
+        range: (values) => rangeStore.set(values)
     };
 }