layerchart 0.21.1 → 0.22.0

package/dist/components/Arc.svelte

@@ -12,7 +12,7 @@
 // https://github.com/mnsht/gradient-path
 // https://svelte.dev/repl/09711e43a1264ba18945d7db7cab9335?version=3.38.2
 // https://codepen.io/simeydotme/pen/rrOEmO/
-import { getContext } from 'svelte';
+import { getContext, tick } from 'svelte';
 import { arc as d3arc } from 'd3-shape';
 import { scaleLinear } from 'd3-scale';
 import { min, max } from 'd3-array';
@@ -21,8 +21,11 @@ import { degreesToRadians } from '../utils/math';
 export let spring = undefined;
 export let tweened = undefined;
 export let value = 0;
-let tweened_value = motionStore(value, { spring, tweened });
-$: tweened_value.set(value);
+export let initialValue = value;
+let tweened_value = motionStore(initialValue, { spring, tweened });
+$: tick().then(() => {
+    tweened_value.set(value);
+});
 export let domain = [0, 100];
 /**
  * Range [min,max] in degrees.  See also startAngle/endAngle
@@ -127,7 +130,7 @@ $: boundingBox = trackArc && trackArcEl ? trackArcEl.getBBox() : {};
 $: labelArcCenterOffset = {
     x: outerRadius - boundingBox.width / 2,
     // x: 0,
-    y: (outerRadius - boundingBox.height / 2) * -1
+    y: (outerRadius - boundingBox.height / 2) * -1,
 };
 // $: console.log(labelArcCenterOffset)
 $: labelArcBottomOffset = {
@@ -135,7 +138,7 @@ $: labelArcBottomOffset = {
     x: outerRadius - boundingBox.width / 2,
     // x: 0,
     // y: (outerRadius - boundingBox.height) * -1
-    y: (outerRadius - boundingBox.height) * -1
+    y: (outerRadius - boundingBox.height) * -1,
 };
 // $: console.log(labelArcBottomOffset)
 /**

package/dist/components/Arc.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         value?: number | undefined;
+        initialValue?: number | undefined;
         domain?: number[] | undefined;
         range?: number[] | undefined;
         startAngle?: number | undefined;

package/dist/components/Circle.svelte

@@ -1,15 +1,21 @@
-<script>import { motionStore } from '../stores/motionStore';
+<script>import { tick } from 'svelte';
+import { motionStore } from '../stores/motionStore';
 export let cx = 0;
+export let initialCx = cx;
 export let cy = 0;
+export let initialCy = cy;
 export let r;
+export let initialR = r;
 export let spring = undefined;
 export let tweened = undefined;
-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);
+let tweened_cx = motionStore(initialCx, { spring, tweened });
+let tweened_cy = motionStore(initialCy, { spring, tweened });
+let tweened_r = motionStore(initialR, { spring, tweened });
+$: tick().then(() => {
+    tweened_cx.set(cx);
+    tweened_cy.set(cy);
+    tweened_r.set(r);
+});
 </script>
 
 <circle

package/dist/components/Circle.svelte.d.ts

@@ -4,8 +4,11 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         cx?: number | undefined;
+        initialCx?: number | undefined;
         cy?: number | undefined;
+        initialCy?: number | undefined;
         r: number;
+        initialR?: number | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };

package/dist/components/CircleClipPath.svelte

@@ -11,6 +11,6 @@ export let tweened = undefined;
 </script>
 
 <ClipPath {id}>
-  <Circle slot="clip" {cx} {cy} {r} {spring} {tweened} />
+  <Circle slot="clip" {cx} {cy} {r} {spring} {tweened} {...$$restProps} />
   <slot {id} />
 </ClipPath>

package/dist/components/CircleClipPath.svelte.d.ts

@@ -2,7 +2,8 @@ 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 | undefined;
+        [x: string]: any;
+        id?: string | undefined;
         cx?: number | undefined;
         cy?: number | undefined;
         r: number;

package/dist/components/Group.svelte

@@ -1,24 +1,28 @@
-<script>import { getContext } from 'svelte';
+<script>import { getContext, tick } from 'svelte';
 import { motionStore } from '../stores/motionStore';
 const { width, height } = getContext('LayerCake');
 /**
  * Translate x
  */
 export let x = undefined;
+export let initialX = x;
 /**
  * Translate x
  */
 export let y = undefined;
+export let initialY = y;
 /**
  * Center within chart
  */
 export let center = false;
 export let spring = undefined;
 export let tweened = undefined;
-let tweened_x = motionStore(x, { spring, tweened });
-let tweened_y = motionStore(y, { spring, tweened });
-$: tweened_x.set(x);
-$: tweened_y.set(y);
+let tweened_x = motionStore(initialX, { spring, tweened });
+let tweened_y = motionStore(initialY, { spring, tweened });
+$: tick().then(() => {
+    tweened_x.set(x);
+    tweened_y.set(y);
+});
 let transform = undefined;
 $: if (x != null || y != null) {
     transform = `translate(${$tweened_x ?? 0}, ${$tweened_y ?? 0})`;

package/dist/components/Group.svelte.d.ts

@@ -4,7 +4,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         x?: number | undefined;
+        initialX?: number | undefined;
         y?: number | undefined;
+        initialY?: number | undefined;
         center?: boolean | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

package/dist/components/Highlight.svelte

@@ -0,0 +1,209 @@
+<script>import { getContext } from 'svelte';
+import { max, min } from 'd3-array';
+import { cls, notNull } from 'svelte-ux';
+import { isScaleBand } from '../utils/scales';
+import Circle from './Circle.svelte';
+import Line from './Line.svelte';
+import Rect from './Rect.svelte';
+import { tooltipContext } from './TooltipContext.svelte';
+const { flatData, x, xDomain, xScale, xRange, xGet, y, yDomain, yScale, yRange, yGet, rGet, config, } = getContext('LayerCake');
+const tooltip = tooltipContext();
+export let axis = undefined;
+/** Show points and pass props to Circles */
+export let points = false;
+/** Show lines and pass props to Lines */
+export let lines = false;
+/** Show area and pass props to Rect */
+export let area = false;
+// TODO: Fix circle points being backwards for stack (see AreaStack)
+let _points = [];
+let _lines = [];
+let _area = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+};
+$: if ($tooltip.data) {
+    let xCoord = $xGet($tooltip.data);
+    let xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+    let yCoord = $yGet($tooltip.data);
+    let yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
+    // Reset lines
+    _lines = [];
+    const defaultAxis = isScaleBand($yScale) ? 'y' : 'x';
+    if (axis == null) {
+        axis = defaultAxis;
+    }
+    if (axis === 'x' || axis === 'both') {
+        // x lines
+        if (Array.isArray(xCoord)) {
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+            _lines = [
+                ..._lines,
+                ...xCoord.filter(notNull).map((xItem, i) => ({
+                    x1: xItem + xOffset,
+                    y1: 0,
+                    x2: xItem + xOffset,
+                    y2: max($yRange),
+                })),
+            ];
+        }
+        else {
+            _lines = [
+                ..._lines,
+                {
+                    x1: xCoord + xOffset,
+                    y1: 0,
+                    x2: xCoord + xOffset,
+                    y2: max($yRange),
+                },
+            ];
+        }
+        // x area
+        if (Array.isArray(xCoord)) {
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+            _area.width = max(xCoord) - min(xCoord); // Use first/last values for width
+        }
+        else if (isScaleBand($xScale)) {
+            _area.width = $xScale.step();
+        }
+        else {
+            // Find width to next data point
+            const index = $flatData.findIndex((d) => Number($x(d)) === Number($x($tooltip.data)));
+            const isLastPoint = index + 1 === $flatData.length;
+            const nextDataPoint = isLastPoint ? max($xDomain) : $x($flatData[index + 1]);
+            _area.width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
+        }
+        // If array, use left-most value for top left of rect
+        _area.x =
+            (Array.isArray(xCoord) ? min(xCoord) : xCoord) -
+                (isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0);
+        if (axis === 'x') {
+            _area.height = max($yRange);
+        }
+    }
+    if (axis === 'y' || axis === 'both') {
+        // y lines
+        if (Array.isArray(yCoord)) {
+            // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
+            _lines = [
+                ..._lines,
+                ...yCoord.filter(notNull).map((yItem, i) => ({
+                    x1: 0,
+                    y1: yItem + yOffset,
+                    x2: max($xRange),
+                    y2: yItem + yOffset,
+                })),
+            ];
+        }
+        else {
+            _lines = [
+                ..._lines,
+                {
+                    x1: 0,
+                    y1: yCoord + yOffset,
+                    x2: max($xRange),
+                    y2: yCoord + yOffset,
+                },
+            ];
+        }
+        // y area
+        if (Array.isArray(yCoord)) {
+            // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
+            _area.height = max(yCoord) - min(yCoord); // Use first/last values for width
+        }
+        else if (isScaleBand($yScale)) {
+            _area.height = $yScale.step();
+        }
+        else {
+            // Find width to next data point
+            const index = $flatData.findIndex((d) => Number($x(d)) === Number($x($tooltip.data)));
+            const isLastPoint = index + 1 === $flatData.length;
+            const nextDataPoint = isLastPoint ? max($yDomain) : $x($flatData[index + 1]);
+            _area.height = ($yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
+        }
+        // If array, use left-most value for top left of rect
+        _area.y =
+            (Array.isArray(yCoord) ? min(yCoord) : yCoord) -
+                (isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0);
+        if (axis === 'y') {
+            _area.width = max($xRange);
+        }
+    }
+    // points
+    if (Array.isArray(xCoord)) {
+        // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+        _points = xCoord.filter(notNull).map((xItem, i) => ({
+            x: xItem + xOffset,
+            y: $yGet($tooltip.data) + yOffset,
+        }));
+    }
+    else if (Array.isArray($tooltip.data)) {
+        // Stack series
+        _points = $tooltip.data.map((yValue, i) => ({
+            x: xCoord + xOffset,
+            y: $yScale(yValue) + yOffset,
+        }));
+    }
+    else {
+        _points = [
+            {
+                x: xCoord + xOffset,
+                y: $yGet($tooltip.data) + yOffset,
+            },
+        ];
+    }
+}
+</script>
+
+{#if $tooltip.data}
+  {#if area}
+    <slot name="area" area={_area}>
+      <Rect
+        spring
+        {..._area}
+        fill="rgba(0,0,0,.1)"
+        on:click
+        {...typeof area === 'object' ? area : null}
+      />
+    </slot>
+  {/if}
+
+  {#if lines}
+    <slot name="lines" lines={_lines}>
+      {#each _lines as line}
+        <Line
+          spring
+          x1={line.x1}
+          y1={line.y1}
+          x2={line.x2}
+          y2={line.y2}
+          class="stroke-black/50 stroke-2 [stroke-dasharray:2,2] pointer-events-none"
+          {...typeof lines === 'object' ? lines : null}
+        />
+      {/each}
+    </slot>
+  {/if}
+
+  {#if points}
+    <slot name="points" points={_points}>
+      {#each _points as point}
+        <!-- TODO: Improve color with stacked data -->
+        {@const fill = $config.r ? $rGet($tooltip.data) : null}
+        <Circle
+          spring
+          cx={point.x}
+          cy={point.y}
+          r={4}
+          {fill}
+          class={cls(
+            'stroke-[6] stroke-white [paint-order:stroke] drop-shadow',
+            !fill && 'fill-accent-500'
+          )}
+          {...typeof points === 'object' ? points : null}
+        />
+      {/each}
+    </slot>
+  {/if}
+{/if}

package/dist/components/Labels.svelte

@@ -4,10 +4,10 @@
  *   - [ ] Support multiple values (threshold, stacks, etc)
  */
 import { getContext } from 'svelte';
-import Text from './Text.svelte';
 import { format as formatValue } from 'svelte-ux';
 import { formatNumberAsStyle } from 'svelte-ux/utils/number';
 import { greatestAbs } from 'svelte-ux/utils/array';
+import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
 import { createDimensionGetter } from '../utils/rect';
 const { flatData, yScale, x, y, custom } = getContext('LayerCake');
@@ -27,8 +27,8 @@ $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
     // padding,
     groupPadding: {
         inner: groupPaddingInner,
-        outer: groupPaddingOuter
-    }
+        outer: groupPaddingOuter,
+    },
 });
 $: getValue = (item) => (isScaleBand($yScale) ? $x(item) : $y(item));
 $: getLabelValue = (item) => {
@@ -62,7 +62,7 @@ $: getTextProps = (item) => {
                 y: dimensions?.y + (dimensions?.height ?? 0) / 2,
                 textAnchor: 'end',
                 verticalAnchor: 'middle',
-                capHeight: '.6rem'
+                capHeight: '.6rem',
             };
         }
         else {
@@ -72,7 +72,7 @@ $: getTextProps = (item) => {
                 y: dimensions?.y + (dimensions?.height ?? 0) / 2,
                 textAnchor: 'start',
                 verticalAnchor: 'middle',
-                capHeight: '.6rem'
+                capHeight: '.6rem',
             };
         }
     }
@@ -85,7 +85,7 @@ $: getTextProps = (item) => {
                 y: dimensions?.y + dimensions?.height,
                 dy: '0.5em',
                 textAnchor: 'middle',
-                verticalAnchor: 'middle'
+                verticalAnchor: 'middle',
             };
         }
         else {
@@ -95,7 +95,7 @@ $: getTextProps = (item) => {
                 y: dimensions?.y,
                 dy: '-0.6em',
                 textAnchor: 'middle',
-                verticalAnchor: 'middle'
+                verticalAnchor: 'middle',
             };
         }
     }

package/dist/components/Line.svelte

@@ -1,18 +1,25 @@
-<script>import { motionStore } from '../stores/motionStore';
+<script>import { tick } from 'svelte';
+import { motionStore } from '../stores/motionStore';
 export let x1;
+export let initialX1 = x1;
 export let y1;
+export let initialY1 = x1;
 export let x2;
+export let initialX2 = x2;
 export let y2;
+export let initialY2 = y2;
 export let spring = undefined;
 export let tweened = undefined;
-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);
-$: tweened_y2.set(y2);
+let tweened_x1 = motionStore(initialX1, { spring, tweened });
+let tweened_y1 = motionStore(initialY1, { spring, tweened });
+let tweened_x2 = motionStore(initialX2, { spring, tweened });
+let tweened_y2 = motionStore(initialY2, { spring, tweened });
+$: tick().then(() => {
+    tweened_x1.set(x1);
+    tweened_y1.set(y1);
+    tweened_x2.set(x2);
+    tweened_y2.set(y2);
+});
 </script>
 
 <line

package/dist/components/Line.svelte.d.ts

@@ -4,9 +4,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         x1: number;
+        initialX1?: number | undefined;
         y1: number;
+        initialY1?: number | undefined;
         x2: number;
+        initialX2?: number | undefined;
         y2: number;
+        initialY2?: number | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };

package/dist/components/LinearGradient.svelte

@@ -1,4 +1,6 @@
-<script>export let id;
+<script>import { uniqueId } from 'svelte-ux';
+/** Unique id for linearGradient */
+export let id = uniqueId('linearGradient-');
 export let from;
 export let via = undefined; // TODO: Currently --tw-gradient-via is not the color but the full stops
 export let to;
@@ -8,6 +10,8 @@ export let y1 = '0%';
 export let x2 = vertical ? '0%' : '100%';
 export let y2 = vertical ? '100%' : '0%';
 export let rotate = undefined;
+/** Define the coordinate system for attributes (i.e. gradientUnits) */
+export let units = 'objectBoundingBox';
 </script>
 
 <defs>
@@ -18,9 +22,10 @@ export let rotate = undefined;
     {x2}
     {y2}
     gradientTransform={rotate ? `rotate(${rotate})` : ''}
+    gradientUnits={units}
     {...$$restProps}
   >
-    <slot>
+    <slot name="stops">
       {#if from}
         <stop offset="0%" stop-color={from === true ? 'var(--tw-gradient-from)' : from} />
       {/if}
@@ -36,3 +41,5 @@ export let rotate = undefined;
     </slot>
   </linearGradient>
 </defs>
+
+<slot {id} />

package/dist/components/LinearGradient.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
+        id?: string | undefined;
         from: string | boolean;
-        via?: string | undefined;
+        via?: string | boolean | undefined;
         to: string | boolean;
         vertical?: boolean | undefined;
         x1?: string | undefined;
@@ -12,12 +12,16 @@ declare const __propDef: {
         x2?: string | undefined;
         y2?: string | undefined;
         rotate?: number | undefined;
+        units?: "objectBoundingBox" | "userSpaceOnUse" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        stops: {};
+        default: {
+            id: string;
+        };
     };
 };
 export type LinearGradientProps = typeof __propDef.props;

package/dist/components/Link.svelte

@@ -1,15 +1,16 @@
 <script>import { link as d3Link, curveBumpX, curveBumpY } from 'd3-shape';
 import { interpolatePath } from 'd3-interpolate-path';
 import { motionStore } from '../stores/motionStore';
-// Properties to override what is used from context
+// Override what is used from context
 export let data = undefined; // TODO: Update Type
-export let orientation = 'horizontal';
 /**
  * Update source and target accessors to be compatible 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;
+/** Convenient property to swap x/y accessor logic */
+export let orientation = sankey ? 'horizontal' : 'vertical';
 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;
@@ -17,7 +18,7 @@ export let tweened = undefined;
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
-    orientation; // subscribe to orientation changes to link is update
+    orientation; // subscribe to orientation changes to update link
     const link = d3Link(curve).source(source).target(target).x(x).y(y);
     const d = link(data);
     tweened_d.set(d);

package/dist/components/Link.svelte.d.ts

@@ -4,10 +4,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
-        orientation?: "horizontal" | "vertical" | undefined;
         sankey?: boolean | undefined;
         source?: ((d: any) => any) | undefined;
         target?: ((d: any) => any) | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
         x?: ((d: any) => any) | undefined;
         y?: ((d: any) => any) | undefined;
         curve?: import("d3-shape").CurveFactory | undefined;

package/dist/components/Points.svelte

@@ -1,12 +1,16 @@
 <script>import { getContext } from 'svelte';
+import { extent } from 'd3-array';
+import { notNull } from 'svelte-ux';
 import Circle from './Circle.svelte';
+import Link from './Link.svelte';
 import { isScaleBand } from '../utils/scales';
-import { notNull } from 'svelte-ux';
 const context = getContext('LayerCake');
 const { data, xGet, y, yGet, xScale, yScale, rGet, config } = context;
 export let r = 5;
 export let offsetX = undefined;
 export let offsetY = undefined;
+/** Enable showing links between related points (array x/y accessors) */
+export let links = false;
 function getOffset(value, offset, scale) {
     if (typeof offset === 'function') {
         return offset(value, context);
@@ -64,11 +68,57 @@ $: points = $data.flatMap((d) => {
         };
     }
 });
+$: _links = $data.flatMap((d) => {
+    if (Array.isArray($config.x)) {
+        /*
+                  x={["prop1" ,"prop2"]}
+                  y="prop3"
+              */
+        const [xMin, xMax] = extent($xGet(d));
+        const y = $yGet(d) + getOffset($yGet(d), offsetY, $yScale);
+        return {
+            source: {
+                x: xMin + getOffset(xMin, offsetX, $xScale),
+                y,
+            },
+            target: {
+                x: xMax + getOffset(xMax, offsetX, $xScale),
+                y: y,
+            },
+        };
+    }
+    else if (Array.isArray($config.y)) {
+        /*
+                  x="prop1"
+                  y={["prop2" ,"prop3"]}
+              */
+        const x = $xGet(d) + getOffset($xGet(d), offsetX, $xScale);
+        const [yMin, yMax] = extent($yGet(d));
+        return {
+            source: {
+                x: x,
+                y: yMin + getOffset(yMin, offsetY, $yScale),
+            },
+            target: {
+                x: x,
+                y: yMax + getOffset(yMax, offsetY, $yScale),
+            },
+        };
+    }
+});
 </script>
 
 <slot {points}>
+  {#if links}
+    <g class="link-group">
+      {#each _links as link}
+        <Link data={link} stroke="black" {...typeof links === 'object' ? links : null} />
+      {/each}
+    </g>
+  {/if}
+
   <g class="point-group">
-    {#each points as point, index}
+    {#each points as point}
       <Circle
         cx={point.x}
         cy={point.y}

package/dist/components/Rect.svelte

@@ -1,18 +1,25 @@
-<script>import { motionStore, resolveOptions } from '../stores/motionStore';
+<script>import { tick } from 'svelte';
+import { motionStore, resolveOptions, } from '../stores/motionStore';
 export let x = 0;
+export let initialX = x;
 export let y = 0;
+export let initialY = y;
 export let width;
+export let initialWidth = width;
 export let height;
+export let initialHeight = height;
 export let spring = undefined;
 export let tweened = undefined;
-let tweened_x = motionStore(x, resolveOptions('x', { spring, tweened }));
-let tweened_y = motionStore(y, resolveOptions('y', { spring, tweened }));
-let tweened_width = motionStore(width, resolveOptions('width', { spring, tweened }));
-let tweened_height = motionStore(height, resolveOptions('height', { spring, tweened }));
-$: tweened_x.set(x);
-$: tweened_y.set(y);
-$: tweened_width.set(width);
-$: tweened_height.set(height);
+let tweened_x = motionStore(initialX, resolveOptions('x', { spring, tweened }));
+let tweened_y = motionStore(initialY, resolveOptions('y', { spring, tweened }));
+let tweened_width = motionStore(initialWidth, resolveOptions('width', { spring, tweened }));
+let tweened_height = motionStore(initialHeight, resolveOptions('height', { spring, tweened }));
+$: tick().then(() => {
+    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 -->

package/dist/components/RectClipPath.svelte

@@ -12,6 +12,6 @@ export let tweened = undefined;
 </script>
 
 <ClipPath {id}>
-  <Rect slot="clip" {x} {y} {width} {height} {spring} {tweened} />
+  <Rect slot="clip" {x} {y} {width} {height} {spring} {tweened} {...$$restProps} />
   <slot {id} />
 </ClipPath>

package/dist/components/RectClipPath.svelte.d.ts

@@ -2,7 +2,8 @@ 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 | undefined;
+        [x: string]: any;
+        id?: string | undefined;
         x?: number | undefined;
         y?: number | undefined;
         width: number;

package/dist/components/index.d.ts

@@ -11,7 +11,6 @@ export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
-export { default as ConnectedPoints } from './ConnectedPoints.svelte';
 export { default as Frame } from './Frame.svelte';
 export { default as GeoContext } from './GeoContext.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
@@ -19,8 +18,7 @@ export { default as GeoPoint } from './GeoPoint.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';
-export { default as HighlightLine } from './HighlightLine.svelte';
-export { default as HighlightRect } from './HighlightRect.svelte';
+export { default as Highlight } from './Highlight.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';
 export { default as Line } from './Line.svelte';

package/dist/components/index.js

@@ -11,7 +11,6 @@ export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
-export { default as ConnectedPoints } from './ConnectedPoints.svelte';
 export { default as Frame } from './Frame.svelte';
 export { default as GeoContext } from './GeoContext.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
@@ -19,8 +18,7 @@ export { default as GeoPoint } from './GeoPoint.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';
-export { default as HighlightLine } from './HighlightLine.svelte';
-export { default as HighlightRect } from './HighlightRect.svelte';
+export { default as Highlight } from './Highlight.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';
 export { default as Line } from './Line.svelte';

package/dist/stores/motionStore.js

@@ -23,11 +23,15 @@ export function resolveOptions(prop, options) {
             ? options.spring
             : prop in options.spring
                 ? options.spring[prop]
-                : options.spring,
+                : Object.keys(options.spring).some((key) => ['precision', 'damping', 'stiffness'].includes(key))
+                    ? options.tweened
+                    : false,
         tweened: typeof options.tweened === 'boolean' || options.tweened == null
             ? options.tweened
             : prop in options.tweened
                 ? options.tweened[prop]
-                : options.tweened,
+                : Object.keys(options.tweened).some((key) => ['delay', 'duration', 'easing'].includes(key))
+                    ? options.tweened
+                    : false,
     };
 }

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -47,7 +47,7 @@
     "marked": "^5.1.2",
     "mdsvex": "^0.11.0",
     "prettier": "^3.0.0",
-    "prettier-plugin-svelte": "^3.0.1",
+    "prettier-plugin-svelte": "^3.0.3",
     "prism-themes": "^1.9.0",
     "rehype-slug": "^5.1.0",
     "svelte-check": "^3.4.6",
@@ -85,7 +85,7 @@
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte": "^3.59.1",
-    "svelte-ux": "^0.47.1",
+    "svelte-ux": "^0.47.3",
     "topojson-client": "^3.1.0"
   },
   "main": "./dist/index.js",

package/dist/components/ConnectedPoints.svelte

@@ -1,75 +0,0 @@
-<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
-  */
-import { getContext } from 'svelte';
-import { extent } from 'd3-array';
-import Line from './Line.svelte';
-import { isScaleBand } from '../utils/scales';
-const context = getContext('LayerCake');
-const { data, xGet, yGet, xScale, yScale, config } = context;
-export let offsetX = undefined;
-export let offsetY = undefined;
-function getOffset(value, offset, scale) {
-    if (typeof offset === 'function') {
-        return offset(value, context);
-    }
-    else if (offset != null) {
-        return offset;
-    }
-    else if (isScaleBand(scale)) {
-        return scale.bandwidth() / 2;
-    }
-    else {
-        return 0;
-    }
-}
-$: points = $data.flatMap((d) => {
-    if (Array.isArray($config.x)) {
-        /*
-                  x={["prop1" ,"prop2"]}
-                  y="prop3"
-              */
-        const [xMin, xMax] = extent($xGet(d));
-        return {
-            x1: xMin + getOffset(xMin, offsetX, $xScale),
-            y1: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
-            x2: xMax + getOffset(xMax, offsetX, $xScale),
-            y2: $yGet(d) + getOffset($yGet(d), offsetY, $yScale)
-        };
-    }
-    else if (Array.isArray($config.y)) {
-        /*
-                  x="prop1"
-                  y={["prop2" ,"prop3"]}
-              */
-        const [yMin, yMax] = extent($yGet(d));
-        return {
-            x1: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-            y1: yMin + getOffset(yMin, offsetY, $yScale),
-            x2: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-            y2: yMax + getOffset(yMax, offsetY, $yScale)
-        };
-    }
-    else {
-        /*
-                  x="prop1"
-                  y="prop2"
-              */
-        // Not really supported (nothing to connect...)
-        return {
-            x1: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-            y1: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
-            x2: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-            y2: $yGet(d) + getOffset($yGet(d), offsetY, $yScale)
-        };
-    }
-});
-</script>
-
-<g class="connected-points">
-  {#each points as p}
-    <Line x1={p.x1} y1={p.y1} x2={p.x2} y2={p.y2} {...$$restProps} />
-  {/each}
-</g>

package/dist/components/ConnectedPoints.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        offsetX?: (number | ((value: number, context: any) => number)) | undefined;
-        offsetY?: (number | ((value: number, context: any) => number)) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ConnectedPointsProps = typeof __propDef.props;
-export type ConnectedPointsEvents = typeof __propDef.events;
-export type ConnectedPointsSlots = typeof __propDef.slots;
-export default class ConnectedPoints extends SvelteComponentTyped<ConnectedPointsProps, ConnectedPointsEvents, ConnectedPointsSlots> {
-}
-export {};

package/dist/components/HighlightLine.svelte

@@ -1,140 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { max } from 'd3-array';
-import { notNull } from 'svelte-ux';
-import { isScaleBand } from '../utils/scales';
-import Circle from './Circle.svelte';
-import Line from './Line.svelte';
-import { tooltipContext } from './TooltipContext.svelte';
-const { xScale, xRange, xGet, yScale, yRange, yGet, rGet, y, config } = getContext('LayerCake');
-const tooltip = tooltipContext();
-export let color = undefined;
-export let axis = 'x';
-// TODO: Fix circle points being backwards for stack (see AreaStack)
-function getColor(item, index = -1) {
-    if (color) {
-        if (typeof color === 'function') {
-            return color({ value: $y(item), item, index });
-        }
-        else {
-            return color;
-        }
-    }
-    else if ($config.r) {
-        return $rGet(item);
-    }
-    else {
-        return 'var(--color-accent-500)';
-    }
-}
-let lines = [];
-let points = [];
-$: if ($tooltip.data) {
-    let x = $xGet($tooltip.data);
-    let xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
-    let y = $yGet($tooltip.data);
-    let yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
-    // Reset lines
-    lines = [];
-    if (axis === 'x' || axis === 'both') {
-        if (Array.isArray(x)) {
-            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-            lines = [
-                ...lines,
-                ...x.filter(notNull).map((xItem, i) => ({
-                    x1: xItem + xOffset,
-                    y1: 0,
-                    x2: xItem + xOffset,
-                    y2: max($yRange)
-                }))
-            ];
-        }
-        else {
-            lines = [
-                ...lines,
-                {
-                    x1: x + xOffset,
-                    y1: 0,
-                    x2: x + xOffset,
-                    y2: max($yRange)
-                }
-            ];
-        }
-    }
-    if (axis === 'y' || axis === 'both') {
-        if (Array.isArray(y)) {
-            // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
-            lines = [
-                ...lines,
-                ...y.filter(notNull).map((yItem, i) => ({
-                    x1: 0,
-                    y1: yItem + yOffset,
-                    x2: max($xRange),
-                    y2: yItem + yOffset
-                }))
-            ];
-        }
-        else {
-            lines = [
-                ...lines,
-                {
-                    x1: 0,
-                    y1: y + yOffset,
-                    x2: max($xRange),
-                    y2: y + yOffset
-                }
-            ];
-        }
-    }
-    if (Array.isArray(x)) {
-        // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-        points = x.filter(notNull).map((xItem, i) => ({
-            x: xItem + xOffset,
-            y: $yGet($tooltip.data) + yOffset,
-            color: getColor($tooltip.data) // TODO: improve
-        }));
-    }
-    else if (Array.isArray($tooltip.data)) {
-        // Stack series
-        points = $tooltip.data.map((yValue, i) => ({
-            x: x + xOffset,
-            y: $yScale(yValue) + yOffset,
-            color: getColor($tooltip.data) // TODO: improve
-        }));
-    }
-    else {
-        points = [
-            {
-                x: x + xOffset,
-                y: $yGet($tooltip.data) + yOffset,
-                // color: $rGet($tooltip.data) //getColor($tooltip.data)
-                color: getColor($tooltip.data)
-            }
-        ];
-    }
-}
-</script>
-
-{#if $tooltip.data}
-  {#each lines as line}
-    <Line
-      spring
-      x1={line.x1}
-      y1={line.y1}
-      x2={line.x2}
-      y2={line.y2}
-      class="stroke-black/50 stroke-2 [stroke-dasharray:2,2] pointer-events-none"
-    />
-  {/each}
-
-  {#each points as point}
-    <Circle
-      spring
-      cx={point.x}
-      cy={point.y}
-      r={7}
-      class="fill-white/90 stroke-2"
-      stroke={point.color}
-    />
-    <Circle spring cx={point.x} cy={point.y} r={3} fill={point.color} />
-  {/each}
-{/if}

package/dist/components/HighlightLine.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        color?: string | ((obj: {
-            value: any;
-            item: any;
-            index: number;
-        }) => string) | undefined;
-        axis?: "x" | "y" | "none" | "both" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type HighlightLineProps = typeof __propDef.props;
-export type HighlightLineEvents = typeof __propDef.events;
-export type HighlightLineSlots = typeof __propDef.slots;
-export default class HighlightLine extends SvelteComponentTyped<HighlightLineProps, HighlightLineEvents, HighlightLineSlots> {
-}
-export {};

package/dist/components/HighlightRect.svelte

@@ -1,72 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { max, min } from 'd3-array';
-import { isScaleBand } from '../utils/scales';
-import Rect from './Rect.svelte';
-import { tooltipContext } from './TooltipContext.svelte';
-import { firstValue } from '../utils/rect';
-const { flatData, x, xScale, xDomain, xRange, xGet, yScale, yDomain, yRange, yGet } = getContext('LayerCake');
-const tooltip = tooltipContext();
-export let axis = isScaleBand($yScale) ? 'y' : 'x';
-let dimensions = {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-};
-$: {
-    if ($tooltip.data) {
-        let xCoord = firstValue($xGet($tooltip.data));
-        let yCoord = firstValue($yGet($tooltip.data));
-        if (axis === 'x' || axis === 'both') {
-            if (isScaleBand($xScale)) {
-                dimensions.width = $xScale.step();
-            }
-            else if (Array.isArray(xCoord)) {
-                // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-                // Use first/last values for width
-                dimensions.width = max(xCoord) - min(xCoord);
-                xCoord = min(xCoord); // Use left-most value for top left of rect
-            }
-            else {
-                // Find width to next data point
-                const index = $flatData.findIndex((d) => Number($x(d)) === Number($x($tooltip.data)));
-                const isLastPoint = index + 1 === $flatData.length;
-                const nextDataPoint = isLastPoint ? max($xDomain) : $x($flatData[index + 1]);
-                dimensions.width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
-            }
-            dimensions.x =
-                xCoord - (isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0);
-            if (axis === 'x') {
-                dimensions.height = max($yRange);
-            }
-        }
-        if (axis === 'y' || axis === 'both') {
-            if (isScaleBand($yScale)) {
-                dimensions.height = $yScale.step();
-            }
-            else if (Array.isArray(xCoord)) {
-                // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
-                // Use first/last values for width
-                dimensions.height = max(yCoord) - min(yCoord);
-                yCoord = min(yCoord); // Use left-most value for top left of rect
-            }
-            else {
-                // Find width to next data point
-                const index = $flatData.findIndex((d) => Number($x(d)) === Number($x($tooltip.data)));
-                const isLastPoint = index + 1 === $flatData.length;
-                const nextDataPoint = isLastPoint ? max($yDomain) : $x($flatData[index + 1]);
-                dimensions.height = ($yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
-            }
-            dimensions.y =
-                yCoord - (isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0);
-            if (axis === 'y') {
-                dimensions.width = max($xRange);
-            }
-        }
-    }
-}
-</script>
-
-{#if $tooltip.data}
-  <Rect spring {...dimensions} fill="rgba(0,0,0,.1)" on:click />
-{/if}

package/dist/components/HighlightRect.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        axis?: "x" | "y" | "both" | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type HighlightRectProps = typeof __propDef.props;
-export type HighlightRectEvents = typeof __propDef.events;
-export type HighlightRectSlots = typeof __propDef.slots;
-export default class HighlightRect extends SvelteComponentTyped<HighlightRectProps, HighlightRectEvents, HighlightRectSlots> {
-}
-export {};

package/dist/components/Points.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        r?: number | undefined;
-        offsetX?: (number | ((value: number, context: any) => number)) | undefined;
-        offsetY?: (number | ((value: number, context: any) => number)) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            points: any;
-        };
-    };
-};
-export type PointsProps = typeof __propDef.props;
-export type PointsEvents = typeof __propDef.events;
-export type PointsSlots = typeof __propDef.slots;
-export default class Points extends SvelteComponentTyped<PointsProps, PointsEvents, PointsSlots> {
-}
-export {};