layerchart 0.32.0 → 0.32.2

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

@@ -5,7 +5,7 @@ export let cx = 0;
 export let initialCx = cx;
 export let cy = 0;
 export let initialCy = cy;
-export let r;
+export let r = 1;
 export let initialR = r;
 export let spring = undefined;
 export let tweened = undefined;

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         initialCx?: number | undefined;
         cy?: number | undefined;
         initialCy?: number | undefined;
-        r: number;
+        r?: number | undefined;
         initialR?: number | 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/GeoEdgeFade.svelte

@@ -0,0 +1,22 @@
+<script>import { getContext } from 'svelte';
+import { scaleLinear } from 'd3-scale';
+import { geoDistance } from 'd3-geo';
+import { geoContext } from './GeoContext.svelte';
+export let link;
+const { width, height } = getContext('LayerCake');
+const geo = geoContext();
+const fade = scaleLinear().domain([-0.1, 0]).range([0, 0.1]);
+const clamper = scaleLinear().domain([0, 1]).range([0, 1]).clamp(true);
+// $: center = $geo.invert([$width / 2, $height / 2]);
+$: center = $geo.invert($geo.translate());
+$: source = link.source;
+$: target = link.target;
+$: startDistance = 1.57 - geoDistance(source, center);
+$: endDistance = 1.57 - geoDistance(target, center);
+$: distance = startDistance < endDistance ? startDistance : endDistance;
+$: opacity = clamper(fade(distance));
+</script>
+
+<g {opacity}>
+  <slot />
+</g>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link: {
+            source: [number, number];
+            target: [number, number];
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type GeoEdgeFadeProps = typeof __propDef.props;
+export type GeoEdgeFadeEvents = typeof __propDef.events;
+export type GeoEdgeFadeSlots = typeof __propDef.slots;
+export default class GeoEdgeFade extends SvelteComponentTyped<GeoEdgeFadeProps, GeoEdgeFadeEvents, GeoEdgeFadeSlots> {
+}
+export {};

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

@@ -1,6 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { scaleCanvas } from 'layercake';
 import { geoContext } from './GeoContext.svelte';
+import Circle from './Circle.svelte';
 /** Latitude */
 export let lat;
 /** Longitude */
@@ -22,7 +23,11 @@ $: if (renderContext === 'canvas' && $ctx) {
 </script>
 
 {#if renderContext === 'svg'}
-  <g transform="translate({x},{y})">
-    <slot />
-  </g>
+  {#if $$slots.default}
+    <g transform="translate({x},{y})">
+      <slot />
+    </g>
+  {:else}
+    <Circle cx={x} cy={y} {...$$restProps} />
+  {/if}
 {/if}

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

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        /** Latitude */ lat: number;
-        /** Longitude */ long: number;
-        /** Render to canvas */ render?: ((ctx: CanvasRenderingContext2D, coords: {
+        [x: string]: any;
+        lat: number;
+        long: number;
+        render?: ((ctx: CanvasRenderingContext2D, coords: {
             x: number;
             y: number;
         }) => any) | undefined;

package/dist/components/GeoSpline.svelte

@@ -0,0 +1,37 @@
+<script>import { getContext } from 'svelte';
+import { curveNatural } from 'd3-shape';
+import { geoOrthographic, geoInterpolate } from 'd3-geo';
+import { geoContext } from './GeoContext.svelte';
+import Spline from './Spline.svelte';
+export let link;
+/** Amount of loft to apply to the midle of the curve */
+export let loft = 1.0;
+/**
+ * Curve of spline drawn. Imported via d3-shape.
+ *
+ * @example
+ * import { curveNatural } from 'd3-shape';
+ * <GeoSpline curve={curveNatrual} />
+ *
+ * @type {CurveFactory | CurveFactoryLineOnly | undefined}
+ */
+export let curve = curveNatural;
+const { width, height } = getContext('LayerCake');
+const geo = geoContext();
+$: loftedProjection = geoOrthographic()
+    .translate($geo.translate())
+    .rotate($geo.rotate())
+    .scale($geo.scale() * loft);
+$: source = $geo(link.source);
+$: target = $geo(link.target);
+$: middle = loftedProjection(geoInterpolate(link.source, link.target)(0.5));
+</script>
+
+<Spline
+  data={[source, middle, target]}
+  x={(d) => d[0]}
+  y={(d) => d[1]}
+  defined={(d) => $geo.invert(d)}
+  {curve}
+  {...$$restProps}
+/>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        link: {
+            source: [number, number];
+            target: [number, number];
+        };
+        loft?: number | undefined;
+        curve?: CurveFactory | CurveFactoryLineOnly | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GeoSplineProps = typeof __propDef.props;
+export type GeoSplineEvents = typeof __propDef.events;
+export type GeoSplineSlots = typeof __propDef.slots;
+export default class GeoSpline extends SvelteComponentTyped<GeoSplineProps, GeoSplineEvents, GeoSplineSlots> {
+}
+export {};

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

@@ -8,7 +8,7 @@ declare const __propDef: {
             initialCx?: number | undefined;
             cy?: number | undefined;
             initialCy?: number | undefined;
-            r: number;
+            r?: number | undefined;
             initialR?: number | undefined;
             spring?: boolean | import("svelte/motion").SpringOpts | undefined;
             tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;

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/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

@@ -2,7 +2,7 @@
 import { motionStore } from '../stores/motionStore.js';
 const { width, height, padding } = getContext('LayerCake');
 export let mode = 'svg';
-export let translateOnScale;
+export let translateOnScale = false;
 export let spring = undefined;
 export let tweened = undefined;
 export let disablePointer = false;

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

@@ -3,11 +3,11 @@ import { motionStore } from '../stores/motionStore.js';
 declare const __propDef: {
     props: {
         mode?: "svg" | "manual" | undefined;
-        translateOnScale: false;
+        translateOnScale?: boolean | undefined;
         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/dist/components/index.d.ts

@@ -15,8 +15,10 @@ export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
+export { default as GeoSpline } from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';

package/dist/components/index.js

@@ -15,8 +15,10 @@ export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
+export { default as GeoSpline } from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';

package/package.json

@@ -4,14 +4,14 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "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.1",
+    "svelte-ux": "^0.61.5",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {