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

package/dist/marks/helpers/MarkerPath.svelte

@@ -0,0 +1,141 @@
+<!--
+    @component
+    Helper component for paths with markers and optional text along the path.
+-->
+<script lang="ts">
+    import Marker, { type MarkerShape } from './Marker.svelte';
+    import { isSnippet, randomId } from '../../helpers/index.js';
+    import { resolveProp } from '../../helpers/resolve.js';
+    import type {
+        BaseMarkProps,
+        ConstantAccessor,
+        DataRecord,
+        Mark,
+        PlotContext,
+        PlotScales
+    } from '../../types.js';
+    import { addEventHandlers } from './events.js';
+    import { getContext } from 'svelte';
+
+    type MarkerPathProps = BaseMarkProps & {
+        /**
+         * the datum associated with this path, usually the first
+         * element of the data array group
+         */
+        datum: DataRecord;
+        /**
+         * the marker shape to use at the start of the path, defaults to
+         * cirlce
+         */
+        markerStart?: boolean | MarkerShape;
+        /**
+         * the marker shape to use at the middle of the path, defaults to circle
+         */
+        markerMid?: boolean | MarkerShape;
+        /**
+         * the marker shape to use at the end of the path, defaults to circle
+         */
+        markerEnd?: boolean | MarkerShape;
+        /**
+         * shorthand for setting all markers
+         */
+        marker?: boolean | MarkerShape;
+        /**
+         * path string
+         */
+        d: string;
+        style: string;
+        startOffset: string;
+        textStyle: string;
+        textStyleClass?: string | null;
+        text: string;
+        transform: string;
+        color: string;
+        strokeWidth: ConstantAccessor<number>;
+        mark: Mark<BaseMarkProps>;
+        scales: PlotScales;
+    };
+
+    let {
+        datum,
+        markerStart,
+        markerMid,
+        markerEnd,
+        marker,
+        d,
+        dInv,
+        style,
+        class: className = null,
+        textStyleClass = null,
+        startOffset,
+        textStyle,
+        text,
+        transform,
+        color,
+        strokeWidth,
+        mark
+    }: MarkerPathProps = $props();
+
+    const id = randomId();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+
+    const points = $derived(text && d != null ? d.split(/[LMC]/).slice(1) : []);
+    const hasPath = $derived(points.length > 0);
+    const firstPt = $derived(text && hasPath ? points.at(0).split(',').map(Number) : []);
+    const lastPt = $derived(text && hasPath ? points.at(-1).split(',').map(Number) : []);
+    const leftToRight = $derived(text && hasPath ? firstPt[0] < lastPt.at(-2) : true);
+
+    // use reversed path if the path is not left to right
+    const textPath = $derived(!text || leftToRight ? d : dInv);
+    const strokeWidth_ = $derived(resolveProp(strokeWidth, datum, 1.4));
+</script>
+
+<g
+    {transform}
+    class={className}
+    stroke-width={strokeWidth_}
+    use:addEventHandlers={{ getPlotState, options: mark.options, datum }}>
+    {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, marker]}
+        {@const markerId = `marker-${key === 'all' ? '' : `${key}-`}${id}`}
+        {#if isSnippet(marker)}
+            {@render marker(markerId, color)}
+        {:else if marker}
+            <Marker
+                id={markerId}
+                shape={marker === true ? 'circle' : resolveProp(marker, datum)}
+                {color} />
+        {/if}
+    {/each}
+    {#if mark.options.onmouseenter || mark.options.onclick}
+        <!-- add invisible path in bg for easier mouse access -->
+        <path
+            {d}
+            style="fill:none;stroke-width: {(strokeWidth || 1) +
+                10}; stroke: transparent; stroke-opacity:0" />
+    {/if}
+    <path
+        marker-start={markerStart || marker
+            ? `url(#marker-${markerStart ? 'start-' : ''}${id})`
+            : null}
+        marker-mid={markerMid || marker ? `url(#marker-${markerMid ? 'mid-' : ''}${id})` : null}
+        marker-end={markerEnd || marker ? `url(#marker-${markerEnd ? 'end-' : ''}${id})` : null}
+        {d}
+        {style}
+        use:addEventHandlers={{ getPlotState, options: mark.options, datum }} />
+    {#if text}
+        <!-- since textPath.side is not yet supported, we have to use an invisible
+            path in order to keep the text from turning upside down -->
+        <path d={textPath} {id} stroke="none" fill="none" />
+        <text dy="-3" style={textStyle} class={textStyleClass}>
+            <textPath {startOffset} href="#{id}">{text}</textPath>
+        </text>
+    {/if}
+</g>
+
+<style>
+    text {
+        font-size: 12px;
+        paint-order: stroke fill;
+    }
+</style>

package/dist/marks/helpers/MarkerPath.svelte.d.ts

@@ -0,0 +1,44 @@
+import { type MarkerShape } from './Marker.svelte';
+import type { BaseMarkProps, ConstantAccessor, DataRecord, Mark, PlotScales } from '../../types.js';
+type MarkerPathProps = BaseMarkProps & {
+    /**
+     * the datum associated with this path, usually the first
+     * element of the data array group
+     */
+    datum: DataRecord;
+    /**
+     * the marker shape to use at the start of the path, defaults to
+     * cirlce
+     */
+    markerStart?: boolean | MarkerShape;
+    /**
+     * the marker shape to use at the middle of the path, defaults to circle
+     */
+    markerMid?: boolean | MarkerShape;
+    /**
+     * the marker shape to use at the end of the path, defaults to circle
+     */
+    markerEnd?: boolean | MarkerShape;
+    /**
+     * shorthand for setting all markers
+     */
+    marker?: boolean | MarkerShape;
+    /**
+     * path string
+     */
+    d: string;
+    style: string;
+    startOffset: string;
+    textStyle: string;
+    textStyleClass?: string | null;
+    text: string;
+    transform: string;
+    color: string;
+    strokeWidth: ConstantAccessor<number>;
+    mark: Mark<BaseMarkProps>;
+    scales: PlotScales;
+};
+/** Helper component for paths with markers and optional text along the path. */
+declare const MarkerPath: import("svelte").Component<MarkerPathProps, {}, "">;
+type MarkerPath = ReturnType<typeof MarkerPath>;
+export default MarkerPath;

package/dist/marks/helpers/Regression.svelte

@@ -0,0 +1,174 @@
+<script module lang="ts">
+    import type { BaseMarkProps, ChannelAccessor, FacetContext, PlotContext } from '../../types.js';
+
+    type RegressionType = 'linear' | 'quad' | 'poly' | 'exp' | 'log' | 'pow' | 'loess';
+
+    export type RegressionMarkProps = BaseMarkProps & {
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        type: RegressionType;
+        /**
+         * If order is specified, sets the regression's order to the specified number.
+         * For example, if order is set to 4, the regression generator will perform a
+         * fourth-degree polynomial regression. Likewise, if order is set to 2, the
+         * regression generator will perform a quadratic regression. Be careful about
+         * attempting to fit your data with higher order polynomials; though the
+         * regression line will fit your data with a high determination coefficient,
+         * it may have little predictive power for data outside of your domain.
+         */
+        order: number;
+        // for log
+        base: number;
+        // for loess
+        span: number;
+        // for confidence bands
+        confidence: number;
+    };
+</script>
+
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import { Line, Area } from '../../index.js';
+
+    import {
+        regressionLinear,
+        regressionQuad,
+        regressionPoly,
+        regressionExp,
+        regressionLog,
+        regressionPow,
+        regressionLoess
+    } from 'd3-regression/dist/d3-regression.esm.js';
+    import { resolveChannel } from '../../helpers/resolve.js';
+    import { confidenceInterval } from '../../helpers/math.js';
+    import callWithProps from '../../helpers/callWithProps.js';
+    import { isDate } from '../../helpers/typeChecks';
+
+    const regressions = new Map<RegressionType, typeof regressionLinear>([
+        ['linear', regressionLinear],
+        ['quad', regressionQuad],
+        ['poly', regressionPoly],
+        ['exp', regressionExp],
+        ['log', regressionLog],
+        ['pow', regressionPow],
+        ['loess', regressionLoess]
+    ]);
+
+    function maybeRegression(name: string) {
+        name = `${name}`.toLowerCase();
+        if (regressions.has(name)) return regressions.get(name);
+        throw new Error('unknown regression ' + name);
+    }
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    let {
+        data,
+        dependent,
+        type = 'linear',
+        order = 3,
+        base = 2.71828,
+        span = 0.3,
+        confidence = 0.99,
+        class: className = null,
+        ...options
+    }: RegressionMarkProps & { dependent: 'x' | 'y' } = $props();
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    let testFacet = $derived(getTestFacet());
+
+    let filteredData = $derived(data.filter((d) => testFacet(d, options)));
+
+    let independent: 'x' | 'y' = $derived(dependent === 'x' ? 'y' : 'x');
+
+    let regressionFn = $derived(maybeRegression(type));
+
+    let regression = $derived(
+        callWithProps(regressionFn, [], {
+            x: (d) => resolveChannel(independent, d, options),
+            y: (d) => resolveChannel(dependent, d, options),
+            ...(type === 'poly' ? { order } : {}),
+            ...(type === 'log' ? { base } : {}),
+            ...(!type.startsWith('loess') ? { domain: plot.scales[independent].domain } : {}),
+            ...(type === 'loess' ? { bandwidth: span } : {})
+        })(filteredData)
+    );
+
+    let regrPoints = $derived([
+        ...new Set([
+            plot.scales[independent].domain[0],
+            ...plot.scales[independent].fn.ticks(40),
+            plot.scales[independent].domain[1]
+        ])
+    ]);
+
+    let regrData = $derived(
+        regression.predictMany
+            ? regression.predictMany(regrPoints).map((__y, i) => ({ __x: regrPoints[i], __y }))
+            : regression.predict
+              ? regrPoints.map((__x) => {
+                    // const __x = x;
+                    const __y = regression.predict(__x);
+                    return { __x, __y };
+                })
+              : regression.map(([__x, __y]) => ({
+                    __x: plot.scales[independent].type === 'time' ? new Date(__x) : __x,
+                    __y
+                }))
+    );
+
+    let stroke = $derived(
+        options.stroke != null ? resolveChannel('stroke', filteredData[0], options) : null
+    );
+
+    let confBandGen = $derived(
+        confidence !== false
+            ? confidenceInterval(
+                  data
+                      .map((d) => ({
+                          x: resolveChannel(independent, d, options),
+                          y: resolveChannel(dependent, d, options)
+                      }))
+                      .filter(
+                          ({ x, y }) => (Number.isFinite(x) || isDate(x)) && Number.isFinite(y)
+                      ),
+                  regression.predict,
+                  1 - confidence
+              )
+            : null
+    );
+
+    let confBandData = $derived(
+        confidence !== false && regression.predict
+            ? regrPoints.map((x) => {
+                  const { x: __x, left, right } = confBandGen(x);
+                  return { __x, __y1: left, __y2: right };
+              })
+            : []
+    );
+</script>
+
+{#if filteredData.length}
+    <g class="regression-{independent} {className || ''}">
+        <Line
+            data={regrData}
+            {...{
+                ...options,
+                fx: null,
+                fy: null,
+                stroke,
+                x: dependent === 'y' ? '__x' : '__y',
+                y: dependent === 'y' ? '__y' : '__x'
+            }} />
+        {#if confBandData.length}
+            <Area
+                data={confBandData}
+                {...dependent === 'y'
+                    ? { x1: '__x', y1: '__y1', y2: '__y2' }
+                    : { y1: '__x', x1: '__y1', x2: '__y2' }}
+                fill={stroke || 'currentColor'}
+                opacity={0.15} />
+        {/if}
+    </g>
+{/if}

package/dist/marks/helpers/Regression.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { BaseMarkProps, ChannelAccessor } from '../../types.js';
+type RegressionType = 'linear' | 'quad' | 'poly' | 'exp' | 'log' | 'pow' | 'loess';
+export type RegressionMarkProps = BaseMarkProps & {
+    x: ChannelAccessor;
+    y: ChannelAccessor;
+    type: RegressionType;
+    /**
+     * If order is specified, sets the regression's order to the specified number.
+     * For example, if order is set to 4, the regression generator will perform a
+     * fourth-degree polynomial regression. Likewise, if order is set to 2, the
+     * regression generator will perform a quadratic regression. Be careful about
+     * attempting to fit your data with higher order polynomials; though the
+     * regression line will fit your data with a high determination coefficient,
+     * it may have little predictive power for data outside of your domain.
+     */
+    order: number;
+    base: number;
+    span: number;
+    confidence: number;
+};
+type $$ComponentProps = RegressionMarkProps & {
+    dependent: 'x' | 'y';
+};
+declare const Regression: import("svelte").Component<$$ComponentProps, {}, "">;
+type Regression = ReturnType<typeof Regression>;
+export default Regression;

package/dist/marks/helpers/events.d.ts

@@ -0,0 +1,8 @@
+import type { BaseMarkProps, DataRecord, PlotState } from '../../types.js';
+export declare function addEventHandlers(node: SVGElement, { options, datum, getPlotState }: {
+    options: BaseMarkProps;
+    datum: DataRecord;
+    getPlotState: () => PlotState;
+}): {
+    destroy(): void;
+};

package/dist/marks/helpers/events.js

@@ -0,0 +1,74 @@
+import { invert, pick } from 'es-toolkit';
+import { RAW_VALUE } from '../../transforms/recordize.js';
+import { INDEX } from '../../constants.js';
+export function addEventHandlers(node, { options, datum, getPlotState }) {
+    const events = pick(options, [
+        'onclick',
+        'oncontextmenu',
+        'ondblclick',
+        'ondrag',
+        'ondragend',
+        'ondragenter',
+        'ondragleave',
+        'ondragover',
+        'ondragstart',
+        'ondrop',
+        'onmousedown',
+        'onmouseenter',
+        'onmouseleave',
+        'onmousemove',
+        'onmouseout',
+        'onmouseup',
+        'onwheel',
+        'ontouchcancel',
+        'ontouchend',
+        'ontouchmove'
+    ]);
+    const listeners = new Map();
+    // attach event handlers
+    for (const [eventName, eventHandler] of Object.entries(events)) {
+        if (eventHandler) {
+            const wrappedHandler = (origEvent) => {
+                const { scales } = getPlotState();
+                if (origEvent.layerX !== undefined) {
+                    if (scales.projection) {
+                        const [x, y] = scales.projection.invert([
+                            origEvent.layerX,
+                            origEvent.layerY
+                        ]);
+                        origEvent.dataX = x;
+                        origEvent.dataY = y;
+                    }
+                    else {
+                        origEvent.dataX = invertScale(scales.x, origEvent.layerX);
+                        origEvent.dataY = invertScale(scales.y, origEvent.layerY);
+                    }
+                }
+                eventHandler(origEvent, datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum, datum[INDEX]);
+            };
+            listeners.set(eventName, wrappedHandler);
+            node.addEventListener(eventName.substring(2), wrappedHandler);
+        }
+    }
+    if (events.onclick || events.onmousedown || events.onmouseup) {
+        // force role button
+        node.setAttribute('role', 'button');
+    }
+    return {
+        destroy() {
+            for (const [eventName, handler] of listeners.entries()) {
+                node.removeEventListener(eventName.substring(2), handler);
+            }
+        }
+    };
+}
+function invertScale(scale, position) {
+    if (scale.type === 'band') {
+        // invert band scale since scaleBand doesn't have an invert function
+        const eachBand = scale.fn.step();
+        console.log({ eachBand, position });
+        const index = Math.floor(position / eachBand);
+        return scale.fn.domain()[index];
+    }
+    return scale.fn.invert ? scale.fn.invert(position) : undefined;
+}

package/dist/transforms/bin.d.ts

@@ -0,0 +1,51 @@
+import type { DataRecord, RawValue } from '../types.js';
+import type { TransformArg } from '../types.js';
+import { type ThresholdCountGenerator } from 'd3-array';
+import { Reducer, type ReducerName } from '../helpers/reduce.js';
+type NamedThresholdsGenerator = 'auto' | 'scott' | 'sturges' | 'freedman-diaconis';
+type BinBaseOptions = {
+    domain?: [number, number];
+    thresholds?: NamedThresholdsGenerator | number | number[] | ThresholdCountGenerator;
+    interval?: number | string;
+    cumulative?: false | 1 | -1;
+    reverse?: boolean;
+};
+type ReducerOption = ReducerName | ((group: DataRecord[]) => RawValue);
+type AdditionalOutputChannels = Partial<{
+    fill: ReducerOption;
+    stroke: ReducerOption;
+    r: ReducerOption;
+    opacity: ReducerOption;
+    fillOpacity: ReducerOption;
+    strokeOpacity: ReducerOption;
+}>;
+export type BinXOptions = BinBaseOptions & AdditionalOutputChannels & Partial<{
+    y: typeof Reducer;
+    y1: typeof Reducer;
+    y2: typeof Reducer;
+}>;
+export type BinYOptions = BinBaseOptions & AdditionalOutputChannels & Partial<{
+    x: typeof Reducer;
+    x1: typeof Reducer;
+    x2: typeof Reducer;
+}>;
+type BinOptions = BinBaseOptions & AdditionalOutputChannels;
+/**
+ * Bins on x. Also groups on y and the first channel of z, fill, or stroke, if any.
+ *
+ * @param param0
+ * @param options
+ */
+export declare function binX<T>({ data, ...channels }: TransformArg<T, DataRecord>, options?: BinXOptions): TransformArg<T, DataRecord>;
+/**
+ * Bins on y. Also groups on y and the first channel of z, fill, or stroke, if any.
+ *
+ * @param param0
+ * @param options
+ */
+export declare function binY<T>({ data, ...channels }: TransformArg<T, DataRecord>, options?: BinYOptions): TransformArg<T, DataRecord>;
+/**
+ * for binning in x and y dimension simulatenously
+ */
+export declare function bin<T>({ data, ...channels }: TransformArg<T, DataRecord>, options?: BinOptions): TransformArg<T, DataRecord>;
+export {};