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

package/dist/marks/Vector.svelte

@@ -0,0 +1,219 @@
+<script lang="ts" module>
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor,
+        FacetContext
+    } from '../types.js';
+
+    type D3Path = ReturnType<typeof import('d3-path').path>;
+
+    export type ShapeRenderer = {
+        draw(context: D3Path, l: number, r: number): void;
+    };
+
+    export type VectorMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        r?: number;
+        length?: ChannelAccessor;
+        rotate?: ChannelAccessor;
+        fill?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        /**
+         * Controls where the vector is anchored in relation to the x, y position.
+         * If set to 'start', the arrow will start at the x, y position. If set to
+         * 'middle', the arrow will be centered at the x, y position. If set to
+         * 'end', the arrow will end at the x, y position.
+         */
+        anchor: 'start' | 'middle' | 'end';
+        shape?: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer;
+        children?: Snippet;
+        dx?: ConstantAccessor<number>;
+        dy?: ConstantAccessor<number>;
+        canvas?: boolean;
+    };
+</script>
+
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import { pathRound as path } from 'd3-path';
+
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { projectXY } from '../helpers/scales.js';
+    import { sort } from '../index.js';
+    import Mark from '../Mark.svelte';
+    //import DotCanvas from './helpers/DotCanvas.svelte';
+    import { maybeData, testFilter, isValid } from '../helpers/index.js';
+    import { addEventHandlers } from './helpers/events.js';
+
+    const defaultRadius = 3.5;
+
+    // The size of the arrowhead is proportional to its length, but we still allow
+    // the relative size of the head to be controlled via the mark’s width option;
+    // doubling the default radius will produce an arrowhead that is twice as big.
+    // That said, we’ll probably want a arrow with a fixed head size, too.
+    const wingRatio = defaultRadius * 5;
+
+    let {
+        data = [{}],
+        canvas,
+        shape = 'arrow',
+        anchor = 'middle',
+        r = defaultRadius,
+        ...options
+    }: VectorMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    const testFacet = $derived(getTestFacet());
+
+    const shapeArrow: ShapeRenderer = {
+        draw(context: D3Path, l: number, r: number) {
+            const wing = (l * r) / wingRatio;
+            context.moveTo(0, 0);
+            context.lineTo(0, -l);
+            context.moveTo(-wing, wing - l);
+            context.lineTo(0, -l);
+            context.lineTo(wing, wing - l);
+        }
+    };
+
+    const shapeSpike: ShapeRenderer = {
+        draw(context: D3Path, l: number, r: number) {
+            context.moveTo(-r, 0);
+            context.lineTo(0, -l);
+            context.lineTo(r, 0);
+        }
+    };
+
+    const shapeArrowFilled: ShapeRenderer = {
+        draw(context: D3Path, l: number, r: number) {
+            // const wing = (l * r) / wingRatio;
+            const headLength = Math.max(3, l * 0.3);
+            const headSpike = headLength * 0.2;
+            const headWidth = Math.max(2, l * 0.3);
+            const tailWidth = Math.max(2, l * 0.3) * 0.3;
+
+            context.moveTo(0, 0);
+
+            context.lineTo(tailWidth * 0.5, -l + headLength - headSpike);
+            context.lineTo(headWidth * 0.5, -l + headLength);
+            context.lineTo(0, -l);
+            context.lineTo(-headWidth * 0.5, -l + headLength);
+            context.lineTo(-tailWidth * 0.5, -l + headLength - headSpike);
+
+            context.closePath();
+        }
+    };
+
+    const shapes = new Map([
+        ['arrow', shapeArrow],
+        ['arrow-filled', shapeArrowFilled],
+        ['spike', shapeSpike]
+    ]);
+
+    function isShapeObject(value: any): value is ShapeRenderer {
+        return value && typeof value.draw === 'function';
+    }
+
+    function maybeShape(shape: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer) {
+        if (isShapeObject(shape)) return shape;
+        const value = shapes.get(`${shape}`.toLowerCase());
+        if (value) return value;
+        throw new Error(`invalid shape: ${shape}`);
+    }
+
+    function shapePath(
+        shape: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer,
+        l: number,
+        r: number
+    ) {
+        const context = path();
+        maybeShape(shape).draw(context, l, r);
+        return context.toString();
+    }
+
+    const args = $derived(
+        sort({
+            data: maybeData(data),
+            // sort by descending radius by default
+            ...options
+        })
+    );
+</script>
+
+<Mark
+    type="vector"
+    required={['x', 'y']}
+    channels={[
+        'x',
+        'y',
+        'r',
+        'length',
+        'symbol',
+        'fill',
+        'opacity',
+        'stroke',
+        'fillOpacity',
+        'strokeOpacity'
+    ]}
+    {...args}>
+    {#snippet children({ mark, scaledData, usedScales })}
+        <g class="vector" data-l={usedScales.length}>
+            {#if canvas}
+                <text x="30" y="30" style="color:red"
+                    >implement canvas rendering for vector mark</text>
+            {:else}
+                {#each scaledData as d}
+                    {@const r = resolveChannel('r', d.datum, { r: 3, ...args })}
+                    {#if d.valid && isValid(r)}
+                        {@const dx = +resolveProp(args.dx, d.datum, 0)}
+                        {@const dy = +resolveProp(args.dx, d.datum, 0)}
+                        {@const [style, styleClass] = resolveStyles(
+                            plot,
+                            d,
+                            {
+                                strokeWidth: 1.5,
+                                strokeLinejoin: 'round',
+                                strokeLinecap: 'round',
+                                ...args
+                            },
+                            shape === 'arrow-filled' ? 'fill' : 'stroke',
+                            usedScales
+                        )}
+                        <path
+                            d={shapePath(shape, d.length, r)}
+                            transform="translate({d.x + dx}, {d.y + dy}) rotate({resolveProp(
+                                args.rotate,
+                                d.datum,
+                                0
+                            )}) {anchor === 'start'
+                                ? ''
+                                : anchor === 'end'
+                                  ? `translate(0, ${d.length})`
+                                  : `translate(0, ${d.length / 2})`}"
+                            {style}
+                            use:addEventHandlers={{
+                                getPlotState,
+                                options: args,
+                                datum: d.datum
+                            }}
+                            class={[styleClass]} />
+                    {/if}
+                {/each}
+            {/if}
+        </g>
+    {/snippet}
+</Mark>
+
+<style>
+    path {
+        stroke-width: 1.5px;
+    }
+</style>

package/dist/marks/Vector.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+type D3Path = ReturnType<typeof import('d3-path').path>;
+export type ShapeRenderer = {
+    draw(context: D3Path, l: number, r: number): void;
+};
+export type VectorMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    x: ChannelAccessor;
+    y: ChannelAccessor;
+    r?: number;
+    length?: ChannelAccessor;
+    rotate?: ChannelAccessor;
+    fill?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    /**
+     * Controls where the vector is anchored in relation to the x, y position.
+     * If set to 'start', the arrow will start at the x, y position. If set to
+     * 'middle', the arrow will be centered at the x, y position. If set to
+     * 'end', the arrow will end at the x, y position.
+     */
+    anchor: 'start' | 'middle' | 'end';
+    shape?: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer;
+    children?: Snippet;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
+    canvas?: boolean;
+};
+import { type Snippet } from 'svelte';
+declare const Vector: import("svelte").Component<VectorMarkProps, {}, "">;
+type Vector = ReturnType<typeof Vector>;
+export default Vector;

package/dist/marks/helpers/BaseAxisX.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+    // this component only takes care of rendering the x axis so we can re-use it
+    // for the facet labels
+    import { getContext, untrack } from 'svelte';
+    import removeIdenticalLines from '../../helpers/removeIdenticalLines.js';
+    import type {
+        AutoMarginStores,
+        ChannelAccessor,
+        ConstantAccessor,
+        PlotState,
+        RawValue,
+        ScaleType
+    } from '../../types.js';
+    import { resolveScaledStyles, resolveProp } from '../../helpers/resolve.js';
+    import { max } from 'd3-array';
+    import { randomId, testFilter } from '../../helpers/index.js';
+
+    type BaseAxisXProps = {
+        scaleFn: (d: RawValue) => number;
+        scaleType: ScaleType;
+        ticks: RawValue[];
+        tickFormat: (d: RawValue, i: number) => string | string[];
+        anchor: 'top' | 'bottom';
+        tickSize: number;
+        tickPadding: number;
+        tickFontSize: ConstantAccessor<number>;
+        tickClass: ConstantAccessor<string>;
+        marginTop: number;
+        height: number;
+        title: string;
+        options: {
+            dx: ConstantAccessor<number>;
+            dy: ConstantAccessor<number>;
+            filter: ChannelAccessor;
+        };
+        plot: PlotState;
+    };
+
+    let {
+        scaleFn,
+        scaleType,
+        ticks,
+        tickFormat,
+        anchor,
+        tickSize,
+        tickPadding,
+        tickFontSize,
+        tickClass,
+        marginTop,
+        height,
+        options,
+        plot,
+        title
+    }: BaseAxisXProps = $props();
+
+    function splitTick(tick: string | string[]) {
+        return Array.isArray(tick) ? tick : [tick];
+    }
+
+    let tickRotate = $derived(plot.options.x.tickRotate || 0);
+
+    let tickY = $derived(anchor === 'bottom' ? marginTop + height : marginTop);
+
+    let isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
+
+    // generate id used for registering margins
+    const id = randomId();
+
+    const { autoMarginTop, autoMarginBottom } =
+        getContext<AutoMarginStores>('svelteplot/autoMargins');
+
+    let tickTextElements = $state([] as SVGTextElement[]);
+
+    const positionedTicks = $derived.by(() => {
+        let tickObjects = removeIdenticalLines(
+            ticks.map((tick, i) => {
+                return {
+                    value: tick,
+                    hidden: false,
+                    dx: +resolveProp(options.dx, tick, 0),
+                    dy: +resolveProp(options.dy, tick, 0),
+                    x: scaleFn(tick) + (scaleType === 'band' ? scaleFn.bandwidth() * 0.5 : 0),
+                    text: splitTick(tickFormat(tick, i)),
+                    element: null as SVGTextElement | null
+                };
+            })
+        );
+        const T = tickObjects.length;
+        for (let i = 0; i < T; i++) {
+            let j = i;
+            // find the preceeding tick that was not hidden
+            do {
+                j--;
+            } while (j >= 0 && tickObjects[j].hidden);
+            if (j >= 0) {
+                const tickLabelSpace = Math.abs(tickObjects[i].x - tickObjects[j].x);
+                tickObjects[i].hidden = tickLabelSpace < 15;
+            }
+        }
+        return tickObjects;
+    });
+
+    $effect(() => {
+        untrack(() => [$autoMarginTop, $autoMarginBottom]);
+        const outsideTextAnchor = anchor === 'top' ? 'end' : 'start';
+        // measure tick label heights
+        const maxLabelHeight =
+            Math.ceil(
+                max(
+                    positionedTicks.map((tick, i) => {
+                        if (
+                            resolveProp(options.anchor, tick.value, outsideTextAnchor) !==
+                            outsideTextAnchor
+                        )
+                            return 0;
+                        if (tick.hidden || !testFilter(tick.value, options)) return 0;
+                        if (tickTextElements[i])
+                            return tickTextElements[i].getBoundingClientRect().height;
+                        return 0;
+                    }) as number[]
+                )
+            ) +
+            Math.max(0, tickPadding + tickSize) +
+            (title ? 15 : 0);
+
+        if (!isNaN(maxLabelHeight)) {
+            if (anchor === 'top' && $autoMarginTop.get(id) !== maxLabelHeight) {
+                $autoMarginTop.set(id, maxLabelHeight);
+            } else if (anchor === 'bottom' && $autoMarginBottom.get(id) !== maxLabelHeight) {
+                $autoMarginBottom.set(id, maxLabelHeight);
+            }
+        }
+    });
+
+    $effect(() => {
+        // clear margins on destroy
+        return () => {
+            if ($autoMarginBottom.has(id)) $autoMarginBottom.delete(id);
+            if ($autoMarginTop.has(id)) $autoMarginTop.delete(id);
+        };
+    });
+</script>
+
+<g class="axis-x">
+    {#each positionedTicks as tick, t}
+        {#if testFilter(tick.value, options) && !tick.hidden}
+            {@const textLines = tick.text}
+            {@const prevTextLines = t && positionedTicks[t - 1].text}
+            {@const fontSize = resolveProp(tickFontSize, tick)}
+            {@const tickClass_ = resolveProp(tickClass, tick.value)}
+            {@const estLabelWidth = max(textLines.map((t) => t.length)) * fontSize * 0.2}
+            {@const moveDown =
+                (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
+                (anchor === 'bottom' ? 1 : -1)}
+            <g
+                class="tick {tickClass_ || ''}"
+                transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
+                text-anchor={tickRotate < 0 ? 'end' : tickRotate > 0 ? 'start' : 'middle'}>
+                {#if tickSize}
+                    <line
+                        style={resolveScaledStyles(tick, options, {}, plot, 'stroke')}
+                        y2={anchor === 'bottom' ? tickSize : -tickSize} />
+                {/if}
+
+                <text
+                    bind:this={tickTextElements[t]}
+                    transform="translate(0, {moveDown})  rotate({tickRotate})"
+                    style:font-variant={isQuantitative ? 'tabular-nums' : 'normal'}
+                    style={resolveScaledStyles(
+                        tick,
+                        { ...options, fontSize: tickFontSize, stroke: null },
+                        {},
+                        plot,
+                        'fill'
+                    )}
+                    x={0}
+                    y={0}
+                    dominant-baseline={tickRotate !== 0
+                        ? 'central'
+                        : anchor === 'bottom'
+                          ? 'hanging'
+                          : 'auto'}>
+                    {#if ticks.length > 0 || t === 0 || t === ticks.length - 1}
+                        {#if textLines.length === 1}
+                            {textLines[0]}
+                        {:else}
+                            {#each textLines as line, i}
+                                <tspan x="0" dy={i ? 12 : 0}
+                                    >{!prevTextLines || prevTextLines[i] !== line
+                                        ? line
+                                        : ''}</tspan>
+                            {/each}
+                        {/if}
+                    {/if}
+                </text>
+            </g>
+        {/if}
+    {/each}
+</g>
+
+<style>
+    line {
+        stroke: currentColor;
+    }
+    text {
+        font-size: 11px;
+        opacity: 0.8;
+        fill: currentColor;
+    }
+</style>

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

@@ -0,0 +1,24 @@
+import type { ChannelAccessor, ConstantAccessor, PlotState, RawValue, ScaleType } from '../../types.js';
+type BaseAxisXProps = {
+    scaleFn: (d: RawValue) => number;
+    scaleType: ScaleType;
+    ticks: RawValue[];
+    tickFormat: (d: RawValue, i: number) => string | string[];
+    anchor: 'top' | 'bottom';
+    tickSize: number;
+    tickPadding: number;
+    tickFontSize: ConstantAccessor<number>;
+    tickClass: ConstantAccessor<string>;
+    marginTop: number;
+    height: number;
+    title: string;
+    options: {
+        dx: ConstantAccessor<number>;
+        dy: ConstantAccessor<number>;
+        filter: ChannelAccessor;
+    };
+    plot: PlotState;
+};
+declare const BaseAxisX: import("svelte").Component<BaseAxisXProps, {}, "">;
+type BaseAxisX = ReturnType<typeof BaseAxisX>;
+export default BaseAxisX;

package/dist/marks/helpers/BaseAxisY.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+    import { getContext, untrack } from 'svelte';
+    import { randomId, testFilter } from '../../helpers/index.js';
+    import { resolveProp, resolveScaledStyles } from '../../helpers/resolve.js';
+    import { max } from 'd3-array';
+    import type {
+        AutoMarginStores,
+        ConstantAccessor,
+        PlotState,
+        RawValue,
+        ScaleType
+    } from '../../types.js';
+
+    type BaseAxisYProps = {
+        scaleFn: (d: RawValue) => number;
+        scaleType: ScaleType;
+        ticks: RawValue[];
+        tickFormat: (d: RawValue) => string | string[];
+        anchor: 'left' | 'right';
+        lineAnchor: 'top' | 'center' | 'bottom';
+        tickSize: number;
+        tickPadding: number;
+        tickFontSize: ConstantAccessor<number>;
+        marginLeft: number;
+        width: number;
+        title: string | null;
+        options: {
+            dx: ConstantAccessor<number>;
+            dy: ConstantAccessor<number>;
+        };
+        plot: PlotState;
+    };
+
+    let {
+        scaleFn,
+        scaleType,
+        ticks,
+        tickFormat,
+        anchor,
+        lineAnchor,
+        tickSize,
+        tickPadding,
+        tickFontSize,
+        tickClass,
+        marginLeft,
+        width,
+        title,
+        plot,
+        options
+    }: BaseAxisYProps = $props();
+
+    const LINE_ANCHOR = {
+        top: 'hanging',
+        center: 'middle',
+        bottom: 'auto'
+    };
+
+    const positionedTicks = $derived.by(() => {
+        let tickObjects = ticks.map((tick, i) => {
+            return {
+                value: tick,
+                hidden: false,
+                dx: +resolveProp(options.dx, tick, 0),
+                dy: +resolveProp(options.dy, tick, 0),
+                y: scaleFn(tick) + (scaleType === 'band' ? scaleFn.bandwidth() * 0.5 : 0),
+                text: tickFormat(tick),
+                element: null as SVGTextElement | null
+            };
+        });
+        const T = tickObjects.length;
+        for (let i = 0; i < T; i++) {
+            let j = i;
+            // find the preceeding tick that was not hidden
+            do {
+                j--;
+            } while (j >= 0 && tickObjects[j].hidden);
+            if (j >= 0) {
+                const tickLabelSpace = Math.abs(tickObjects[i].y - tickObjects[j].y);
+                tickObjects[i].hidden = tickLabelSpace < 15;
+            }
+        }
+        return tickObjects;
+    });
+
+    let tickTexts = $state([] as SVGTextElement[]);
+
+    // generate id used for registering margins
+    const id = randomId();
+
+    const { autoMarginLeft, autoMarginRight, autoMarginTop } =
+        getContext<AutoMarginStores>('svelteplot/autoMargins');
+
+    $effect(() => {
+        untrack(() => [$autoMarginLeft, $autoMarginRight]);
+        const outsideTextAnchor = anchor === 'left' ? 'end' : 'start';
+        // measure tick label widths
+        const maxLabelWidth =
+            Math.ceil(
+                max(
+                    positionedTicks.map((tick, i) => {
+                        if (
+                            resolveProp(options.textAnchor, tick.value, outsideTextAnchor) !==
+                            outsideTextAnchor
+                        )
+                            return 0;
+                        if (tick.hidden || !testFilter(tick.value, options)) return 0;
+                        if (tickTexts[i]) return tickTexts[i].getBoundingClientRect().width;
+                        return 0;
+                    }) as number[]
+                )
+            ) + Math.max(0, tickPadding + tickSize);
+
+        if (!isNaN(maxLabelWidth)) {
+            if (anchor === 'left' && $autoMarginLeft.get(id) !== maxLabelWidth) {
+                $autoMarginLeft.set(id, maxLabelWidth);
+            } else if (anchor === 'right' && $autoMarginRight.get(id) !== maxLabelWidth) {
+                $autoMarginRight.set(id, maxLabelWidth);
+            }
+        }
+    });
+
+    $effect(() => {
+        untrack(() => [$autoMarginTop]);
+        if (title) {
+            // add margin top to make some space for title
+            $autoMarginTop.set(id, 20);
+        } else {
+            // no need for extra margin top
+            $autoMarginTop.delete(id);
+        }
+    });
+
+    $effect(() => {
+        // clear margins on destroy
+        return () => {
+            if ($autoMarginLeft.has(id)) $autoMarginLeft.delete(id);
+            if ($autoMarginRight.has(id)) $autoMarginRight.delete(id);
+            if ($autoMarginTop.has(id)) $autoMarginTop.delete(id);
+        };
+    });
+</script>
+
+<g class="axis-y">
+    {#each positionedTicks as tick, t}
+        {#if testFilter(tick.value, options) && !tick.hidden}
+            {@const tickClass_ = resolveProp(tickClass, tick.value)}
+            <g
+                class="tick {tickClass_ || ''}"
+                transform="translate({tick.dx +
+                    marginLeft +
+                    (anchor === 'left' ? 0 : width)},{tick.y + tick.dy})">
+                {#if tickSize}
+                    <line
+                        style={resolveScaledStyles(tick.value, options, {}, plot, 'stroke')}
+                        x2={anchor === 'left' ? -tickSize : tickSize} />
+                {/if}
+                <text
+                    bind:this={tickTexts[t]}
+                    class={{ 'is-left': anchor === 'left' }}
+                    style={resolveScaledStyles(
+                        tick.value,
+                        { ...options, fontSize: tickFontSize, stroke: null },
+                        {},
+                        plot,
+                        'fill'
+                    )}
+                    x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
+                    dominant-baseline={LINE_ANCHOR[lineAnchor]}
+                    >{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>
+            </g>
+        {/if}
+    {/each}
+</g>
+
+<style>
+    line {
+        stroke: currentColor;
+    }
+    text {
+        font-size: 11px;
+        opacity: 0.8;
+        fill: currentColor;
+    }
+    text.is-left {
+        text-anchor: end;
+    }
+</style>

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

@@ -0,0 +1,23 @@
+import type { ConstantAccessor, PlotState, RawValue, ScaleType } from '../../types.js';
+type BaseAxisYProps = {
+    scaleFn: (d: RawValue) => number;
+    scaleType: ScaleType;
+    ticks: RawValue[];
+    tickFormat: (d: RawValue) => string | string[];
+    anchor: 'left' | 'right';
+    lineAnchor: 'top' | 'center' | 'bottom';
+    tickSize: number;
+    tickPadding: number;
+    tickFontSize: ConstantAccessor<number>;
+    marginLeft: number;
+    width: number;
+    title: string | null;
+    options: {
+        dx: ConstantAccessor<number>;
+        dy: ConstantAccessor<number>;
+    };
+    plot: PlotState;
+};
+declare const BaseAxisY: import("svelte").Component<BaseAxisYProps, {}, "">;
+type BaseAxisY = ReturnType<typeof BaseAxisY>;
+export default BaseAxisY;