layerchart 0.37.1 → 0.37.3

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

@@ -30,7 +30,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            value: any;
+            value: number;
             centroid: [number, number];
             boundingBox: any;
         };

package/dist/components/Axis.svelte

@@ -41,47 +41,48 @@ $: orientation =
             : ['top', 'bottom'].includes(placement)
                 ? 'horizontal'
                 : 'vertical';
-$: scale = ['horizontal', 'angle'].includes(orientation) ? $xScale : $yScale;
+export let scale = undefined;
+$: _scale = scale ?? (['horizontal', 'angle'].includes(orientation) ? $xScale : $yScale);
 $: [xRangeMin, xRangeMax] = extent($xRange);
 $: [yRangeMin, yRangeMax] = extent($yRange);
 $: tickVals = Array.isArray(ticks)
     ? ticks
     : typeof ticks === 'function'
-        ? ticks(scale)
-        : isScaleBand(scale)
-            ? scale.domain()
-            : scale.ticks(ticks);
+        ? ticks(_scale)
+        : isScaleBand(_scale)
+            ? _scale.domain()
+            : _scale.ticks(ticks);
 function getCoords(tick) {
     switch (placement) {
         case 'top':
             return {
-                x: $xScale(tick) + (isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0),
-                y: xRangeMin,
+                x: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
+                y: yRangeMin,
             };
         case 'bottom':
             return {
-                x: $xScale(tick) + (isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0),
+                x: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
                 y: yRangeMax,
             };
         case 'left':
             return {
                 x: xRangeMin,
-                y: $yScale(tick) + (isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0),
+                y: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
             };
         case 'right':
             return {
                 x: xRangeMax,
-                y: $yScale(tick) + (isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0),
+                y: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
             };
         case 'angle':
             return {
-                x: $xScale(tick),
+                x: _scale(tick),
                 y: yRangeMax,
             };
         case 'radius':
             return {
                 x: xRangeMin,
-                y: $yScale(tick),
+                y: _scale(tick),
             };
     }
 }
@@ -114,7 +115,7 @@ function getDefaultTickLabelProps(tick) {
                 dy: -2, // manually adjusted until Text supports custom styles
             };
         case 'angle':
-            const xValue = $xScale(tick);
+            const xValue = _scale(tick);
             return {
                 textAnchor: xValue === 0 || xValue === Math.PI ? 'middle' : xValue > Math.PI ? 'end' : 'start',
                 verticalAnchor: 'middle',
@@ -221,7 +222,7 @@ function getDefaultTickLabelProps(tick) {
     {@const resolvedTickLabelProps = {
       x: orientation === 'angle' ? radialTickCoords[0] : tickCoords.x,
       y: orientation === 'angle' ? radialTickCoords[1] : tickCoords.y,
-      value: formatValue(tick, format ?? scale.tickFormat?.() ?? ((v) => v)),
+      value: formatValue(tick, format ?? _scale.tickFormat?.() ?? ((v) => v)),
       ...getDefaultTickLabelProps(tick),
       tweened,
       spring,

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

@@ -21,6 +21,7 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         transitionIn?: typeof fade | (() => void) | undefined;
         transitionInParams?: TransitionParams | undefined;
+        scale?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Bar.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { createDimensionGetter } from '../utils/rect.js';
 import Rect from './Rect.svelte';
+import Spline from './Spline.svelte';
 const { x: xContext, y: yContext } = getContext('LayerCake');
 export let bar;
 /**
@@ -15,6 +16,8 @@ export let fill = undefined;
 export let stroke = 'black';
 export let strokeWidth = 0;
 export let radius = 0;
+/** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
+export let rounded = 'all';
 export let inset = 0;
 export let groupBy = undefined;
 export let groupPaddingInner = 0.2;
@@ -34,16 +37,47 @@ $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
     },
 });
 $: dimensions = $getDimensions(bar);
+$: topLeft = ['all', 'top', 'left', 'top-left'].includes(rounded);
+$: topRight = ['all', 'top', 'right', 'top-right'].includes(rounded);
+$: bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(rounded);
+$: bottomRight = ['all', 'bottom', 'right', 'bottom-right'].includes(rounded);
+$: width = dimensions.width;
+$: height = dimensions.height;
+$: diameter = 2 * radius;
+$: pathData = `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
+      ${topRight ? `a${radius},${radius} 0 0 1 ${radius},${radius}` : `h${radius}v${radius}`}
+      v${height - diameter}
+      ${bottomRight ? `a${radius},${radius} 0 0 1 ${-radius},${radius}` : `v${radius}h${-radius}`}
+      h${diameter - width}
+      ${bottomLeft ? `a${radius},${radius} 0 0 1 ${-radius},${-radius}` : `h${-radius}v${-radius}`}
+      v${diameter - height}
+      ${topLeft ? `a${radius},${radius} 0 0 1 ${radius},${-radius}` : `v${-radius}h${radius}`}
+      z`
+    .split('\n')
+    .join('');
 </script>
 
-<Rect
-  {fill}
-  {spring}
-  {tweened}
-  {stroke}
-  stroke-width={strokeWidth}
-  rx={radius}
-  {...dimensions}
-  {...$$restProps}
-  on:click
-/>
+{#if rounded === 'all'}
+  <Rect
+    {fill}
+    {spring}
+    {tweened}
+    {stroke}
+    stroke-width={strokeWidth}
+    rx={radius}
+    {...dimensions}
+    {...$$restProps}
+    on:click
+  />
+{:else}
+  <Spline
+    {pathData}
+    {fill}
+    {spring}
+    {tweened}
+    {stroke}
+    stroke-width={strokeWidth}
+    {...$$restProps}
+    on:click
+  />
+{/if}

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         stroke?: string | undefined;
         strokeWidth?: number | undefined;
         radius?: number | undefined;
+        rounded?: "top" | "bottom" | "left" | "right" | "all" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
         inset?: number | undefined;
         groupBy?: string | undefined;
         groupPaddingInner?: number | undefined;

package/dist/components/Chart.svelte

@@ -15,12 +15,14 @@ export const Svg = _Svg;
 export const WebGL = _WebGL;
 </script>
 
-<script>import { max, min } from 'd3-array';
+<script>import { onMount } from 'svelte';
+import { max, min } from 'd3-array';
 import { get } from 'lodash-es';
 import { isScaleBand } from '../utils/scales.js';
 import GeoContext from './GeoContext.svelte';
 import TooltipContext from './TooltipContext.svelte';
 import TransformContext from './TransformContext.svelte';
+import { geoFitObjectTransform } from '../utils/geo.js';
 /**
  *  Resolve a value from data based on the accessor type
  */
@@ -73,7 +75,16 @@ export let tooltip = undefined;
 /** Props passed to TransformContext */
 export let transform = undefined;
 export let transformContext = undefined;
+/** Set transformContext's initial translate and scale based on geo object.  Requires `geo.projection` to also be set */
+export let fitGeoObject = undefined;
+// Binded for access within TransformContext
 let geoProjection = undefined;
+// Track when mounted since LayerCake initializes width/height with `100` until binded `clientWidth`/`clientWidth` can run
+// Useful to key/remount TransformContext with correct `initialTranslate` / `initialScale` values
+let isMounted = false;
+onMount(() => {
+    isMounted = true;
+});
 </script>
 
 <LayerCake
@@ -103,60 +114,69 @@ let geoProjection = undefined;
   let:data
   let:flatData
 >
-  <TransformContext
-    bind:this={transformContext}
-    processTranslate={geo
-      ? (x, y, deltaX, deltaY, scale) => {
-          if (geo.applyTransform?.includes('rotate')) {
-            // When applying transform to rotate, invert `y` values and reduce sensitivity based on projection scale
-            // see: https://observablehq.com/@benoldenburg/simple-globe and https://observablehq.com/@michael-keith/draggable-globe-in-d3
-            const projectionScale = $geoProjection.scale();
-            const sensitivity = 75;
-            return {
-              x: x + deltaX * (sensitivity / projectionScale),
-              y: y + deltaY * (sensitivity / projectionScale) * -1,
-            };
-          } else if (geo.applyTransform?.includes('translate')) {
-            // When applying to `translate`, use pointer values as is (with no `scale` adjustment)
-            return { x: x + deltaX, y: y + deltaY };
-          } else {
-            // Apply default TransformContext.processTransform (passing `undefined` below appears to not work when checking for `geo?.applyTransform` exists)
-            return { x: x + deltaX / scale, y: y + deltaY / scale };
-          }
-        }
+  {@const initialTransform =
+    fitGeoObject && geo?.projection
+      ? geoFitObjectTransform(geo.projection(), [width, height], fitGeoObject)
       : undefined}
-    {...transform}
-    let:transform={_transform}
-    on:transform
-    on:dragstart
-    on:dragend
-  >
-    <GeoContext {...geo} bind:geo={geoProjection} let:projection>
-      {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
-      <TooltipContext {...tooltipProps} let:tooltip>
-        <slot
-          {aspectRatio}
-          {containerHeight}
-          {containerWidth}
-          {height}
-          {width}
-          {element}
-          {projection}
-          transform={_transform}
-          {tooltip}
-          {xScale}
-          {xGet}
-          {yScale}
-          {yGet}
-          {zScale}
-          {zGet}
-          {rScale}
-          {rGet}
-          {padding}
-          {data}
-          {flatData}
-        />
-      </TooltipContext>
-    </GeoContext>
-  </TransformContext>
+
+  {#key isMounted}
+    <TransformContext
+      bind:this={transformContext}
+      initialTranslate={initialTransform?.translate}
+      initialScale={initialTransform?.scale}
+      processTranslate={geo
+        ? (x, y, deltaX, deltaY, scale) => {
+            if (geo.applyTransform?.includes('rotate')) {
+              // When applying transform to rotate, invert `y` values and reduce sensitivity based on projection scale
+              // see: https://observablehq.com/@benoldenburg/simple-globe and https://observablehq.com/@michael-keith/draggable-globe-in-d3
+              const projectionScale = $geoProjection.scale();
+              const sensitivity = 75;
+              return {
+                x: x + deltaX * (sensitivity / projectionScale),
+                y: y + deltaY * (sensitivity / projectionScale) * -1,
+              };
+            } else if (geo.applyTransform?.includes('translate')) {
+              // When applying to `translate`, use pointer values as is (with no `scale` adjustment)
+              return { x: x + deltaX, y: y + deltaY };
+            } else {
+              // Apply default TransformContext.processTransform (passing `undefined` below appears to not work when checking for `geo?.applyTransform` exists)
+              return { x: x + deltaX / scale, y: y + deltaY / scale };
+            }
+          }
+        : undefined}
+      {...transform}
+      let:transform={_transform}
+      on:transform
+      on:dragstart
+      on:dragend
+    >
+      <GeoContext {...geo} bind:geo={geoProjection} let:projection>
+        {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
+        <TooltipContext {...tooltipProps} let:tooltip>
+          <slot
+            {aspectRatio}
+            {containerHeight}
+            {containerWidth}
+            {height}
+            {width}
+            {element}
+            {projection}
+            transform={_transform}
+            {tooltip}
+            {xScale}
+            {xGet}
+            {yScale}
+            {yGet}
+            {zScale}
+            {zGet}
+            {rScale}
+            {rGet}
+            {padding}
+            {data}
+            {flatData}
+          />
+        </TooltipContext>
+      </GeoContext>
+    </TransformContext>
+  {/key}
 </LayerCake>

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

@@ -6,10 +6,11 @@ export declare const Canvas: typeof _Canvas;
 export declare const Html: typeof _Html;
 export declare const Svg: typeof _Svg;
 export declare const WebGL: typeof _WebGL;
-import type { ComponentProps } from 'svelte';
+import { type ComponentProps } from 'svelte';
 import GeoContext from './GeoContext.svelte';
 import TooltipContext from './TooltipContext.svelte';
 import TransformContext from './TransformContext.svelte';
+import { geoFitObjectTransform } from '../utils/geo.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -23,6 +24,7 @@ declare const __propDef: {
         tooltip?: Partial<ComponentProps<TooltipContext>> | boolean | undefined;
         transform?: Partial<ComponentProps<TransformContext>> | undefined;
         transformContext?: TransformContext | undefined;
+        fitGeoObject?: Parameters<typeof geoFitObjectTransform>[2] | undefined;
     };
     events: {
         transform: CustomEvent<{
@@ -47,8 +49,25 @@ declare const __propDef: {
             element: Element;
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
             transform: {
-                scale: any;
-                translate: any;
+                scale: number;
+                setScale: ((new_value: number, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: number, opts?: import("svelte/motion").TweenedOptions<number> | undefined) => Promise<void>) | ((this: void, value: number) => void);
+                translate: {
+                    x: number;
+                    y: number;
+                };
+                setTranslate: ((new_value: {
+                    x: number;
+                    y: number;
+                }, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: {
+                    x: number;
+                    y: number;
+                }, opts?: import("svelte/motion").TweenedOptions<{
+                    x: number;
+                    y: number;
+                }> | undefined) => Promise<void>) | ((this: void, value: {
+                    x: number;
+                    y: number;
+                }) => void);
                 zoomTo: (center: {
                     x: number;
                     y: number;
@@ -61,7 +80,7 @@ declare const __propDef: {
             tooltip: {
                 y: number;
                 x: number;
-                data: null;
+                data: null; /** Props passed to TransformContext */
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
             };

package/dist/components/TransformContext.svelte

@@ -42,15 +42,17 @@ export let clickDistance = 10;
 const dispatch = createEventDispatcher();
 let pointerDown = false;
 const dragging = writable(false);
-export let initialTranslate = { x: 0, y: 0 };
-export const translate = motionStore(initialTranslate, { spring, tweened });
-export let initialScale = 1;
-export const scale = motionStore(initialScale, { spring, tweened });
+const DEFAULT_TRANSLATE = { x: 0, y: 0 };
+export let initialTranslate = undefined;
+export const translate = motionStore(initialTranslate ?? DEFAULT_TRANSLATE, { spring, tweened });
+const DEFAULT_SCALE = 1;
+export let initialScale = undefined;
+export const scale = motionStore(initialScale ?? DEFAULT_SCALE, { spring, tweened });
 let startPoint = { x: 0, y: 0 };
 let startTranslate = { x: 0, y: 0 };
 export function reset() {
-    $translate = initialTranslate;
-    $scale = initialScale;
+    $translate = initialTranslate ?? DEFAULT_TRANSLATE;
+    $scale = initialScale ?? DEFAULT_SCALE;
 }
 export function zoomIn() {
     scaleTo(1.25, { x: $width / 2, y: $height / 2 });
@@ -197,5 +199,14 @@ $: dispatch('transform', { scale: $scale, translate: $translate });
   on:keypress
   class="h-full"
 >
-  <slot transform={{ scale: $scale, translate: $translate, zoomTo, reset }} />
+  <slot
+    transform={{
+      scale: $scale,
+      setScale: scale.set,
+      translate: $translate,
+      setTranslate: translate.set,
+      zoomTo,
+      reset,
+    }}
+  />
 </div>

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

@@ -41,9 +41,18 @@ declare const __propDef: {
             x: number;
             y: number;
         } | undefined;
-        translate?: import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined;
+        translate?: import("svelte/motion").Spring<{
+            x: number;
+            y: number;
+        }> | import("svelte/motion").Tweened<{
+            x: number;
+            y: number;
+        }> | Writable<{
+            x: number;
+            y: number;
+        }> | undefined;
         initialScale?: number | undefined;
-        scale?: import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined;
+        scale?: import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | Writable<number> | undefined;
         reset?: (() => void) | undefined;
         zoomIn?: (() => void) | undefined;
         zoomOut?: (() => void) | undefined;
@@ -76,8 +85,25 @@ declare const __propDef: {
     slots: {
         default: {
             transform: {
-                scale: any;
-                translate: any;
+                scale: number;
+                setScale: ((new_value: number, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: number, opts?: import("svelte/motion").TweenedOptions<number> | undefined) => Promise<void>) | ((this: void, value: number) => void);
+                translate: {
+                    x: number;
+                    y: number;
+                };
+                setTranslate: ((new_value: {
+                    x: number;
+                    y: number;
+                }, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: {
+                    x: number;
+                    y: number;
+                }, opts?: import("svelte/motion").TweenedOptions<{
+                    x: number;
+                    y: number;
+                }> | undefined) => Promise<void>) | ((this: void, value: {
+                    x: number;
+                    y: number;
+                }) => void);
                 zoomTo: (center: {
                     x: number;
                     y: number;
@@ -94,8 +120,17 @@ export type TransformContextProps = typeof __propDef.props;
 export type TransformContextEvents = typeof __propDef.events;
 export type TransformContextSlots = typeof __propDef.slots;
 export default class TransformContext extends SvelteComponentTyped<TransformContextProps, TransformContextEvents, TransformContextSlots> {
-    get translate(): NonNullable<import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined>;
-    get scale(): NonNullable<import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined>;
+    get translate(): NonNullable<import("svelte/motion").Spring<{
+        x: number;
+        y: number;
+    }> | import("svelte/motion").Tweened<{
+        x: number;
+        y: number;
+    }> | Writable<{
+        x: number;
+        y: number;
+    }> | undefined>;
+    get scale(): NonNullable<import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | Writable<number> | undefined>;
     get reset(): () => void;
     get zoomIn(): () => void;
     get zoomOut(): () => void;

package/dist/docs/TransformDebug.svelte

@@ -12,10 +12,6 @@ const { translate, scale } = transform;
       <span class="opacity-50">translate:</span>
       <div class="text-right">{format($translate.x, 'decimal')}</div>
       <div class="text-right">{format($translate.y, 'decimal')}</div>
-
-      <span class="opacity-50">delta:</span>
-      <div class="text-right">{format($translate.deltaX, 'decimal')}</div>
-      <div class="text-right">{format($translate.deltaY, 'decimal')}</div>
     </div>
   </div>
 </div>

package/dist/stores/motionStore.d.ts

@@ -17,7 +17,7 @@ export type PropMotionOptions = {
 /**
  * Convenient wrapper to create a motion store (spring(), tweened()) based on properties, or fall back to basic writable() store
  */
-export declare function motionStore<T = any>(value: any, options: MotionOptions): import("svelte/motion").Spring<T> | import("svelte/motion").Tweened<T> | import("svelte/store").Writable<T>;
+export declare function motionStore<T = any>(value: T, options: MotionOptions): import("svelte/motion").Spring<T> | import("svelte/motion").Tweened<T> | import("svelte/store").Writable<T>;
 /**
  * Helper to resolve motion options with specific property option (useful for specifying per-prop delays)
  */

package/dist/utils/geo.d.ts

@@ -16,3 +16,10 @@ export declare function antipode([longitude, latitude]: [number, number]): [numb
  * @see: https://observablehq.com/@d3/testing-projection-visibility
  */
 export declare function isVisible(projection: GeoProjection | GeoStreamWrapper): ([x, y]: [any, any]) => boolean;
+export declare function geoFitObjectTransform(projection: GeoProjection, size: [number, number], object: Parameters<typeof projection.fitSize>[1]): {
+    translate: {
+        x: number;
+        y: number;
+    };
+    scale: number;
+};

package/dist/utils/geo.js

@@ -59,3 +59,8 @@ export function isVisible(projection) {
     });
     return ([x, y]) => ((visible = false), stream.point(x, y), visible);
 }
+export function geoFitObjectTransform(projection, size, object) {
+    const newProjection = projection.fitSize(size, object);
+    const translate = newProjection.translate();
+    return { translate: { x: translate[0], y: translate[1] }, scale: newProjection.scale() };
+}

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.37.1",
+  "version": "0.37.3",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",