layerchart 0.22.1 → 0.23.0

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,68 @@
+<script>import { getContext } from 'svelte';
+import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
+import Rect from './Rect.svelte';
+import MonthPath from './MonthPath.svelte';
+import { index } from 'd3-array';
+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,
+        width: cellWidth,
+        height: cellHeight,
+        color: $config.r ? $rGet(cellData) : 'transparent',
+        data: cellData,
+    };
+});
+</script>
+
+<slot {cells}>
+  {#each cells as cell}
+    <Rect
+      x={cell.x}
+      y={cell.y}
+      width={cell.width}
+      height={cell.height}
+      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}
+    />
+  {/each}
+{/if}

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

@@ -0,0 +1,37 @@
+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;
+                width: number;
+                height: 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

@@ -2,7 +2,7 @@
 // export { Svg, Html };
 // TODO: Workaround for sveld error: `Cannot read properties of null (reading 'type')` in `ComponentParser`
 // See: https://github.com/carbon-design-system/sveld/issues/104
-import { LayerCake, Svg as _Svg, Html as _Html, Canvas as _Canvas, WebGL as _WebGL } from 'layercake';
+import { LayerCake, Svg as _Svg, Html as _Html, Canvas as _Canvas, WebGL as _WebGL, } from 'layercake';
 export const Svg = _Svg;
 export const Html = _Html;
 export const Canvas = _Canvas;
@@ -80,6 +80,8 @@ export let geo = undefined;
   let:element
   let:xScale
   let:yScale
+  let:zScale
+  let:rScale
 >
   <GeoContext {...geo} let:projection>
     {#if tooltip}
@@ -95,6 +97,8 @@ export let geo = undefined;
           {tooltip}
           {xScale}
           {yScale}
+          {zScale}
+          {rScale}
         />
       </TooltipContext>
     {:else}
@@ -108,6 +112,8 @@ export let geo = undefined;
         {projection}
         {xScale}
         {yScale}
+        {zScale}
+        {rScale}
       />
     {/if}
   </GeoContext>

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

@@ -33,6 +33,8 @@ declare const __propDef: {
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
             xScale: any;
             yScale: any;
+            zScale: any;
+            rScale: any;
         };
     };
 };

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

@@ -164,7 +164,7 @@ $: if ($tooltip.data) {
         spring
         {..._area}
         {...typeof area === 'object' ? area : null}
-        class={cls(!area.fill && 'fill-black/10', typeof area === 'object' ? area.class : null)}
+        class={cls(!area.fill && 'fill-black/5', typeof area === 'object' ? area.class : null)}
         on:click
       />
     </slot>

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/LinearGradient.svelte

@@ -42,4 +42,4 @@ export let units = 'objectBoundingBox';
   </linearGradient>
 </defs>
 
-<slot {id} />
+<slot {id} url="url(#{id})" />

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

@@ -21,6 +21,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/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/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/path.d.ts

@@ -3,3 +3,10 @@
  * see: https://svelte.dev/examples#easing
  */
 export declare function getEasingPath(easing: (t: number) => number, count?: number): string;
+/** Create circle using path data.  Useful for labels.  See also d3-shape's arc */
+export declare function circlePath(dimensions: {
+    cx: number;
+    cy: number;
+    r: number;
+    sweep?: 'inside' | 'outside';
+}): string;

package/dist/utils/path.js

@@ -12,3 +12,13 @@ export function getEasingPath(easing, count = 1000) {
     }
     return pathData;
 }
+/** Create circle using path data.  Useful for labels.  See also d3-shape's arc */
+export function circlePath(dimensions) {
+    // sweep: 0 (inside), 1 (outside)
+    const { cx, cy, r, sweep = 'outside' } = dimensions;
+    return `
+    M ${cx - r} ${cy}
+    a ${r},${r} 0 1,${sweep} ${r * 2},0
+    a ${r},${r} 0 1,${sweep} -${r * 2},0
+  `;
+}

package/dist/utils/pivot.d.ts

@@ -9,6 +9,6 @@ export declare function pivotLonger(data: any, columns: any, name: any, value: a
  * 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 pivotWider(data: any, column: any, name: any, value: any): unknown[];
 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

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -21,51 +21,52 @@
   },
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
-    "@sveltejs/adapter-vercel": "^3.0.2",
-    "@sveltejs/kit": "^1.22.3",
-    "@sveltejs/package": "^2.2.0",
+    "@sveltejs/adapter-vercel": "^3.0.3",
+    "@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-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.0",
+    "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.7",
-    "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 +81,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.3",
+    "svelte-ux": "^0.49.0",
     "topojson-client": "^3.1.0"
   },
+  "peerDependencies": {
+    "svelte": "^3.56.0 || ^4.0.0"
+  },
   "main": "./dist/index.js",
   "exports": {
     ".": {