layerchart 0.31.2 → 0.32.1

package/dist/components/Arc.svelte

@@ -16,8 +16,8 @@ import { getContext, tick } from 'svelte';
 import { arc as d3arc } from 'd3-shape';
 import { scaleLinear } from 'd3-scale';
 import { min, max } from 'd3-array';
-import { motionStore } from '../stores/motionStore';
-import { degreesToRadians } from '../utils/math';
+import { motionStore } from '../stores/motionStore.js';
+import { degreesToRadians } from '../utils/math.js';
 export let spring = undefined;
 export let tweened = undefined;
 export let value = 0;

package/dist/components/Area.svelte

@@ -3,7 +3,7 @@ import { area as d3Area, areaRadial } from 'd3-shape';
 import { max } from 'd3-array';
 import { interpolatePath } from 'd3-interpolate-path';
 import { cls } from 'svelte-ux';
-import { motionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore.js';
 import Spline from './Spline.svelte';
 const { data: contextData, xScale, yScale, xGet, yGet, yRange } = getContext('LayerCake');
 /** Override data instead of using context */

package/dist/components/Axis.svelte

@@ -1,9 +1,13 @@
 <script>import { getContext } from 'svelte';
-import { format as formatValue, cls } from 'svelte-ux';
+import { fade } from 'svelte/transition';
+import { cubicIn } from 'svelte/easing';
 import { extent } from 'd3-array';
 import { pointRadial } from 'd3-shape';
+import { format as formatValue, cls } from 'svelte-ux';
+import Circle from './Circle.svelte';
+import Line from './Line.svelte';
 import Text from './Text.svelte';
-import { isScaleBand } from '../utils/scales';
+import { isScaleBand } from '../utils/scales.js';
 const { xScale, yScale, xRange, yRange, width } = getContext('LayerCake');
 /** Location of axis */
 export let placement;
@@ -17,6 +21,10 @@ export let ticks = placement === 'left' || placement === 'right' ? 4 : undefined
 export let tickSize = 4;
 export let format = undefined;
 export let labelProps = undefined;
+export let spring = undefined;
+export let tweened = undefined;
+export let transitionIn = tweened ? fade : () => { };
+export let transitionInParams = { easing: cubicIn };
 $: orientation =
     placement === 'angle'
         ? 'angle'
@@ -118,22 +126,26 @@ function getDefaultLabelProps(tick) {
   {#if rule !== false}
     {@const lineProps = typeof rule === 'object' ? rule : null}
     {#if orientation === 'vertical'}
-      <line
+      <Line
         x1={placement === 'right' ? xRangeMax : xRangeMin}
         x2={placement === 'right' ? xRangeMax : xRangeMin}
         y1={$yRange[0] || 0}
         y2={$yRange[1] || 0}
+        {tweened}
+        {spring}
         {...lineProps}
         class={cls('rule stroke-surface-content/50', lineProps?.class)}
       />
     {/if}
 
     {#if orientation === 'horizontal'}
-      <line
+      <Line
         x1={$xRange[0] || 0}
         x2={$xRange[1] || 0}
         y1={placement === 'top' ? yRangeMin : yRangeMax}
         y2={placement === 'top' ? yRangeMin : yRangeMax}
+        {tweened}
+        {spring}
         {...lineProps}
         class={cls('rule stroke-surface-content/50', lineProps?.class)}
       />
@@ -142,36 +154,42 @@ function getDefaultLabelProps(tick) {
     <!-- TODO: angle rule? -->
 
     {#if orientation === 'radius'}
-      <circle
+      <Circle
         r={$yRange[0] || 0}
+        {tweened}
+        {spring}
         {...lineProps}
         class={cls('rule stroke-surface-content/20 fill-none', lineProps?.class)}
       />
     {/if}
   {/if}
 
-  {#each tickVals as tick, i}
+  {#each tickVals as tick (tick)}
     {@const tickCoords = getCoords(tick)}
     {@const radialTickCoords = pointRadial(tickCoords.x, tickCoords.y)}
 
-    <g>
+    <g in:transitionIn={transitionInParams}>
       {#if grid !== false}
         {@const lineProps = typeof grid === 'object' ? grid : null}
         {#if orientation === 'horizontal'}
-          <line
+          <Line
             x1={tickCoords.x}
             y1={yRangeMin}
             x2={tickCoords.x}
             y2={yRangeMax}
+            {tweened}
+            {spring}
             {...lineProps}
             class={cls('grid stroke-surface-content/10', lineProps?.class)}
           />
         {:else if orientation === 'vertical'}
-          <line
+          <Line
             x1={0}
             y1={tickCoords.y}
             x2={$width}
             y2={tickCoords.y}
+            {tweened}
+            {spring}
             {...lineProps}
             class={cls('grid stroke-surface-content/10', lineProps?.class)}
           />
@@ -179,11 +197,13 @@ function getDefaultLabelProps(tick) {
           {@const [x1, y1] = pointRadial(tickCoords.x, yRangeMin)}
           {@const [x2, y2] = pointRadial(tickCoords.x, yRangeMax)}
 
-          <line
+          <Line
             {x1}
             {y1}
             {x2}
             {y2}
+            {tweened}
+            {spring}
             {...lineProps}
             class={cls('test grid stroke-surface-content/10', lineProps?.class)}
           />
@@ -198,19 +218,23 @@ function getDefaultLabelProps(tick) {
 
       <!-- Tick marks -->
       {#if orientation === 'horizontal'}
-        <line
+        <Line
           x1={tickCoords.x}
           y1={tickCoords.y}
           x2={tickCoords.x}
           y2={tickCoords.y + (placement === 'top' ? -tickSize : tickSize)}
+          {tweened}
+          {spring}
           class="tick stroke-surface-content/50"
         />
       {:else if orientation === 'vertical'}
-        <line
+        <Line
           x1={tickCoords.x}
           y1={tickCoords.y}
           x2={tickCoords.x + (placement === 'left' ? -tickSize : tickSize)}
           y2={tickCoords.y}
+          {tweened}
+          {spring}
           class="tick stroke-surface-content/50"
         />
       {/if}
@@ -220,6 +244,8 @@ function getDefaultLabelProps(tick) {
         y={orientation === 'angle' ? radialTickCoords[1] : tickCoords.y}
         value={formatValue(tick, format ?? scale.tickFormat?.() ?? ((v) => v))}
         {...getDefaultLabelProps(tick)}
+        {tweened}
+        {spring}
         {...labelProps}
         class={cls(
           'label text-[10px] stroke-surface-100 [stroke-width:2px] font-light',

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

@@ -1,6 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
+import { fade } from 'svelte/transition';
 import type { SVGAttributes } from 'svelte/elements';
+import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+import { type TransitionParams } from 'svelte-ux';
 import Text from './Text.svelte';
 declare const __propDef: {
     props: {
@@ -11,6 +14,10 @@ declare const __propDef: {
         /** Length of the tick line */ tickSize?: number | undefined;
         format?: any;
         labelProps?: Partial<ComponentProps<Text>> | undefined;
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        transitionIn?: typeof fade | (() => void) | undefined;
+        transitionInParams?: TransitionParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Bar.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
-import { createDimensionGetter } from '../utils/rect';
+import { createDimensionGetter } from '../utils/rect.js';
 import Rect from './Rect.svelte';
-const { x: xContext, y: yContext, rGet, config } = getContext('LayerCake');
+const { x: xContext, y: yContext } = getContext('LayerCake');
 export let bar;
 /**
  * Override `x` from context.  Useful for multiple Bar instances

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+import { type ComponentProps } from 'svelte';
+import Rect from './Rect.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -14,8 +15,8 @@ declare const __propDef: {
         groupBy?: string | undefined;
         groupPaddingInner?: number | undefined;
         groupPaddingOuter?: number | undefined;
-        spring?: boolean | Parameters<typeof springStore>[1];
-        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        spring?: ComponentProps<Rect>['spring'];
+        tweened?: ComponentProps<Rect>['tweened'];
     };
     events: {
         click: MouseEvent;

package/dist/components/Bars.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from 'svelte';
 import Bar from './Bar.svelte';
+import Rect from './Rect.svelte';
 const { data, rGet, config } = getContext('LayerCake');
 /**
  * Override `x` from context.  Useful for multiple Bar instances

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+import { type ComponentProps } from 'svelte';
+import Rect from './Rect.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -9,8 +10,8 @@ declare const __propDef: {
         strokeWidth?: number | undefined;
         radius?: number | undefined;
         inset?: number | undefined;
-        spring?: boolean | Parameters<typeof springStore>[1];
-        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        spring?: ComponentProps<Rect>['spring'];
+        tweened?: ComponentProps<Rect>['tweened'];
         groupBy?: string | undefined;
         groupPaddingInner?: number | undefined;
         groupPaddingOuter?: number | undefined;

package/dist/components/Bounds.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
 import { scaleLinear } from 'd3-scale';
-import { motionScale } from '../utils/scales';
+import { motionScale } from '../utils/scales.js';
 const { width, height } = getContext('LayerCake');
 export let domain;
 export let range;
@@ -10,7 +10,7 @@ function getExtents(extents, axis, fallback) {
     const resolvedExtents = typeof extents === 'function' ? extents({ width: $width, height: $height }) : extents;
     return [
         resolvedExtents?.[axis + '0'] ?? 0, // x0 or y0
-        resolvedExtents?.[axis + '1'] ?? fallback // x1 or y1, fallback as $width or $height
+        resolvedExtents?.[axis + '1'] ?? fallback, // x1 or y1, fallback as $width or $height
     ];
 }
 const xScale = motionScale(scaleLinear, { spring, tweened });

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { motionScale } from '../utils/scales';
+import { motionScale } from '../utils/scales.js';
 declare const __propDef: {
     props: {
         domain: {

package/dist/components/Chart.svelte

@@ -11,7 +11,7 @@ export const WebGL = _WebGL;
 
 <script>import { max, min } from 'd3-array';
 import { get } from 'lodash-es';
-import { isScaleBand } from '../utils/scales';
+import { isScaleBand } from '../utils/scales.js';
 import TooltipContext from './TooltipContext.svelte';
 import GeoContext from './GeoContext.svelte';
 /**

package/dist/components/Circle.svelte

@@ -1,11 +1,11 @@
 <script>import { tick } from 'svelte';
 import { cls } from 'svelte-ux';
-import { motionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore.js';
 export let cx = 0;
 export let initialCx = cx;
 export let cy = 0;
 export let initialCy = cy;
-export let r;
+export let r = 1;
 export let initialR = r;
 export let spring = undefined;
 export let tweened = undefined;

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         initialCx?: number | undefined;
         cy?: number | undefined;
         initialCy?: number | undefined;
-        r: number;
+        r?: number | undefined;
         initialR?: number | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

package/dist/components/GeoEdgeFade.svelte

@@ -0,0 +1,22 @@
+<script>import { getContext } from 'svelte';
+import { scaleLinear } from 'd3-scale';
+import { geoDistance } from 'd3-geo';
+import { geoContext } from './GeoContext.svelte';
+export let link;
+const { width, height } = getContext('LayerCake');
+const geo = geoContext();
+const fade = scaleLinear().domain([-0.1, 0]).range([0, 0.1]);
+const clamper = scaleLinear().domain([0, 1]).range([0, 1]).clamp(true);
+// $: center = $geo.invert([$width / 2, $height / 2]);
+$: center = $geo.invert($geo.translate());
+$: source = link.source;
+$: target = link.target;
+$: startDistance = 1.57 - geoDistance(source, center);
+$: endDistance = 1.57 - geoDistance(target, center);
+$: distance = startDistance < endDistance ? startDistance : endDistance;
+$: opacity = clamper(fade(distance));
+</script>
+
+<g {opacity}>
+  <slot />
+</g>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link: {
+            source: [number, number];
+            target: [number, number];
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type GeoEdgeFadeProps = typeof __propDef.props;
+export type GeoEdgeFadeEvents = typeof __propDef.events;
+export type GeoEdgeFadeSlots = typeof __propDef.slots;
+export default class GeoEdgeFade extends SvelteComponentTyped<GeoEdgeFadeProps, GeoEdgeFadeEvents, GeoEdgeFadeSlots> {
+}
+export {};

package/dist/components/GeoPoint.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { scaleCanvas } from 'layercake';
 import { geoContext } from './GeoContext.svelte';
+import Circle from './Circle.svelte';
 /** Latitude */
 export let lat;
 /** Longitude */
@@ -22,7 +23,11 @@ $: if (renderContext === 'canvas' && $ctx) {
 </script>
 
 {#if renderContext === 'svg'}
-  <g transform="translate({x},{y})">
-    <slot />
-  </g>
+  {#if $$slots.default}
+    <g transform="translate({x},{y})">
+      <slot />
+    </g>
+  {:else}
+    <Circle cx={x} cy={y} {...$$restProps} />
+  {/if}
 {/if}

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

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        /** Latitude */ lat: number;
-        /** Longitude */ long: number;
-        /** Render to canvas */ render?: ((ctx: CanvasRenderingContext2D, coords: {
+        [x: string]: any;
+        lat: number;
+        long: number;
+        render?: ((ctx: CanvasRenderingContext2D, coords: {
             x: number;
             y: number;
         }) => any) | undefined;

package/dist/components/GeoSpline.svelte

@@ -0,0 +1,37 @@
+<script>import { getContext } from 'svelte';
+import { geoOrthographic, geoInterpolate } from 'd3-geo';
+import { curveNatural } from 'd3-shape';
+import { geoContext } from './GeoContext.svelte';
+import Spline from './Spline.svelte';
+export let link;
+/** Amount of loft to apply to the midle of the curve */
+export let loft = 1.0;
+/**
+ * Curve of spline drawn. Imported via d3-shape.
+ *
+ * @example
+ * import { curveNatural } from 'd3-shape';
+ * <GeoSpline curve={curveNatrual} />
+ *
+ * @type {CurveFactory | CurveFactoryLineOnly | undefined}
+ */
+export let curve = curveNatural;
+const { width, height } = getContext('LayerCake');
+const geo = geoContext();
+$: loftedProjection = geoOrthographic()
+    .translate($geo.translate())
+    .rotate($geo.rotate())
+    .scale($geo.scale() * loft);
+$: source = $geo(link.source);
+$: target = $geo(link.target);
+$: middle = loftedProjection(geoInterpolate(link.source, link.target)(0.5));
+</script>
+
+<Spline
+  data={[source, middle, target]}
+  x={(d) => d[0]}
+  y={(d) => d[1]}
+  defined={(d) => $geo.invert(d)}
+  {curve}
+  {...$$restProps}
+/>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        link: {
+            source: [number, number];
+            target: [number, number];
+        };
+        loft?: number | undefined;
+        curve?: CurveFactory | CurveFactoryLineOnly | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GeoSplineProps = typeof __propDef.props;
+export type GeoSplineEvents = typeof __propDef.events;
+export type GeoSplineSlots = typeof __propDef.slots;
+export default class GeoSpline extends SvelteComponentTyped<GeoSplineProps, GeoSplineEvents, GeoSplineSlots> {
+}
+export {};

package/dist/components/Group.svelte

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

package/dist/components/Highlight.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { max, min } from 'd3-array';
 import { cls, notNull } from 'svelte-ux';
-import { isScaleBand } from '../utils/scales';
+import { isScaleBand } from '../utils/scales.js';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
 import Bar from './Bar.svelte';

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

@@ -8,7 +8,7 @@ declare const __propDef: {
             initialCx?: number | undefined;
             cy?: number | undefined;
             initialCy?: number | undefined;
-            r: number;
+            r?: number | undefined;
             initialR?: number | undefined;
             spring?: boolean | import("svelte/motion").SpringOpts | undefined;
             tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;

package/dist/components/Labels.svelte

@@ -4,13 +4,15 @@
  *   - [ ] Support multiple values (threshold, stacks, etc)
  */
 import { getContext } from 'svelte';
-import { format as formatValue } from 'svelte-ux';
+import { format as formatValue, cls } from 'svelte-ux';
 import { greatestAbs } from 'svelte-ux/utils/array';
 import Text from './Text.svelte';
-import { isScaleBand } from '../utils/scales';
-import { createDimensionGetter } from '../utils/rect';
+import { isScaleBand } from '../utils/scales.js';
+import { createDimensionGetter } from '../utils/rect.js';
 const { flatData, yScale, x, y, custom } = getContext('LayerCake');
-// export let orientation: 'outside' | 'inside' | 'auto' = 'auto';
+// TODO: Support 'auto' to switch `inside` to `outside` if not enough room
+export let placement = 'outside';
+export let offset = 4;
 export let significantDigits = 3;
 export let format = undefined;
 // export let overlap = false;
@@ -52,9 +54,9 @@ $: getTextProps = (item) => {
         if (labelValue < 0) {
             // left
             return {
-                x: dimensions?.x - 4,
+                x: dimensions?.x + (placement === 'outside' ? -offset : offset),
                 y: dimensions?.y + (dimensions?.height ?? 0) / 2,
-                textAnchor: 'end',
+                textAnchor: placement === 'outside' ? 'end' : 'start',
                 verticalAnchor: 'middle',
                 capHeight: '.6rem',
             };
@@ -62,9 +64,9 @@ $: getTextProps = (item) => {
         else {
             // right
             return {
-                x: dimensions?.x + dimensions?.width + 4,
+                x: dimensions?.x + dimensions?.width + (placement === 'outside' ? offset : -offset),
                 y: dimensions?.y + (dimensions?.height ?? 0) / 2,
-                textAnchor: 'start',
+                textAnchor: placement === 'outside' ? 'start' : 'end',
                 verticalAnchor: 'middle',
                 capHeight: '.6rem',
             };
@@ -76,20 +78,20 @@ $: getTextProps = (item) => {
             // bottom
             return {
                 x: dimensions?.x + (dimensions?.width ?? 0) / 2,
-                y: dimensions?.y + dimensions?.height,
-                dy: '0.5em',
+                y: dimensions?.y + dimensions?.height + (placement === 'outside' ? offset : -offset),
+                capHeight: '.6rem',
                 textAnchor: 'middle',
-                verticalAnchor: 'middle',
+                verticalAnchor: placement === 'outside' ? 'start' : 'end',
             };
         }
         else {
             // top
             return {
                 x: dimensions?.x + (dimensions?.width ?? 0) / 2,
-                y: dimensions?.y,
-                dy: '-0.6em',
+                y: dimensions?.y + (placement === 'outside' ? -offset : offset),
+                capHeight: '.6rem',
                 textAnchor: 'middle',
-                verticalAnchor: 'middle',
+                verticalAnchor: placement === 'outside' ? 'end' : 'start',
             };
         }
     }
@@ -101,7 +103,12 @@ $: getTextProps = (item) => {
     <!-- TODO: Add labels for each item when array/stack?  Use `getValue(item)` instead and iterate -->
     <Text
       value={getFormattedValue(item)}
-      class="text-xs stroke-surface-100 [stroke-width:2px]"
+      class={cls(
+        'text-xs',
+        placement === 'inside'
+          ? 'fill-surface-300 stroke-surface-content'
+          : 'fill-surface-content stroke-surface-100'
+      )}
       {...getTextProps(item)}
       {...$$restProps}
     />

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

@@ -3,6 +3,8 @@ import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        placement?: "inside" | "outside" | undefined;
+        offset?: number | undefined;
         significantDigits?: number | undefined;
         format?: FormatType | undefined;
         groupBy?: string | undefined;

package/dist/components/Line.svelte

@@ -1,6 +1,6 @@
 <script>import { tick } from 'svelte';
 import { cls } from 'svelte-ux';
-import { motionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore.js';
 export let x1;
 export let initialX1 = x1;
 export let y1;

package/dist/components/Link.svelte

@@ -1,6 +1,6 @@
 <script>import { link as d3Link, curveBumpX, curveBumpY } from 'd3-shape';
 import { interpolatePath } from 'd3-interpolate-path';
-import { motionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore.js';
 // Override what is used from context
 export let data = undefined; // TODO: Update Type
 /**

package/dist/components/Pie.svelte

@@ -3,8 +3,8 @@ import { pie as d3pie } from 'd3-shape';
 import { min, max } from 'd3-array';
 import Arc from './Arc.svelte';
 import Group from './Group.svelte';
-import { degreesToRadians } from '../utils/math';
-import { motionStore } from '../stores/motionStore';
+import { degreesToRadians } from '../utils/math.js';
+import { motionStore } from '../stores/motionStore.js';
 /*
   TODO:
   - [ ] Offset (always, on hover)

package/dist/components/Points.svelte

@@ -3,7 +3,7 @@ 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 { isScaleBand } from '../utils/scales.js';
 import { pointRadial } from 'd3-shape';
 const context = getContext('LayerCake');
 const { data, xGet, y, yGet, xScale, yScale, rGet, config } = context;

package/dist/components/Rect.svelte

@@ -1,6 +1,6 @@
 <script>import { tick } from 'svelte';
 import { cls } from 'svelte-ux';
-import { motionStore, resolveOptions, } from '../stores/motionStore';
+import { motionStore, resolveOptions, } from '../stores/motionStore.js';
 export let x = 0;
 export let initialX = x;
 export let y = 0;

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type SpringOptions, type TweenedOptions } from '../stores/motionStore';
+import { type SpringOptions, type TweenedOptions } from '../stores/motionStore.js';
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+import type { ComponentProps } from 'svelte';
+import Rect from './Rect.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,8 +9,8 @@ declare const __propDef: {
         y?: number | undefined;
         width: number;
         height: number;
-        spring?: boolean | Parameters<typeof springStore>[1];
-        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        spring?: ComponentProps<Rect>['spring'];
+        tweened?: ComponentProps<Rect>['tweened'];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Spline.svelte

@@ -7,9 +7,9 @@ import { line as d3Line, lineRadial } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
 import { interpolatePath } from 'd3-interpolate-path';
 import { cls } from 'svelte-ux';
-import { motionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore.js';
 import Group from './Group.svelte';
-const { data: contextData, xScale, yScale, xGet, yGet } = getContext('LayerCake');
+const { data: contextData, xScale, yScale, x: contextX, y: contextY } = getContext('LayerCake');
 /** Override data instead of using context */
 export let data = undefined;
 /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
@@ -35,17 +35,27 @@ export let draw = undefined;
  */
 export let curve = undefined;
 export let defined = undefined;
+function getScaleValue(data, scale, accessor) {
+    if (scale.domain().length) {
+        // If scale is defined with domain, map value
+        return scale(accessor(data));
+    }
+    else {
+        // Use raw value
+        return accessor(data);
+    }
+}
 let d = '';
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     const path = radial
         ? lineRadial()
-            .angle((d) => (x ? $xScale(x(d)) : $xGet(d)))
-            .radius((d) => (y ? $yScale(y(d)) : $yGet(d)))
+            .angle((d) => getScaleValue(d, $xScale, x ?? $contextX))
+            .radius((d) => getScaleValue(d, $yScale, y ?? $contextY))
         : d3Line()
-            .x((d) => (x ? $xScale(x(d)) : $xGet(d)))
-            .y((d) => (y ? $yScale(y(d)) : $yGet(d)));
+            .x((d) => getScaleValue(d, $xScale, x ?? $contextX))
+            .y((d) => getScaleValue(d, $yScale, y ?? $contextY));
     if (curve)
         path.curve(curve);
     if (defined)

package/dist/components/Text.svelte

@@ -1,5 +1,7 @@
-<script>import { cls } from 'svelte-ux';
-import { getStringWidth } from '../utils/string';
+<script>import { tick } from 'svelte';
+import { cls } from 'svelte-ux';
+import { getStringWidth } from '../utils/string.js';
+import { motionStore } from '../stores/motionStore.js';
 /*
   TODO:
     - [ ] Handle styled text (use <slot /> to measure?)
@@ -19,8 +21,10 @@ export let value = 0;
 export let width = undefined;
 /** x position of the text */
 export let x = 0;
+export let initialX = x;
 /** y position of the text */
 export let y = 0;
+export let initialY = y;
 /** dx offset of the text */
 export let dx = 0;
 /** dy offset of the text */
@@ -118,6 +122,14 @@ function isValidXOrY(xOrY) {
         // for percentage
         typeof xOrY === 'string');
 }
+export let spring = undefined;
+export let tweened = undefined;
+let tweened_x = motionStore(initialX, { spring, tweened });
+let tweened_y = motionStore(initialY, { spring, tweened });
+$: tick().then(() => {
+    tweened_x.set(x);
+    tweened_y.set(y);
+});
 </script>
 
 <!-- `overflow: visible` allow contents to be shown outside element -->
@@ -125,15 +137,15 @@ function isValidXOrY(xOrY) {
 <svg x={dx} y={dy} class="overflow-visible [paint-order:stroke]">
   {#if isValidXOrY(x) && isValidXOrY(y)}
     <text
-      {x}
-      {y}
+      x={$tweened_x}
+      y={$tweened_y}
       {transform}
       text-anchor={textAnchor}
       {...$$restProps}
       class={cls($$props.fill === undefined && 'fill-surface-content', $$props.class)}
     >
       {#each wordsByLines as line, index}
-        <tspan {x} dy={index === 0 ? startDy : lineHeight}>
+        <tspan x={$tweened_x} dy={index === 0 ? startDy : lineHeight}>
           {line.words.join(' ')}
         </tspan>
       {/each}

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

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
 declare const __propDef: {
     props: {
         [x: string]: any;
         value?: string | number | undefined;
         width?: number | undefined;
         x?: string | number | undefined;
+        initialX?: string | number | undefined;
         y?: string | number | undefined;
+        initialY?: string | number | undefined;
         dx?: string | number | undefined;
         dy?: string | number | undefined;
         lineHeight?: string | undefined;
@@ -14,6 +17,8 @@ declare const __propDef: {
         textAnchor?: "start" | "end" | "middle" | "inherit" | undefined;
         verticalAnchor?: "start" | "end" | "middle" | "inherit" | undefined;
         rotate?: number | undefined;
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/TooltipContext.svelte

@@ -23,9 +23,9 @@ import { cls, sortFunc } from 'svelte-ux';
 import { Svg, Html } from './Chart.svelte';
 import ChartClipPath from './ChartClipPath.svelte';
 import Voronoi from './Voronoi.svelte';
-import { localPoint } from '../utils/event';
-import { isScaleBand, scaleInvert } from '../utils/scales';
-import { quadtreeRects } from '../utils/quadtree';
+import { localPoint } from '../utils/event.js';
+import { isScaleBand, scaleInvert } from '../utils/scales.js';
+import { quadtreeRects } from '../utils/quadtree.js';
 const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, padding } = getContext('LayerCake');
 /*
       TODO: Defaults to consider (if possible to detect scale type, which might not be possible)

package/dist/components/Treemap.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
 import * as d3 from 'd3-hierarchy';
-import { aspectTile } from '../utils/treemap';
+import { aspectTile } from '../utils/treemap.js';
 const { data, width, height } = getContext('LayerCake');
 export let tile = d3.treemapSquarify;
 export let padding = 0;
@@ -27,7 +27,10 @@ $: tileFunc =
                             : tile;
 let treemap;
 $: {
-    treemap = d3.treemap().size([$width, $height]).tile(aspectTile(tileFunc, $width, $height));
+    treemap = d3
+        .treemap()
+        .size([$width, $height])
+        .tile(aspectTile(tileFunc, $width, $height));
     if (padding) {
         treemap.padding(padding);
     }

package/dist/components/Zoom.svelte

@@ -1,8 +1,8 @@
 <script>import { getContext, createEventDispatcher } from 'svelte';
-import { motionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore.js';
 const { width, height, padding } = getContext('LayerCake');
 export let mode = 'svg';
-export let translateOnScale;
+export let translateOnScale = false;
 export let spring = undefined;
 export let tweened = undefined;
 export let disablePointer = false;
@@ -31,14 +31,14 @@ export function decrease() {
 export function translateCenter() {
     $translate = {
         x: 0,
-        y: 0
+        y: 0,
     };
 }
 export function zoomTo(center, rect) {
     // TODO: Improve with geo/projection
     $translate = {
         x: $width / 2 - center.x,
-        y: $height / 2 - center.y
+        y: $height / 2 - center.y,
     };
     if (rect) {
         $scale = $width < $height ? $width / rect.width : $height / rect.height;
@@ -63,7 +63,7 @@ function onMouseMove(e) {
     const deltaY = endPoint.y - startPoint.y;
     translate.set({
         x: startTranslate.x + deltaX / (mode === 'manual' ? 1 : $scale),
-        y: startTranslate.y + deltaY / (mode === 'manual' ? 1 : $scale)
+        y: startTranslate.y + deltaY / (mode === 'manual' ? 1 : $scale),
     }, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     if (!moved) {
         // If dragged beyond threshold, disable click propagation
@@ -103,7 +103,7 @@ function onWheel(e) {
     else if (scroll === 'translate') {
         translate.update((startTranslate) => ({
             x: startTranslate.x + -e.deltaX / (mode === 'manual' ? 1 : $scale),
-            y: startTranslate.y + -e.deltaY / (mode === 'manual' ? 1 : $scale)
+            y: startTranslate.y + -e.deltaY / (mode === 'manual' ? 1 : $scale),
         }), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
 }
@@ -118,11 +118,11 @@ function scaleTo(value, point, options = undefined) {
         // Translate towards point (ex. mouse cursor/center) while zooming in/out
         const invertTransformPoint = {
             x: (point.x - $translate.x) / currentScale,
-            y: (point.y - $translate.y) / currentScale
+            y: (point.y - $translate.y) / currentScale,
         };
         const newTranslate = {
             x: point.x - invertTransformPoint.x * newScale,
-            y: point.y - invertTransformPoint.y * newScale
+            y: point.y - invertTransformPoint.y * newScale,
         };
         translate.set(newTranslate, options);
     }
@@ -136,26 +136,26 @@ function localPoint(svgEl, e) {
         point = point.matrixTransform(screenCTM?.inverse());
         return {
             x: point.x,
-            y: point.y
+            y: point.y,
         };
     }
     else {
         return {
             x: e.clientX,
-            y: e.clientY
+            y: e.clientY,
         };
     }
 }
 $: center = { x: $width / 2, y: $height / 2 };
 $: viewportCenter = {
     x: center.x - $translate.x,
-    y: center.y - $translate.y
+    y: center.y - $translate.y,
 };
 let transform = '';
 $: if (mode === 'svg') {
     const newTranslate = {
         x: $translate.x * $scale + center.x - center.x * $scale,
-        y: $translate.y * $scale + center.y - center.y * $scale
+        y: $translate.y * $scale + center.y - center.y * $scale,
     };
     transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
 }

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import { motionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore.js';
 declare const __propDef: {
     props: {
         mode?: "svg" | "manual" | undefined;
-        translateOnScale: false;
+        translateOnScale?: boolean | undefined;
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
         disablePointer?: boolean | undefined;

package/dist/components/index.d.ts

@@ -15,8 +15,10 @@ export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
+export { default as GeoSpline } from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';

package/dist/components/index.js

@@ -15,8 +15,10 @@ export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
+export { default as GeoSpline } from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { Svg, Html } from 'layercake';
-export * from './components';
-export * from './utils';
+export * from './components/index.js';
+export * from './utils/index.js';

package/dist/index.js

@@ -1,3 +1,3 @@
 export { Svg, Html } from 'layercake';
-export * from './components';
-export * from './utils';
+export * from './components/index.js';
+export * from './utils/index.js';

package/dist/utils/genData.js

@@ -1,5 +1,5 @@
 import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
-import { degreesToRadians, radiansToDegrees } from './math';
+import { degreesToRadians, radiansToDegrees } from './math.js';
 /**
  * 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

package/dist/utils/index.d.ts

@@ -1,7 +1,7 @@
-export * from './geo';
-export * from './graph';
-export * from './hierarchy';
-export * from './math';
-export * from './pivot';
-export * from './stack';
-export * from './ticks';
+export * from './geo.js';
+export * from './graph.js';
+export * from './hierarchy.js';
+export * from './math.js';
+export * from './pivot.js';
+export * from './stack.js';
+export * from './ticks.js';

package/dist/utils/index.js

@@ -1,7 +1,7 @@
-export * from './geo';
-export * from './graph';
-export * from './hierarchy';
-export * from './math';
-export * from './pivot';
-export * from './stack';
-export * from './ticks';
+export * from './geo.js';
+export * from './graph.js';
+export * from './hierarchy.js';
+export * from './math.js';
+export * from './pivot.js';
+export * from './stack.js';
+export * from './ticks.js';

package/dist/utils/rect.js

@@ -1,6 +1,6 @@
 import { derived } from 'svelte/store';
 import { max, min } from 'd3-array';
-import { groupScaleBand, isScaleBand } from './scales';
+import { groupScaleBand, isScaleBand } from './scales.js';
 // TOOD: Pass in overrides for `x` and `y` accessors
 export function createDimensionGetter(context, options) {
     const { flatData, xGet, yGet, xRange, yRange, xScale, yScale, x: xAccessor, y: yAccessor, } = context;

package/dist/utils/scales.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import { tweened, spring } from 'svelte/motion';
-import { type MotionOptions } from '../stores/motionStore';
+import { type MotionOptions } from '../stores/motionStore.js';
 import { type ScaleBand } from 'd3-scale';
 /**
  * Implemenation for missing `scaleBand().invert()`

package/dist/utils/scales.js

@@ -1,6 +1,6 @@
 import { derived } from 'svelte/store';
 import { tweened, spring } from 'svelte/motion';
-import { motionStore } from '../stores/motionStore';
+import { motionStore } from '../stores/motionStore.js';
 import { scaleBand } from 'd3-scale';
 import { unique } from 'svelte-ux/utils/array';
 /**

package/dist/utils/stack.js

@@ -1,6 +1,6 @@
 import { flatGroup, max, rollup, sum } from 'd3-array';
 import { stack, stackOffsetNone, stackOrderNone } from 'd3-shape';
-import { pivotWider } from './pivot';
+import { pivotWider } from './pivot.js';
 export function createStackData(data, options) {
     if (options.groupBy) {
         // Group then Stack (if needed)

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.31.2",
+  "version": "0.32.1",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",
@@ -83,7 +83,7 @@
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.108.3",
     "shapefile": "^0.6.6",
-    "svelte-ux": ">=0.60.6",
+    "svelte-ux": "^0.61.2",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {