layerchart 0.32.1 → 0.32.3

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

@@ -3,7 +3,7 @@ import { type ComponentProps } from 'svelte';
 import { fade } from 'svelte/transition';
 import type { SVGAttributes } from 'svelte/elements';
 import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
-import { type TransitionParams } from 'svelte-ux';
+import { type FormatType, type TransitionParams } from 'svelte-ux';
 import Text from './Text.svelte';
 declare const __propDef: {
     props: {
@@ -12,7 +12,7 @@ declare const __propDef: {
         /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Control the number of ticks*/ ticks?: number | any[] | Function | undefined;
         /** Length of the tick line */ tickSize?: number | undefined;
-        format?: any;
+        format?: FormatType | undefined;
         labelProps?: Partial<ComponentProps<Text>> | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

package/dist/components/GeoContext.svelte

@@ -1,6 +1,6 @@
 <script context="module">import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
-import { geoMercator, } from 'd3-geo';
+import {} from 'd3-geo';
 export const geoContextKey = Symbol();
 export function geoContext() {
     return getContext(geoContextKey);
@@ -12,7 +12,7 @@ function setGeoContext(geo) {
 
 <script>const { width, height } = getContext('LayerCake');
 /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
-export let projection = geoMercator;
+export let projection = undefined;
 export let fitGeojson;
 /** By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
 export let fixedAspectRatio = undefined;
@@ -22,10 +22,10 @@ export let rotate = undefined;
 export let scale = undefined;
 export let translate = undefined;
 export let center = undefined;
-const geo = writable(projection());
+const geo = writable(projection?.());
 setGeoContext(geo);
 $: fitSizeRange = (fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]);
-$: {
+$: if (projection) {
     const _projection = projection();
     if (fitGeojson && 'fitSize' in _projection) {
         _projection.fitSize(fitSizeRange, fitGeojson);

package/dist/components/GeoPath.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
 import { geoPath as d3geoPath } from 'd3-geo';
-import { geoContext } from './GeoContext.svelte';
 import { scaleCanvas } from 'layercake';
+import { cls } from 'svelte-ux';
+import { geoContext } from './GeoContext.svelte';
 export let geojson;
 export let fill = undefined;
-export let fillScale = undefined;
 export let stroke = undefined;
 export let strokeWidth = undefined;
 /** Render to canvas */
@@ -32,7 +32,7 @@ $: if (renderContext === 'canvas' && $ctx) {
         // Set the context here since setting it in `$: geoPath` is a circular reference
         geoPath.context($ctx);
         geoPath(geojson);
-        $ctx.fillStyle = fill || (fillScale && $rGet(fillScale)) || 'transparent';
+        $ctx.fillStyle = fill || 'transparent';
         $ctx.fill();
         $ctx.lineWidth = strokeWidth;
         $ctx.strokeStyle = stroke;
@@ -44,13 +44,17 @@ $: if (renderContext === 'canvas' && $ctx) {
 {#if renderContext === 'svg'}
   <slot {geoPath}>
     <path
+      {...$$restProps}
       d={geoPath(geojson)}
-      fill={fill || (fillScale && $rGet(fillScale)) || 'transparent'}
-      stroke={stroke || 'black'}
+      {fill}
+      {stroke}
       on:mousemove={(e) => tooltip?.show(e, geojson)}
+      on:mousemove
       on:mouseleave={(e) => tooltip?.hide()}
+      on:mouseleave
       on:click={(event) => dispatch('click', { geoPath, event })}
-      {...$$restProps}
+      on:click
+      class={cls($$props.fill == null && 'fill-transparent', $$props.class)}
     />
   </slot>
 {/if}

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

@@ -6,7 +6,6 @@ declare const __propDef: {
         [x: string]: any;
         geojson: GeoPermissibleObjects;
         fill?: string | undefined;
-        fillScale?: Object | undefined;
         stroke?: string | undefined;
         strokeWidth?: number | string | undefined;
         render?: ((ctx: CanvasRenderingContext2D, { geoPath: GeoPath }: {
@@ -15,10 +14,9 @@ declare const __propDef: {
         tooltip?: TooltipContextValue | undefined;
     };
     events: {
-        click: CustomEvent<{
-            geoPath: GeoPath;
-            event: MouseEvent;
-        }>;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+        click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/GeoSpline.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
-import { geoOrthographic, geoInterpolate } from 'd3-geo';
 import { curveNatural } from 'd3-shape';
+import { geoOrthographic, geoInterpolate } from 'd3-geo';
 import { geoContext } from './GeoContext.svelte';
 import Spline from './Spline.svelte';
 export let link;

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
+import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/components/Group.svelte

@@ -20,16 +20,13 @@ export let tweened = undefined;
 let tweened_x = motionStore(initialX, { spring, tweened });
 let tweened_y = motionStore(initialY, { spring, tweened });
 $: tick().then(() => {
-    tweened_x.set(x);
-    tweened_y.set(y);
+    tweened_x.set(x ?? (center === 'x' || center === true ? $width / 2 : 0));
+    tweened_y.set(y ?? (center === 'y' || center === true ? $height / 2 : 0));
 });
 let transform = undefined;
-$: if (x != null || y != null) {
+$: if (center || x != null || y != null) {
     transform = `translate(${$tweened_x ?? 0}, ${$tweened_y ?? 0})`;
 }
-$: if (center) {
-    transform = `translate(${$width / 2}, ${$height / 2})`;
-}
 </script>
 
 <g {transform} {...$$restProps} on:click on:mousemove on:mouseleave>

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

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

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,7 +8,7 @@ declare const __propDef: {
         width?: number | undefined;
         height?: number | undefined;
         ticks?: number | undefined;
-        tickFormat?: any;
+        tickFormat?: FormatType | undefined;
         tickValues?: any[] | undefined;
         tickFontSize?: number | undefined;
         tickSize?: number | undefined;

package/dist/components/Pie.svelte

@@ -40,6 +40,7 @@ export let outerRadius = undefined;
 export let cornerRadius = 0;
 export let padAngle = 0;
 // export let padRadius = 0;
+export let placement = 'center';
 export let spring = undefined;
 export let tweened = undefined;
 /**
@@ -50,7 +51,7 @@ export let offset = 0;
  * Tooltip context to setup mouse events to show tooltip for related data
  */
 export let tooltip = undefined;
-const { data: contextData, x, y, xRange, rGet, config } = getContext('LayerCake');
+const { data: contextData, x, y, xRange, rGet, config, width, height } = getContext('LayerCake');
 $: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
 let tweened_endAngle = motionStore(0, { spring, tweened });
 $: tweened_endAngle.set(resolved_endAngle);
@@ -61,9 +62,20 @@ $: pie = d3pie()
     .value($x);
 $: arcs = pie(data ?? $contextData);
 // $: console.log({ arcs, $yRange });
+$: radius = Math.min($width / 2, $height / 2);
+$: coords = {
+    x: placement === 'left'
+        ? radius
+        : placement === 'center'
+            ? $width / 2
+            : placement === 'right'
+                ? $width - radius
+                : 0,
+    y: placement === 'none' ? 0 : $height / 2,
+};
 </script>
 
-<Group center>
+<Group x={coords.x} y={coords.y}>
   <slot {arcs}>
     {#each arcs as arc, index}
       <Arc

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

@@ -25,6 +25,7 @@ declare const __propDef: {
            */ outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
         padAngle?: number | undefined;
+        placement?: "center" | "left" | "right" | "none" | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         /**

package/dist/components/TooltipContext.svelte

@@ -288,10 +288,10 @@ $: if (mode === 'bounds' || mode === 'band') {
 {:else if mode === 'voronoi'}
   <Svg>
     <Voronoi
-      on:mousemove={(e) => showTooltip(e.detail.event, e.detail.point.data)}
+      on:mousemove={(e) => showTooltip(e.detail.event, e.detail.data)}
       on:mouseleave={hideTooltip}
       on:click={(e) => {
-        onClick({ data: e.detail.point.data });
+        onClick({ data: e.detail.data });
       }}
       classes={{ path: cls(debug && 'fill-danger/10 stroke-danger') }}
     />

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

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
         label: any;
         value?: any;
-        format?: any;
+        format?: FormatType | undefined;
         valueAlign?: "center" | "left" | "right" | undefined;
         classes?: {
             label?: string | undefined;

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import * as d3 from 'd3-hierarchy';
 declare const __propDef: {
     props: {
-        tile?: "slice" | d3.RatioSquarifyTilingFactory | "binary" | "squarify" | "resquarify" | "dice" | "sliceDice" | undefined;
+        tile?: "slice" | "binary" | "dice" | d3.RatioSquarifyTilingFactory | "squarify" | "resquarify" | "sliceDice" | undefined;
         padding?: number | undefined;
         paddingInner?: number | undefined;
         paddingOuter?: number | undefined;

package/dist/components/Voronoi.svelte

@@ -1,33 +1,55 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
 import { draw as _drawTransition } from 'svelte/transition';
-import { Delaunay } from 'd3-delaunay';
-import { min } from 'd3-array';
 import { cls } from 'svelte-ux';
-const { flatData, xGet, yGet, width, height } = getContext('LayerCake');
+import { min } from 'd3-array';
+import { Delaunay } from 'd3-delaunay';
+import { geoVoronoi } from 'd3-geo-voronoi';
+import GeoPath from './GeoPath.svelte';
+import { geoContext } from './GeoContext.svelte';
+const { flatData, xGet, yGet, x: xContext, y: yContext, width, height } = getContext('LayerCake');
+const geo = geoContext();
 /** Override data instead of using context */
 export let data = undefined;
 export let classes = {};
 const dispatch = createEventDispatcher();
 $: points = (data ?? $flatData).map((d) => {
-    const xValue = $xGet(d);
-    const yValue = $yGet(d);
+    // geo voronoi needs raw latitude/longtude, not mapped to range (chart dimensions)
+    const xValue = $geo ? $xContext(d) : $xGet(d);
+    const yValue = $geo ? $yContext(d) : $yGet(d);
     const x = Array.isArray(xValue) ? min(xValue) : xValue;
     const y = Array.isArray(yValue) ? min(yValue) : yValue;
     const point = [x, y];
     point.data = d;
     return point;
 });
-$: voronoi = Delaunay.from(points).voronoi([0, 0, Math.max($width, 0), Math.max($height, 0)]); // width and/or height can sometimes be negative (when loading data remotely and updately)
+// Width and/or height can sometimes be negative (when loading data remotely and updately)
+$: boundWidth = Math.max($width, 0);
+$: boundHeight = Math.max($height, 0);
 </script>
 
 <g {...$$restProps} class={cls(classes.root, $$props.class)}>
-  {#each points as point, i}
-    <path
-      d={voronoi.renderCell(i)}
-      class={cls('fill-transparent', classes.path)}
-      on:mousemove={(e) => dispatch('mousemove', { point, event: e })}
-      on:mouseleave
-      on:click={(e) => dispatch('click', { point })}
-    />
-  {/each}
+  {#if $geo}
+    {@const polygons = geoVoronoi().polygons(points)}
+    {#each polygons.features as feature}
+      <GeoPath
+        geojson={feature}
+        class={cls('fill-transparent', classes.path)}
+        on:mousemove={(e) =>
+          dispatch('mousemove', { event: e, data: feature.properties.site.data, feature })}
+        on:mouseleave
+        on:click={(e) => dispatch('click', { data: feature.properties.site.data, feature })}
+      />
+    {/each}
+  {:else}
+    {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
+    {#each points as point, i}
+      <path
+        d={voronoi.renderCell(i)}
+        class={cls('fill-transparent', classes.path)}
+        on:mousemove={(e) => dispatch('mousemove', { event: e, data: point.data, point })}
+        on:mouseleave
+        on:click={(e) => dispatch('click', { data: point.data, point })}
+      />
+    {/each}
+  {/if}
 </g>

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { GeoPermissibleObjects } from 'd3-geo';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -11,15 +12,15 @@ declare const __propDef: {
     events: {
         mouseleave: MouseEvent;
         click: CustomEvent<{
-            point: {
-                data: any;
-            };
+            data: any;
+            point?: [number, number] | undefined;
+            feature?: GeoPermissibleObjects | undefined;
         }>;
         mousemove: CustomEvent<{
-            point: {
-                data: any;
-            };
             event: MouseEvent;
+            data: any;
+            point?: [number, number] | undefined;
+            feature?: GeoPermissibleObjects | undefined;
         }>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
         disablePointer?: boolean | undefined;
-        scroll?: "scale" | "translate" | "none" | undefined;
+        scroll?: "none" | "scale" | "translate" | undefined;
         clickDistance?: number | undefined;
         initialTranslate?: {
             x: number;

package/package.json

@@ -4,14 +4,14 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.32.1",
+  "version": "0.32.3",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.4",
     "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.1",
-    "@sveltejs/package": "^2.2.7",
+    "@sveltejs/kit": "^2.5.3",
+    "@sveltejs/package": "^2.3.0",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",
     "@types/d3-array": "^3.2.1",
@@ -32,14 +32,13 @@
     "@types/prismjs": "^1.26.3",
     "@types/shapefile": "^0.6.4",
     "@types/topojson-client": "^3.1.4",
-    "autoprefixer": "^10.4.17",
-    "d3-color": "^3.1.0",
+    "autoprefixer": "^10.4.18",
     "execa": "^8.0.1",
-    "marked": "^12.0.0",
+    "marked": "^12.0.1",
     "mdsvex": "^0.11.0",
     "posthog-js": "^1.95.1",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.1",
+    "prettier-plugin-svelte": "^3.2.2",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
@@ -47,17 +46,17 @@
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
     "svelte": "^4.2.12",
-    "svelte-check": "^3.6.4",
+    "svelte-check": "^3.6.6",
     "svelte-json-tree": "^2.2.0",
     "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.7.1",
+    "svelte2tsx": "^0.7.3",
     "tailwindcss": "^3.4.1",
     "topojson-client": "^3.1.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.1.4"
+    "vite": "^5.1.5"
   },
   "type": "module",
   "dependencies": {
@@ -67,6 +66,7 @@
     "d3-delaunay": "^6.0.4",
     "d3-dsv": "^3.0.1",
     "d3-geo": "^3.1.0",
+    "d3-geo-voronoi": "^2.0.1",
     "d3-hierarchy": "^3.1.2",
     "d3-interpolate": "^3.0.1",
     "d3-interpolate-path": "^2.3.0",
@@ -78,12 +78,12 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
-    "date-fns": "^3.3.1",
-    "layercake": "^8.0.2",
+    "date-fns": "^3.4.0",
+    "layercake": "^8.0.3",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.108.3",
+    "posthog-js": "^1.113.0",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.61.2",
+    "svelte-ux": "^0.61.5",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {