svelteplot 0.0.1-alpha.9 → 0.1.3-next.12

package/dist/helpers/projection.js

@@ -0,0 +1,100 @@
+import { geoClipRectangle, geoPath, geoTransform } from 'd3-geo';
+import { constant, isObject, isValid } from './index.js';
+const identity = constant({ stream: (stream) => stream });
+const defaultAspectRatio = 0.618;
+export function createProjection({ projOptions, inset: globalInset = 2, insetTop = globalInset, insetRight = globalInset, insetBottom = globalInset, insetLeft = globalInset } = {}, dimensions) {
+    // no projection defined
+    if (projOptions == null)
+        return;
+    // projection function passed as projection option
+    if (typeof projOptions.stream === 'function')
+        return projOptions; // d3 projection
+    let options;
+    let domain;
+    let clip = 'frame';
+    // If the projection was specified as an object with additional options,
+    // extract those. The order of precedence for insetTop (and other insets) is:
+    // projection.insetTop, projection.inset, (global) insetTop, (global) inset.
+    // Any other options on this object will be passed through to the initializer.
+    if (isObject(projOptions)) {
+        let inset;
+        ({
+            type: projOptions,
+            domain,
+            inset,
+            insetTop = inset !== undefined ? inset : insetTop,
+            insetRight = inset !== undefined ? inset : insetRight,
+            insetBottom = inset !== undefined ? inset : insetBottom,
+            insetLeft = inset !== undefined ? inset : insetLeft,
+            clip = clip,
+            ...options
+        } = projOptions);
+        if (projOptions == null)
+            return;
+    }
+    // let projFactory;
+    let aspectRatio = defaultAspectRatio;
+    const projFactory = projOptions;
+    // Compute the frame dimensions and invoke the projection initializer.
+    const { width, height, marginLeft, marginRight, marginTop, marginBottom } = dimensions;
+    const dx = width - marginLeft - marginRight - insetLeft - insetRight;
+    const dy = height - marginTop - marginBottom - insetTop - insetBottom;
+    const projInstance = projFactory?.({ width: dx, height: dy, clip, ...options });
+    // The projection initializer might decide to not use a projection.
+    if (projInstance == null)
+        return;
+    clip = maybePostClip(clip, marginLeft, marginTop, width - marginRight, height - marginBottom);
+    // Translate the origin to the top-left corner, respecting margins and insets.
+    let tx = marginLeft + insetLeft;
+    let ty = marginTop + insetTop;
+    let transform;
+    let invertTransform = (d) => d;
+    // If a domain is specified, fit the projection to the frame.
+    if (domain != null) {
+        const [[x0, y0], [x1, y1]] = geoPath(projInstance).bounds(domain);
+        const k = Math.min(dx / (x1 - x0), dy / (y1 - y0));
+        aspectRatio = (y1 - y0) / (x1 - x0);
+        // aspectRatio = 1/k;
+        if (k > 0) {
+            tx -= (k * (x0 + x1) - dx) / 2;
+            ty -= (k * (y0 + y1) - dy) / 2;
+            transform = geoTransform({
+                point(x, y) {
+                    this.stream.point(x * k + tx, y * k + ty);
+                }
+            });
+            invertTransform = ([x, y]) => [(x - tx) / k, (y - ty) / k];
+        }
+        else {
+            throw new Error(`Warning: the projection could not be fit to the specified domain; using the default scale.`);
+        }
+    }
+    transform ??=
+        tx === 0 && ty === 0
+            ? identity()
+            : geoTransform({
+                point(x, y) {
+                    this.stream.point(x + tx, y + ty);
+                }
+            });
+    invertTransform ??= ([x, y]) => [x - tx, y - ty];
+    return {
+        aspectRatio,
+        invert([x, y]) {
+            return projInstance.invert(invertTransform([x, y]));
+        },
+        stream: (s) => projInstance.stream(transform.stream(clip(s)))
+    };
+}
+function maybePostClip(clip, x1, y1, x2, y2) {
+    if (clip === false || clip == null || typeof clip === 'number')
+        return (s) => s;
+    if (clip === true)
+        clip = 'frame';
+    switch (`${clip}`.toLowerCase()) {
+        case 'frame':
+            return geoClipRectangle(x1, y1, x2, y2);
+        default:
+            throw new Error(`unknown projection clip type: ${clip}`);
+    }
+}

package/dist/helpers/reduce.d.ts

@@ -0,0 +1,10 @@
+import type { ChannelName, Channels, DataRecord, DataRow, RawValue } from '../types.js';
+type ReducerFunc = (group: Iterable<DataRow>) => RawValue;
+type ReducerOption = ReducerName | ReducerFunc;
+type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+export type ReducerPercentile = (`p${Digit}${Digit}` & Record<never, never>) | 'p25' | 'p50' | 'p75';
+export type ReducerName = 'count' | 'deviation' | 'difference' | 'first' | 'last' | 'max' | 'mean' | 'median' | 'min' | 'mode' | 'ratio' | 'sum' | 'variance' | ReducerPercentile;
+export declare const Reducer: Record<ReducerName, ReducerFunc>;
+export declare function mayberReducer(r: ReducerOption): ReducerFunc;
+export declare function reduceOutputs(newDatum: DataRecord, data: DataRecord[], options: Record<ChannelName, ReducerOption>, outputs: Iterable<ChannelName>, channels: Channels, newChannels: Channels): void;
+export {};

package/dist/helpers/reduce.js

@@ -0,0 +1,85 @@
+import { min, max, mode, sum, mean, median, variance, deviation, quantile, range } from 'd3-array';
+import { resolveChannel } from './resolve.js';
+import { POSITION_CHANNELS } from './index.js';
+const niceReduceNames = {
+    count: 'Frequency',
+    deviation: 'Standard Deviation',
+    mean: 'Average'
+};
+const StaticReducer = {
+    count: (d) => Array.from(d).length,
+    min,
+    max,
+    mode,
+    sum,
+    mean,
+    median,
+    identity: (d) => d,
+    variance,
+    deviation,
+    first: (d) => d[0],
+    last: (d) => d.at(-1),
+    difference: (d) => d.at(-1) - d[0],
+    ratio: (d) => d.at(-1) / d[0]
+    // TODO: proportion
+    // TODO: proportion-facet
+    // TODO: min-index
+    // TODO: max-index
+};
+// use proxy to allow for percentile reducers
+export const Reducer = new Proxy(StaticReducer, {
+    get(target, prop) {
+        if (String(prop).charAt(0) === 'p' && String(prop).length === 3) {
+            const p = +String(prop).slice(1) / 100;
+            return percentile(p);
+        }
+        return Reflect.get(target, prop);
+    },
+    has(target, prop) {
+        if (String(prop).charAt(0) === 'p' && String(prop).length === 3) {
+            return true;
+        }
+        return Reflect.has(target, prop);
+    }
+});
+function percentile(p) {
+    return (I, f) => quantile(I, p, f);
+}
+function isReducerName(r) {
+    return typeof r === 'string' && r in Reducer;
+}
+export function mayberReducer(r) {
+    if (typeof r === 'function')
+        return r;
+    if (typeof r === 'string' && isReducerName(r)) {
+        return Reducer[r];
+    }
+    throw new Error('unknown reducer ' + r);
+}
+export function reduceOutputs(newDatum, data, options, outputs, channels, newChannels) {
+    for (const k of outputs) {
+        if (options[k] != null) {
+            const values = channels[k] == null ? data : data.map((d) => resolveChannel(k, d, channels));
+            const reducer = mayberReducer(options[k]);
+            newDatum[`__${k}`] = reducer(values);
+            newChannels[k] = `__${k}`;
+            if (typeof options[k] === 'string') {
+                const reducerName = niceReduceNames[options[k]] ??
+                    `${String(options[k]).charAt(0).toUpperCase()}${String(options[k]).slice(1)}`;
+                // we have a named reducer like 'count', so let's try to preserve the
+                // source channel mapping for axis labels
+                if (POSITION_CHANNELS.has(k)) {
+                    if (typeof channels[k] === 'string') {
+                        // the named reducer is applied to a column name, so we can use a combination
+                        // of both as axis labels, e.g. MEAN(weight)
+                        // eslint-disable-next-line no-irregular-whitespace
+                        newChannels[`__${k}_origField`] = `${reducerName} ( ${channels[k]} )`;
+                    }
+                    else {
+                        newChannels[`__${k}_origField`] = reducerName;
+                    }
+                }
+            }
+        }
+    }
+}

package/dist/helpers/regressionLoess.d.ts

@@ -0,0 +1,12 @@
+import type { DataRow } from '../types.js';
+type AccessorFn = (d: any) => number;
+export default function (): {
+    (data: DataRow[]): {
+        predict(x: number): any;
+        predictMany(x: number[]): any;
+    };
+    x(_: AccessorFn): void;
+    y(_: AccessorFn): void;
+    span(_: number): void;
+};
+export {};

package/dist/helpers/regressionLoess.js

@@ -0,0 +1,47 @@
+import Loess from 'loess';
+function toNumber(d) {
+    if (typeof d.getTime === 'function')
+        return d.getTime();
+    return d;
+}
+export default function () {
+    let accessX = (d) => d[0];
+    let accessY = (d) => d[1];
+    let span = 0.75;
+    // const degree = 2;
+    const fn = (data) => {
+        const filteredData = data
+            .map((d) => ({
+            x: toNumber(accessX(d)),
+            y: accessY(d)
+        }))
+            .filter((d) => Number.isFinite(d.x) && Number.isFinite(d.y));
+        // .sort((a,b) => a.x - b.x);
+        // compute loess regression for data
+        const model = new Loess({
+            x: filteredData.map((d) => d.x),
+            y: filteredData.map((d) => d.y)
+        }, { span: Math.max(0.1, span), iterations: 2 });
+        // return;
+        return {
+            predict(x) {
+                const fit = model.predict({ x: [toNumber(x)] });
+                return fit.fitted[0];
+            },
+            predictMany(x) {
+                const fit = model.predict({ x: x.map(toNumber) });
+                return fit.fitted;
+            }
+        };
+    };
+    fn.x = (_) => {
+        accessX = _;
+    };
+    fn.y = (_) => {
+        accessY = _;
+    };
+    fn.span = (_) => {
+        span = _;
+    };
+    return fn;
+}

package/dist/helpers/removeIdenticalLines.d.ts

@@ -1 +1,8 @@
-export default function removeIdenticalLines(input: string[][]): string[][];
+type Tick = {
+    text: string[];
+};
+/**
+ * Remove identical lines from a set of ticks
+ */
+export default function removeIdenticalLines(input: Tick[]): Tick[];
+export {};

package/dist/helpers/removeIdenticalLines.js

@@ -1,16 +1,23 @@
+/**
+ * Remove identical lines from a set of ticks
+ */
 export default function removeIdenticalLines(input) {
-    const uniqueLines = [];
+    const uniqueTicks = [];
     if (!input.length)
         return input;
     for (let c = 0; c < input.length; c++) {
-        uniqueLines.push([]);
+        // initialize new tick array with empty text lines
+        uniqueTicks.push({
+            ...input[c],
+            text: []
+        });
     }
-    for (let l = 0; l < input[0].length; l++) {
-        const isIdentical = input.every((value) => input[0][l] === value[l]);
+    for (let l = 0; l < input[0].text.length; l++) {
+        const isIdentical = input.length > 1 && input.every((tick) => input[0].text[l] === tick.text[l]);
         for (let c = 0; c < input.length; c++) {
-            if (!isIdentical)
-                uniqueLines[c].push(input[c][l]);
+            if (!isIdentical && input[c].text[l])
+                uniqueTicks[c].text.push(input[c].text[l]);
         }
     }
-    return uniqueLines;
+    return uniqueTicks;
 }

package/dist/helpers/resolve.d.ts

@@ -0,0 +1,21 @@
+import type { MarkStyleProps, PlotState, ScaledDataRecord } from '../types.js';
+import type { ScaleName, ChannelName, ScaledChannelName, ChannelAccessor, DataRow, RawValue, DataRecord, ConstantAccessor } from '../types.js';
+type ChannelAlias = {
+    channel: ScaledChannelName;
+};
+export declare function resolveProp<T>(accessor: ConstantAccessor<T>, datum: DataRecord | null, _defaultValue?: T | null): T | null;
+type ChannelOptions = {
+    value: ChannelAccessor;
+    scale?: ScaleName | null;
+    channel?: ScaledChannelName | null;
+};
+export declare function toChannelOption(name: ScaledChannelName, channel: ChannelAccessor | ChannelAlias): ChannelOptions;
+export declare function resolveChannel(channel: ChannelName, datum: DataRow, channels: Partial<Record<ChannelName, ChannelAccessor | ChannelAlias>>): RawValue;
+export declare function resolveScaledStyleProps(datum: DataRecord, channels: Partial<Record<ScaledChannelName, ChannelAccessor>>, useScale: Record<ScaledChannelName, boolean>, plot: PlotState, defaultColorProp?: 'fill' | 'stroke' | null): any;
+export declare function resolveScaledStyles(datum: DataRecord, channels: Partial<Record<ScaledChannelName, ChannelAccessor> & {
+    style: string;
+}>, useScale: Record<ScaledChannelName, boolean>, plot: PlotState, defaultColorProp?: 'fill' | 'stroke' | null): string;
+export declare function resolveStyles(plot: PlotState, datum: ScaledDataRecord, channels: Partial<Record<ChannelName & MarkStyleProps, ChannelAccessor> & {
+    style: string;
+}>, defaultColorProp: "fill" | "stroke" | null | undefined, useScale: Record<ScaledChannelName, boolean>, recomputeChannels?: boolean): [string | null, string | null];
+export {};

package/dist/helpers/resolve.js

@@ -0,0 +1,156 @@
+import { CHANNEL_SCALE } from '../constants.js';
+import isDataRecord from './isDataRecord.js';
+import isRawValue from './isRawValue.js';
+import { isValid } from './isValid.js';
+import { pick } from 'es-toolkit';
+import { getBaseStylesObject } from './getBaseStyles.js';
+export function resolveProp(accessor, datum, _defaultValue = null) {
+    if (typeof accessor === 'function') {
+        // datum.___orig___ exists if an array of raw values was used as dataset and got
+        // "recordized" by the recordize transform. We want to hide this wrapping to the user
+        // so we're passing the original value to accessor functions instead of our wrapped record
+        return datum == null
+            ? accessor()
+            : accessor(datum.___orig___ != null ? datum.___orig___ : datum);
+    }
+    else if (typeof accessor === 'string' && datum && datum[accessor] !== undefined) {
+        return datum[accessor];
+    }
+    return isRawValue(accessor) ? accessor : _defaultValue;
+}
+export function toChannelOption(name, channel) {
+    const isPositionScale = CHANNEL_SCALE[name] === 'x' || CHANNEL_SCALE[name] === 'y';
+    const isOpacityScale = CHANNEL_SCALE[name] === 'opacity';
+    return isDataRecord(channel)
+        ? channel
+        : {
+            value: channel,
+            scale: (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
+                typeof channel === 'undefined'
+                ? null
+                : CHANNEL_SCALE[name],
+            channel: null
+        };
+}
+export function resolveChannel(channel, datum, channels) {
+    const scale = CHANNEL_SCALE[channel];
+    // the z channel has an automatic alias mechanism
+    const accessor = channel === 'z' ? channels.z || channels.fill || channels.stroke : channels[channel];
+    const channelOptions = toChannelOption(channel, accessor);
+    if (channelOptions.channel) {
+        return resolveChannel(channelOptions.channel, datum, channels);
+    }
+    return resolve(datum, channelOptions.value, channel, scale);
+}
+function resolve(datum, accessor, channel, scale) {
+    if (isDataRecord(datum)) {
+        // use accessor function
+        if (typeof accessor === 'function')
+            // datum.___orig___ exists if an array of raw values was used as dataset and got
+            // "recordized" by the recordize transform. We want to hide this wrapping to the user
+            // so we're passing the original value to accessor functions instead of our wrapped record
+            return accessor(datum.___orig___ != null ? datum.___orig___ : datum);
+        // use accessor string
+        if (typeof accessor === 'string' && datum[accessor] !== undefined)
+            return datum[accessor];
+        // fallback to channel name as accessor
+        if (accessor === null && datum[channel] !== undefined)
+            return datum[channel];
+        return isRawValue(accessor) ? accessor : null;
+    }
+    else if (Array.isArray(datum) &&
+        (typeof accessor === 'string' || typeof accessor === 'number') &&
+        datum[accessor] != null) {
+        return datum[accessor];
+    }
+    else {
+        // return single value or accessor
+        return typeof accessor === 'function'
+            ? accessor(datum)
+            : accessor !== null && isRawValue(accessor)
+                ? accessor
+                : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
+                    ? datum
+                    : null;
+    }
+}
+const scaledStyleProps = {
+    fill: 'fill',
+    stroke: 'stroke',
+    fillOpacity: 'fill-opacity',
+    strokeOpacity: 'stroke-opacity',
+    opacity: 'opacity'
+};
+const scaledStylePropsKeys = Object.keys(scaledStyleProps);
+// TODO: find a better name
+const oppositeColor = {
+    fill: 'stroke',
+    stroke: 'fill'
+};
+export function resolveScaledStyleProps(datum, channels, useScale, plot, defaultColorProp = null) {
+    return {
+        ...getBaseStylesObject(datum, channels),
+        fill: 'none',
+        stroke: 'none',
+        ...(defaultColorProp && channels[oppositeColor[defaultColorProp]] == null
+            ? { [defaultColorProp]: 'currentColor' }
+            : {}),
+        ...Object.fromEntries(Object.entries(scaledStyleProps)
+            .filter(([key]) => channels[key] != null)
+            .map(([key, cssAttr]) => [key, cssAttr, resolveChannel(key, datum, channels)])
+            .filter(([key, , value]) => isValid(value) || key === 'fill' || key === 'stroke')
+            .map(([key, cssAttr, value]) => {
+            if (useScale[key]) {
+                if (value == undefined &&
+                    (key === 'fill' || key === 'stroke') &&
+                    plot.options.color.unknown) {
+                    return [cssAttr, plot.options.color.unknown];
+                }
+                return [cssAttr, plot.scales[CHANNEL_SCALE[key]].fn(value)];
+            }
+            return [cssAttr, value];
+        }))
+    };
+}
+export function resolveScaledStyles(datum, channels, useScale, plot, defaultColorProp = null) {
+    return `${stylePropsToCSS(resolveScaledStyleProps(datum, channels, useScale, plot, defaultColorProp))};${channels.style || ''}`;
+}
+function stylePropsToCSS(props) {
+    return `${Object.entries(props)
+        .map(([key, value]) => `${key}: ${value}`)
+        .join(';')}`;
+}
+export function resolveStyles(plot, datum, channels, defaultColorProp = null, useScale, recomputeChannels = false) {
+    const styleProps = {
+        ...getBaseStylesObject(datum.datum, channels),
+        fill: 'none',
+        stroke: 'none',
+        ...(defaultColorProp && channels[oppositeColor[defaultColorProp]] == null
+            ? { [defaultColorProp]: 'currentColor' }
+            : {}),
+        ...Object.fromEntries(Object.entries(scaledStyleProps)
+            .filter(([key]) => channels[key] != null)
+            .map(([key, cssAttr]) => [
+            key,
+            cssAttr,
+            recomputeChannels ? resolveChannel(key, datum.datum, channels) : datum[key]
+        ])
+            .filter(([key, , value]) => isValid(value) || key === 'fill' || key === 'stroke')
+            .map(([key, cssAttr, value]) => {
+            if (useScale[key]) {
+                if (value == undefined &&
+                    (key === 'fill' || key === 'stroke') &&
+                    plot.options.color.unknown) {
+                    return [cssAttr, plot.options.color.unknown];
+                }
+            }
+            return [cssAttr, value];
+        }))
+    };
+    if (plot.css) {
+        return [null, plot.css(`${stylePropsToCSS(styleProps)};${channels.style ?? ''}`)];
+    }
+    else {
+        return [`${stylePropsToCSS(styleProps)};${channels.style ?? ''}`, null];
+    }
+}

package/dist/helpers/roundedRect.d.ts

@@ -0,0 +1,9 @@
+/**
+ *
+ */
+export declare function roundedRect(x: number, y: number, width: number, height: number, borderRadius?: number | {
+    topLeft?: number;
+    topRight?: number;
+    bottomLeft?: number;
+    bottomRight?: number;
+}): string;

package/dist/helpers/roundedRect.js

@@ -0,0 +1,31 @@
+/**
+ *
+ */
+export function roundedRect(x, y, width, height, borderRadius = {
+    topLeft: 0,
+    topRight: 0,
+    bottomLeft: 0,
+    bottomRight: 0
+}) {
+    const maxRadius = Math.min(width, height) / 2;
+    const [tl, tr, bl, br] = (typeof borderRadius === 'number'
+        ? new Array(4).fill(borderRadius)
+        : [
+            borderRadius?.topLeft || 0,
+            borderRadius?.topRight || 0,
+            borderRadius?.bottomLeft || 0,
+            borderRadius?.bottomRight || 0
+        ]).map((r) => Math.min(r, maxRadius));
+    return `
+    M ${x + tl} ${y}
+    H ${x + width - tr}
+    ${tr ? `A ${tr} ${tr} 0 0 1 ${x + width} ${y + tr}` : ''}
+    V ${y + height - br}
+    ${br ? `A ${br} ${br} 0 0 1 ${x + width - br} ${y + height}` : ''}
+    H ${x + bl}
+    ${bl ? `A ${bl} ${bl} 0 0 1 ${x} ${y + height - bl}` : ''}
+    V ${y + tl}
+    ${tl ? `A ${tl} ${tl} 0 0 1 ${x + tl} ${y}` : ''}
+    Z
+  `;
+}

package/dist/helpers/scales.d.ts

@@ -0,0 +1,42 @@
+import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName } from '../types.js';
+/**
+ * compute the plot scales
+ */
+export declare function computeScales(plotOptions: PlotOptions, plotWidth: number, plotHeight: number, plotHasFilledDotMarks: boolean, marks: Mark<GenericMarkOptions>[], plotDefaults: PlotDefaults): PlotScales;
+export declare function createScale<T extends ScaleOptions>(name: ScaleName, scaleOptions: T, marks: Mark<GenericMarkOptions>[], plotOptions: PlotOptions, plotWidth: number, plotHeight: number, plotHasFilledDotMarks: boolean, plotDefaults: PlotDefaults): {
+    type: string;
+    domain: number[];
+    range: number[];
+    fn: (() => string) | (() => number);
+    skip: Map<any, any>;
+    isDummy: boolean;
+    manualActiveMarks?: undefined;
+    uniqueScaleProps?: undefined;
+    autoTitle?: undefined;
+} | {
+    type: ScaleType;
+    domain: RawValue[] | [undefined, undefined];
+    range: any;
+    fn: any;
+    skip: Map<ScaledChannelName, Set<symbol>>;
+    manualActiveMarks: number;
+    uniqueScaleProps: Set<ChannelAccessor>;
+    autoTitle: string | null;
+    isDummy?: undefined;
+};
+/**
+ * Infer a scale type based on the scale name, the data values mapped to it and
+ * the mark types that are bound to the scale
+ */
+export declare function inferScaleType(name: ScaleName, dataValues: RawValue[], markTypes: Set<MarkType>): ScaleType;
+/**
+ * Mark channels can explicitely or implicitely be exempt from being
+ * mapped to a scale, so everywhere where values are being mapped to
+ * scales, we need to check if the the scale is supposed to be used
+ * not. That's what this function is used for.
+ */
+export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): { [k in ScaledChannelName]: boolean; };
+export declare function looksLikeANumber(input: string | number): boolean;
+export declare function projectXY(scales: PlotScales, x: RawValue, y: RawValue, useXScale?: boolean, useYScale?: boolean): [number, number];
+export declare function projectX(channel: 'x' | 'x1' | 'x2', scales: PlotScales, value: RawValue): number;
+export declare function projectY(channel: 'y' | 'y1' | 'y2', scales: PlotScales, value: RawValue): number;