layerchart 0.32.3 → 0.34.0

package/dist/components/Axis.svelte

@@ -18,7 +18,7 @@ export let grid = false;
 /** Control the number of ticks*/
 export let ticks = placement === 'left' || placement === 'right' ? 4 : undefined;
 /** Length of the tick line */
-export let tickSize = 4;
+export let tickLength = 4;
 export let format = undefined;
 export let labelProps = undefined;
 export let spring = undefined;
@@ -38,9 +38,11 @@ $: [xRangeMin, xRangeMax] = extent($xRange);
 $: [yRangeMin, yRangeMax] = extent($yRange);
 $: tickVals = Array.isArray(ticks)
     ? ticks
-    : isScaleBand(scale)
-        ? scale.domain()
-        : scale.ticks(typeof ticks === 'function' ? ticks(scale) : ticks);
+    : typeof ticks === 'function'
+        ? ticks(scale)
+        : isScaleBand(scale)
+            ? scale.domain()
+            : scale.ticks(ticks);
 function getCoords(tick) {
     switch (placement) {
         case 'top':
@@ -222,7 +224,7 @@ function getDefaultLabelProps(tick) {
           x1={tickCoords.x}
           y1={tickCoords.y}
           x2={tickCoords.x}
-          y2={tickCoords.y + (placement === 'top' ? -tickSize : tickSize)}
+          y2={tickCoords.y + (placement === 'top' ? -tickLength : tickLength)}
           {tweened}
           {spring}
           class="tick stroke-surface-content/50"
@@ -231,7 +233,7 @@ function getDefaultLabelProps(tick) {
         <Line
           x1={tickCoords.x}
           y1={tickCoords.y}
-          x2={tickCoords.x + (placement === 'left' ? -tickSize : tickSize)}
+          x2={tickCoords.x + (placement === 'left' ? -tickLength : tickLength)}
           y2={tickCoords.y}
           {tweened}
           {spring}

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

@@ -11,7 +11,7 @@ declare const __propDef: {
         /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** 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;
+        /** Length of the tick line */ tickLength?: number | undefined;
         format?: FormatType | undefined;
         labelProps?: Partial<ComponentProps<Text>> | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];

package/dist/components/Chart.svelte

@@ -91,32 +91,8 @@ export let geo = undefined;
   let:flatData
 >
   <GeoContext {...geo} let:projection>
-    {#if tooltip}
-      {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
-      <TooltipContext {...tooltipProps} let:tooltip>
-        <slot
-          {aspectRatio}
-          {containerHeight}
-          {containerWidth}
-          {height}
-          {width}
-          {element}
-          {projection}
-          {tooltip}
-          {xScale}
-          {xGet}
-          {yScale}
-          {yGet}
-          {zScale}
-          {zGet}
-          {rScale}
-          {rGet}
-          {padding}
-          {data}
-          {flatData}
-        />
-      </TooltipContext>
-    {:else}
+    {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
+    <TooltipContext {...tooltipProps} let:tooltip>
       <slot
         {aspectRatio}
         {containerHeight}
@@ -125,6 +101,7 @@ export let geo = undefined;
         {width}
         {element}
         {projection}
+        {tooltip}
         {xScale}
         {xGet}
         {yScale}
@@ -137,6 +114,6 @@ export let geo = undefined;
         {data}
         {flatData}
       />
-    {/if}
+    </TooltipContext>
   </GeoContext>
 </LayerCake>

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

@@ -31,6 +31,13 @@ declare const __propDef: {
             width: number;
             element: Element;
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
+            tooltip: {
+                y: number;
+                x: number;
+                data: null;
+                show: (event: MouseEvent | TouchEvent, tooltipData?: any) => void;
+                hide: () => void;
+            };
             xScale: any;
             xGet: any;
             yScale: any;

package/dist/components/GeoCircle.svelte

@@ -9,4 +9,4 @@ export let precision = 6;
 $: geojson = geoCircle().radius(radius).center(center).precision(precision)();
 </script>
 
-<GeoPath {geojson} {...$$restProps} />
+<GeoPath {geojson} {...$$restProps} on:mousemove on:mouseleave on:click />

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

@@ -7,6 +7,10 @@ declare const __propDef: {
         precision?: number | undefined;
     };
     events: {
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+        click: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/GeoContext.svelte

@@ -13,7 +13,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 = undefined;
-export let fitGeojson;
+export let fitGeojson = undefined;
 /** 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;
 export let clipAngle = undefined;
@@ -22,6 +22,8 @@ export let rotate = undefined;
 export let scale = undefined;
 export let translate = undefined;
 export let center = undefined;
+export let reflectX = undefined;
+export let reflectY = undefined;
 const geo = writable(projection?.());
 setGeoContext(geo);
 $: fitSizeRange = (fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]);
@@ -42,6 +44,12 @@ $: if (projection) {
     if (center && 'center' in _projection) {
         _projection.center(center);
     }
+    if (reflectX) {
+        _projection.reflectX(reflectX);
+    }
+    if (reflectY) {
+        _projection.reflectY(reflectY);
+    }
     if (clipAngle && 'clipAngle' in _projection) {
         _projection.clipAngle(clipAngle);
     }

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

@@ -7,7 +7,7 @@ export declare function geoContext(): GeoContext;
 declare const __propDef: {
     props: {
         /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */ projection?: (() => GeoProjection | GeoIdentityTransform) | undefined;
-        fitGeojson: GeoPermissibleObjects;
+        fitGeojson?: GeoPermissibleObjects | undefined;
         /** 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. */ fixedAspectRatio?: number | undefined;
         clipAngle?: number | undefined;
         clipExtent?: [[number, number], [number, number]] | undefined;
@@ -22,6 +22,8 @@ declare const __propDef: {
         scale?: number | undefined;
         translate?: [number, number] | undefined;
         center?: [number, number] | undefined;
+        reflectX?: boolean | undefined;
+        reflectY?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Legend.svelte

@@ -14,7 +14,7 @@ export let ticks = width / 64;
 export let tickFormat = undefined;
 export let tickValues = undefined;
 export let tickFontSize = 10;
-export let tickSize = 4;
+export let tickLength = 4;
 export let placement = undefined;
 export let classes = {};
 $: if (scale == null && rScale) {
@@ -96,7 +96,7 @@ else {
     tickValues = scale.domain();
     tickLabelOffset = xScale.bandwidth() / 2;
     tickLine = false;
-    tickSize = 0;
+    tickLength = 0;
 }
 </script>
 
@@ -126,8 +126,8 @@ else {
   <slot values={tickValues} {scale}>
     <svg
       {width}
-      height={height + tickSize + tickFontSize}
-      viewBox="0 0 {width} {height + tickSize + tickFontSize}"
+      height={height + tickLength + tickFontSize}
+      viewBox="0 0 {width} {height + tickLength + tickFontSize}"
       class="overflow-visible"
     >
       <g>
@@ -145,7 +145,7 @@ else {
           <text
             text-anchor="middle"
             x={xScale(tick) + tickLabelOffset}
-            y={height + tickSize + tickFontSize}
+            y={height + tickLength + tickFontSize}
             style:font-size={tickFontSize}
             class={cls('fill-surface-content', classes.label)}
           >
@@ -157,7 +157,7 @@ else {
               x1={xScale(tick)}
               y1={0}
               x2={xScale(tick)}
-              y2={height + tickSize}
+              y2={height + tickLength}
               class={cls('stroke-surface-content', classes.tick)}
             />
           {/if}

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

@@ -11,7 +11,7 @@ declare const __propDef: {
         tickFormat?: FormatType | undefined;
         tickValues?: any[] | undefined;
         tickFontSize?: number | undefined;
-        tickSize?: number | undefined;
+        tickLength?: number | undefined;
         placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         classes?: {
             root?: string | undefined;

package/dist/components/TooltipContext.svelte

@@ -40,7 +40,7 @@ const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, heigh
 /**
  * @type {'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual'}
  */
-export let mode = 'bisect-x';
+export let mode = 'manual';
 /**
  * @type {'closest' | 'left' | 'right'}
  */

package/dist/components/{Zoom.svelte → Transform.svelte}

@@ -22,10 +22,10 @@ export function reset() {
     $translate = initialTranslate;
     $scale = initialScale;
 }
-export function increase() {
+export function zoomIn() {
     scaleTo(1.25, { x: $width / 2, y: $height / 2 });
 }
-export function decrease() {
+export function zoomOut() {
     scaleTo(0.8, { x: $width / 2, y: $height / 2 });
 }
 export function translateCenter() {
@@ -47,17 +47,21 @@ export function zoomTo(center, rect) {
 function onMouseDown(e) {
     if (disablePointer)
         return;
+    e.preventDefault();
     dragging = true;
     moved = false;
     svgEl = e.currentTarget.ownerSVGElement; // capture for reference in mousemove event
     startPoint = localPoint(svgEl, e);
     startTranslate = $translate;
-    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mousemove', onMouseMove, { capture: true });
     window.addEventListener('mouseup', onMouseUp);
+    dispatch('dragstart');
 }
 function onMouseMove(e) {
     if (!dragging)
         return;
+    e.preventDefault(); // Stop text selection
+    e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
     const endPoint = localPoint(svgEl, e);
     const deltaX = endPoint.x - startPoint.x;
     const deltaY = endPoint.y - startPoint.y;
@@ -74,6 +78,7 @@ function onMouseUp(e) {
     dragging = false;
     window.removeEventListener('mousemove', onMouseMove);
     window.removeEventListener('mouseup', onMouseUp);
+    dispatch('dragend');
 }
 function onClick(e) {
     if (moved) {
@@ -159,7 +164,7 @@ $: if (mode === 'svg') {
     };
     transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
 }
-$: dispatch('zoom', { scale: $scale, translate: $translate });
+$: dispatch('transform', { scale: $scale, translate: $translate });
 </script>
 
 <g

package/dist/components/{Zoom.svelte.d.ts → Transform.svelte.d.ts}

@@ -15,8 +15,8 @@ declare const __propDef: {
         } | undefined;
         initialScale?: number | undefined;
         reset?: (() => void) | undefined;
-        increase?: (() => void) | undefined;
-        decrease?: (() => void) | undefined;
+        zoomIn?: (() => void) | undefined;
+        zoomOut?: (() => void) | undefined;
         translateCenter?: (() => void) | undefined;
         zoomTo?: ((center: {
             x: number;
@@ -31,7 +31,9 @@ declare const __propDef: {
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
-        zoom: CustomEvent<{
+        dragstart: CustomEvent<null>;
+        dragend: CustomEvent<null>;
+        transform: CustomEvent<{
             scale: number;
             translate: {
                 x: number;
@@ -55,13 +57,13 @@ declare const __propDef: {
         };
     };
 };
-export type ZoomProps = typeof __propDef.props;
-export type ZoomEvents = typeof __propDef.events;
-export type ZoomSlots = typeof __propDef.slots;
-export default class Zoom extends SvelteComponentTyped<ZoomProps, ZoomEvents, ZoomSlots> {
+export type TransformProps = typeof __propDef.props;
+export type TransformEvents = typeof __propDef.events;
+export type TransformSlots = typeof __propDef.slots;
+export default class Transform extends SvelteComponentTyped<TransformProps, TransformEvents, TransformSlots> {
     get reset(): () => void;
-    get increase(): () => void;
-    get decrease(): () => void;
+    get zoomIn(): () => void;
+    get zoomOut(): () => void;
     get translateCenter(): () => void;
     get zoomTo(): (center: {
         x: number;

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" | "binary" | "dice" | d3.RatioSquarifyTilingFactory | "squarify" | "resquarify" | "sliceDice" | undefined;
+        tile?: "slice" | d3.RatioSquarifyTilingFactory | "binary" | "squarify" | "resquarify" | "dice" | "sliceDice" | undefined;
         padding?: number | undefined;
         paddingInner?: number | undefined;
         paddingOuter?: number | undefined;

package/dist/components/index.d.ts

@@ -50,4 +50,4 @@ export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';
-export { default as Zoom } from './Zoom.svelte';
+export { default as Transform } from './Transform.svelte';

package/dist/components/index.js

@@ -50,4 +50,4 @@ export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';
-export { default as Zoom } from './Zoom.svelte';
+export { default as Transform } from './Transform.svelte';

package/dist/docs/{ZoomControls.svelte → TransformControls.svelte}

@@ -1,6 +1,6 @@
 <script>import { Button, Tooltip, cls } from 'svelte-ux';
 import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, } from '@mdi/js';
-export let zoom;
+export let transform;
 export let placement = 'top-right';
 export let orientation = 'vertical';
 </script>
@@ -25,28 +25,28 @@ export let orientation = 'vertical';
   <Tooltip title="Zoom in">
     <Button
       icon={mdiMagnifyPlusOutline}
-      on:click={() => zoom.increase()}
+      on:click={() => transform.zoomIn()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Zoom out">
     <Button
       icon={mdiMagnifyMinusOutline}
-      on:click={() => zoom.decrease()}
+      on:click={() => transform.zoomOut()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Center">
     <Button
       icon={mdiImageFilterCenterFocus}
-      on:click={() => zoom.translateCenter()}
+      on:click={() => transform.translateCenter()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Reset">
     <Button
       icon={mdiArrowULeftTop}
-      on:click={() => zoom.reset()}
+      on:click={() => transform.reset()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type Transform from '../components/Transform.svelte';
+declare const __propDef: {
+    props: {
+        transform: Transform;
+        placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TransformControlsProps = typeof __propDef.props;
+export type TransformControlsEvents = typeof __propDef.events;
+export type TransformControlsSlots = typeof __propDef.slots;
+export default class TransformControls extends SvelteComponentTyped<TransformControlsProps, TransformControlsEvents, TransformControlsSlots> {
+}
+export {};

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.32.3",
+  "version": "0.34.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",
@@ -46,17 +46,17 @@
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
     "svelte": "^4.2.12",
-    "svelte-check": "^3.6.6",
+    "svelte-check": "^3.6.7",
     "svelte-json-tree": "^2.2.0",
     "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.7.3",
+    "svelte2tsx": "^0.7.4",
     "tailwindcss": "^3.4.1",
     "topojson-client": "^3.1.0",
     "tslib": "^2.6.2",
     "typescript": "^5.4.2",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.1.5"
+    "vite": "^5.1.6"
   },
   "type": "module",
   "dependencies": {
@@ -65,7 +65,7 @@
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
     "d3-dsv": "^3.0.1",
-    "d3-geo": "^3.1.0",
+    "d3-geo": "^3.1.1",
     "d3-geo-voronoi": "^2.0.1",
     "d3-hierarchy": "^3.1.2",
     "d3-interpolate": "^3.0.1",
@@ -74,16 +74,16 @@
     "d3-random": "^3.0.1",
     "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.0.0",
+    "d3-scale-chromatic": "^3.1.0",
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
-    "date-fns": "^3.4.0",
-    "layercake": "^8.0.3",
+    "date-fns": "^3.6.0",
+    "layercake": "^8.1.1",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.113.0",
+    "posthog-js": "^1.116.0",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.61.5",
+    "svelte-ux": "^0.62.0",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {

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

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type Zoom from '../components/Zoom.svelte';
-declare const __propDef: {
-    props: {
-        zoom: Zoom;
-        placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
-        orientation?: "horizontal" | "vertical" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ZoomControlsProps = typeof __propDef.props;
-export type ZoomControlsEvents = typeof __propDef.events;
-export type ZoomControlsSlots = typeof __propDef.slots;
-export default class ZoomControls extends SvelteComponentTyped<ZoomControlsProps, ZoomControlsEvents, ZoomControlsSlots> {
-}
-export {};