layerchart 0.22.2 → 0.24.0

package/README.md

@@ -23,6 +23,8 @@ Others
 
 - Legends including ColorRamps
 
+See also [Svelte UX](http://svelte-ux.techniq.dev) for a large collection of components, actions, stores, and utilities to build highly interactive applications.
+
 ## Publishing
 
 - `npm run changeset` for each changelog worthy change

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

@@ -0,0 +1,43 @@
+import { SvelteComponentTyped } from "svelte";
+import type { tweened as tweenedStore } from 'svelte/motion';
+import { type Area } from 'd3-shape';
+import type { CurveFactory } from 'd3-shape';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        data?: any;
+        pathData?: string | undefined | null;
+        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 | {
+            [x: string]: any;
+            data?: any;
+            pathData?: string | null | 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;
+    };
+    events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AreaProps = typeof __propDef.props;
+export type AreaEvents = typeof __propDef.events;
+export type AreaSlots = typeof __propDef.slots;
+export default class Area extends SvelteComponentTyped<AreaProps, AreaEvents, AreaSlots> {
+}
+export {};

package/dist/components/Blur.svelte

@@ -11,6 +11,6 @@ export let stdDeviation = 5;
 
 {#if $$slots.default}
   <g filter="url(#{id})">
-    <slot {id} />
+    <slot {id} url="url(#{id})" />
   </g>
 {/if}

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

@@ -10,6 +10,7 @@ declare const __propDef: {
     slots: {
         default: {
             id: string;
+            url: string;
         };
     };
 };

package/dist/components/Calendar.svelte

@@ -0,0 +1,75 @@
+<script>import { getContext } from 'svelte';
+import { timeDays, timeMonths, timeWeek, timeYear, utcYear } from 'd3-time';
+import { index } from 'd3-array';
+import { format } from 'date-fns';
+import Rect from './Rect.svelte';
+import MonthPath from './MonthPath.svelte';
+import Text from './Text.svelte';
+export let start;
+export let end;
+/**
+ * Size of cell.  If `number`, sets width/height as same value (square).  If array, sets as [width,height].  If undefined, is derived from Chart width/height
+ */
+export let cellSize = undefined;
+/** Enable drawing path around each month.  If object, pass as props to underlying <path> */
+export let monthPath = false;
+/**
+ * Tooltip context to setup mouse events to show tooltip for related data
+ */
+export let tooltip = undefined;
+const { width, height, x, rGet, data, config } = getContext('LayerCake');
+$: yearDays = timeDays(start, end);
+$: yearMonths = timeMonths(start, end);
+$: yearWeeks = timeWeek.count(start, end);
+$: chartCellWidth = $width / (yearWeeks + 1);
+$: chartCellHeight = $height / 7;
+$: chartCellSize = Math.min(chartCellWidth, chartCellHeight); // Use smallest to fit, and keep square aspect
+$: [cellWidth, cellHeight] = Array.isArray(cellSize)
+    ? cellSize
+    : typeof cellSize === 'number'
+        ? [cellSize, cellSize]
+        : [chartCellSize, chartCellSize];
+$: dataByDate = data && $config.x ? index($data, (d) => $x(d)) : new Map();
+$: cells = yearDays.map((date) => {
+    const cellData = dataByDate.get(date) ?? { date };
+    return {
+        x: timeWeek.count(timeYear(date), date) * cellWidth,
+        y: date.getDay() * cellHeight,
+        color: $config.r ? $rGet(cellData) : 'transparent',
+        data: cellData,
+    };
+});
+</script>
+
+<slot {cells}>
+  {#each cells as cell}
+    <Rect
+      x={cell.x}
+      y={cell.y}
+      width={cellWidth}
+      height={cellHeight}
+      fill={cell.color}
+      on:mousemove={(e) => tooltip?.show(e, cell.data)}
+      on:mouseleave={(e) => tooltip?.hide()}
+      class="stroke-black/5"
+      {...$$restProps}
+    />
+  {/each}
+</slot>
+
+{#if monthPath}
+  {#each yearMonths as date}
+    <MonthPath
+      {date}
+      cellSize={[cellWidth, cellHeight]}
+      {...typeof monthPath === 'object' ? monthPath : null}
+    />
+
+    <Text
+      x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellWidth}
+      y={-4}
+      value={format(date, 'MMM')}
+      class="text-xs"
+    />
+  {/each}
+{/if}

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

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TooltipContextValue } from './TooltipContext.svelte';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        start: Date;
+        end: Date;
+        cellSize?: number | [number, number] | undefined;
+        monthPath?: boolean | {
+            [x: string]: any;
+            date: Date;
+            cellSize: number | [number, number];
+        } | undefined;
+        tooltip?: TooltipContextValue | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            cells: {
+                x: number;
+                y: number;
+                color: any;
+                data: any;
+            }[];
+        };
+    };
+};
+export type CalendarProps = typeof __propDef.props;
+export type CalendarEvents = typeof __propDef.events;
+export type CalendarSlots = typeof __propDef.slots;
+export default class Calendar extends SvelteComponentTyped<CalendarProps, CalendarEvents, CalendarSlots> {
+}
+export {};

package/dist/components/Chart.svelte

@@ -82,6 +82,7 @@ export let geo = undefined;
   let:yScale
   let:zScale
   let:rScale
+  let:padding
 >
   <GeoContext {...geo} let:projection>
     {#if tooltip}
@@ -99,6 +100,7 @@ export let geo = undefined;
           {yScale}
           {zScale}
           {rScale}
+          {padding}
         />
       </TooltipContext>
     {:else}
@@ -114,6 +116,7 @@ export let geo = undefined;
         {yScale}
         {zScale}
         {rScale}
+        {padding}
       />
     {/if}
   </GeoContext>

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

@@ -35,6 +35,17 @@ declare const __propDef: {
             yScale: any;
             zScale: any;
             rScale: any;
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            } & {
+                top?: number | undefined;
+                right?: number | undefined;
+                bottom?: number | undefined;
+                left?: number | undefined;
+            };
         };
     };
 };

package/dist/components/CircleClipPath.svelte

@@ -10,7 +10,7 @@ export let spring = undefined;
 export let tweened = undefined;
 </script>
 
-<ClipPath {id}>
+<ClipPath {id} let:url>
   <Circle slot="clip" {cx} {cy} {r} {spring} {tweened} {...$$restProps} />
-  <slot {id} />
+  <slot {id} {url} />
 </ClipPath>

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

@@ -16,6 +16,7 @@ declare const __propDef: {
     slots: {
         default: {
             id: string;
+            url: string;
         };
     };
 };

package/dist/components/ClipPath.svelte

@@ -17,6 +17,6 @@ export let useId = undefined;
 
 {#if $$slots.default}
   <g style:clip-path="url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
-    <slot {id} {useId} />
+    <slot {id} url="url(#{id})" {useId} />
   </g>
 {/if}

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

@@ -19,6 +19,7 @@ declare const __propDef: {
         };
         default: {
             id: string;
+            url: string;
             useId: string | undefined;
         };
     };

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

@@ -0,0 +1,74 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        axis?: 'x' | 'y' | 'both' | 'none' | undefined;
+        /** Show points and pass props to Circles */ points?: boolean | {
+            [x: string]: any;
+            cx?: number | undefined;
+            initialCx?: number | undefined;
+            cy?: number | undefined;
+            initialCy?: number | undefined;
+            r: number;
+            initialR?: number | undefined;
+            spring?: boolean | import("svelte/motion").SpringOpts | undefined;
+            tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;
+        } | undefined;
+        /** Show lines and pass props to Lines */ lines?: boolean | {
+            [x: string]: any;
+            x1: number;
+            initialX1?: number | undefined;
+            y1: number;
+            initialY1?: number | undefined;
+            x2: number;
+            initialX2?: number | undefined;
+            y2: number;
+            initialY2?: number | undefined;
+            spring?: boolean | import("svelte/motion").SpringOpts | undefined;
+            tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;
+        } | undefined;
+        /** Show area and pass props to Rect */ area?: boolean | {
+            [x: string]: any;
+            x?: number | undefined;
+            initialX?: number | undefined;
+            y?: number | undefined;
+            initialY?: number | undefined;
+            width: number;
+            initialWidth?: number | undefined;
+            height: number;
+            initialHeight?: number | undefined;
+            spring?: boolean | import("svelte/motion").SpringOpts | {
+                [prop: string]: import("svelte/motion").SpringOpts | undefined;
+            } | undefined;
+            tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | {
+                [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
+            } | undefined;
+        } | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        area: {
+            area: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            };
+        };
+        lines: {
+            lines: any[];
+        };
+        points: {
+            points: any[];
+        };
+    };
+};
+export type HighlightProps = typeof __propDef.props;
+export type HighlightEvents = typeof __propDef.events;
+export type HighlightSlots = typeof __propDef.slots;
+export default class Highlight extends SvelteComponentTyped<HighlightProps, HighlightEvents, HighlightSlots> {
+}
+export {};

package/dist/components/Legend.svelte

@@ -41,7 +41,7 @@ else if (scale.interpolator) {
     xScale = Object.assign(scale.copy().interpolator(interpolateRound(0, width)), {
         range() {
             return [0, width];
-        }
+        },
     });
     interpolator = scale.interpolator();
     // scaleSequentialQuantile doesn’t implement ticks or tickFormat.
@@ -72,7 +72,7 @@ else if (scale.invertExtent) {
             y: 0,
             width: xScale(i) - xScale(i - 1),
             height,
-            fill: d
+            fill: d,
         };
     });
     tickValues = range(thresholds.length);
@@ -90,7 +90,7 @@ else {
             y: 0,
             width: Math.max(0, xScale.bandwidth() - 1),
             height,
-            fill: scale(d)
+            fill: scale(d),
         };
     });
     tickValues = scale.domain();
@@ -101,6 +101,7 @@ else {
 </script>
 
 <div
+  {...$$restProps}
   class={cls(
     'inline-block',
     placement && [
@@ -114,12 +115,12 @@ else {
         right: 'top-1/2 right-0 -translate-y-1/2',
         'bottom-left': 'bottom-0 left-0',
         bottom: 'bottom-0 left-1/2 -translate-x-1/2',
-        'bottom-right': 'bottom-0 right-0'
-      }[placement]
+        'bottom-right': 'bottom-0 right-0',
+      }[placement],
     ],
+    $$restProps.class,
     classes.root
   )}
-  {...$$restProps}
 >
   <div class={cls('text-[10px] font-semibold', classes.title)}>{title}</div>
   <slot values={tickValues} {scale}>

package/dist/components/LinearGradient.svelte

@@ -1,9 +1,12 @@
 <script>import { uniqueId } from 'svelte-ux';
 /** Unique id for linearGradient */
 export let id = uniqueId('linearGradient-');
-export let from;
-export let via = undefined; // TODO: Currently --tw-gradient-via is not the color but the full stops
-export let to;
+/** Array array of strings (colors), will equally distributed from 0-100%.  If array of tuples, will use first value as the offset, and second as color */
+export let stops = [
+    'var(--tw-gradient-from)',
+    'var(--tw-gradient-to)',
+];
+/** Apply color stops top-to-bottom (true) or left-to-right (false) */
 export let vertical = false;
 export let x1 = '0%';
 export let y1 = '0%';
@@ -26,20 +29,17 @@ export let units = 'objectBoundingBox';
     {...$$restProps}
   >
     <slot name="stops">
-      {#if from}
-        <stop offset="0%" stop-color={from === true ? 'var(--tw-gradient-from)' : from} />
-      {/if}
-
-      {#if via}
-        <!-- <stop offset="50%" stop-color={via === true ? 'var(--tw-gradient-via)' : via} /> -->
-        <stop offset="50%" stop-color={via} />
-      {/if}
-
-      {#if to}
-        <stop offset="100%" stop-color={to === true ? 'var(--tw-gradient-to)' : to} />
+      {#if stops}
+        {#each stops as stop, i}
+          {#if Array.isArray(stop)}
+            <stop offset={stop[0]} stop-color={stop[1]} />
+          {:else}
+            <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
+          {/if}
+        {/each}
       {/if}
     </slot>
   </linearGradient>
 </defs>
 
-<slot {id} />
+<slot {id} url="url(#{id})" />

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

@@ -3,9 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: string | undefined;
-        from: string | boolean;
-        via?: string | boolean | undefined;
-        to: string | boolean;
+        stops?: string[] | [string | number, string][] | undefined;
         vertical?: boolean | undefined;
         x1?: string | undefined;
         y1?: string | undefined;
@@ -21,6 +19,7 @@ declare const __propDef: {
         stops: {};
         default: {
             id: string;
+            url: string;
         };
     };
 };

package/dist/components/MonthPath.svelte

@@ -0,0 +1,25 @@
+<script>import { timeWeek, timeYear } from 'd3-time';
+import { endOfMonth } from 'date-fns';
+export let date;
+/**
+ * Size of cell.  If `number`, sets width/height as same.  If array, sets [width,height].  If undefined, is based on Chart width/height
+ */
+export let cellSize;
+$: [cellWidth, cellHeight] = Array.isArray(cellSize) ? cellSize : [cellSize, cellSize];
+// start of month
+$: startDayOfWeek = date.getDay();
+$: startWeek = timeWeek.count(timeYear(date), date);
+// end of month
+$: monthEnd = endOfMonth(date);
+$: endDayOfWeek = monthEnd.getDay();
+$: endWeek = timeWeek.count(timeYear(monthEnd), monthEnd);
+$: pathData = `
+    M${(startWeek + 1) * cellWidth},${startDayOfWeek * cellHeight}
+    H${startWeek * cellWidth} V${cellHeight * 7}
+    H${endWeek * cellWidth} V${(endDayOfWeek + 1) * cellHeight}
+    H${(endWeek + 1) * cellWidth} V0
+    H${(startWeek + 1) * cellWidth}Z
+  `;
+</script>
+
+<path d={pathData} fill="none" stroke="black" {...$$restProps} />

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        date: Date;
+        cellSize: number | [number, number];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MonthPathProps = typeof __propDef.props;
+export type MonthPathEvents = typeof __propDef.events;
+export type MonthPathSlots = typeof __propDef.slots;
+export default class MonthPath extends SvelteComponentTyped<MonthPathProps, MonthPathEvents, MonthPathSlots> {
+}
+export {};

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

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        r?: number | undefined;
+        offsetX?: number | ((value: number, context: any) => number) | undefined;
+        offsetY?: number | ((value: number, context: any) => number) | undefined;
+        links?: boolean | {
+            [x: string]: any;
+            data?: any;
+            sankey?: boolean | undefined;
+            source?: ((d: any) => any) | undefined;
+            target?: ((d: any) => any) | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            x?: ((d: any) => any) | undefined;
+            y?: ((d: any) => any) | undefined;
+            curve?: import("d3-shape").CurveFactory | undefined;
+            tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            points: any;
+        };
+    };
+};
+export type PointsProps = typeof __propDef.props;
+export type PointsEvents = typeof __propDef.events;
+export type PointsSlots = typeof __propDef.slots;
+export default class Points extends SvelteComponentTyped<PointsProps, PointsEvents, PointsSlots> {
+}
+export {};

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

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+import { type SpringOptions, type TweenedOptions } from '../stores/motionStore';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        x?: number | undefined;
+        initialX?: number | undefined;
+        y?: number | undefined;
+        initialY?: number | undefined;
+        width: number;
+        initialWidth?: number | undefined;
+        height: number;
+        initialHeight?: number | undefined;
+        spring?: boolean | import("svelte/motion").SpringOpts | {
+            [prop: string]: import("svelte/motion").SpringOpts | undefined;
+        } | undefined;
+        tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | {
+            [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
+        } | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mousemove: MouseEvent;
+        mouseout: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RectProps = typeof __propDef.props;
+export type RectEvents = typeof __propDef.events;
+export type RectSlots = typeof __propDef.slots;
+export default class Rect extends SvelteComponentTyped<RectProps, RectEvents, RectSlots> {
+}
+export {};

package/dist/components/RectClipPath.svelte

@@ -11,7 +11,7 @@ export let spring = undefined;
 export let tweened = undefined;
 </script>
 
-<ClipPath {id}>
+<ClipPath {id} let:url>
   <Rect slot="clip" {x} {y} {width} {height} {spring} {tweened} {...$$restProps} />
-  <slot {id} />
+  <slot {id} {url} />
 </ClipPath>

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

@@ -17,6 +17,7 @@ declare const __propDef: {
     slots: {
         default: {
             id: string;
+            url: string;
         };
     };
 };

package/dist/components/Tooltip.svelte

@@ -4,8 +4,12 @@ import { fade } from 'svelte/transition';
 import { writable } from 'svelte/store';
 import { cls } from 'svelte-ux';
 import { tooltipContext } from './TooltipContext.svelte';
-export let topOffset = 10;
-export let leftOffset = 10;
+/** Use fixed `top` position instead of calculating based on data and mouse position */
+export let top = undefined;
+/** Use fixed `left` position instead of calculating based on data and mouse position */
+export let left = undefined;
+export let topOffset = top ? 0 : 10;
+export let leftOffset = left ? 0 : 10;
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
 export let animate = true;
 export let header = undefined;
@@ -14,24 +18,32 @@ const { containerWidth, containerHeight } = getContext('LayerCake');
 const tooltip = tooltipContext();
 let tooltipWidth = 0;
 let tooltipHeight = 0;
-let top = animate ? spring($tooltip.top) : writable($tooltip.top);
+let topPos = animate ? spring($tooltip.top) : writable($tooltip.top);
 $: if ($tooltip) {
-    if (contained === 'container' && $tooltip.top + topOffset + tooltipHeight > $containerHeight) {
+    if (top != null) {
+        $topPos = top;
+    }
+    else if (contained === 'container' &&
+        $tooltip.top + topOffset + tooltipHeight > $containerHeight) {
         // Change side.  Do not allow tooltip to go above the top
-        $top = Math.max($tooltip.top - (topOffset + tooltipHeight), 0);
+        $topPos = Math.max($tooltip.top - (topOffset + tooltipHeight), 0);
     }
     else {
-        $top = $tooltip.top + topOffset;
+        $topPos = $tooltip.top + topOffset;
     }
 }
-let left = animate ? spring($tooltip.left) : writable($tooltip.left);
+let leftPos = animate ? spring($tooltip.left) : writable($tooltip.left);
 $: if ($tooltip) {
-    if (contained === 'container' && $tooltip.left + leftOffset + tooltipWidth > $containerWidth) {
+    if (left != null) {
+        $leftPos = left;
+    }
+    else if (contained === 'container' &&
+        $tooltip.left + leftOffset + tooltipWidth > $containerWidth) {
         // Change side
-        $left = Math.max($tooltip.left - (leftOffset + tooltipWidth), 0);
+        $leftPos = Math.max($tooltip.left - (leftOffset + tooltipWidth), 0);
     }
     else {
-        $left = $tooltip.left + leftOffset;
+        $leftPos = $tooltip.left + leftOffset;
     }
 }
 </script>
@@ -39,8 +51,8 @@ $: if ($tooltip) {
 {#if $tooltip.data}
   <div
     class={cls('absolute pointer-events-none z-50', classes.root)}
-    style:top="{$top}px"
-    style:left="{$left}px"
+    style:top="{$topPos}px"
+    style:left="{$leftPos}px"
     transition:fade={{ duration: 100 }}
     bind:clientWidth={tooltipWidth}
     bind:clientHeight={tooltipHeight}

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

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        top?: number | undefined;
+        left?: number | undefined;
         topOffset?: number | undefined;
         leftOffset?: number | undefined;
         contained?: false | "container" | undefined;

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
+export { default as Calendar } from './Calendar.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';

package/dist/components/index.js

@@ -5,6 +5,7 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
+export { default as Calendar } from './Calendar.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';

package/dist/docs/ViewSourceButton.svelte

@@ -13,7 +13,7 @@ export let icon;
     <Dialog
       {open}
       on:close={toggle}
-      class="max-h-[98vh] md:max-h-[90vh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
+      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
     >
       <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
         <div class="overflow-auto">

package/dist/stores/motionStore.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 import { spring, tweened } from 'svelte/motion';
 export type SpringOptions = Parameters<typeof spring>[1];
 export type TweenedOptions = Parameters<typeof tweened>[1];

package/dist/utils/pivot.d.ts

@@ -1,14 +1,14 @@
-export declare function getAccessor(key: any): any;
+export declare function getAccessor(key: string): (d: any) => any;
 /**
  * Pivot longer (columns to rows)
  *  - see: https://observablehq.com/d/3ea8d446f5ba96fe
  *  - see also: https://observablehq.com/d/ac2a320cf2b0adc4 as generator
  */
-export declare function pivotLonger(data: any, columns: any, name: any, value: any): any;
+export declare function pivotLonger(data: any[], columns: string[], name: string, value: string): any[];
 /**
  * Pivot wider (rows to columns)
  *  - see: https://github.com/d3/d3-array/issues/142#issuecomment-761861983
  */
-export declare function pivotWider(data: any, column: any, name: any, value: any): any[];
-export declare function first(items: any): any;
-export declare function last(items: any): any;
+export declare function pivotWider(data: any[], column: string, name: string, value: string): any[];
+export declare function first(items: any[]): any;
+export declare function last(items: any[]): any;

package/dist/utils/rect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 type DimensionGetterOptions = {
     /** Override `x` accessor from context */
     x?: (item: any) => any;

package/dist/utils/scales.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 import { tweened, spring } from 'svelte/motion';
 import { type MotionOptions } from '../stores/motionStore';
 import { type ScaleBand } from 'd3-scale';
@@ -29,7 +30,7 @@ export declare function groupScaleBand<Domain extends {
  * 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) | undefined) => import("svelte/store").Unsubscriber;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: import("svelte/store").Invalidator<any> | undefined) => import("svelte/store").Unsubscriber;
     domain: (values: any) => Promise<void>;
     range: (values: any) => Promise<void>;
 };
@@ -37,7 +38,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) | undefined) => import("svelte/store").Unsubscriber;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: import("svelte/store").Invalidator<any> | undefined) => import("svelte/store").Unsubscriber;
     domain: (values: any) => Promise<void>;
     range: (values: any) => Promise<void>;
 };
@@ -45,7 +46,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) | undefined) => import("svelte/store").Unsubscriber;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: import("svelte/store").Invalidator<any> | undefined) => import("svelte/store").Unsubscriber;
     domain: (values: any) => void | Promise<void>;
     range: (values: any) => void | Promise<void>;
 };

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "layerchart",
+  "description": "Composable Svelte chart components to build a wide range of visualizations",
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.22.2",
+  "version": "0.24.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -22,50 +23,52 @@
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
     "@sveltejs/adapter-vercel": "^3.0.3",
-    "@sveltejs/kit": "^1.22.4",
-    "@sveltejs/package": "^2.2.0",
+    "@sveltejs/kit": "^1.25.0",
+    "@sveltejs/package": "^2.2.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/d3-array": "^3.0.5",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/d3-array": "^3.0.7",
     "@types/d3-delaunay": "^6.0.1",
-    "@types/d3-dsv": "^3.0.1",
-    "@types/d3-geo": "^3.0.3",
-    "@types/d3-hierarchy": "^3.1.2",
+    "@types/d3-dsv": "^3.0.2",
+    "@types/d3-geo": "^3.0.4",
+    "@types/d3-hierarchy": "^3.1.3",
     "@types/d3-interpolate": "^3.0.1",
     "@types/d3-interpolate-path": "^2.0.0",
     "@types/d3-quadtree": "^3.0.2",
     "@types/d3-random": "^3.0.1",
     "@types/d3-sankey": "^0.12.1",
-    "@types/d3-scale": "^4.0.3",
-    "@types/d3-shape": "^3.1.1",
-    "@types/lodash-es": "^4.17.8",
+    "@types/d3-scale": "^4.0.4",
+    "@types/d3-scale-chromatic": "^3.0.0",
+    "@types/d3-shape": "^3.1.2",
+    "@types/lodash-es": "^4.17.9",
     "@types/marked": "^5.0.1",
     "@types/shapefile": "^0.6.1",
-    "@types/topojson-client": "^3.1.1",
-    "autoprefixer": "^10.4.14",
-    "execa": "^7.2.0",
-    "marked": "^5.1.2",
+    "@types/topojson-client": "^3.1.2",
+    "autoprefixer": "^10.4.15",
+    "execa": "^8.0.1",
+    "marked": "^9.0.0",
     "mdsvex": "^0.11.0",
-    "prettier": "^3.0.1",
+    "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
     "prism-themes": "^1.9.0",
-    "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.4.6",
+    "rehype-slug": "^6.0.0",
+    "svelte": "^4.2.0",
+    "svelte-check": "^3.5.1",
     "svelte-preprocess": "^5.0.4",
-    "svelte2tsx": "^0.6.19",
+    "svelte2tsx": "^0.6.21",
     "tailwindcss": "^3.3.3",
-    "tslib": "^2.6.1",
-    "typescript": "^5.1.6",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^4.4.9",
-    "vite-plugin-sveld": "^1.1.0"
+    "vite": "^4.4.9"
   },
   "type": "module",
   "dependencies": {
     "@changesets/cli": "^2.26.2",
     "@mdi/js": "^7.2.96",
-    "@vercel/analytics": "^1.0.1",
+    "@types/d3-time": "^3.0.0",
+    "@vercel/analytics": "^1.0.2",
     "d3-array": "^3.2.4",
     "d3-delaunay": "^6.0.4",
     "d3-dsv": "^3.0.1",
@@ -80,14 +83,17 @@
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
+    "d3-time": "^3.1.0",
     "date-fns": "^2.30.0",
     "layercake": "^7.6.1",
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
-    "svelte": "^3.59.1",
-    "svelte-ux": "^0.47.4",
+    "svelte-ux": "^0.49.1",
     "topojson-client": "^3.1.0"
   },
+  "peerDependencies": {
+    "svelte": "^3.56.0 || ^4.0.0"
+  },
   "main": "./dist/index.js",
   "exports": {
     ".": {