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

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;

package/dist/marks/helpers/CanvasLayer.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    let {
+        canvas = $bindable(),
+        devicePixelRatio = $bindable(1),
+        plot
+    }: {
+        canvas: HTMLCanvasElement;
+        devicePixelRatio: number;
+        plot: PlotState;
+    } = $props();
+
+    $effect(() => {
+        devicePixelRatio = window.devicePixelRatio || 1;
+        const ctx = canvas.getContext('2d');
+    });
+</script>
+
+<!-- 
+    @component The CanvasLayer component is a helper component that inserts a 
+    canvas element inside a foreignObject for use in a plot and takes care of 
+    scaling it to the device pixel ratio.
+-->
+
+<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
+    <canvas
+        xmlns="http://www.w3.org/1999/xhtml"
+        bind:this={canvas}
+        width={plot.width * devicePixelRatio}
+        height={plot.height * devicePixelRatio}
+        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
+</foreignObject>
+
+<style>
+    foreignObject,
+    canvas {
+        color: currentColor;
+    }
+</style>

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    canvas: HTMLCanvasElement;
+    devicePixelRatio: number;
+    plot: PlotState;
+};
+/**
+ * The CanvasLayer component is a helper component that inserts a
+ * canvas element inside a foreignObject for use in a plot and takes care of
+ * scaling it to the device pixel ratio.
+ */
+declare const CanvasLayer: import("svelte").Component<$$ComponentProps, {}, "canvas" | "devicePixelRatio">;
+type CanvasLayer = ReturnType<typeof CanvasLayer>;
+export default CanvasLayer;