layerchart 0.13.0 → 0.13.2

package/components/Arc.svelte.d.ts

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

package/components/Area.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
-import { area as d3Area } from 'd3-shape';
-import { max } from 'd3-array';
+import { Area, area as d3Area } from 'd3-shape';
+import { min, max } from 'd3-array';
 import { interpolatePath } from 'd3-interpolate-path';
 import { motionStore } from '../stores/motionStore';
 import Path from './Path.svelte';

package/components/Area.svelte.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
 import type { tweened as tweenedStore } from 'svelte/motion';
-import { Area } from 'd3-shape';
 import type { CurveFactory } from 'd3-shape';
 declare const __propDef: {
     props: {
@@ -9,13 +8,13 @@ declare const __propDef: {
         x?: any;
         y0?: any;
         y1?: any;
-        pathData?: string;
-        clipPath?: string;
+        pathData?: string | undefined;
+        clipPath?: string | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        curve?: CurveFactory;
-        defined?: Parameters<Area<any>['defined']>[0];
-        color?: string;
-        opacity?: number;
+        curve?: CurveFactory | undefined;
+        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        color?: string | undefined;
+        opacity?: number | undefined;
         line?: boolean | any;
     };
     events: {

package/components/AreaStack.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type { CurveFactory } from 'd3-shape';
 declare const __propDef: {
     props: {
-        curve?: CurveFactory;
-        defined?: (d: any, index: number, data: any[]) => boolean;
-        opacity?: number;
+        curve?: CurveFactory | undefined;
+        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        opacity?: number | undefined;
         line?: boolean | any;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };

package/components/AxisX.svelte.d.ts

@@ -1,17 +1,29 @@
 import { SvelteComponentTyped } from "svelte";
 import type { FormatType } from 'svelte-ux/utils/format';
-import Text from './Text.svelte';
-import type { ComponentProps } from 'svelte-ux';
 declare const __propDef: {
     props: {
         gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
         formatTick?: FormatType;
-        ticks?: any;
-        xTick?: any;
-        yTick?: number;
-        dxTick?: number;
-        dyTick?: number;
-        labelProps?: ComponentProps<Text>;
+        ticks?: undefined;
+        xTick?: undefined;
+        yTick?: number | undefined;
+        dxTick?: number | undefined;
+        dyTick?: number | undefined;
+        labelProps?: {
+            [x: string]: any;
+            value?: string | number | undefined;
+            width?: number | undefined;
+            x?: string | number | undefined;
+            y?: string | number | undefined;
+            dx?: string | number | undefined;
+            dy?: string | number | undefined;
+            lineHeight?: string | undefined;
+            capHeight?: string | undefined;
+            scaleToFit?: boolean | undefined;
+            textAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
+            verticalAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
+            rotate?: number | undefined;
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/AxisY.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from 'svelte';
+<script>import { getContext, SvelteComponentTyped } from 'svelte';
 import { format } from 'svelte-ux/utils/format';
-import { min } from 'd3-array';
+import { min, max } from 'd3-array';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
 const { padding, xRange, yScale, width } = getContext('LayerCake');

package/components/AxisY.svelte.d.ts

@@ -1,17 +1,29 @@
 import { SvelteComponentTyped } from "svelte";
 import type { FormatType } from 'svelte-ux/utils/format';
-import Text from './Text.svelte';
-import type { ComponentProps } from 'svelte-ux';
 declare const __propDef: {
     props: {
         gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
-        ticks?: number | Function;
+        ticks?: number | Function | undefined;
         formatTick?: FormatType;
-        xTick?: number;
-        yTick?: number;
-        dxTick?: number;
-        dyTick?: number;
-        labelProps?: ComponentProps<Text>;
+        xTick?: number | undefined;
+        yTick?: number | undefined;
+        dxTick?: number | undefined;
+        dyTick?: number | undefined;
+        labelProps?: {
+            [x: string]: any;
+            value?: string | number | undefined;
+            width?: number | undefined;
+            x?: string | number | undefined;
+            y?: string | number | undefined;
+            dx?: string | number | undefined;
+            dy?: string | number | undefined;
+            lineHeight?: string | undefined;
+            capHeight?: string | undefined;
+            scaleToFit?: boolean | undefined;
+            textAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
+            verticalAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
+            rotate?: number | undefined;
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Bars.svelte.d.ts

@@ -9,23 +9,23 @@ declare const __propDef: {
             value: any;
             item: any;
             index: number;
-        }) => string);
-        opacity?: number;
-        stroke?: string;
-        strokeWidth?: number;
-        radius?: number;
-        getKey?: (item: any, index: number) => any;
-        getProps?: (obj: {
+        }) => string) | undefined;
+        opacity?: number | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | undefined;
+        radius?: number | undefined;
+        getKey?: ((item: any, index: number) => any) | undefined;
+        getProps?: ((obj: {
             value: any;
             item: any;
             index: number;
-        }) => any;
-        widthOffset?: number;
+        }) => any) | undefined;
+        widthOffset?: number | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        groupBy?: string;
-        groupPaddingInner?: number;
-        groupPaddingOuter?: number;
+        groupBy?: string | undefined;
+        groupPaddingInner?: number | undefined;
+        groupPaddingOuter?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Baseline.svelte

@@ -1,5 +1,6 @@
-<script>import { getContext } from 'svelte';
-import { min, max } from 'd3-array';
+<script>import { min, max } from 'd3-array';
+import { getContext } from 'svelte';
+import { cls } from 'svelte-ux/utils/styles';
 import { isScaleBand } from '../utils/scales';
 const { xRange, yScale, yRange } = getContext('LayerCake');
 export let x = false;
@@ -13,17 +14,17 @@ export let y = false;
 			x2={max($xRange) || 0}
 			y1={isScaleBand($yScale) ? max($yRange) : $yScale(0) || 0}
 			y2={isScaleBand($yScale) ? max($yRange) : $yScale(0) || 0}
-			class="baseline"
+			class={cls('stroke-gray-400', $$props.class)}
 		/>
 	{/if}
 
 	{#if y}
-		<line x1={0} x2={0} y1={min($yRange) || 0} y2={max($yRange) || 0} class="baseline" />
+		<line
+			x1={0}
+			x2={0}
+			y1={min($yRange) || 0}
+			y2={max($yRange) || 0}
+			class={cls('stroke-gray-400', $$props.class)}
+		/>
 	{/if}
 </g>
-
-<style>
-	.baseline {
-		stroke: #777;
-	}
-</style>

package/components/Baseline.svelte.d.ts

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

package/components/Chart.svelte.d.ts

@@ -7,12 +7,12 @@ import TooltipContext from './TooltipContext.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        data?: any[];
-        x?: (string | ((d: any) => number)) | (string | ((d: any) => number))[];
-        y?: (string | ((d: any) => number)) | (string | ((d: any) => number))[];
-        yScale?: Function;
-        xBaseline?: number | null;
-        yBaseline?: number | null;
+        data?: any[] | undefined;
+        x?: (string | ((d: any) => number)) | (string | ((d: any) => number))[] | undefined;
+        y?: (string | ((d: any) => number)) | (string | ((d: any) => number))[] | undefined;
+        yScale?: Function | undefined;
+        xBaseline?: number | null | undefined;
+        yBaseline?: number | null | undefined;
         tooltip?: ComponentProps<TooltipContext> | undefined;
     };
     events: {

package/components/Circle.svelte.d.ts

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

package/components/CircleClipPath.svelte.d.ts

@@ -2,9 +2,9 @@ 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;
-        cx?: number;
-        cy?: number;
+        /** Unique id for clipPath */ id?: string | undefined;
+        cx?: number | undefined;
+        cy?: number | undefined;
         r: number;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

package/components/ClipPath.svelte.d.ts

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

package/components/ConnectedPoints.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        offsetX?: number | ((value: number, context: any) => number);
-        offsetY?: number | ((value: number, context: any) => number);
+        offsetX?: (number | ((value: number, context: any) => number)) | undefined;
+        offsetY?: (number | ((value: number, context: any) => number)) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Group.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;
-        x?: number;
-        y?: number;
-        center?: boolean;
+        x?: number | undefined;
+        y?: number | undefined;
+        center?: boolean | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };

package/components/HighlightLine.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import 'svelte/store';
+import { get } from 'svelte/store';
 import { max } from 'd3-array';
 import { isScaleBand } from '../utils/scales';
 import Circle from './Circle.svelte';

package/components/HighlightLine.svelte.d.ts

@@ -5,8 +5,8 @@ declare const __propDef: {
             value: any;
             item: any;
             index: number;
-        }) => string);
-        axis?: 'x' | 'y' | 'both' | 'none';
+        }) => string) | undefined;
+        axis?: "x" | "y" | "none" | "both" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/HighlightRect.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        axis?: 'x' | 'y' | 'both';
+        axis?: "x" | "y" | "both" | undefined;
     };
     events: {
         click: MouseEvent;

package/components/Labels.svelte

@@ -7,10 +7,10 @@ import { getContext } from 'svelte';
 import { scaleBand } from 'd3-scale';
 import { max, min } from 'd3-array';
 import Text from './Text.svelte';
-import { formatNumberAsStyle } from 'svelte-ux/utils/number';
+import { formatNumberAsStyle, FormatNumberStyle } from 'svelte-ux/utils/number';
 import { isScaleBand } from '../utils/scales';
 import { greatestAbs, unique } from 'svelte-ux/utils/array';
-import { format as formatValue } from 'svelte-ux/utils/format';
+import { format as formatValue, FormatType } from 'svelte-ux/utils/format';
 const { flatData, xGet, yRange, xScale, yScale, x, y, custom } = getContext('LayerCake');
 export let orientation = 'auto';
 export let significantDigits = 3;

package/components/Labels.svelte.d.ts

@@ -4,12 +4,12 @@ import { FormatType } from 'svelte-ux/utils/format';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        orientation?: 'outside' | 'inside' | 'auto';
-        significantDigits?: number;
+        orientation?: "outside" | "inside" | "auto" | undefined;
+        significantDigits?: number | undefined;
         format?: FormatType;
         formatStyle?: FormatNumberStyle;
-        overlap?: boolean;
-        groupBy?: string;
+        overlap?: boolean | undefined;
+        groupBy?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Legend.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        formatLabel?: (label: string) => string;
+        formatLabel?: ((label: string) => string) | undefined;
         items?: any;
     };
     events: {

package/components/LinearGradient.svelte.d.ts

@@ -6,12 +6,12 @@ declare const __propDef: {
         from: string | boolean;
         via: string;
         to: string | boolean;
-        vertical?: boolean;
-        x1?: string;
-        y1?: string;
-        x2?: string;
-        y2?: string;
-        rotate?: number;
+        vertical?: boolean | undefined;
+        x1?: string | undefined;
+        y1?: string | undefined;
+        x2?: string | undefined;
+        y2?: string | undefined;
+        rotate?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Link.svelte.d.ts

@@ -4,16 +4,16 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
-        orientation?: 'vertical' | 'horizontal';
-        sankey?: boolean;
-        source?: (d: any) => any;
-        target?: (d: any) => any;
-        x?: (d: any) => any;
-        y?: (d: any) => any;
-        curve?: import("d3-shape").CurveFactory;
+        orientation?: "vertical" | "horizontal" | undefined;
+        sankey?: boolean | undefined;
+        source?: ((d: any) => any) | undefined;
+        target?: ((d: any) => any) | undefined;
+        x?: ((d: any) => any) | undefined;
+        y?: ((d: any) => any) | undefined;
+        curve?: import("d3-shape").CurveFactory | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        color?: string;
-        width?: any;
+        color?: string | undefined;
+        width?: undefined;
     };
     events: {
         click: MouseEvent;

package/components/Partition.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        orientation?: 'vertical' | 'horizontal';
+        orientation?: "vertical" | "horizontal" | undefined;
         size?: [number, number] | undefined;
         /**
              * see: https://github.com/d3/d3-hierarchy#tree_nodeSize

package/components/Path.svelte.d.ts

@@ -1,18 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
 import type { tweened as tweenedStore } from 'svelte/motion';
-import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
 declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
         x?: any;
         y?: any;
-        pathData?: string;
+        pathData?: string | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        curve?: CurveFactory | CurveFactoryLineOnly;
-        defined?: Parameters<Line<any>['defined']>[0];
-        color?: string;
-        width?: any;
+        curve?: CurveFactory | CurveFactoryLineOnly | undefined;
+        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        color?: string | undefined;
+        width?: undefined;
     };
     events: {
         click: MouseEvent;

package/components/Pie.svelte.d.ts

@@ -6,35 +6,35 @@ declare const __propDef: {
         data?: any;
         /**
              * Range [min,max] in degrees.  See also startAngle/endAngle
-             */ range?: number[];
+             */ range?: number[] | undefined;
         /**
              * Start angle in radians
-             */ startAngle?: number;
+             */ startAngle?: number | undefined;
         /**
              * End angle in radians
-             */ endAngle?: number;
+             */ endAngle?: number | undefined;
         /**
              * Define innerRadius.
              *   value >= 1: discrete value
              *   value >  0: percent of `outerRadius`
              *   value <  0: offset of `outerRadius`
              *   default: yRange min
-             */ innerRadius?: any;
+             */ innerRadius?: undefined;
         /**
              * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
-             */ outerRadius?: any;
-        cornerRadius?: number;
-        padAngle?: number;
+             */ outerRadius?: undefined;
+        cornerRadius?: number | undefined;
+        padAngle?: number | undefined;
         color?: string | ((obj: {
             value: any;
             item: any;
             index: number;
-        }) => string);
+        }) => string) | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         /**
              * Offset all arcs from center
-             */ offset?: number;
+             */ offset?: number | undefined;
         /**
              * Tooltip context to setup mouse events to show tooltip for related data
              */ tooltip?: TooltipContextValue | undefined;

package/components/Points.svelte.d.ts

@@ -2,14 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        r?: number;
-        offsetX?: number | ((value: number, context: any) => number);
-        offsetY?: number | ((value: number, context: any) => number);
+        r?: number | undefined;
+        offsetX?: (number | ((value: number, context: any) => number)) | undefined;
+        offsetY?: (number | ((value: number, context: any) => number)) | undefined;
         color?: string | ((obj: {
             value: any;
             item: any;
             index: number;
-        }) => string);
+        }) => string) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Rect.svelte

@@ -1,4 +1,4 @@
-<script>import { motionStore, resolveOptions } from '../stores/motionStore';
+<script>import { motionStore, resolveOptions, SpringOptions, TweenedOptions } from '../stores/motionStore';
 export let x = 0;
 export let y = 0;
 export let width;

package/components/RectClipPath.svelte.d.ts

@@ -2,9 +2,9 @@ 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;
-        x?: number;
-        y?: number;
+        /** Unique id for clipPath */ id?: string | undefined;
+        x?: number | undefined;
+        y?: number | undefined;
         width: number;
         height: number;
         spring?: boolean | Parameters<typeof springStore>[1];

package/components/Sankey.svelte.d.ts

@@ -2,16 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 import { type SankeyNode } from 'd3-sankey';
 declare const __propDef: {
     props: {
-        nodes?: (d: any) => any;
-        nodeId?: (d: any) => any;
+        nodes?: ((d: any) => any) | undefined;
+        nodeId?: ((d: any) => any) | undefined;
         /**
              * see: https://github.com/d3/d3-sankey#alignments
-             */ nodeAlign?: "left" | "right" | "center" | "justify" | ((node: SankeyNode<any, any>, n: number) => number);
-        nodeWidth?: number;
-        nodePadding?: number;
-        nodeSort?: any;
-        links?: (d: any) => any;
-        linkSort?: any;
+             */ nodeAlign?: "left" | "right" | "center" | "justify" | ((node: SankeyNode<any, any>, n: number) => number) | undefined;
+        nodeWidth?: number | undefined;
+        nodePadding?: number | undefined;
+        nodeSort?: undefined;
+        links?: ((d: any) => any) | undefined;
+        linkSort?: undefined;
     };
     events: {
         update: CustomEvent<any>;

package/components/Text.svelte.d.ts

@@ -2,18 +2,18 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string | number;
-        width?: number;
-        x?: string | number;
-        y?: string | number;
-        dx?: string | number;
-        dy?: string | number;
-        lineHeight?: string;
-        capHeight?: string;
-        scaleToFit?: boolean;
-        textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
-        verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
-        rotate?: number;
+        value?: string | number | undefined;
+        width?: number | undefined;
+        x?: string | number | undefined;
+        y?: string | number | undefined;
+        dx?: string | number | undefined;
+        dy?: string | number | undefined;
+        lineHeight?: string | undefined;
+        capHeight?: string | undefined;
+        scaleToFit?: boolean | undefined;
+        textAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
+        verticalAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
+        rotate?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Threshold.svelte

@@ -5,7 +5,7 @@ See also:
 */
 import { getContext } from 'svelte';
 import { area as d3Area, line as d3Line } from 'd3-shape';
-import { max } from 'd3-array';
+import { min, max } from 'd3-array';
 const { data: contextData, xGet, yGet, yRange } = getContext('LayerCake');
 // Properties to override what is used from context
 export let data = undefined; // TODO: Update Type

package/components/Threshold.svelte.d.ts

@@ -6,23 +6,23 @@ declare const __propDef: {
         x?: any;
         y0?: any;
         y1?: any;
-        curve?: CurveFactory;
-        defined?: (d: [number, number], index: number, data: [number, number][]) => boolean;
-        id?: string;
+        curve?: CurveFactory | undefined;
+        defined?: ((d: [number, number], index: number, data: [number, number][]) => boolean) | undefined;
+        id?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         pathAbove: {
-            areaPathData: string;
+            areaPathData: string | null;
             clipPath: string;
-            linePathData: string;
+            linePathData: string | null;
         };
         pathBelow: {
-            areaPathData: string;
+            areaPathData: string | null;
             clipPath: string;
-            linePathData: string;
+            linePathData: string | null;
         };
         default: {};
     };

package/components/Tooltip.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        topOffset?: number;
-        leftOffset?: number;
-        contained?: 'container' | false;
-        animate?: boolean;
-        header?: (data: any) => any;
+        topOffset?: number | undefined;
+        leftOffset?: number | undefined;
+        contained?: false | "container" | undefined;
+        animate?: boolean | undefined;
+        header?: ((data: any) => any) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/TooltipContext.svelte

@@ -100,8 +100,8 @@ function showTooltip(event, tooltipData) {
     clearTimeout(hideTimeoutId);
     const referenceNode = event.target.closest('.layercake-container');
     const point = localPoint(referenceNode, event);
-    const localX = point?.x - $padding.left ?? 0;
-    const localY = point?.y - $padding.top ?? 0;
+    const localX = point?.x ?? 0;
+    const localY = point?.y ?? 0;
     // If tooltipData not provided already (voronoi, etc), attempt to find it
     // TODO: When using bisect-x/y/band, values should be sorted.  Tyipcally are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
@@ -279,7 +279,7 @@ $: if (mode === 'bounds' || mode === 'band') {
 	<Html>
 		<div
 			class="absolute"
-			style="width: {$width}px; height: {$height}px; background: _red; z-index: 9999"
+			style="width: {$width}px; height: {$height}px; background: _rgba(255 0 0 / .25); z-index: 9999"
 			on:touchstart={showTooltip}
 			on:touchmove={showTooltip}
 			on:mousemove={showTooltip}

package/components/TooltipContext.svelte.d.ts

@@ -12,12 +12,12 @@ export type TooltipContext = Readable<TooltipContextValue>;
 export declare function tooltipContext(): TooltipContext;
 declare const __propDef: {
     props: {
-        mode?: 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual';
-        snapToDataX?: boolean;
-        snapToDataY?: boolean;
-        findTooltipData?: 'closest' | 'left' | 'right';
-        radius?: number;
-        debug?: boolean;
+        mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual" | undefined;
+        snapToDataX?: boolean | undefined;
+        snapToDataY?: boolean | undefined;
+        findTooltipData?: "closest" | "left" | "right" | undefined;
+        radius?: number | undefined;
+        debug?: boolean | undefined;
     };
     events: {
         click: CustomEvent<{
@@ -31,7 +31,7 @@ declare const __propDef: {
             tooltip: {
                 top: number;
                 left: number;
-                data: any;
+                data: null;
                 show: (event: MouseEvent | TouchEvent, tooltipData?: any) => void;
                 hide: () => void;
             };

package/components/TooltipItem.svelte

@@ -1,6 +1,8 @@
-<script>import clsx from 'clsx';
+<script>import { cls } from 'svelte-ux/utils/styles';
+import { format as formatUtil } from 'svelte-ux/utils/format';
 export let label;
 export let value = undefined; // Can be pass as slot
+export let format = undefined;
 export let valueAlign = 'left';
 </script>
 
@@ -9,10 +11,14 @@ export let valueAlign = 'left';
 </div>
 
 <div
-	class={clsx('text-sm tabular-nums', {
-		'text-right': valueAlign === 'right',
-		'text-center': valueAlign === 'center'
-	})}
+	class={cls(
+		'text-sm tabular-nums',
+		{
+			'text-right': valueAlign === 'right',
+			'text-center': valueAlign === 'center'
+		},
+		$$props.class
+	)}
 >
-	<slot>{value}</slot>
+	<slot>{format ? formatUtil(value, format) : value}</slot>
 </div>

package/components/TooltipItem.svelte.d.ts

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { FormatType } from 'svelte-ux/utils/format';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label: any;
         value?: any;
-        valueAlign?: 'left' | 'right' | 'center';
+        format?: FormatType;
+        valueAlign?: "left" | "right" | "center" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Tree.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import { tree as d3Tree } from 'd3-hierarchy';
+import { HierarchyPointNode, tree as d3Tree } from 'd3-hierarchy';
 const { data, width, height, padding } = getContext('LayerCake');
 /**
  * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.

package/components/Tree.svelte.d.ts

@@ -11,8 +11,8 @@ declare const __propDef: {
              */ nodeSize?: [number, number] | undefined;
         /**
              * see: https://github.com/d3/d3-hierarchy#tree_separation
-             */ separation?: (a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number;
-        orientation?: 'vertical' | 'horizontal';
+             */ separation?: ((a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number) | undefined;
+        orientation?: "vertical" | "horizontal" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Treemap.svelte.d.ts

@@ -2,14 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 import * as d3 from 'd3-hierarchy';
 declare const __propDef: {
     props: {
-        tile?: typeof d3.treemapSquarify | 'binary' | 'squarify' | 'resquarify' | 'dice' | 'slice' | 'sliceDice';
-        padding?: number;
-        paddingInner?: number;
-        paddingOuter?: number;
-        paddingTop?: number;
-        paddingBottom?: number;
-        paddingLeft?: any;
-        paddingRight?: any;
+        tile?: d3.RatioSquarifyTilingFactory | "binary" | "squarify" | "resquarify" | "dice" | "slice" | "sliceDice" | undefined;
+        padding?: number | undefined;
+        paddingInner?: number | undefined;
+        paddingOuter?: number | undefined;
+        paddingTop?: number | undefined;
+        paddingBottom?: number | undefined;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
         selected?: any;
     };
     events: {

package/components/Zoom.svelte.d.ts

@@ -4,18 +4,18 @@ declare const __propDef: {
     props: {
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
-        disablePointer?: boolean;
-        reset?: () => void;
-        increase?: () => void;
-        decrease?: () => void;
-        translateCenter?: () => void;
-        zoomTo?: (newTranslate: {
+        disablePointer?: boolean | undefined;
+        reset?: (() => void) | undefined;
+        increase?: (() => void) | undefined;
+        decrease?: (() => void) | undefined;
+        translateCenter?: (() => void) | undefined;
+        zoomTo?: ((newTranslate: {
             x: number;
             y: number;
         }, newScale?: {
             x: number;
             y: number;
-        }) => void;
+        }) => void) | undefined;
     };
     events: {
         click: MouseEvent;
@@ -42,6 +42,6 @@ export default class Zoom extends SvelteComponentTyped<ZoomProps, ZoomEvents, Zo
     }, newScale?: {
         x: number;
         y: number;
-    }) => void;
+    } | undefined) => void;
 }
 export {};

package/docs/Preview.svelte.d.ts

@@ -2,10 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 import 'prism-svelte';
 declare const __propDef: {
     props: {
-        code?: any;
-        language?: string;
+        code?: null | undefined;
+        language?: string | undefined;
         highlightedCode?: any;
-        showCode?: boolean;
+        showCode?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
     "@sveltejs/adapter-vercel": "^1.0.5",

package/utils/event.d.ts

@@ -1,4 +1,4 @@
 export declare function localPoint(node: Element, event: MouseEvent | TouchEvent): {
     x: number;
     y: number;
-};
+} | null;

package/utils/graph.d.ts

@@ -10,7 +10,7 @@ export declare function graphFromCsv(csv: string): SankeyGraph<any, any>;
 export declare function graphFromHierarchy(hierarchy: ReturnType<typeof d3Hierarchy>): {
     nodes: import("d3-hierarchy").HierarchyNode<unknown>[];
     links: {
-        value: number;
+        value: number | undefined;
         source: import("d3-hierarchy").HierarchyNode<unknown>;
         target: import("d3-hierarchy").HierarchyNode<unknown>;
     }[];

package/utils/hierarchy.d.ts

@@ -3,4 +3,4 @@ import type { HierarchyNode } from 'd3-hierarchy';
  *  Find first ancestor matching filter, including node.
  *  Similar to `node.find()` (https://github.com/d3/d3-hierarchy#node_find) but checks ancestors instead of descendants
  */
-export declare function findAncestor<T = any>(node: HierarchyNode<T>, filter: (node: any) => boolean): HierarchyNode<T>;
+export declare function findAncestor<T = any>(node: HierarchyNode<T>, filter: (node: any) => boolean): HierarchyNode<T> | null;

package/utils/scales.d.ts

@@ -1,5 +1,5 @@
 import { tweened, spring } from 'svelte/motion';
-import { MotionOptions } from '../stores/motionStore';
+import { type MotionOptions } from '../stores/motionStore';
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
@@ -21,7 +21,7 @@ export declare function scaleInvert(scale: any, value: number): any;
  * Animate d3-scale as domain and/or range are updated using tweened store
  */
 export declare function tweenedScale(scale: any, tweenedOptions?: Parameters<typeof tweened>[1]): {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: (value?: any) => void) => import("svelte/store").Unsubscriber;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: ((value?: any) => void) | undefined) => import("svelte/store").Unsubscriber;
     domain: (values: any) => Promise<void>;
     range: (values: any) => Promise<void>;
 };
@@ -29,7 +29,7 @@ export declare function tweenedScale(scale: any, tweenedOptions?: Parameters<typ
  * Animate d3-scale as domain and/or range are updated using spring store
  */
 export declare function springScale(scale: any, springOptions?: Parameters<typeof spring>[1]): {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: (value?: any) => void) => import("svelte/store").Unsubscriber;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: ((value?: any) => void) | undefined) => import("svelte/store").Unsubscriber;
     domain: (values: any) => Promise<void>;
     range: (values: any) => Promise<void>;
 };
@@ -37,7 +37,7 @@ export declare function springScale(scale: any, springOptions?: Parameters<typeo
  * Create a store wrapper around a d3-scale which interpolates the domain and/or range using `tweened()` or `spring()` stores.  Fallbacks to `writable()` store if not interpolating
  */
 export declare function motionScale(scale: any, options: MotionOptions): {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: (value?: any) => void) => import("svelte/store").Unsubscriber;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: ((value?: any) => void) | undefined) => import("svelte/store").Unsubscriber;
     domain: (values: any) => void | Promise<void>;
     range: (values: any) => void | Promise<void>;
 };

package/utils/stack.js

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

package/utils/string.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="lodash" />
-declare function _getStringWidth(str: string, style?: CSSStyleDeclaration): number;
+declare function _getStringWidth(str: string, style?: CSSStyleDeclaration): number | null;
 export declare const getStringWidth: typeof _getStringWidth & import("lodash").MemoizedFunction;
 export {};

package/utils/ticks.d.ts

@@ -1,3 +1,3 @@
-export declare function getMajorTicks(start: Date, end: Date): import("d3-time").TimeInterval;
+export declare function getMajorTicks(start: Date, end: Date): import("d3-time").TimeInterval | null;
 export declare function formatMajorTick(date: Date, rangeStart: Date, rangeEnd: Date): string;
-export declare function getMinorTicks(start: Date, end: Date): import("d3-time").TimeInterval;
+export declare function getMinorTicks(start: Date, end: Date): import("d3-time").TimeInterval | null;