layerchart 2.0.0-next.1 → 2.0.0-next.11

package/dist/utils/scales.svelte.d.ts

@@ -0,0 +1,91 @@
+import { type ScaleBand, type ScaleTime } from 'd3-scale';
+import { type MotionProp, type MotionOptions, type SpringOptions, type TweenOptions } from './motion.svelte.js';
+import type { Accessor } from './common.js';
+import type { OnlyObjects } from './types.js';
+export type AnyScale<TInput extends SingleDomainType = any, TOutput extends SingleDomainType = any, TScaleArgs extends any[] | readonly any[] = any[]> = {
+    (value: TInput): TOutput;
+    domain(domain: TInput[] | readonly TInput[]): AnyScale<TInput, TOutput, TScaleArgs>;
+    domain(): TInput[];
+    range(range: TOutput[] | readonly TOutput[]): AnyScale<TInput, TOutput, TScaleArgs>;
+    range(): TOutput[];
+    rangeRound?: (range: TOutput[] | readonly TOutput[]) => AnyScale<TInput, TOutput, TScaleArgs>;
+    copy: () => AnyScale<TInput, TOutput, TScaleArgs>;
+    invert?: (value: TOutput) => TInput;
+    invertExtent?: (value: TOutput) => [TInput, TInput];
+    bandwidth?: () => number;
+    ticks?: (count?: number) => TInput[];
+    tickFormat?: (count?: number) => (value: TInput) => string;
+    clamp?: (clamp: boolean) => AnyScale<TInput, TOutput, TScaleArgs>;
+    interpolate?: (interpolate: (a: TOutput, b: TOutput) => (t: number) => TOutput) => AnyScale<TInput, TOutput, TScaleArgs>;
+    nice?: (count?: number) => AnyScale<TInput, TOutput, TScaleArgs>;
+    interpolator?(interpolator: (t: number) => TOutput): AnyScale<TInput, TOutput, TScaleArgs>;
+    interpolator?(): (t: number) => TOutput;
+    thresholds?: () => TInput[];
+    quantiles?: () => TInput[];
+};
+export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
+export declare function isScaleTime(scale: AnyScale<any, any>): scale is ScaleTime<any, any>;
+export declare function getRange(scale: any): any[];
+export type SingleDomainType = number | string | Date | null | undefined;
+export type DomainType = (number | string | Date | null | undefined)[] | null | undefined;
+export declare function createMotionScale<Domain, Range>(scale: AnyScale, motion: MotionProp | undefined, options: {
+    defaultDomain?: Domain;
+    defaultRange?: Range;
+}): {
+    readonly current: any;
+    domain: (values: Domain) => Promise<void>;
+    range: (values: Range) => Promise<void>;
+};
+/**
+ * Implementation for missing `scaleBand().invert()`
+ *
+ *  See: https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales
+ *      https://github.com/d3/d3-scale/pull/64
+ *      https://github.com/vega/vega-scale/blob/master/src/scaleBand.js#L118
+ *      https://observablehq.com/@d3/ordinal-brushing
+ * 			https://github.com/d3/d3-scale/blob/11777dac7d4b0b3e229d658aee3257ea67bd5ffa/src/band.js#L32
+ * 			https://gist.github.com/LuisSevillano/d53a1dc529eef518780c6df99613e2fd
+ */
+export declare function scaleBandInvert(scale: ScaleBand<any>): (value: number) => 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: AnyScale<any, any>, value: number): any;
+/** Create new copy of scale with domain and range */
+export declare function createScale(scale: AnyScale, domain: DomainType, range: any[] | readonly any[] | Function, context?: Record<any, any>): AnyScale<any, any, 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;
+}>(scale: ScaleBand<Domain>, flatData: any[], groupBy: string, padding?: {
+    inner?: number;
+    outer?: number;
+}): ScaleBand<string>;
+/**
+ * Animate d3-scale as domain and/or range are updated using tweened store
+ */
+export declare function tweenedScale<Domain, Range>(scale: any, tweenedOptions?: TweenOptions): {
+    readonly current: any;
+    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<Domain, Range>(scale: AnyScale, springOptions?: SpringOptions): {
+    readonly current: any;
+    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<Domain, Range>(scale: AnyScale, options: OnlyObjects<MotionOptions>): {
+    readonly current: any;
+    domain: (values: Domain) => Promise<void>;
+    range: (values: Range) => Promise<void>;
+};
+export declare function makeAccessor<TData>(acc: Accessor<TData>): (d: TData) => any;

package/dist/utils/scales.svelte.js

@@ -0,0 +1,201 @@
+import { unique } from '@layerstack/utils';
+import { scaleBand } from 'd3-scale';
+import { createControlledMotion, } from './motion.svelte.js';
+import { Spring, Tween } from 'svelte/motion';
+function isAnyScale(scale) {
+    return typeof scale === 'function' && typeof scale.range === 'function';
+}
+export function isScaleBand(scale) {
+    return typeof scale.bandwidth === 'function';
+}
+export function isScaleTime(scale) {
+    const domain = scale.domain();
+    return domain[0] instanceof Date || domain[1] instanceof Date;
+}
+export function getRange(scale) {
+    if (isAnyScale(scale)) {
+        return scale.range();
+    }
+    console.error("[LayerChart] Your scale doesn't have a `.range` method?");
+    return [];
+}
+// this may need to become a getter for options so we can reactively update after mount
+export function createMotionScale(scale, motion, options) {
+    const domain = createControlledMotion(options.defaultDomain, motion);
+    const range = createControlledMotion(options.defaultRange, motion);
+    const motionScale = $derived.by(() => {
+        // @ts-expect-error
+        const scaleInstance = scale.domain ? scale : scale(); // support `scaleLinear` or `scaleLinear()` (which could have `.interpolate()` and others set)
+        if (domain.current) {
+            scaleInstance.domain(domain.current);
+        }
+        if (range.current) {
+            scaleInstance.range(range.current);
+        }
+        return scaleInstance;
+    });
+    return {
+        get current() {
+            return motionScale;
+        },
+        domain: (values) => domain.set(values),
+        range: (values) => range.set(values),
+    };
+}
+/**
+ * Implementation for missing `scaleBand().invert()`
+ *
+ *  See: https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales
+ *      https://github.com/d3/d3-scale/pull/64
+ *      https://github.com/vega/vega-scale/blob/master/src/scaleBand.js#L118
+ *      https://observablehq.com/@d3/ordinal-brushing
+ * 			https://github.com/d3/d3-scale/blob/11777dac7d4b0b3e229d658aee3257ea67bd5ffa/src/band.js#L32
+ * 			https://gist.github.com/LuisSevillano/d53a1dc529eef518780c6df99613e2fd
+ */
+export function scaleBandInvert(scale) {
+    const domain = scale.domain();
+    const eachBand = scale.step();
+    const paddingOuter = eachBand * (scale.paddingOuter?.() ?? scale.padding()); // `scaleBand` uses paddingOuter(), while `scalePoint` uses padding() for outer paddding - https://github.com/d3/d3-scale#point_padding
+    return function (value) {
+        const index = Math.floor((value - paddingOuter / 2) / eachBand);
+        return domain[Math.max(0, Math.min(index, domain.length - 1))];
+    };
+}
+/**
+ *  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 function scaleInvert(scale, value) {
+    if (isScaleBand(scale)) {
+        return scaleBandInvert(scale)(value);
+    }
+    else {
+        return scale.invert?.(value);
+    }
+}
+/** Create new copy of scale with domain and range */
+export function createScale(scale, domain, range, context) {
+    const scaleCopy = scale.copy();
+    if (domain) {
+        scaleCopy.domain(domain);
+    }
+    if (typeof range === 'function') {
+        scaleCopy.range(range(context));
+    }
+    else {
+        scaleCopy.range(range);
+    }
+    return scaleCopy;
+}
+/**
+ * Create a `scaleBand()` within another scaleBand()'s bandwidth
+ * (typically a x1 of an x0 scale, used for grouping)
+ */
+export function groupScaleBand(scale, flatData, groupBy, padding) {
+    //
+    const groupKeys = unique(flatData.map((d) => d[groupBy]));
+    let newScale = scaleBand().domain(groupKeys).range([0, scale.bandwidth()]);
+    if (padding) {
+        if (padding.inner) {
+            newScale = newScale.paddingInner(padding.inner);
+        }
+        if (padding.outer) {
+            newScale = newScale.paddingOuter(padding.outer);
+        }
+    }
+    return newScale;
+}
+/**
+ * Animate d3-scale as domain and/or range are updated using tweened store
+ */
+export function tweenedScale(scale, tweenedOptions = {}) {
+    const tweenedDomain = new Tween(undefined, tweenedOptions);
+    const tweenedRange = new Tween(undefined, tweenedOptions);
+    const tweenedScale = $derived.by(() => {
+        const scaledInstance = scale.domain ? scale : scale();
+        if (tweenedDomain.current) {
+            scaledInstance.domain(tweenedDomain.current);
+        }
+        if (tweenedRange.current) {
+            scaledInstance.range(tweenedRange.current);
+        }
+        return scaledInstance;
+    });
+    return {
+        get current() {
+            return tweenedScale;
+        },
+        domain: (values) => tweenedDomain.set(values),
+        range: (values) => tweenedRange.set(values),
+    };
+}
+/**
+ * Animate d3-scale as domain and/or range are updated using spring store
+ */
+export function springScale(scale, springOptions = {}) {
+    const domainState = new Spring(undefined, springOptions);
+    const rangeState = new Spring(undefined, springOptions);
+    const sprungScale = $derived.by(() => {
+        // @ts-expect-error - TODO: investigate/fix
+        const scaledInstance = scale.domain ? scale : scale();
+        if (domainState.current) {
+            scaledInstance.domain(domainState.current);
+        }
+        if (rangeState.current) {
+            scaledInstance.range(rangeState.current);
+        }
+        return scaledInstance;
+    });
+    return {
+        get current() {
+            return sprungScale;
+        },
+        domain: (values) => domainState.set(values),
+        range: (values) => rangeState.set(values),
+    };
+}
+/**
+ * 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 function motionScale(scale, options) {
+    const domainState = createControlledMotion(undefined, options);
+    const rangeState = createControlledMotion(undefined, options);
+    const tweenedScale = $derived.by(() => {
+        // @ts-expect-error
+        const scaleInstance = scale.domain ? scale : scale(); // support `scaleLinear` or `scaleLinear()` (which could have `.interpolate()` and others set)
+        if (domainState.current) {
+            scaleInstance.domain(domainState.current);
+        }
+        if (rangeState.current) {
+            scaleInstance.range(rangeState.current);
+        }
+        return scaleInstance;
+    });
+    return {
+        get current() {
+            return tweenedScale;
+        },
+        domain: (values) => domainState.set(values),
+        range: (values) => rangeState.set(values),
+    };
+}
+function canBeZero(val) {
+    if (val === 0)
+        return true;
+    return val;
+}
+export function makeAccessor(acc) {
+    if (!canBeZero(acc))
+        return null;
+    if (Array.isArray(acc)) {
+        return (d) => acc.map((k) => {
+            // @ts-expect-error - TODO: Fix these types
+            return typeof k !== 'function' ? d[k] : k(d);
+        });
+    }
+    else if (typeof acc !== 'function') {
+        // @ts-expect-error - TODO: Fix these types
+        return (d) => d[acc];
+    }
+    return acc;
+}

package/dist/utils/stack.d.ts

@@ -1,6 +1,5 @@
-import { stackOffsetNone, stackOrderNone } from 'd3-shape';
-type OrderType = typeof stackOrderNone;
-type OffsetType = typeof stackOffsetNone;
+type OrderType = typeof import('d3-shape').stackOrderNone;
+type OffsetType = typeof import('d3-shape').stackOffsetNone;
 export declare function groupStackData<TData>(data: TData[], options: {
     xKey: string;
     groupBy?: string;

package/dist/utils/stack.js

@@ -1,5 +1,5 @@
 import { flatGroup, group, max, rollup, sum } from 'd3-array';
-import { stack, stackOffsetNone, stackOrderNone } from 'd3-shape';
+import { stack } from 'd3-shape';
 import { pivotWider } from './pivot.js';
 export function groupStackData(data, options) {
     const dataByKey = group(data, (d) => d[options.xKey]);

package/dist/utils/string.js

@@ -66,3 +66,90 @@ function getPixel(imageData, x, y) {
     var d = imageData.data;
     return [d[i], d[i + 1], d[i + 2], d[i + 3]];
 }
+export function toTitleCase(str) {
+    return str.replace(/^\w/, (d) => d.toUpperCase());
+}
+const DEFAULT_ELLIPSIS = '…';
+/**
+ * Truncates a string to fit within a specified pixel width or character count.
+ * If the string's width exceeds the maxWidth, it will be truncated. If the character
+ * count exceeds maxChars, it will also be truncated.
+ *
+ * The ellipsis can be placed at the start, middle, or end of the string.
+ */
+export function truncateText(text, { position = 'end', ellipsis = DEFAULT_ELLIPSIS, maxWidth, style, maxChars }) {
+    if (!text)
+        return '';
+    // no constraints, return original text
+    if (maxWidth === undefined && maxChars === undefined)
+        return text;
+    // apply maxChars constraint first (if provided)
+    let workingText = text;
+    if (maxChars !== undefined && text.length > maxChars) {
+        if (position === 'start') {
+            workingText = ellipsis + text.slice(-maxChars);
+        }
+        else if (position === 'middle') {
+            const half = Math.floor(maxChars / 2);
+            workingText = text.slice(0, half) + ellipsis + text.slice(-half);
+        }
+        else {
+            workingText = text.slice(0, maxChars) + ellipsis;
+        }
+    }
+    // apply maxWidth constraint (if provided)
+    if (maxWidth !== undefined) {
+        const fullWidth = getStringWidth(workingText, style);
+        // if width measurement fails or text fits, return current text
+        if (fullWidth === null || fullWidth <= maxWidth)
+            return workingText;
+        const ellipsisWidth = getStringWidth(ellipsis, style) ?? 0;
+        let availableWidth = maxWidth - ellipsisWidth;
+        if (position === 'start') {
+            let truncated = workingText.slice(ellipsis.length); // remove initial ellipsis if present
+            let truncatedWidth = getStringWidth(truncated, style);
+            while (truncatedWidth !== null && truncatedWidth > availableWidth && truncated.length > 0) {
+                truncated = truncated.slice(1);
+                truncatedWidth = getStringWidth(truncated, style);
+            }
+            return ellipsis + truncated;
+        }
+        else if (position === 'middle') {
+            const halfWidth = availableWidth / 2;
+            let left = '';
+            let right = '';
+            let bestLeft = '';
+            let bestRight = '';
+            for (let i = 0, j = workingText.length - 1; i < workingText.length && j >= 0; i++, j--) {
+                const leftTest = workingText.slice(0, i + 1);
+                const rightTest = workingText.slice(j);
+                const leftWidth = getStringWidth(leftTest, style);
+                const rightWidth = getStringWidth(rightTest, style);
+                if (leftWidth !== null && leftWidth <= halfWidth)
+                    left = leftTest;
+                if (rightWidth !== null && rightWidth <= halfWidth)
+                    right = rightTest;
+                const combinedWidth = getStringWidth(left + ellipsis + right, style);
+                if (combinedWidth !== null && combinedWidth <= maxWidth) {
+                    bestLeft = left; // longest valid left
+                    bestRight = right; // longest valid right
+                }
+                else {
+                    // we've exceed maxWidth, so break out
+                    break;
+                }
+            }
+            return bestLeft + ellipsis + bestRight;
+        }
+        else {
+            let truncated = workingText.slice(0, -ellipsis.length);
+            let truncatedWidth = getStringWidth(truncated + ellipsis, style);
+            while (truncatedWidth !== null && truncatedWidth > maxWidth && truncated.length > 0) {
+                truncated = truncated.slice(0, -1);
+                truncatedWidth = getStringWidth(truncated + ellipsis, style);
+            }
+            return truncated + ellipsis;
+        }
+    }
+    return workingText;
+}

package/dist/utils/ticks.d.ts

@@ -1,3 +1,9 @@
-export declare function getMajorTicks(start: Date, end: Date): import("d3-time").TimeInterval | null;
-export declare function formatMajorTick(date: Date, rangeStart: Date, rangeEnd: Date): string;
-export declare function getMinorTicks(start: Date, end: Date): import("d3-time").TimeInterval | null;
+import { type TimeInterval } from 'd3-time';
+import { Duration, type FormatType } from '@layerstack/utils';
+import { type AnyScale } from './scales.svelte.js';
+export declare function getDurationFormat(duration: Duration, multiline?: boolean): (date: Date, i: number) => string;
+export type TicksConfig = number | any[] | ((scale: AnyScale) => any[] | undefined) | {
+    interval: TimeInterval | null;
+} | null;
+export declare function resolveTickVals(scale: AnyScale, ticks?: TicksConfig, count?: number): any[];
+export declare function resolveTickFormat(scale: AnyScale, ticks?: TicksConfig, count?: number, formatType?: FormatType, multiline?: boolean): (date: Date, i: number) => string;