layerchart 0.43.6 → 0.43.8

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2021 Sean Lynch
+Copyright (c) 2024 Sean Lynch
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

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;
-        initialValue?: number;
-        domain?: number[];
-        range?: number[];
+        value?: number | undefined;
+        initialValue?: number | undefined;
+        domain?: number[] | undefined;
+        range?: number[] | undefined;
         startAngle?: number | undefined;
         endAngle?: number | undefined;
         innerRadius?: number | undefined;
         outerRadius?: number | undefined;
-        cornerRadius?: number;
-        padAngle?: number;
-        track?: boolean | SVGAttributes<SVGPathElement>;
-        offset?: number;
+        cornerRadius?: number | undefined;
+        padAngle?: number | undefined;
+        track?: (boolean | SVGAttributes<SVGPathElement>) | undefined;
+        offset?: number | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/Area.svelte

@@ -6,6 +6,8 @@ import { cls } from 'svelte-ux';
 import { motionStore } from '../stores/motionStore.js';
 import { chartContext } from './ChartContext.svelte';
 import Spline from './Spline.svelte';
+import { accessor } from '../utils/common.js';
+import { isScaleBand } from '../utils/scales.js';
 const { data: contextData, xScale, yScale, xGet, yGet, yRange } = chartContext();
 /** Override data instead of using context */
 export let data = undefined;
@@ -26,6 +28,11 @@ export let curve = undefined;
 export let defined = undefined;
 /** Enable showing line */
 export let line = false;
+const _x = accessor(x);
+const _y0 = accessor(y0);
+const _y1 = accessor(y1);
+$: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
 $: tweenedOptions = tweened
     ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
     : false;
@@ -33,13 +40,13 @@ $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     const path = radial
         ? areaRadial()
-            .angle((d) => (x ? $xScale(x(d)) : $xGet(d)))
-            .innerRadius((d) => (y0 ? $yScale(y0(d)) : max($yRange)))
-            .outerRadius((d) => (y1 ? $yScale(y1(d)) : $yGet(d)))
+            .angle((d) => (x ? $xScale(_x(d)) : $xGet(d)))
+            .innerRadius((d) => (y0 ? $yScale(_y0(d)) : max($yRange)))
+            .outerRadius((d) => (y1 ? $yScale(_y1(d)) : $yGet(d)))
         : d3Area()
-            .x((d) => (x ? $xScale(x(d)) : $xGet(d)))
-            .y0((d) => (y0 ? $yScale(y0(d)) : max($yRange)))
-            .y1((d) => (y1 ? $yScale(y1(d)) : $yGet(d)));
+            .x((d) => (x ? $xScale(_x(d)) : $xGet(d)) + xOffset)
+            .y0((d) => (y0 ? $yScale(_y0(d)) : max($yRange)) + yOffset)
+            .y1((d) => (y1 ? $yScale(_y1(d)) : $yGet(d)) + yOffset);
     if (curve)
         path.curve(curve);
     if (defined)

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

@@ -3,20 +3,21 @@ import { type ComponentProps } from 'svelte';
 import type { tweened as tweenedStore } from 'svelte/motion';
 import type { CurveFactory } from 'd3-shape';
 import Spline from './Spline.svelte';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
-        radial?: boolean;
-        x?: ((d: any) => any) | undefined;
-        y0?: ((d: any) => any) | undefined;
-        y1?: ((d: any) => any) | undefined;
+        radial?: boolean | undefined;
+        x?: Accessor;
+        y0?: Accessor;
+        y1?: Accessor;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         clipPath?: string | undefined;
         curve?: CurveFactory | undefined;
         defined?: Parameters<Area<any>["defined"]>[0] | undefined;
-        line?: boolean | Partial<ComponentProps<Spline>>;
+        line?: (boolean | Partial<ComponentProps<Spline>>) | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -9,14 +9,14 @@ declare const __propDef: {
         x?: Accessor;
         y?: Accessor;
         fill?: string | undefined;
-        stroke?: string;
-        strokeWidth?: number;
-        radius?: number;
-        rounded?: "all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-        inset?: number;
+        stroke?: string | undefined;
+        strokeWidth?: number | undefined;
+        radius?: number | undefined;
+        rounded?: ("all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        inset?: number | undefined;
         groupBy?: string | undefined;
-        groupPaddingInner?: number;
-        groupPaddingOuter?: number;
+        groupPaddingInner?: number | undefined;
+        groupPaddingOuter?: number | undefined;
         spring?: ComponentProps<Rect>["spring"];
         tweened?: ComponentProps<Rect>["tweened"];
     };

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

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

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

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

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         start: Date;
         end: Date;
         cellSize?: number | [number, number] | undefined;
-        monthPath?: boolean | Partial<ComponentProps<MonthPath>>;
+        monthPath?: (boolean | Partial<ComponentProps<MonthPath>>) | undefined;
         tooltip?: TooltipContextValue | undefined;
     };
     events: {

package/dist/components/Chart.svelte

@@ -106,7 +106,7 @@ onMount(() => {
     {#key isMounted}
       <TransformContext
         bind:this={transformContext}
-        mode={transform?.mode ?? geo?.applyTransform?.length ? 'manual' : 'none'}
+        mode={(transform?.mode ?? geo?.applyTransform?.length) ? 'manual' : 'none'}
         initialTranslate={initialTransform?.translate}
         initialScale={initialTransform?.scale}
         processTranslate={geo

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        full?: boolean;
+        full?: boolean | undefined;
     };
     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;
-        initialCx?: number;
-        cy?: number;
-        initialCy?: number;
-        r?: number;
-        initialR?: number;
+        cx?: number | undefined;
+        initialCx?: number | undefined;
+        cy?: number | undefined;
+        initialCy?: number | undefined;
+        r?: number | undefined;
+        initialR?: number | undefined;
         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;
-        cx?: number;
-        cy?: number;
+        id?: string | undefined;
+        cx?: number | undefined;
+        cy?: number | undefined;
         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;
+        id?: string | undefined;
         useId?: string | undefined;
-        disabled?: boolean;
+        disabled?: boolean | undefined;
     };
     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;
-        height?: string | number;
-        width?: string | number;
+        steps?: number | undefined;
+        height?: (string | number) | undefined;
+        width?: (string | number) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        radius?: number;
-        center?: [number, number];
-        precision?: number;
+        radius?: number | undefined;
+        center?: [number, number] | undefined;
+        precision?: number | undefined;
     };
     events: {
         pointermove: PointerEvent;

package/dist/components/GeoPath.svelte

@@ -69,7 +69,9 @@ $: if (renderContext === 'canvas' && $ctx) {
         $ctx.fill();
         $ctx.lineWidth = Number(strokeWidth ?? 0);
         $ctx.strokeStyle =
-            stroke ?? computedStyles.stroke === 'none' ? 'transparent' : computedStyles.stroke ?? '';
+            (stroke ?? computedStyles.stroke === 'none')
+                ? 'transparent'
+                : (computedStyles.stroke ?? '');
         $ctx.stroke();
     }
 }

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

@@ -14,7 +14,7 @@ declare const __propDef: {
         stroke?: string | undefined;
         strokeWidth?: number | string | undefined;
         tooltip?: TooltipContextValue | undefined;
-        curve?: CurveFactory | CurveFactoryLineOnly;
+        curve?: (CurveFactory | CurveFactoryLineOnly) | undefined;
         class?: string | undefined;
         geoTransform?: ((projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype) | undefined;
     };

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

@@ -4,10 +4,10 @@ declare const __propDef: {
         [x: string]: any;
         lat: number;
         long: number;
-        render?: (ctx: CanvasRenderingContext2D, coords: {
+        render?: ((ctx: CanvasRenderingContext2D, coords: {
             x: number;
             y: number;
-        }) => any;
+        }) => any) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -7,7 +7,7 @@ declare const __propDef: {
             source: [number, number];
             target: [number, number];
         };
-        loft?: number;
+        loft?: number | undefined;
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;
     };
     events: {

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         [x: string]: any;
         lines?: Partial<ComponentProps<GeoPath>> | boolean | undefined;
         outline?: Partial<ComponentProps<GeoPath>> | boolean | undefined;
-        step?: [number, number];
+        step?: [number, number] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -7,8 +7,8 @@ declare const __propDef: {
         initialX?: number | undefined;
         y?: number | undefined;
         initialY?: number | undefined;
-        center?: boolean | "x" | "y";
-        preventTouchMove?: boolean;
+        center?: (boolean | "x" | "y") | undefined;
+        preventTouchMove?: boolean | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };

package/dist/components/Highlight.svelte

@@ -163,17 +163,22 @@ $: if (highlightData) {
             // Ignore non-array data such as hierarchy and graph (make Typescript happy)
             if (Array.isArray($contextData)) {
                 // For each series, find the related data point
-                const seriesPointsData = $contextData.map((series) => {
+                const seriesPointsData = $contextData
+                    .map((series) => {
                     return {
                         series,
                         point: series.find((d) => _y(d) === _y(highlightSeriesPoint)),
                     };
+                })
+                    .filter((d) => d.point); // remove if no point found (ex. Histogram);
+                _points = seriesPointsData.map((seriesPoint, i) => {
+                    console.log({ seriesPoint });
+                    return {
+                        x: $xScale(seriesPoint.point[1]) + xOffset,
+                        y: yCoord + yOffset,
+                        fill: $config.r ? $rGet(seriesPoint.series) : null,
+                    };
                 });
-                _points = seriesPointsData.map((seriesPoint, i) => ({
-                    x: $xScale(seriesPoint.point[1]) + xOffset,
-                    y: yCoord + yOffset,
-                    fill: $config.r ? $rGet(seriesPoint.series) : null,
-                }));
             }
         }
         else {
@@ -198,12 +203,14 @@ $: if (highlightData) {
             // Ignore non-array data such as hierarchy and graph (make Typescript happy)
             if (Array.isArray($contextData)) {
                 // For each series, find the related data point
-                const seriesPointsData = $contextData.map((series) => {
+                const seriesPointsData = $contextData
+                    .map((series) => {
                     return {
                         series,
                         point: series.find((d) => _x(d) === _x(highlightSeriesPoint)),
                     };
-                });
+                })
+                    .filter((d) => d.point); // remove if no point found (ex. Histogram)
                 _points = seriesPointsData.map((seriesPoint, i) => ({
                     x: xCoord + xOffset,
                     y: $yScale(seriesPoint.point[1]) + yOffset,

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

@@ -42,14 +42,14 @@ declare const __propDef: {
                 x?: Accessor;
                 y?: Accessor;
                 fill?: string | undefined;
-                stroke?: string;
-                strokeWidth?: number;
-                radius?: number;
-                rounded?: "all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-                inset?: number;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                radius?: number | undefined;
+                rounded?: ("all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+                inset?: number | undefined;
                 groupBy?: string | undefined;
-                groupPaddingInner?: number;
-                groupPaddingOuter?: number;
+                groupPaddingInner?: number | undefined;
+                groupPaddingOuter?: number | undefined;
                 spring?: ComponentProps<Rect>["spring"];
                 tweened?: ComponentProps<Rect>["tweened"];
             }>;

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

@@ -10,7 +10,7 @@ declare const __propDef: {
         classes?: {
             root?: string;
             path?: string;
-        };
+        } | undefined;
     };
     events: {
         pointerleave: PointerEvent;

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

@@ -3,12 +3,12 @@ import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: "inside" | "outside";
-        offset?: number;
+        placement?: ("inside" | "outside") | undefined;
+        offset?: number | undefined;
         format?: FormatType | undefined;
         groupBy?: string | undefined;
-        groupPaddingInner?: number;
-        groupPaddingOuter?: number;
+        groupPaddingInner?: number | undefined;
+        groupPaddingOuter?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -4,21 +4,21 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         scale?: any;
-        title?: string;
-        width?: number;
-        height?: number;
-        ticks?: number;
+        title?: string | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        ticks?: number | undefined;
         tickFormat?: FormatType | undefined;
         tickValues?: any[] | undefined;
-        tickFontSize?: number;
-        tickLength?: number;
+        tickFontSize?: number | undefined;
+        tickLength?: number | undefined;
         placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         classes?: {
             root?: string;
             title?: string;
             label?: string;
             tick?: string;
-        };
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

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

@@ -2,15 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string;
-        stops?: string[] | [string | number, string][];
-        vertical?: boolean;
-        x1?: string;
-        y1?: string;
-        x2?: string;
-        y2?: string;
+        id?: string | undefined;
+        stops?: (string[] | [string | number, string][]) | undefined;
+        vertical?: boolean | undefined;
+        x1?: string | undefined;
+        y1?: string | undefined;
+        x2?: string | undefined;
+        y2?: string | undefined;
         rotate?: number | undefined;
-        units?: "objectBoundingBox" | "userSpaceOnUse";
+        units?: ("objectBoundingBox" | "userSpaceOnUse") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

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

@@ -5,11 +5,11 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
-        r?: number;
+        r?: number | undefined;
         offsetX?: number | ((value: number, context: any) => number) | undefined;
         offsetY?: number | ((value: number, context: any) => number) | undefined;
-        radial?: boolean;
-        links?: boolean | Partial<ComponentProps<Link>>;
+        radial?: boolean | undefined;
+        links?: (boolean | Partial<ComponentProps<Link>>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,16 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string;
-        stops?: string[] | [string | number, string][];
-        cx?: string;
-        cy?: string;
-        fx?: string;
-        fy?: string;
-        r?: string;
-        spreadMethod?: "pad" | "reflect" | "repeat";
+        id?: string | undefined;
+        stops?: (string[] | [string | number, string][]) | undefined;
+        cx?: string | undefined;
+        cy?: string | undefined;
+        fx?: string | undefined;
+        fy?: string | undefined;
+        r?: string | undefined;
+        spreadMethod?: ("pad" | "reflect" | "repeat") | undefined;
         transform?: string | null | undefined;
-        units?: "objectBoundingBox" | "userSpaceOnUse";
+        units?: ("objectBoundingBox" | "userSpaceOnUse") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,14 +3,14 @@ import { type SpringOptions, type TweenedOptions } from '../stores/motionStore.j
 declare const __propDef: {
     props: {
         [x: string]: any;
-        x?: number;
-        initialX?: number;
-        y?: number;
-        initialY?: number;
+        x?: number | undefined;
+        initialX?: number | undefined;
+        y?: number | undefined;
+        initialY?: number | undefined;
         width: number;
-        initialWidth?: number;
+        initialWidth?: number | undefined;
         height: number;
-        initialHeight?: number;
+        initialHeight?: number | undefined;
         spring?: boolean | SpringOptions | {
             [prop: string]: SpringOptions;
         };

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

@@ -4,9 +4,9 @@ import Rect from './Rect.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string;
-        x?: number;
-        y?: number;
+        id?: string | undefined;
+        x?: number | undefined;
+        y?: number | undefined;
         width: number;
         height: number;
         spring?: ComponentProps<Rect>["spring"];

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

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        x?: number | Date | boolean | "left" | "right";
-        y?: number | Date | boolean | "top" | "bottom";
+        x?: (number | Date | boolean | "left" | "right") | undefined;
+        y?: (number | Date | boolean | "top" | "bottom") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Spline.svelte

@@ -10,6 +10,8 @@ import { cls } from 'svelte-ux';
 import { chartContext } from './ChartContext.svelte';
 import Group from './Group.svelte';
 import { motionStore } from '../stores/motionStore.js';
+import { accessor } from '../utils/common.js';
+import { isScaleBand } from '../utils/scales.js';
 const { data: contextData, xScale, yScale, x: contextX, y: contextY } = chartContext();
 /** Override data instead of using context */
 export let data = undefined;
@@ -18,9 +20,9 @@ export let pathData = undefined;
 /** Use radial instead of cartesian line generator, mapping `x` to `angle` and `y` to `radius`.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
 export let radial = false;
 /** Override `x` accessor from Chart context.  Applies to `angle` when `radial=true` */
-export let x = undefined; // TODO: Update Type
+export let x = undefined;
 /** Override `y` accessor from Chart context.  Applies to `radius` when `radial=true` */
-export let y = undefined; // TODO: Update Type
+export let y = undefined;
 /** Interpolate path data using d3-interpolate-path.  Works best without `draw` enabled */
 export let tweened = undefined;
 /** Draw path over time.  Works best without `tweened` enabled */
@@ -46,6 +48,10 @@ function getScaleValue(data, scale, accessor) {
         return accessor(data);
     }
 }
+const _x = accessor(x);
+const _y = accessor(y);
+$: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
 let d = '';
 // @ts-expect-error
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
@@ -53,11 +59,11 @@ $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     const path = radial
         ? lineRadial()
-            .angle((d) => getScaleValue(d, $xScale, x ?? $contextX))
-            .radius((d) => getScaleValue(d, $yScale, y ?? $contextY))
+            .angle((d) => getScaleValue(d, $xScale, x ? _x : $contextX))
+            .radius((d) => getScaleValue(d, $yScale, y ? _y : $contextY))
         : d3Line()
-            .x((d) => getScaleValue(d, $xScale, x ?? $contextX))
-            .y((d) => getScaleValue(d, $yScale, y ?? $contextY));
+            .x((d) => getScaleValue(d, $xScale, x ? _x : $contextX) + xOffset)
+            .y((d) => getScaleValue(d, $yScale, y ? _y : $contextY) + yOffset);
     if (curve)
         path.curve(curve);
     if (defined)

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

@@ -2,14 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 import { tweened as tweenedStore } from 'svelte/motion';
 import { draw as _drawTransition } from 'svelte/transition';
 import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
-        radial?: boolean;
-        x?: ((d: any) => any) | undefined;
-        y?: ((d: any) => any) | undefined;
+        radial?: boolean | undefined;
+        x?: Accessor;
+        y?: Accessor;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         draw?: boolean | Parameters<typeof _drawTransition>[1];
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;

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

@@ -3,19 +3,19 @@ import type { spring as springStore, tweened as tweenedStore } from 'svelte/moti
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string | number;
+        value?: (string | number) | undefined;
         width?: number | undefined;
-        x?: string | number;
-        initialX?: string | number;
-        y?: string | number;
-        initialY?: string | number;
-        dx?: string | number;
-        dy?: string | number;
-        lineHeight?: string;
-        capHeight?: string;
-        scaleToFit?: boolean;
-        textAnchor?: "start" | "middle" | "end" | "inherit";
-        verticalAnchor?: "start" | "middle" | "end" | "inherit";
+        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;
+        capHeight?: string | undefined;
+        scaleToFit?: boolean | undefined;
+        textAnchor?: ("start" | "middle" | "end" | "inherit") | undefined;
+        verticalAnchor?: ("start" | "middle" | "end" | "inherit") | undefined;
         rotate?: number | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

package/dist/components/Threshold.svelte

@@ -6,49 +6,53 @@
 import { area as d3Area, line as d3Line } from 'd3-shape';
 import { min, max } from 'd3-array';
 import { chartContext } from './ChartContext.svelte';
+import { accessor } from '../utils/common.js';
 const { data: contextData, xGet, yGet, yRange } = chartContext();
 // Properties to override what is used from context
 export let data = undefined; // TODO: Update Type
-export let x = undefined; // TODO: Update Type
-export let y0 = undefined; // TODO: Update Type
-export let y1 = undefined; // TODO: Update Type
+export let x = undefined;
+export let y0 = undefined;
+export let y1 = undefined;
 export let curve = undefined;
 export let defined = undefined;
 export let id = Math.random().toString(16).slice(-4);
+const _x = accessor(x);
+const _y0 = accessor(y0);
+const _y1 = accessor(y1);
 $: areaPath = d3Area()
-    .x(x ?? $xGet)
-    .y0(y0 ?? ((d) => $yGet(d)[0]))
-    .y1(y1 ?? ((d) => $yGet(d)[1]));
+    .x(x ? _x : $xGet)
+    .y0(y0 ? _y0 : (d) => $yGet(d)[0])
+    .y1(y1 ? _y1 : (d) => $yGet(d)[1]);
 $: if (curve)
     areaPath.curve(curve);
 $: if (defined)
     areaPath.defined(defined);
 $: clipPathBelow = d3Area()
-    .x(x ?? $xGet)
-    .y0(y0 ?? ((d) => $yGet(d)[0]))
-    .y1(y1 ?? ((d) => max($yRange)));
+    .x(x ? _x : $xGet)
+    .y0(y0 ? _y0 : (d) => $yGet(d)[0])
+    .y1(y1 ? _y1 : (d) => max($yRange));
 $: if (curve)
     clipPathBelow.curve(curve);
 $: if (defined)
     clipPathBelow.defined(defined);
 $: clipPathAbove = d3Area()
-    .x(x ?? $xGet)
-    .y0(y0 ?? ((d) => max($yRange)))
-    .y1(y1 ?? ((d) => $yGet(d)[1]));
+    .x(x ? _x : $xGet)
+    .y0(y0 ? _y0 : (d) => max($yRange))
+    .y1(y1 ? _y1 : (d) => $yGet(d)[1]);
 $: if (curve)
     clipPathAbove.curve(curve);
 $: if (defined)
     clipPathAbove.defined(defined);
 $: linePathAbove = d3Line()
-    .x(x ?? $xGet)
-    .y(y0 ?? ((d) => $yGet(d)[0]));
+    .x(x ? _x : $xGet)
+    .y(y0 ? _y0 : (d) => $yGet(d)[0]);
 $: if (curve)
     linePathAbove.curve(curve);
 $: if (defined)
     linePathAbove.defined(defined);
 $: linePathBelow = d3Line()
-    .x(x ?? $xGet)
-    .y(y1 ?? ((d) => $yGet(d)[1]));
+    .x(x ? _x : $xGet)
+    .y(y1 ? _y1 : (d) => $yGet(d)[1]);
 $: if (curve)
     linePathBelow.curve(curve);
 $: if (defined)

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

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import type { CurveFactory } from 'd3-shape';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         data?: any;
-        x?: any;
-        y0?: any;
-        y1?: any;
+        x?: Accessor;
+        y0?: Accessor;
+        y1?: Accessor;
         curve?: CurveFactory | undefined;
         defined?: Parameters<{
             (): (d: [number, number], index: number, data: [number, number][]) => boolean;

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

@@ -4,19 +4,19 @@ declare const __propDef: {
         [x: string]: any;
         x?: "pointer" | "data" | number | undefined;
         y?: "pointer" | "data" | number | undefined;
-        xOffset?: number;
-        yOffset?: number;
-        anchor?: "center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-        contained?: "container" | false;
-        variant?: "default" | "invert" | "none";
-        motion?: boolean;
+        xOffset?: number | undefined;
+        yOffset?: number | undefined;
+        anchor?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        contained?: ("container" | false) | undefined;
+        variant?: ("default" | "invert" | "none") | undefined;
+        motion?: boolean | undefined;
         header?: ((data: any) => any) | undefined;
         classes?: {
             root?: string;
             container?: string;
             header?: string;
             content?: string;
-        };
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -6,11 +6,11 @@ declare const __propDef: {
         label: any;
         value?: any;
         format?: FormatType | undefined;
-        valueAlign?: "left" | "right" | "center";
+        valueAlign?: ("left" | "right" | "center") | undefined;
         classes?: {
             label?: string;
             value?: string;
-        };
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: "center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-        orientation?: "horizontal" | "vertical";
-        show?: ("reset" | "center" | "scrollMode" | "zoomIn" | "zoomOut")[];
+        placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        orientation?: ("horizontal" | "vertical") | undefined;
+        show?: ("reset" | "center" | "scrollMode" | "zoomIn" | "zoomOut")[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         classes?: {
             root?: string;
             path?: string;
-        };
+        } | undefined;
     };
     events: {
         pointerenter: PointerEvent;

package/dist/components/layout/Canvas.svelte.d.ts

@@ -3,11 +3,11 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         element?: HTMLCanvasElement | undefined;
-        context?: CanvasRenderingContext2D;
-        willReadFrequently?: boolean;
+        context?: CanvasRenderingContext2D | undefined;
+        willReadFrequently?: boolean | undefined;
         zIndex?: undefined;
         pointerEvents?: boolean | undefined;
-        fallback?: string;
+        fallback?: string | undefined;
         label?: string | undefined;
         labelledBy?: string | undefined;
         describedBy?: string | undefined;

package/dist/docs/Code.svelte.d.ts

@@ -3,14 +3,14 @@ import 'prism-svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        source?: string | null;
-        language?: string;
-        highlightedSource?: string;
+        source?: (string | null) | undefined;
+        language?: string | undefined;
+        highlightedSource?: string | undefined;
         classes?: {
             root?: string;
             pre?: string;
             code?: string;
-        };
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/docs/Json.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         value: any;
-        defaultExpandedPaths?: string[];
+        defaultExpandedPaths?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/docs/Preview.svelte.d.ts

@@ -5,9 +5,9 @@ declare const __propDef: {
         [x: string]: any;
         code?: string | undefined;
         data?: any | undefined;
-        language?: string;
-        highlightedCode?: string;
-        showCode?: boolean;
+        language?: string | undefined;
+        highlightedCode?: string | undefined;
+        showCode?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -4,17 +4,17 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.43.6",
+  "version": "0.43.8",
   "devDependencies": {
-    "@changesets/cli": "^2.27.5",
+    "@changesets/cli": "^2.27.7",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.4",
-    "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/kit": "^2.5.17",
+    "@sveltejs/adapter-cloudflare": "^4.7.0",
+    "@sveltejs/kit": "^2.5.20",
     "@sveltejs/package": "^2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
-    "@tailwindcss/typography": "^0.5.13",
+    "@tailwindcss/typography": "^0.5.14",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
     "@types/d3-delaunay": "^6.0.4",
@@ -38,12 +38,12 @@
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
-    "autoprefixer": "^10.4.19",
-    "marked": "^13.0.0",
+    "autoprefixer": "^10.4.20",
+    "marked": "^14.0.0",
     "mdsvex": "^0.11.2",
     "posthog-js": "^1.95.1",
-    "prettier": "^3.3.2",
-    "prettier-plugin-svelte": "^3.2.5",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
@@ -51,18 +51,18 @@
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
     "svelte": "^4.2.18",
-    "svelte-check": "^3.8.1",
+    "svelte-check": "^3.8.5",
     "svelte-json-tree": "^2.2.0",
-    "svelte-preprocess": "^6.0.1",
-    "svelte2tsx": "^0.7.10",
-    "tailwindcss": "^3.4.4",
+    "svelte-preprocess": "^6.0.2",
+    "svelte2tsx": "^0.7.15",
+    "tailwindcss": "^3.4.9",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.2",
+    "typescript": "^5.5.4",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.3.1"
+    "vite": "^5.4.0"
   },
   "type": "module",
   "dependencies": {
@@ -86,11 +86,11 @@
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
     "date-fns": "^3.6.0",
-    "layercake": "^8.3.0",
+    "layercake": "^8.3.4",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.140.1",
+    "posthog-js": "^1.154.5",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.71.1",
+    "svelte-ux": "^0.74.3",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {