layerchart 2.0.0-next.1 → 2.0.0-next.3

package/dist/utils/chart.js

@@ -0,0 +1,512 @@
+import { arraysEqual } from './array.js';
+import { toTitleCase } from './string.js';
+import { InternSet } from 'd3-array';
+/**
+ * Creates a function to calculate a domain based on extents and a domain directive.
+ * @param s The key (e.g., 'x', 'y') to look up in the extents object
+ * @returns A function that computes the final domain from extents and a domain input
+ */
+export function calcDomain(s, extents, domain) {
+    // @ts-expect-error - TODO: fix these types
+    return extents ? partialDomain(extents[s], domain) : domain;
+}
+/**
+ * If we have a domain from settings (the directive), fill in
+ * any null values with ones from our measured extents;
+ * otherwise, return the measured extent.
+ * @param domain A two-value array of numbers representing the measured extent
+ * @param directive A two-value array of numbers or nulls that will have any nulls filled in from the `domain` array
+ * @returns A two-value array of numbers representing the filled-in domain
+ */
+export function partialDomain(domain = [], directive) {
+    if (Array.isArray(directive) === true) {
+        return directive.map((d, i) => {
+            if (d === null) {
+                return domain[i];
+            }
+            return d;
+        });
+    }
+    return domain;
+}
+export function createChartScale(axis, { domain, scale, padding, nice, reverse, width, height, range, percentRange, }) {
+    const defaultRange = getDefaultRange(axis, width, height, reverse, range, percentRange);
+    const trueScale = scale.copy();
+    /* --------------------------------------------
+     * Set the domain
+     */
+    trueScale.domain(domain);
+    /* --------------------------------------------
+     * Set the range of the scale to our default if
+     * the scale doesn't have an interpolator function
+     * or if it does, still set the range if that function
+     * is the default identity function
+     */
+    if (!trueScale.interpolator ||
+        (typeof trueScale.interpolator === 'function' &&
+            trueScale.interpolator().name.startsWith('identity'))) {
+        trueScale.range(defaultRange);
+    }
+    if (padding) {
+        trueScale.domain(padScale(trueScale, padding));
+    }
+    if (nice === true || typeof nice === 'number') {
+        if (typeof trueScale.nice === 'function') {
+            trueScale.nice(typeof nice === 'number' ? nice : undefined);
+        }
+        else {
+            console.error(`[Layer Chart] You set \`${axis}Nice: true\` but the ${axis}Scale does not have a \`.nice\` method. Ignoring...`);
+        }
+    }
+    return trueScale;
+}
+// These scales have a discrete range so they can't be padded
+const unpaddable = ['scaleThreshold', 'scaleQuantile', 'scaleQuantize', 'scaleSequentialQuantile'];
+function padScale(scale, padding) {
+    if (typeof scale.range !== 'function') {
+        throw new Error('Scale method `range` must be a function');
+    }
+    if (typeof scale.domain !== 'function') {
+        throw new Error('Scale method `domain` must be a function');
+    }
+    if (!Array.isArray(padding) || unpaddable.includes(findScaleName(scale))) {
+        return scale.domain();
+    }
+    if (isOrdinalDomain(scale) === true)
+        return scale.domain();
+    const { lift, ground } = getPadFunctions(scale);
+    const d0 = scale.domain()[0];
+    const isTime = Object.prototype.toString.call(d0) === '[object Date]';
+    const [d1, d2] = scale.domain().map((d) => {
+        return isTime ? lift(d.getTime()) : lift(d);
+    });
+    const [r1, r2] = scale.range();
+    const paddingLeft = padding[0] || 0;
+    const paddingRight = padding[1] || 0;
+    const step = (d2 - d1) / (Math.abs(r2 - r1) - paddingLeft - paddingRight);
+    return [d1 - paddingLeft * step, paddingRight * step + d2].map((d) => {
+        return isTime ? ground(new Date(d).getTime()) : ground(d);
+    });
+}
+function f(name, modifier = '') {
+    return `scale${toTitleCase(modifier)}${toTitleCase(name)}`;
+}
+/**
+ * Get a D3 scale name
+ * https://svelte.dev/repl/ec6491055208401ca41120c9c8a67737?version=3.49.0
+ */
+export function findScaleName(scale) {
+    /**
+     * Ordinal scales
+     */
+    // scaleBand, scalePoint
+    // @ts-ignore
+    if (typeof scale.bandwidth === 'function') {
+        // @ts-ignore
+        if (typeof scale.paddingInner === 'function') {
+            return f('band');
+        }
+        return f('point');
+    }
+    // scaleOrdinal
+    if (arraysEqual(Object.keys(scale), ['domain', 'range', 'unknown', 'copy'])) {
+        return f('ordinal');
+    }
+    /**
+     * Sequential versus diverging
+     */
+    let modifier = '';
+    // @ts-ignore
+    if (scale.interpolator) {
+        // @ts-ignore
+        if (scale.domain().length === 3) {
+            modifier = 'diverging';
+        }
+        else {
+            modifier = 'sequential';
+        }
+    }
+    /**
+     * Continuous scales
+     */
+    // @ts-ignore
+    if (scale.quantiles) {
+        return f('quantile', modifier);
+    }
+    // @ts-ignore
+    if (scale.thresholds) {
+        return f('quantize', modifier);
+    }
+    // @ts-ignore
+    if (scale.constant) {
+        return f('symlog', modifier);
+    }
+    // @ts-ignore
+    if (scale.base) {
+        return f('log', modifier);
+    }
+    // @ts-ignore
+    if (scale.exponent) {
+        // @ts-ignore
+        if (scale.exponent() === 0.5) {
+            return f('sqrt', modifier);
+        }
+        return f('pow', modifier);
+    }
+    if (arraysEqual(Object.keys(scale), ['domain', 'range', 'invertExtent', 'unknown', 'copy'])) {
+        return f('threshold');
+    }
+    if (arraysEqual(Object.keys(scale), [
+        'invert',
+        'range',
+        'domain',
+        'unknown',
+        'copy',
+        'ticks',
+        'tickFormat',
+        'nice',
+    ])) {
+        return f('identity');
+    }
+    if (arraysEqual(Object.keys(scale), [
+        'invert',
+        'domain',
+        'range',
+        'rangeRound',
+        'round',
+        'clamp',
+        'unknown',
+        'copy',
+        'ticks',
+        'tickFormat',
+        'nice',
+    ])) {
+        return f('radial');
+    }
+    if (modifier) {
+        return f(modifier);
+    }
+    /**
+     * Test for scaleTime vs scaleUtc
+     * https://github.com/d3/d3-scale/pull/274#issuecomment-1462935595
+     */
+    if (scale.domain()[0] instanceof Date) {
+        const d = new Date();
+        let s = '';
+        // @ts-ignore
+        d.getDay = () => (s = 'time');
+        // @ts-ignore
+        d.getUTCDay = () => (s = 'utc');
+        scale.tickFormat(0, '%a')(d);
+        return f(s);
+    }
+    return f('linear');
+}
+/** Determine whether a scale has an ordinal domain
+ * https://svelte.dev/repl/ec6491055208401ca41120c9c8a67737?version=3.49.0
+ * @param  scale A D3 scale
+ * @returns Whether the scale is an ordinal scale
+ */
+function isOrdinalDomain(scale) {
+    // scaleBand, scalePoint
+    if (typeof scale.bandwidth === 'function')
+        return true;
+    // scaleOrdinal
+    if (arraysEqual(Object.keys(scale), ['domain', 'range', 'unknown', 'copy'])) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Calculates scale extents for given data and scales
+ * @template T The type of data objects in the input array
+ * @param {T[]} flatData Array of data objects
+ * @param {FieldAccessors<T>} getters Field accessor functions
+ * @param {ActiveScales} activeScales Object containing scale information
+ * @returns {Extents} Calculated extents for each scale
+ */
+export function calcScaleExtents(flatData, getters, activeScales) {
+    // group scales by domain type (ordinal vs other)
+    const scaleGroups = Object.entries(activeScales).reduce((groups, [key, scaleInfo]) => {
+        const domainType = isOrdinalDomain(scaleInfo.scale) === true ? 'ordinal' : 'other';
+        if (!groups[domainType]) {
+            groups[domainType] = {};
+        }
+        groups[domainType][key] =
+            getters[key];
+        return groups;
+    }, { ordinal: false, other: false });
+    let extents = {};
+    // ordinal scales
+    if (scaleGroups.ordinal) {
+        const sortOptions = Object.fromEntries(Object.entries(activeScales).map(([key, scaleInfo]) => [key, scaleInfo.sort]));
+        extents = calcUniques(flatData, scaleGroups.ordinal, sortOptions);
+    }
+    // other scales
+    if (scaleGroups.other) {
+        const otherExtents = calcExtents(flatData, scaleGroups.other);
+        extents = { ...extents, ...otherExtents };
+    }
+    return extents;
+}
+/**
+ * Calculate the unique values of desired fields
+ * For example, data like this: [{ x: 0, y: -10 }, { x: 10, y: 0 }, { x: 5, y: 10 }]
+ * and a fields object like this: {'x': d => d.x, 'y': d => d.y}
+ * returns an object like this: { x: [0, 10, 5], y: [-10, 0, 10] }
+ *
+ * @template T The type of data objects in the input array
+ * @param  data A flat array of data objects
+ * @param  fields An object containing accessor functions for fields
+ * @param  [sortOptions={}] Sorting options for the results
+ * @returns  An object with unique values for each specified field
+ * @throws {TypeError} If data is not an array or fields is not a valid object
+ */
+function calcUniques(data, fields, sortOptions = {}) {
+    if (!Array.isArray(data)) {
+        throw new TypeError(`The first argument of calcUniques() must be an array. You passed in a ${typeof data}. If you got this error using the <Chart> component, consider passing a flat array to the \`flatData\` prop`);
+    }
+    if (Array.isArray(fields) || fields === undefined || fields === null) {
+        throw new TypeError('The second argument of calcUniques() must be an object with field names as keys and accessor functions as values.');
+    }
+    const uniques = {};
+    const keys = Object.keys(fields);
+    for (const key of keys) {
+        const set = new InternSet();
+        const accessor = fields[key];
+        if (!accessor)
+            continue;
+        for (const item of data) {
+            const value = accessor(item);
+            if (Array.isArray(value)) {
+                for (const val of value) {
+                    set.add(val);
+                }
+            }
+            else {
+                set.add(value);
+            }
+        }
+        const results = Array.from(set);
+        if (sortOptions.sort === true || sortOptions[key] === true) {
+            results.sort((a, b) => {
+                // type-safe sorting for both numbers and strings
+                if (typeof a === 'number' && typeof b === 'number') {
+                    return a - b;
+                }
+                return String(a).localeCompare(String(b));
+            });
+        }
+        uniques[key] = results;
+    }
+    return uniques;
+}
+function calcBaseRange(s, width, height, reverse, percentRange) {
+    let min;
+    let max;
+    if (percentRange === true) {
+        min = 0;
+        max = 100;
+    }
+    else {
+        min = s === 'r' ? 1 : 0;
+        max = s === 'y' ? height : s === 'r' ? 25 : width;
+    }
+    return reverse === true ? [max, min] : [min, max];
+}
+function getDefaultRange(s, width, height, reverse, range, percentRange = false) {
+    return !range
+        ? calcBaseRange(s, width, height, reverse, percentRange)
+        : typeof range === 'function'
+            ? range({ width, height })
+            : range;
+}
+export function identity(d) {
+    return d;
+}
+function findScaleType(scale) {
+    if (scale.constant) {
+        return 'symlog';
+    }
+    if (scale.base) {
+        return 'log';
+    }
+    if (typeof scale.exponent === 'function') {
+        const expValue = scale.exponent();
+        if (expValue === 0.5) {
+            return 'sqrt';
+        }
+        return 'pow';
+    }
+    return 'other';
+}
+function log(sign) {
+    return (x) => Math.log(sign * x);
+}
+function exp(sign) {
+    return (x) => sign * Math.exp(x);
+}
+function symlog(c) {
+    return (x) => Math.sign(x) * Math.log1p(Math.abs(x / c));
+}
+function symexp(c) {
+    return (x) => Math.sign(x) * Math.expm1(Math.abs(x)) * c;
+}
+function pow(exponent) {
+    return function powFn(x) {
+        return x < 0 ? -Math.pow(-x, exponent) : Math.pow(x, exponent);
+    };
+}
+function getPadFunctions(scale) {
+    const scaleType = findScaleType(scale);
+    switch (scaleType) {
+        case 'log': {
+            const domain = scale.domain();
+            const sign = Math.sign(domain[0]);
+            return { lift: log(sign), ground: exp(sign), scaleType };
+        }
+        case 'pow': {
+            const exponent = 1;
+            return {
+                lift: pow(exponent),
+                ground: pow(1 / exponent),
+                scaleType,
+            };
+        }
+        case 'sqrt': {
+            const exponent = 0.5;
+            return {
+                lift: pow(exponent),
+                ground: pow(1 / exponent),
+                scaleType,
+            };
+        }
+        case 'symlog': {
+            const constant = 1;
+            return {
+                lift: symlog(constant),
+                ground: symexp(constant),
+                scaleType,
+            };
+        }
+        default:
+            return {
+                lift: (identity),
+                ground: (identity),
+                scaleType,
+            };
+    }
+}
+export function createGetter(accessor, scale) {
+    return (d) => {
+        const val = accessor(d);
+        if (!scale)
+            return undefined;
+        if (Array.isArray(val)) {
+            return val.map((v) => scale(v));
+        }
+        return scale(val);
+    };
+}
+/**
+ * Calculate the extents of desired fields, skipping `false`, `undefined`, `null` and `NaN` values
+ * For example, data like this:
+ * [{ x: 0, y: -10 }, { x: 10, y: 0 }, { x: 5, y: 10 }]
+ * and a fields object like this:
+ * `{'x': d => d.x, 'y': d => d.y}`
+ * returns an object like this:
+ * `{ x: [0, 10], y: [-10, 10] }`
+ * @param data A flat array of objects.
+ * @param fields An object containing `x`, `y`, `r` or `z` keys that equal an accessor function.
+ * @returns An object with the same structure as `fields` but with min/max arrays.
+ */
+function calcExtents(data, fields) {
+    if (!Array.isArray(data)) {
+        throw new TypeError(`The first argument of calcExtents() must be an array. You passed in a ${typeof data}. If you got this error using the <Chart> component, consider passing a flat array to the \`flatData\` prop.`);
+    }
+    if (Array.isArray(fields) || fields === undefined || fields === null) {
+        throw new TypeError('The second argument of calcExtents() must be an ' +
+            'object with field names as keys as accessor functions as values.');
+    }
+    const extents = {};
+    const keys = Object.keys(fields);
+    const kl = keys.length;
+    let i;
+    let j;
+    let k;
+    let s;
+    let min;
+    let max;
+    let acc;
+    let val;
+    const dl = data.length;
+    for (i = 0; i < kl; i += 1) {
+        s = keys[i];
+        acc = fields[s];
+        min = null;
+        max = null;
+        if (!acc)
+            continue; // Skip if accessor is undefined
+        for (j = 0; j < dl; j += 1) {
+            val = acc(data[j]);
+            if (Array.isArray(val)) {
+                const vl = val.length;
+                for (k = 0; k < vl; k += 1) {
+                    if (val[k] !== undefined &&
+                        val[k] !== null &&
+                        (typeof val[k] === 'string' || Number.isNaN(val[k]) === false)) {
+                        if (min === null || val[k] < min) {
+                            min = val[k];
+                        }
+                        if (max === null || val[k] > max) {
+                            max = val[k];
+                        }
+                    }
+                }
+            }
+            else if (val !== undefined &&
+                val !== null &&
+                (typeof val === 'string' || Number.isNaN(val) === false)) {
+                if (min === null || val < min) {
+                    min = val;
+                }
+                if (max === null || val > max) {
+                    max = val;
+                }
+            }
+        }
+        extents[s] = [min, max];
+    }
+    return extents;
+}
+/**
+ * Move an element to the last child of its parent.
+ * Adapted from d3-selection `.raise`
+ */
+export function raise(node) {
+    if (node.nextSibling) {
+        node.parentNode?.appendChild(node);
+    }
+}
+/**
+ * Flatten arrays of arrays one level deep
+ * @param list The list to flatten
+ * @param accessor An optional accessor function or string property key
+ * @returns Flattened array
+ */
+export default function flatten(list, accessor = (d) => d) {
+    // type the accessor function based on input
+    const acc = typeof accessor === 'string' ? (d) => d[accessor] : accessor;
+    // check if list is array and first element through accessor is array
+    const firstElement = list[0] && acc(list[0]);
+    if (Array.isArray(list) && Array.isArray(firstElement)) {
+        let flat = [];
+        const l = list.length;
+        for (let i = 0; i < l; i += 1) {
+            flat = flat.concat(acc(list[i]));
+        }
+        return flat;
+    }
+    // type assertion here since we know list contains U[] if not flattened
+    return list;
+}

package/dist/utils/color.d.ts

@@ -17,4 +17,5 @@ type RGBColor = {
     a?: number;
 };
 export declare function getColorStr(color: RGBColor): string;
+export declare function getColorIfDefined(data: any): string | undefined;
 export {};

package/dist/utils/color.js

@@ -18,3 +18,11 @@ export function getColorStr(color) {
         return `rgb(${color.r},${color.g},${color.b})`;
     }
 }
+export function getColorIfDefined(data) {
+    if (!data || typeof data !== 'object' || Array.isArray(data))
+        return;
+    if ('color' in data)
+        return data.color;
+    if ('fill' in data)
+        return data.fill;
+}

package/dist/utils/common.d.ts

@@ -1,12 +1,11 @@
-import type { ComponentProps } from 'svelte';
+import type { Component, ComponentProps } from 'svelte';
 import type Chart from '../components/Chart.svelte';
-import type LineChart from '../components/charts/LineChart.svelte';
+import type { SimplifiedChartProps } from '../components/charts/types.js';
 export type Accessor<TData = any> = number | string | ((d: TData) => any) | undefined | null | Accessor<TData>[];
 export declare function accessor<TData = any>(prop: Accessor<TData>): (d: TData) => any;
 /** Guarantee chart data is an array */
 export declare function chartDataArray<TData = any>(data: ComponentProps<Chart<TData>>['data']): any[];
-type SimplifiedChartProps = ComponentProps<LineChart<any>>;
-export declare function defaultChartPadding(axis: SimplifiedChartProps['axis'], legend: SimplifiedChartProps['legend']): {
+export declare function defaultChartPadding<TData, SeriesComponent extends Component, TSnippetProps>(axis?: SimplifiedChartProps<TData, SeriesComponent, TSnippetProps>['axis'], legend?: SimplifiedChartProps<TData, SeriesComponent, TSnippetProps>['legend']): {
     top: number;
     left: number;
     bottom: number;
@@ -17,4 +16,3 @@ export declare function defaultChartPadding(axis: SimplifiedChartProps['axis'],
  * Handles complex objects such as `Date` by invoking `.valueOf()`
  */
 export declare function findRelatedData(data: any[], original: any, accessor: Function): any;
-export {};

package/dist/utils/common.js

@@ -27,11 +27,12 @@ export function chartDataArray(data) {
     else if ('nodes' in data) {
         return data.nodes;
     }
-    else {
+    else if ('descendants' in data) {
         return data.descendants();
     }
+    return [];
 }
-export function defaultChartPadding(axis, legend) {
+export function defaultChartPadding(axis = true, legend = false) {
     if (axis === false) {
         return undefined;
     }

package/dist/utils/connectorUtils.d.ts

@@ -0,0 +1,21 @@
+import { type CurveFactory } from 'd3-shape';
+export type ConnectorCoords = {
+    x: number;
+    y: number;
+};
+export type PresetConnectorType = 'straight' | 'square' | 'beveled' | 'rounded';
+export type ConnectorType = PresetConnectorType | 'd3';
+export type ConnectorSweep = 'horizontal-vertical' | 'vertical-horizontal' | 'none';
+type GetConnectorPresetPathProps = {
+    source: ConnectorCoords;
+    target: ConnectorCoords;
+    radius: number;
+    type: PresetConnectorType;
+    sweep: ConnectorSweep;
+};
+export declare function getConnectorPresetPath(opts: GetConnectorPresetPathProps): string;
+type GetConnectorD3PathProps = Omit<GetConnectorPresetPathProps, 'radius' | 'type'> & {
+    curve: CurveFactory;
+};
+export declare function getConnectorD3Path({ source, target, sweep, curve }: GetConnectorD3PathProps): string;
+export {};