layerchart 0.41.5 → 0.42.0

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

@@ -6,18 +6,18 @@ declare const __propDef: {
         [x: string]: any;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        value?: number | undefined;
-        initialValue?: number | undefined;
-        domain?: number[] | undefined;
-        range?: number[] | undefined;
+        value?: number;
+        initialValue?: number;
+        domain?: number[];
+        range?: number[];
         startAngle?: number | undefined;
         endAngle?: number | undefined;
         innerRadius?: number | undefined;
         outerRadius?: number | undefined;
-        cornerRadius?: number | undefined;
-        padAngle?: number | undefined;
-        track?: boolean | SVGAttributes<SVGPathElement> | undefined;
-        offset?: number | undefined;
+        cornerRadius?: number;
+        padAngle?: number;
+        track?: boolean | SVGAttributes<SVGPathElement>;
+        offset?: number;
     };
     events: {
         click: MouseEvent;

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

@@ -1,32 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
 import type { tweened as tweenedStore } from 'svelte/motion';
-import { type Area } from 'd3-shape';
 import type { CurveFactory } from 'd3-shape';
+import Spline from './Spline.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
-        radial?: boolean | undefined;
+        radial?: boolean;
         x?: any;
         y0?: any;
         y1?: any;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         clipPath?: string | undefined;
         curve?: CurveFactory | undefined;
-        defined?: Parameters<Area<any>['defined']>[0] | undefined;
-        line?: boolean | Partial<{
-            [x: string]: any;
-            data?: any;
-            pathData?: string | null | undefined;
-            radial?: boolean | undefined;
-            x?: any;
-            y?: any;
-            tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;
-            draw?: boolean | import("svelte/transition").DrawParams | undefined;
-            curve?: CurveFactory | import("d3-shape").CurveFactoryLineOnly | undefined;
-            defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
-        }> | undefined;
+        defined?: Parameters<Area<any>["defined"]>[0] | undefined;
+        line?: boolean | Partial<ComponentProps<Spline>>;
     };
     events: {
         click: MouseEvent;

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

@@ -6,8 +6,8 @@ import Spline from './Spline.svelte';
 declare const __propDef: {
     props: {
         curve?: CurveFactory | undefined;
-        defined?: ComponentProps<Spline>['defined'] | undefined;
-        opacity?: number | undefined;
+        defined?: ComponentProps<Spline>["defined"] | undefined;
+        opacity?: number;
         line?: boolean | any;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };

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

@@ -7,20 +7,20 @@ import { type FormatType, type TransitionParams } from 'svelte-ux';
 import Text from './Text.svelte';
 declare const __propDef: {
     props: {
-        /** Location of axis */ placement: 'top' | 'bottom' | 'left' | 'right' | 'angle' | 'radius';
-        /** Axis label */ label?: string | undefined;
-        /** Location of axis label */ labelPlacement?: "start" | "end" | "middle" | undefined;
+        /** Location of axis */ placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
+        /** Axis label */ label?: string;
+        /** Location of axis label */ labelPlacement?: "start" | "middle" | "end";
         /** Props applied label Text */ labelProps?: Partial<ComponentProps<Text>> | undefined;
-        /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | SVGAttributes<SVGLineElement> | undefined;
-        /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement> | undefined;
+        /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | SVGAttributes<SVGLineElement>;
+        /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement>;
         /** Control the number of ticks*/ ticks?: number | any[] | Function | undefined;
-        /** Length of the tick line */ tickLength?: number | undefined;
+        /** Length of the tick line */ tickLength?: number;
         /** Format tick labels */ format?: FormatType | undefined;
         /** Props to apply to each tick label */ tickLabelProps?: Partial<ComponentProps<Text>> | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        transitionIn?: typeof fade | (() => void) | undefined;
-        transitionInParams?: TransitionParams | undefined;
+        transitionIn?: typeof fade | (() => void);
+        transitionInParams?: TransitionParams;
         scale?: any;
     };
     events: {

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

@@ -8,16 +8,16 @@ declare const __propDef: {
         x?: any;
         y?: any;
         fill?: string | undefined;
-        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;
+        stroke?: string;
+        strokeWidth?: number;
+        radius?: number;
+        rounded?: "all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        inset?: number;
         groupBy?: string | undefined;
-        groupPaddingInner?: number | undefined;
-        groupPaddingOuter?: number | undefined;
-        spring?: ComponentProps<Rect>['spring'];
-        tweened?: ComponentProps<Rect>['tweened'];
+        groupPaddingInner?: number;
+        groupPaddingOuter?: number;
+        spring?: ComponentProps<Rect>["spring"];
+        tweened?: ComponentProps<Rect>["tweened"];
     };
     events: {
         click: MouseEvent;

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

@@ -6,15 +6,15 @@ declare const __propDef: {
         [x: string]: any;
         x?: any;
         y?: any;
-        stroke?: string | undefined;
-        strokeWidth?: number | undefined;
-        radius?: number | undefined;
-        inset?: number | undefined;
-        spring?: ComponentProps<Rect>['spring'];
-        tweened?: ComponentProps<Rect>['tweened'];
+        stroke?: string;
+        strokeWidth?: number;
+        radius?: number;
+        inset?: number;
+        spring?: ComponentProps<Rect>["spring"];
+        tweened?: ComponentProps<Rect>["tweened"];
         groupBy?: string | undefined;
-        groupPaddingInner?: number | undefined;
-        groupPaddingOuter?: number | undefined;
+        groupPaddingInner?: number;
+        groupPaddingOuter?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
-        stdDeviation?: number | undefined;
+        id?: string;
+        stdDeviation?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -30,8 +30,8 @@ declare const __propDef: {
             x1: number;
             y1: number;
         });
-        spring?: boolean | Parameters<typeof motionScale>[1]['spring'];
-        tweened?: boolean | Parameters<typeof motionScale>[1]['tweened'];
+        spring?: boolean | Parameters<typeof motionScale>[1]["spring"];
+        tweened?: boolean | Parameters<typeof motionScale>[1]["tweened"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,32 +3,32 @@ import type { SVGAttributes } from 'svelte/elements';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        axis?: "x" | "y" | "both" | undefined;
-        handleSize?: number | undefined;
-        resetOnEnd?: boolean | undefined;
-        xDomain?: [number | null, number | null] | undefined;
-        yDomain?: [number | null, number | null] | undefined;
+        axis?: "x" | "y" | "both";
+        handleSize?: number;
+        resetOnEnd?: boolean;
+        xDomain?: [number | null, number | null];
+        yDomain?: [number | null, number | null];
         range?: SVGAttributes<SVGRectElement> | undefined;
         handle?: SVGAttributes<SVGRectElement> | undefined;
         classes?: {
-            root?: string | undefined;
-            frame?: string | undefined;
-            range?: string | undefined;
-            handle?: string | undefined;
-        } | undefined;
+            root?: string;
+            frame?: string;
+            range?: string;
+            handle?: string;
+        };
     };
     events: {
         change: CustomEvent<{
-            xDomain?: [any, any] | undefined;
-            yDomain?: [any, any] | undefined;
+            xDomain?: [any, any];
+            yDomain?: [any, any];
         }>;
         brushStart: CustomEvent<{
-            xDomain?: [any, any] | undefined;
-            yDomain?: [any, any] | undefined;
+            xDomain?: [any, any];
+            yDomain?: [any, any];
         }>;
         brushEnd: CustomEvent<{
-            xDomain?: [any, any] | undefined;
-            yDomain?: [any, any] | undefined;
+            xDomain?: [any, any];
+            yDomain?: [any, any];
         }>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -1,16 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
 import type { TooltipContextValue } from './TooltipContext.svelte';
+import MonthPath from './MonthPath.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
         start: Date;
         end: Date;
         cellSize?: number | [number, number] | undefined;
-        monthPath?: boolean | Partial<{
-            [x: string]: any;
-            date: Date;
-            cellSize: number | [number, number];
-        }> | undefined;
+        monthPath?: boolean | Partial<ComponentProps<MonthPath>>;
         tooltip?: TooltipContextValue | undefined;
     };
     events: {

package/dist/components/Chart.svelte

@@ -115,7 +115,7 @@ onMount(() => {
 >
   <!-- Apply `fitGeojson` using TransformContext instead of GeoContext if `applyTransform` is used -->
   {@const initialTransform =
-    geo?.applyTransform && geo?.fitGeojson && geo?.projection
+    geo?.applyTransform?.includes('translate') && geo?.fitGeojson && geo?.projection
       ? geoFitObjectTransform(geo.projection(), [width, height], geo.fitGeojson)
       : undefined}
 

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

@@ -14,16 +14,16 @@ import TransformContext from './TransformContext.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        data?: any[] | undefined;
+        data?: any[];
         x?: (string | number | ((d: any) => number)) | (string | number | ((d: any) => number))[] | undefined;
         y?: (string | number | ((d: any) => number)) | (string | number | ((d: any) => number))[] | undefined;
         yScale?: Function | undefined;
-        xBaseline?: number | null | undefined;
-        yBaseline?: number | null | undefined;
+        xBaseline?: number | null;
+        yBaseline?: number | null;
         geo?: Partial<ComponentProps<GeoContext>> | undefined;
         tooltip?: Partial<ComponentProps<TooltipContext>> | boolean | undefined;
         transform?: Partial<ComponentProps<TransformContext>> | undefined;
-        transformContext?: TransformContext | undefined;
+        transformContext?: TransformContext;
     };
     events: {
         transform: CustomEvent<{
@@ -49,7 +49,7 @@ declare const __propDef: {
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
             transform: {
                 scale: number;
-                setScale: (value: number, options?: import("../stores/motionStore").MotionOptions | undefined) => void;
+                setScale: (value: number, options?: import("../stores/motionStore").MotionOptions) => void;
                 translate: {
                     x: number;
                     y: number;
@@ -57,14 +57,14 @@ declare const __propDef: {
                 setTranslate: (point: {
                     x: number;
                     y: number;
-                }, options?: import("../stores/motionStore").MotionOptions | undefined) => void;
+                }, options?: import("../stores/motionStore").MotionOptions) => void;
                 zoomTo: (center: {
                     x: number;
                     y: number;
                 }, rect?: {
                     width: number;
                     height: number;
-                } | undefined) => void;
+                }) => void;
                 reset: () => void;
             };
             tooltip: {

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        full?: boolean | undefined;
+        full?: boolean;
     };
     events: {
         click: CustomEvent<any>;

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

@@ -3,12 +3,12 @@ import type { spring as springStore, tweened as tweenedStore } from 'svelte/moti
 declare const __propDef: {
     props: {
         [x: string]: any;
-        cx?: number | undefined;
-        initialCx?: number | undefined;
-        cy?: number | undefined;
-        initialCy?: number | undefined;
-        r?: number | undefined;
-        initialR?: number | undefined;
+        cx?: number;
+        initialCx?: number;
+        cy?: number;
+        initialCy?: number;
+        r?: number;
+        initialR?: number;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };

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

@@ -3,9 +3,9 @@ import type { spring as springStore, tweened as tweenedStore } from 'svelte/moti
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string | undefined;
-        cx?: number | undefined;
-        cy?: number | undefined;
+        id?: string;
+        cx?: number;
+        cy?: number;
         r: number;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string | undefined;
+        id?: string;
         useId?: string | undefined;
-        disabled?: boolean | undefined;
+        disabled?: boolean;
     };
     events: {
         click: MouseEvent;

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

@@ -3,9 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         interpolator: (t: number) => string;
-        steps?: number | undefined;
-        height?: string | number | undefined;
-        width?: string | number | undefined;
+        steps?: number;
+        height?: string | number;
+        width?: string | number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/ForceSimulation.svelte

@@ -1,49 +1,205 @@
-<script>import { getContext } from 'svelte';
+<script>import { createEventDispatcher, getContext } from 'svelte';
 import { forceSimulation } from 'd3-force';
 const { data } = getContext('LayerCake');
+const dispatch = createEventDispatcher();
 export let forces;
 export let alpha = 1;
 export let alphaTarget = 0;
 export let alphaDecay = 1 - Math.pow(0.001, 1 / 300);
 export let alphaMin = 0.001;
 export let velocityDecay = 0.4;
-/** Clone data since simulation mutates original */
-export let cloneData = false;
+export let alphaResponse = undefined;
+export let stopped = false;
 let _static = false;
 /** If true, will only update nodes after simulation has completed */
 export { _static as static };
-let simulation = forceSimulation(cloneData ? structuredClone($data) : $data);
+/** Clone data since simulation mutates original */
+export const cloneData = false;
+// MARK: Private Props
+let nodes = [];
+const simulation = forceSimulation().stop();
+// d3.Simulation does not provide a `.forces()` getter, so we need to
+// keep track of previous forces ourselves, for diffing against `forces`.
+let previousForces = {};
+let paused = true;
+// MARK: Reactivity Effects
+$: {
+    // Any time the `stopped` prop gets toggled we
+    // update the running state of the simulation:
+    if (stopped) {
+        pauseDynamicSimulation();
+    }
+    else {
+        runOrResumeSimulation();
+    }
+}
+$: {
+    // Any time the `static` prop gets toggled we
+    // either attach or detach our internal event listeners:
+    if (_static) {
+        simulation.on('tick', null).on('end', null);
+    }
+    else {
+        simulation.on('tick', onTick).on('end', onEnd);
+    }
+    runOrResumeSimulation();
+}
+$: {
+    // Any time the `$data` store gets changed we
+    // pass them to the internal d3 simulation object:
+    pushNodesToSimulation($data);
+    runOrResumeSimulation();
+}
 $: {
+    // Any time the `forces` prop gets changed we
+    // pass them to the internal d3 simulation object:
+    pushForcesToSimulation(forces);
+    runOrResumeSimulation();
+}
+$: {
+    // Any time the `alpha` prop gets changed we
+    // pass it to the internal d3 simulation object:
+    pushAlphaToSimulation(alpha);
+    // Only resume the simulation as long as `alpha`
+    // is above the cut-off threshold of `alphaMin`,
+    // otherwise our simulation will never terminate:
+    if (simulation.alpha() >= simulation.alphaMin()) {
+        runOrResumeSimulation();
+    }
+}
+$: {
+    // Any time any of the the alpha props get changed we
+    // pass them all to the internal d3 simulation object
+    // (they are cheap, so passing them as a batch is fine!):
+    // We read `simulation.alpha()` instead of `alpha` here, so
+    // Svelte does not trigger this block on any change to `alpha`:
+    let alphaValue = simulation.alpha();
+    if (alphaTarget > alphaValue && alphaValue < alphaMin) {
+        // Lift `alpha` from below `alphaMin` in order to give the simulation
+        // a chance to get revived if an `alphaTarget > alpha` is provided:
+        alphaValue = alphaMin;
+    }
     simulation
-        .alpha(alpha)
+        .alpha(alphaValue)
         .alphaTarget(alphaTarget)
         .alphaMin(alphaMin)
         .alphaDecay(alphaDecay)
-        .velocityDecay(velocityDecay)
-        .restart();
-    if (_static) {
-        // TODO: Not sure why it needs to be recreated when static
-        simulation = forceSimulation(cloneData ? structuredClone($data) : $data);
-        simulation.stop();
-        Object.entries(forces).forEach(([name, force]) => {
+        .velocityDecay(velocityDecay);
+    runOrResumeSimulation();
+}
+// MARK: Push State
+function pushAlphaToSimulation(alpha) {
+    simulation.alpha(alpha);
+}
+function pushNodesToSimulation(nodes) {
+    simulation.nodes(cloneData ? structuredClone(nodes) : nodes);
+}
+function pushForcesToSimulation(forces) {
+    // Evict obsolete forces:
+    Object.keys(previousForces).forEach((name) => {
+        if (!(name in forces)) {
+            simulation.force(name, null);
+        }
+    });
+    // Add new or overwrite existing forces:
+    Object.entries(forces).forEach(([name, force]) => {
+        if (!(name in previousForces) || force !== previousForces[name]) {
             simulation.force(name, force);
-        });
-        for (let i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
-            simulation.tick();
         }
-        nodes = simulation.nodes();
+    });
+    previousForces = forces;
+}
+// MARK: Pull State
+function pullNodesFromSimulation() {
+    nodes = simulation.nodes();
+}
+function pullAlphaFromSimulation() {
+    alpha = simulation.alpha();
+}
+// MARK: Resume / Pause
+function runOrResumeSimulation() {
+    if (_static) {
+        runStaticSimulationToCompletion();
     }
     else {
-        // When variables change, set forces and restart the simulation
-        Object.entries(forces).forEach(([name, force]) => {
-            simulation.force(name, force);
-        });
+        resumeDynamicSimulation();
     }
 }
-let nodes = [];
-simulation.on('tick', () => {
-    nodes = simulation.nodes();
-});
+function runStaticSimulationToCompletion() {
+    if (stopped) {
+        // If a simulation is marked as stopped, then it should not get started.
+        return;
+    }
+    if (!_static) {
+        // Only static simulations are run to completion.
+        return;
+    }
+    if (!paused) {
+        // Pause any possibly still running dynamic simulation:
+        pauseDynamicSimulation();
+    }
+    const ticks = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
+    pushAlphaToSimulation(1.0);
+    onStart();
+    for (let i = 0; i < ticks; ++i) {
+        simulation.tick();
+    }
+    pullNodesFromSimulation();
+    pullAlphaFromSimulation();
+    onEnd();
+}
+function resumeDynamicSimulation() {
+    if (!paused) {
+        // No need to restart an already running simulation.
+        return;
+    }
+    if (stopped) {
+        // If a simulation is marked as stopped, then it should not get resumed.
+        return;
+    }
+    if (_static) {
+        // Only dynamic simulations can be resumed.
+        return;
+    }
+    onStart();
+    simulation.restart();
+    // No need to call `onEnd();` for dynamic simulations
+    // as the simulation itself takes care of firing `on:end`,
+    // which then gets calls `onEnd();` for us.
+}
+function pauseDynamicSimulation() {
+    if (paused) {
+        // No need to pause an already paused simulation.
+        return;
+    }
+    simulation.stop();
+    onEnd();
+}
+// MARK: Event Listeners
+function onStart() {
+    if (!paused) {
+        // Avoid double-emissions of `start` event due to race conditions.
+        return;
+    }
+    paused = false;
+    dispatch('start');
+}
+function onTick() {
+    pullNodesFromSimulation();
+    pullAlphaFromSimulation();
+    dispatch('tick', {
+        alpha,
+        alphaTarget,
+    });
+}
+function onEnd() {
+    if (paused) {
+        // Avoid double-emissions of `end` event due to race conditions.
+        return;
+    }
+    paused = true;
+    dispatch('end');
+}
 </script>
 
 <slot {nodes} {simulation} />

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

@@ -3,15 +3,25 @@ import { type Force } from 'd3-force';
 declare const __propDef: {
     props: {
         forces: Record<string, Force<any, any>>;
-        alpha?: number | undefined;
-        alphaTarget?: number | undefined;
-        alphaDecay?: number | undefined;
-        alphaMin?: number | undefined;
-        velocityDecay?: number | undefined;
-        /** Clone data since simulation mutates original */ cloneData?: boolean | undefined;
-        /** If true, will only update nodes after simulation has completed */ static?: boolean | undefined;
+        alpha?: number;
+        alphaTarget?: number;
+        alphaDecay?: number;
+        alphaMin?: number;
+        velocityDecay?: number;
+        alphaResponse?: ((alpha: number, alphaTarget: number) => number) | undefined;
+        stopped?: boolean;
+        /** If true, will only update nodes after simulation has completed */ static?: boolean;
+        /** Clone data since simulation mutates original */ cloneData?: boolean;
     };
     events: {
+        start: CustomEvent<null>;
+        tick: CustomEvent<{
+            alpha: number;
+            alphaTarget: number;
+        }>;
+        change: CustomEvent<null>;
+        end: CustomEvent<null>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
@@ -25,5 +35,6 @@ export type ForceSimulationProps = typeof __propDef.props;
 export type ForceSimulationEvents = typeof __propDef.events;
 export type ForceSimulationSlots = typeof __propDef.slots;
 export default class ForceSimulation extends SvelteComponentTyped<ForceSimulationProps, ForceSimulationEvents, ForceSimulationSlots> {
+    get cloneData(): NonNullable<boolean | undefined>;
 }
 export {};