layerchart 0.42.0 → 0.43.0

package/dist/utils/rect.js

@@ -1,6 +1,7 @@
 import { derived } from 'svelte/store';
 import { max, min } from 'd3-array';
 import { groupScaleBand, isScaleBand } from './scales.js';
+import { accessor } from './common.js';
 // TOOD: Pass in overrides for `x` and `y` accessors
 export function createDimensionGetter(context, options) {
     const { flatData, xGet, yGet, xScale, yScale, x: xAccessor, y: yAccessor } = context;
@@ -10,19 +11,17 @@ export function createDimensionGetter(context, options) {
         // Use `xscale.domain()` instead of `$xDomain` to include `nice()` being applied
         const [minXDomain, maxXDomain] = $xScale.domain();
         const [minYDomain, maxYDomain] = $yScale.domain();
+        // @ts-expect-error
         return function getter(item) {
             if (isScaleBand($yScale)) {
                 // Horizontal band
                 const y1Scale = groupBy
                     ? groupScaleBand($yScale, $flatData, groupBy, options?.groupPadding)
                     : null;
+                // @ts-expect-error
                 const y = firstValue($yGet(item)) + (y1Scale ? y1Scale(item[groupBy]) : 0) + inset / 2;
                 const height = Math.max(0, $yScale.bandwidth ? (y1Scale ? y1Scale.bandwidth() : $yScale.bandwidth()) - inset : 0);
-                const _x = options?.x
-                    ? typeof options.x === 'string'
-                        ? (d) => d[options.x]
-                        : options?.x
-                    : $xAccessor;
+                const _x = accessor(options?.x ?? $xAccessor);
                 const xValue = _x(item);
                 let left = 0;
                 let right = 0;
@@ -55,16 +54,13 @@ export function createDimensionGetter(context, options) {
             }
             else {
                 // Vertical band or linear
-                const x1Scale = groupBy
+                const x1Scale = groupBy && isScaleBand($xScale)
                     ? groupScaleBand($xScale, $flatData, groupBy, options?.groupPadding)
                     : null;
+                // @ts-expect-error
                 const x = firstValue($xGet(item)) + (x1Scale ? x1Scale(item[groupBy]) : 0) + inset / 2;
                 const width = Math.max(0, $xScale.bandwidth ? (x1Scale ? x1Scale.bandwidth() : $xScale.bandwidth()) - inset : 0);
-                const _y = options?.y
-                    ? typeof options.y === 'string'
-                        ? (d) => d[options.y]
-                        : options?.y
-                    : $yAccessor;
+                const _y = accessor(options?.y ?? $yAccessor);
                 const yValue = _y(item);
                 let top = 0;
                 let bottom = 0;

package/dist/utils/scales.d.ts

@@ -1,6 +1,15 @@
 import { tweened, spring } from 'svelte/motion';
 import { type MotionOptions } from '../stores/motionStore.js';
 import { type ScaleBand } from 'd3-scale';
+export type AnyScale<Domain = any, Range = any, Input = Domain, Output = any> = {
+    (value: Input): Output;
+    invert?: (value: Output) => Input;
+    domain(): Domain[];
+    range(): Range[];
+    bandwidth?: Function;
+    ticks?: Function;
+    tickFormat?: Function;
+};
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
@@ -11,13 +20,13 @@ import { type ScaleBand } from 'd3-scale';
  * 			https://github.com/d3/d3-scale/blob/11777dac7d4b0b3e229d658aee3257ea67bd5ffa/src/band.js#L32
  * 			https://gist.github.com/LuisSevillano/d53a1dc529eef518780c6df99613e2fd
  */
-export declare function scaleBandInvert(scale: any): (value: any) => any;
-export declare function isScaleBand(scale: any): boolean;
+export declare function scaleBandInvert(scale: ScaleBand<any>): (value: number) => any;
+export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
 /**
  *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
  *  Useful to map mouse event location (x,y) to domain value
  */
-export declare function scaleInvert(scale: any, value: number): any;
+export declare function scaleInvert(scale: AnyScale<any, any>, value: number): any;
 /** Create a `scaleBand()` within another scaleBand()'s bandwidth (typically a x1 of an x0 scale, used for grouping) */
 export declare function groupScaleBand<Domain extends {
     toString(): string;
@@ -28,24 +37,24 @@ 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]): {
+export declare function tweenedScale<Domain, Range>(scale: any, tweenedOptions?: Parameters<typeof tweened<any>>[1]): {
     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>;
+    domain: (values: Domain) => Promise<void>;
+    range: (values: Range) => Promise<void>;
 };
 /**
  * Animate d3-scale as domain and/or range are updated using spring store
  */
-export declare function springScale(scale: any, springOptions?: Parameters<typeof spring>[1]): {
+export declare function springScale<Domain, Range>(scale: AnyScale, springOptions?: Parameters<typeof spring>[1]): {
     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>;
+    domain: (values: Domain) => Promise<void>;
+    range: (values: Range) => Promise<void>;
 };
 /**
  * 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): {
+export declare function motionScale<Domain, Range>(scale: AnyScale, options: MotionOptions): {
     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>;
+    domain: (values: Domain) => void | Promise<void>;
+    range: (values: Range) => void | Promise<void>;
 };

package/dist/utils/scales.js

@@ -35,7 +35,7 @@ export function scaleInvert(scale, value) {
         return scaleBandInvert(scale)(value);
     }
     else {
-        return scale.invert(value);
+        return scale.invert?.(value);
     }
 }
 /** Create a `scaleBand()` within another scaleBand()'s bandwidth (typically a x1 of an x0 scale, used for grouping) */
@@ -82,6 +82,7 @@ export function springScale(scale, springOptions = {}) {
     const domainStore = spring(undefined, springOptions);
     const rangeStore = spring(undefined, springOptions);
     const tweenedScale = derived([domainStore, rangeStore], ([domain, range]) => {
+        // @ts-expect-error
         const scaleInstance = scale.domain ? scale : scale(); // support `scaleLinear` or `scaleLinear()` (which could have `.interpolate()` and others set)
         if (domain) {
             scaleInstance.domain(domain);
@@ -104,6 +105,7 @@ export function motionScale(scale, options) {
     const domainStore = motionStore(undefined, options);
     const rangeStore = motionStore(undefined, options);
     const tweenedScale = derived([domainStore, rangeStore], ([domain, range]) => {
+        // @ts-expect-error
         const scaleInstance = scale.domain ? scale : scale(); // support `scaleLinear` or `scaleLinear()` (which could have `.interpolate()` and others set)
         if (domain) {
             scaleInstance.domain(domain);

package/dist/utils/stack.d.ts

@@ -1,13 +1,16 @@
 import { stackOffsetNone, stackOrderNone } from 'd3-shape';
 type OrderType = typeof stackOrderNone;
 type OffsetType = typeof stackOffsetNone;
-export declare function createStackData(data: any[], options: {
+export declare function createStackData<TData>(data: TData[], options: {
     xKey: string;
     groupBy?: string;
     stackBy?: string;
     order?: OrderType;
     offset?: OffsetType;
-}): any[];
+}): {
+    keys: (string | number)[];
+    values: number[];
+}[];
 /**
  * Function to offset each layer by the maximum of the previous layer
  *   - see: https://observablehq.com/@mkfreeman/separated-bar-chart

package/dist/utils/stack.js

@@ -4,16 +4,21 @@ import { pivotWider } from './pivot.js';
 export function createStackData(data, options) {
     if (options.groupBy) {
         // Group then Stack (if needed)
-        const groupedData = flatGroup(data, (d) => d[options.xKey], (d) => d[options.groupBy]);
+        const groupedData = flatGroup(data, 
+        // @ts-expect-error
+        (d) => d[options.xKey], 
+        // @ts-expect-error
+        (d) => d[options.groupBy ?? '']);
         const result = groupedData.flatMap((d, i) => {
             const groupKeys = d.slice(0, -1); // all but last item
             const itemData = d.slice(-1)[0]; // last item
-            const pivotData = pivotWider(itemData, options.xKey, options.stackBy, 'value');
-            const stackKeys = [...new Set(itemData.map((d) => d[options.stackBy]))];
+            const pivotData = pivotWider(itemData, options.xKey, options.stackBy ?? '', 'value');
+            const stackKeys = [
+                ...new Set(itemData.map((d) => d[options.stackBy ?? ''])),
+            ];
+            // @ts-expect-error
             const stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(pivotData);
-            //console.log({ pivotData, stackData })
             return stackData.flatMap((series) => {
-                //console.log({ series })
                 return series.flatMap((s) => {
                     return {
                         ...itemData[0], // TODO: More than one should use stacks or aggregate values?
@@ -28,7 +33,9 @@ export function createStackData(data, options) {
     else if (options.stackBy) {
         // Stack only
         const pivotData = pivotWider(data, options.xKey, options.stackBy, 'value');
-        const stackKeys = [...new Set(data.map((d) => d[options.stackBy]))];
+        // @ts-expect-error
+        const stackKeys = [...new Set(data.map((d) => d[options.stackBy ?? '']))];
+        // @ts-expect-error
         const stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(pivotData);
         const result = stackData.flatMap((series) => {
             return series.flatMap((s) => {
@@ -45,10 +52,14 @@ export function createStackData(data, options) {
         // No grouping or stacking.  Aggregate based on `xKey`
         return Array.from(rollup(data, (items) => {
             return {
+                // @ts-expect-error
                 keys: [items[0][options.xKey]],
+                // @ts-expect-error
                 values: [0, sum(items, (d) => d.value)],
             };
-        }, (d) => d[options.xKey]).values());
+        }, 
+        // @ts-expect-error
+        (d) => d[options.xKey]).values());
     }
 }
 /**
@@ -56,6 +67,7 @@ export function createStackData(data, options) {
  *   - see: https://observablehq.com/@mkfreeman/separated-bar-chart
  */
 // TODO: Try to find way to support separated with createStackData() (which has isolated stacked per group)
+// @ts-expect-error
 export function stackOffsetSeparated(series, order) {
     const gap = 200; // TODO: Determine way to pass in as option (curry?)
     if (!((n = series.length) > 1))
@@ -63,6 +75,7 @@ export function stackOffsetSeparated(series, order) {
     // Standard series
     for (var i = 1, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
         (s0 = s1), (s1 = series[order[i]]);
+        // @ts-expect-error
         let base = max(s0, (d) => d[1]) + gap; // here is where you calculate the maximum of the previous layer
         for (var j = 0; j < m; ++j) {
             // Set the height based on the data values, shifted up by the previous layer

package/dist/utils/threshold.js

@@ -6,6 +6,7 @@ import { scaleTime } from 'd3-scale';
  */
 export function thresholdTime(n) {
     // TODO: Unable to satisfy `ThresholdNumberArrayGenerator<Value extends number>` with `Date`
+    // @ts-expect-error
     return (data, min, max) => {
         return scaleTime().domain([min, max]).ticks(n);
     };

package/dist/utils/treemap.d.ts

@@ -1,10 +1,13 @@
+import type { HierarchyNode, HierarchyRectangularNode } from 'd3-hierarchy';
+type TileFunc = (node: HierarchyRectangularNode<any>, x0: number, y0: number, x1: number, y1: number) => void;
 /**
  * This custom tiling function adapts the tiling function
  * for the appropriate aspect ratio when the treemap is zoomed-in.
  * see: https://observablehq.com/@d3/zoomable-treemap#tile and https://observablehq.com/@d3/stretched-treemap
  */
-export declare function aspectTile(tile: any, width: any, height: any): (node: any, x0: any, y0: any, x1: any, y1: any) => void;
+export declare function aspectTile(tile: TileFunc, width: number, height: number): TileFunc;
 /**
  * Show if the node (a) is a child of the selected (b), or any parent above selected
  */
-export declare function isNodeVisible(a: any, b: any): boolean;
+export declare function isNodeVisible(a: HierarchyNode<any>, b: HierarchyNode<any> | null): boolean;
+export {};

package/dist/utils/treemap.js

@@ -6,7 +6,7 @@
 export function aspectTile(tile, width, height) {
     return (node, x0, y0, x1, y1) => {
         tile(node, 0, 0, width, height);
-        for (const child of node.children) {
+        for (const child of node.children ?? []) {
             child.x0 = x0 + (child.x0 / width) * (x1 - x0);
             child.x1 = x0 + (child.x1 / width) * (x1 - x0);
             child.y0 = y0 + (child.y0 / height) * (y1 - y0);

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",
@@ -16,6 +16,7 @@
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/d3-array": "^3.2.1",
+    "@types/d3-color": "^3.1.3",
     "@types/d3-delaunay": "^6.0.4",
     "@types/d3-dsv": "^3.0.7",
     "@types/d3-force": "^3.0.10",
@@ -23,6 +24,7 @@
     "@types/d3-hierarchy": "^3.1.7",
     "@types/d3-interpolate": "^3.0.4",
     "@types/d3-interpolate-path": "^2.0.3",
+    "@types/d3-path": "^3.1.0",
     "@types/d3-quadtree": "^3.0.6",
     "@types/d3-random": "^3.0.3",
     "@types/d3-sankey": "^0.12.4",
@@ -35,6 +37,7 @@
     "@types/shapefile": "^0.6.4",
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-simplify": "^3.0.3",
+    "@types/topojson-specification": "^1.0.5",
     "autoprefixer": "^10.4.19",
     "marked": "^13.0.0",
     "mdsvex": "^0.11.2",
@@ -87,7 +90,7 @@
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.140.1",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.71.0",
+    "svelte-ux": "^0.71.1",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {