layerchart 0.53.0 → 0.54.1

package/dist/components/TransformControls.svelte

@@ -1,36 +1,64 @@
-<script>import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
-import { cls } from '@layerstack/tailwind';
-import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, mdiChevronDown, mdiResize, mdiArrowExpandAll, mdiCancel, } from '@mdi/js';
-import { transformContext } from './TransformContext.svelte';
-export let placement = 'top-right';
-export let orientation = 'vertical';
-export let show = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'];
-$: menuPlacementByOrientationAndPlacement = {
+<script lang="ts">
+  import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
+
+  import {
+    mdiArrowULeftTop,
+    mdiMagnifyPlusOutline,
+    mdiMagnifyMinusOutline,
+    mdiImageFilterCenterFocus,
+    mdiChevronDown,
+    mdiResize,
+    mdiArrowExpandAll,
+    mdiCancel,
+  } from '@mdi/js';
+
+  import { transformContext } from './TransformContext.svelte';
+
+  type Placement =
+    | 'top-left'
+    | 'top'
+    | 'top-right'
+    | 'left'
+    | 'center'
+    | 'right'
+    | 'bottom-left'
+    | 'bottom'
+    | 'bottom-right';
+
+  export let placement: Placement = 'top-right';
+  export let orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
+  export let show: Actions[] = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'];
+
+  $: menuPlacementByOrientationAndPlacement = {
     horizontal: {
-        'top-left': 'bottom-end',
-        top: 'bottom-end',
-        'top-right': 'bottom-end',
-        left: 'bottom-end',
-        center: 'bottom-end',
-        right: 'bottom-end',
-        'bottom-left': 'top-end',
-        bottom: 'top-end',
-        'bottom-right': 'top-end',
+      'top-left': 'bottom-end',
+      top: 'bottom-end',
+      'top-right': 'bottom-end',
+      left: 'bottom-end',
+      center: 'bottom-end',
+      right: 'bottom-end',
+      'bottom-left': 'top-end',
+      bottom: 'top-end',
+      'bottom-right': 'top-end',
     },
     vertical: {
-        'top-left': 'right-start',
-        top: 'right-start',
-        'top-right': 'left-start',
-        left: 'right-start',
-        center: 'right-start',
-        right: 'left-start',
-        'bottom-left': 'right-end',
-        bottom: 'right-end',
-        'bottom-right': 'left-end',
+      'top-left': 'right-start',
+      top: 'right-start',
+      'top-right': 'left-start',
+      left: 'right-start',
+      center: 'right-start',
+      right: 'left-start',
+      'bottom-left': 'right-end',
+      bottom: 'right-end',
+      'bottom-right': 'left-end',
     },
-};
-const transform = transformContext();
-const scrollMode = transform.scrollMode;
+  } as const;
+
+  const transform = transformContext();
+  const scrollMode = transform.scrollMode;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: ("horizontal" | "vertical") | undefined;
         show?: ("reset" | "scrollMode" | "zoomIn" | "zoomOut" | "center")[] | undefined;
     };

package/dist/components/Tree.svelte

@@ -1,31 +1,41 @@
-<script>import { tree as d3Tree } from 'd3-hierarchy';
-import { chartContext } from './ChartContext.svelte';
-const { data, width, height } = chartContext();
-/**
- * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
- * If unset, layout size is used instead.  When a node size is specified, the root node is always
- * positioned at `⟨0, 0⟩`.
- *
- * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
- */
-export let nodeSize = undefined;
-/**
- * see: https://github.com/d3/d3-hierarchy#tree_separation
- */
-export let separation = undefined;
-export let orientation = 'horizontal';
-let tree;
-$: {
+<script lang="ts">
+  import { type HierarchyPointNode, tree as d3Tree, type TreeLayout } from 'd3-hierarchy';
+  import { chartContext } from './ChartContext.svelte';
+
+  const { data, width, height } = chartContext();
+
+  /**
+   * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
+   * If unset, layout size is used instead.  When a node size is specified, the root node is always
+   * positioned at `⟨0, 0⟩`.
+   *
+   * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+   */
+  export let nodeSize: [number, number] | undefined = undefined;
+
+  /**
+   * see: https://github.com/d3/d3-hierarchy#tree_separation
+   */
+  export let separation:
+    | ((a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number)
+    | undefined = undefined;
+
+  export let orientation: 'vertical' | 'horizontal' = 'horizontal';
+
+  let tree: TreeLayout<any>;
+  $: {
     tree = d3Tree().size(orientation === 'horizontal' ? [$height, $width] : [$width, $height]);
+
     if (nodeSize) {
-        tree.nodeSize(nodeSize);
+      tree.nodeSize(nodeSize);
     }
     if (separation) {
-        tree.separation(separation);
+      tree.separation(separation);
     }
-}
-// @ts-expect-error
-$: treeData = tree($data);
+  }
+
+  // @ts-expect-error
+  $: treeData = tree($data);
 </script>
 
 <slot nodes={treeData.descendants()} links={treeData.links()} />

package/dist/components/Treemap.svelte

@@ -1,60 +1,88 @@
-<script>import { treemap as d3treemap, treemapBinary, treemapDice, treemapResquarify, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3-hierarchy';
-import { chartContext } from './ChartContext.svelte';
-import { aspectTile } from '../utils/treemap.js';
-const { data, width, height } = chartContext();
-export let tile = treemapSquarify;
-export let padding = 0;
-export let paddingInner = 0;
-export let paddingOuter = 0;
-export let paddingTop = 0;
-export let paddingBottom = 0;
-export let paddingLeft = undefined;
-export let paddingRight = undefined;
-export let selected = null;
-$: tileFunc =
+<script lang="ts">
+  import {
+    treemap as d3treemap,
+    treemapBinary,
+    treemapDice,
+    treemapResquarify,
+    treemapSlice,
+    treemapSliceDice,
+    treemapSquarify,
+    type HierarchyNode,
+    type HierarchyRectangularNode,
+    type TreemapLayout,
+  } from 'd3-hierarchy';
+
+  import { chartContext } from './ChartContext.svelte';
+  import { aspectTile } from '../utils/treemap.js';
+
+  const { data, width, height } = chartContext();
+
+  export let tile:
+    | typeof treemapSquarify
+    | 'binary'
+    | 'squarify'
+    | 'resquarify'
+    | 'dice'
+    | 'slice'
+    | 'sliceDice' = treemapSquarify;
+  export let padding = 0;
+  export let paddingInner = 0;
+  export let paddingOuter = 0;
+  export let paddingTop = 0;
+  export let paddingBottom = 0;
+  export let paddingLeft: number | undefined = undefined;
+  export let paddingRight: number | undefined = undefined;
+
+  export let selected: HierarchyRectangularNode<any> | null | undefined = null;
+
+  $: tileFunc =
     tile === 'squarify'
-        ? treemapSquarify
-        : tile === 'resquarify'
-            ? treemapResquarify
-            : tile === 'binary'
-                ? treemapBinary
-                : tile === 'dice'
-                    ? treemapDice
-                    : tile === 'slice'
-                        ? treemapSlice
-                        : tile === 'sliceDice'
-                            ? treemapSliceDice
-                            : tile;
-let treemap;
-$: {
+      ? treemapSquarify
+      : tile === 'resquarify'
+        ? treemapResquarify
+        : tile === 'binary'
+          ? treemapBinary
+          : tile === 'dice'
+            ? treemapDice
+            : tile === 'slice'
+              ? treemapSlice
+              : tile === 'sliceDice'
+                ? treemapSliceDice
+                : tile;
+
+  let treemap: TreemapLayout<any>;
+  $: {
     treemap = d3treemap()
-        .size([$width, $height])
-        .tile(aspectTile(tileFunc, $width, $height));
+      .size([$width, $height])
+      .tile(aspectTile(tileFunc, $width, $height));
+
     if (padding) {
-        treemap.padding(padding);
+      treemap.padding(padding);
     }
     if (paddingInner) {
-        treemap.paddingInner(paddingInner);
+      treemap.paddingInner(paddingInner);
     }
     if (paddingOuter) {
-        treemap.paddingOuter(paddingOuter);
+      treemap.paddingOuter(paddingOuter);
     }
     if (paddingTop) {
-        treemap.paddingTop(paddingTop);
+      treemap.paddingTop(paddingTop);
     }
     if (paddingBottom) {
-        treemap.paddingBottom(paddingBottom);
+      treemap.paddingBottom(paddingBottom);
     }
     if (paddingLeft) {
-        treemap.paddingLeft(paddingLeft);
+      treemap.paddingLeft(paddingLeft);
     }
     if (paddingRight) {
-        treemap.paddingRight(paddingRight);
+      treemap.paddingRight(paddingRight);
     }
-}
-$: treemapData = treemap($data);
-// TODO: Remove selected
-$: selected = treemapData; // set initial selection
+  }
+
+  $: treemapData = treemap($data as HierarchyNode<any>);
+
+  // TODO: Remove selected
+  $: selected = treemapData; // set initial selection
 </script>
 
 <slot nodes={treemapData.descendants()} />

package/dist/components/Voronoi.svelte

@@ -1,41 +1,68 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { min } from 'd3-array';
-import { Delaunay } from 'd3-delaunay';
-// @ts-expect-error
-import { geoVoronoi } from 'd3-geo-voronoi';
-import { pointRadial } from 'd3-shape';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import GeoPath from './GeoPath.svelte';
-import { geoContext } from './GeoContext.svelte';
-const { flatData, xGet, yGet, x: xContext, y: yContext, width, height, radial } = chartContext();
-const geo = geoContext();
-/** Override data instead of using context */
-export let data = undefined;
-export let classes = {};
-const dispatch = createEventDispatcher();
-$: points = (data ?? $flatData).map((d) => {
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { min } from 'd3-array';
+  import { Delaunay } from 'd3-delaunay';
+  import type { GeoPermissibleObjects } from 'd3-geo';
+  // @ts-expect-error
+  import { geoVoronoi } from 'd3-geo-voronoi';
+  import { pointRadial } from 'd3-shape';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from './ChartContext.svelte';
+  import GeoPath from './GeoPath.svelte';
+  import { geoContext, type GeoContext } from './GeoContext.svelte';
+
+  const { flatData, xGet, yGet, x: xContext, y: yContext, width, height, radial } = chartContext();
+  const geo = geoContext() as GeoContext | undefined;
+
+  /** Override data instead of using context */
+  export let data: any = undefined;
+
+  export let classes: {
+    root?: string;
+    path?: string;
+  } = {};
+
+  const dispatch = createEventDispatcher<{
+    click: { data: any; point?: [number, number]; feature?: GeoPermissibleObjects };
+    pointerenter: {
+      event: PointerEvent;
+      data: any;
+      point?: [number, number];
+      feature?: GeoPermissibleObjects;
+    };
+    pointermove: {
+      event: PointerEvent;
+      data: any;
+      point?: [number, number];
+      feature?: GeoPermissibleObjects;
+    };
+  }>();
+
+  $: points = (data ?? $flatData).map((d: any) => {
     // 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;
-    let point;
+
+    let point: [number, number];
     if ($radial) {
-        const radialPoint = pointRadial(x, y);
-        // Assume radial is also centered
-        point = [radialPoint[0] + $width / 2, radialPoint[1] + $height / 2];
-    }
-    else {
-        point = [x, y];
+      const radialPoint = pointRadial(x, y);
+      // Assume radial is also centered
+      point = [radialPoint[0] + $width / 2, radialPoint[1] + $height / 2];
+    } else {
+      point = [x, y];
     }
     // @ts-expect-error
     point.data = d;
     return point;
-});
-// Width and/or height can sometimes be negative (when loading data remotely and updately)
-$: boundWidth = Math.max($width, 0);
-$: boundHeight = Math.max($height, 0);
+  });
+
+  // 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)}>