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

package/dist/marks/Text.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor
+    } from '../types.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import Mark from '../Mark.svelte';
+    import { sort } from '../index.js';
+
+    type TextMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        fill?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        children?: Snippet;
+        dx?: ConstantAccessor<number>;
+        dy?: ConstantAccessor<number>;
+        text: ConstantAccessor<string>;
+        title: ConstantAccessor<string>;
+        /**
+         * if you want to apply class names to individual text elements
+         */
+        textClass: ConstantAccessor<string>;
+        /**
+         * the line anchor for vertical position; top, bottom, or middle
+         */
+        lineAnchor?: ConstantAccessor<'bottom' | 'top' | 'middle'>;
+        frameAnchor?: ConstantAccessor<
+            | 'bottom'
+            | 'top'
+            | 'left'
+            | 'right'
+            | 'top-left'
+            | 'bottom-left'
+            | 'top-right'
+            | 'bottom-right'
+        >;
+    };
+
+    let { data = [{}], class: className = null, ...options }: TextMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    const LINE_ANCHOR = {
+        bottom: 'auto',
+        middle: 'central',
+        top: 'hanging'
+    };
+
+    const args = $derived(
+        sort({
+            data,
+            ...options
+        })
+    );
+</script>
+
+<Mark
+    type="text"
+    channels={[
+        'x',
+        'y',
+        'r',
+        'symbol',
+        'fill',
+        'stroke',
+        'opacity',
+        'strokeOpacity',
+        'fillOpacity'
+    ]}
+    {...args}>
+    {#snippet children({ mark, scaledData, usedScales })}
+        <GroupMultiple class="text {className || null}" length={className ? 2 : args.data.length}>
+            {#each scaledData as d}
+                {#if d.valid}
+                    {@const title = resolveProp(args.title, d.datum, '')}
+                    {@const frameAnchor = resolveProp(args.frameAnchor, d.datum)}
+                    {@const isLeft =
+                        frameAnchor === 'left' ||
+                        frameAnchor === 'top-left' ||
+                        frameAnchor === 'bottom-left'}
+                    {@const isRight =
+                        frameAnchor === 'right' ||
+                        frameAnchor === 'top-right' ||
+                        frameAnchor === 'bottom-right'}
+                    {@const isTop =
+                        frameAnchor === 'top' ||
+                        frameAnchor === 'top-left' ||
+                        frameAnchor === 'top-right'}
+                    {@const isBottom =
+                        frameAnchor === 'bottom' ||
+                        frameAnchor === 'bottom-left' ||
+                        frameAnchor === 'bottom-right'}
+                    {@const [x, y] =
+                        args.x != null && args.y != null
+                            ? [d.x, d.y]
+                            : [
+                                  args.x != null
+                                      ? d.x
+                                      : isLeft
+                                        ? plot.options.marginLeft
+                                        : isRight
+                                          ? plot.options.marginLeft + plot.facetWidth
+                                          : plot.options.marginLeft + plot.facetWidth * 0.5,
+                                  args.y != null
+                                      ? d.y
+                                      : isTop
+                                        ? plot.options.marginTop
+                                        : isBottom
+                                          ? plot.options.marginTop + plot.facetHeight
+                                          : plot.options.marginTop + plot.facetHeight * 0.5
+                              ]}
+
+                    {@const dx = +resolveProp(args.dx, d.datum, 0)}
+                    {@const dy = +resolveProp(args.dy, d.datum, 0)}
+                    {@const textLines = String(resolveProp(args.text, d.datum, '')).split('\n')}
+                    {@const lineAnchor = resolveProp(
+                        args.lineAnchor,
+                        d.datum,
+                        args.y != null ? 'middle' : isTop ? 'top' : isBottom ? 'bottom' : 'middle'
+                    )}
+                    {@const textClassName = resolveProp(args.textClass, d.datum, null)}
+
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        { ...d, __tspanIndex: 0 },
+                        {
+                            fontSize: 12,
+                            fontWeight: 500,
+                            strokeWidth: 1.6,
+                            textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle',
+                            ...args
+                        },
+                        'fill',
+                        usedScales
+                    )}
+
+                    {#if textLines.length > 1}
+                        <!-- multiline text-->
+                        {@const fontSize = resolveProp(args.fontSize, d.datum) || 12}
+                        <text
+                            class={[textClassName]}
+                            dominant-baseline={LINE_ANCHOR[lineAnchor]}
+                            transform="translate({[
+                                Math.round(x + dx),
+                                Math.round(
+                                    y +
+                                        dy -
+                                        (lineAnchor === 'bottom'
+                                            ? textLines.length - 1
+                                            : lineAnchor === 'middle'
+                                              ? (textLines.length - 1) * 0.5
+                                              : 0) *
+                                            fontSize
+                                )
+                            ]})"
+                            >{#each textLines as line, l}<tspan
+                                    x="0"
+                                    dy={l ? fontSize : 0}
+                                    class={styleClass}
+                                    {style}>{line}</tspan
+                                >{/each}{#if title}<title>{title}</title>{/if}</text>
+                    {:else}
+                        <!-- singleline text-->
+                        <text
+                            class={[textClassName, styleClass]}
+                            dominant-baseline={LINE_ANCHOR[lineAnchor]}
+                            transform="translate({[Math.round(x + dx), Math.round(y + dy)]})"
+                            {style}
+                            >{textLines[0]}{#if title}<title>{title}</title>{/if}</text>
+                    {/if}
+                {/if}
+            {/each}
+        </GroupMultiple>
+    {/snippet}
+</Mark>
+
+<style>
+    text {
+        paint-order: stroke fill;
+    }
+</style>

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

@@ -0,0 +1,26 @@
+import { type Snippet } from 'svelte';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+type TextMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    x: ChannelAccessor;
+    y: ChannelAccessor;
+    fill?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    children?: Snippet;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
+    text: ConstantAccessor<string>;
+    title: ConstantAccessor<string>;
+    /**
+     * if you want to apply class names to individual text elements
+     */
+    textClass: ConstantAccessor<string>;
+    /**
+     * the line anchor for vertical position; top, bottom, or middle
+     */
+    lineAnchor?: ConstantAccessor<'bottom' | 'top' | 'middle'>;
+    frameAnchor?: ConstantAccessor<'bottom' | 'top' | 'left' | 'right' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right'>;
+};
+declare const Text: import("svelte").Component<TextMarkProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/marks/TickX.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
+    import type {
+        PlotContext,
+        BaseMarkProps,
+        ChannelAccessor,
+        DataRow,
+        FacetContext
+    } from '../types.js';
+    import { recordizeX } from '../index.js';
+    import { projectX, projectY } from '../helpers/scales.js';
+    import { isValid } from '../helpers/isValid.js';
+    import { testFilter, parseInset } from '../helpers/index.js';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    type TickXMarkProps = BaseMarkProps & {
+        data: DataRow[];
+        /**
+         * the horizontal position; bound to the x scale
+         */
+        x?: ChannelAccessor;
+        /**
+         * the vertical position; bound to the y scale, which must be band. If the y channel
+         * is not specified, the tick will span the full vertical extent of the frame.
+         */
+        y?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        /**
+         * if ticks are used on a non-bandwidth scale, this will determine the
+         * length of the tick. Defaults to 10 pixel
+         */
+        tickLength?: ConstantAccessor<number>;
+    };
+
+    let { data = [{}], ...options }: TickXMarkProps = $props();
+
+    let args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    let testFacet = $derived(getTestFacet());
+</script>
+
+<Mark type="tickX" channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+    {#snippet children({ mark, usedScales })}
+        <g class="tick-x">
+            {#each args.data as datum}
+                {#if testFacet(datum, mark.options) && testFilter(datum, args)}
+                    {@const x_ = resolveChannel('x', datum, args)}
+                    {@const y_ = resolveChannel('y', datum, args)}
+                    {@const inset_ = resolveProp(args.inset, datum, 0)}
+                    {@const tickLength_ = resolveProp(args.tickLength, datum, 10)}
+                    {@const dx_ = resolveProp(args.dx, datum, 0)}
+                    {@const dy_ = resolveProp(args.dy, datum, 0)}
+                    {#if isValid(x_) && (isValid(y_) || args.y == null) && (args.filter == null || resolveProp(args.filter, datum))}
+                        {@const x = usedScales.x ? projectX('x', plot.scales, x_) : x_}
+                        {@const y1 =
+                            args.y != null
+                                ? usedScales.y
+                                    ? projectY('y1', plot.scales, y_)
+                                    : y_
+                                : plot.options.marginTop}
+                        {@const y2 =
+                            args.y != null
+                                ? usedScales.y
+                                    ? Number(projectY('y2', plot.scales, y_))
+                                    : y_
+                                : plot.options.marginTop + plot.plotHeight}
+                        {@const inset = parseInset(inset_, Math.abs(y2 - y1))}
+                        <line
+                            transform="translate({x + dx_}, {dy_})"
+                            style={resolveScaledStyles(datum, args, usedScales, plot, 'stroke')}
+                            y1={y1 + inset + (y1 === y2 ? tickLength_ * 0.5 : 0)}
+                            y2={y2 - inset - (y1 === y2 ? tickLength_ * 0.5 : 0)} />
+                    {/if}
+                {/if}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>
+
+<style>
+    .tick-x line {
+        stroke: currentColor;
+    }
+</style>

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

@@ -0,0 +1,22 @@
+import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
+type TickXMarkProps = BaseMarkProps & {
+    data: DataRow[];
+    /**
+     * the horizontal position; bound to the x scale
+     */
+    x?: ChannelAccessor;
+    /**
+     * the vertical position; bound to the y scale, which must be band. If the y channel
+     * is not specified, the tick will span the full vertical extent of the frame.
+     */
+    y?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    /**
+     * if ticks are used on a non-bandwidth scale, this will determine the
+     * length of the tick. Defaults to 10 pixel
+     */
+    tickLength?: ConstantAccessor<number>;
+};
+declare const TickX: import("svelte").Component<TickXMarkProps, {}, "">;
+type TickX = ReturnType<typeof TickX>;
+export default TickX;

package/dist/marks/TickY.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
+    import type {
+        PlotContext,
+        BaseMarkProps,
+        ChannelAccessor,
+        DataRow,
+        FacetContext,
+        ConstantAccessor
+    } from '../types.js';
+    import { recordizeY } from '../index.js';
+    import { projectX, projectY } from '../helpers/scales.js';
+    import { isValid } from '../helpers/isValid.js';
+    import { testFilter, parseInset } from '../helpers/index.js';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    type TickYMarkProps = BaseMarkProps & {
+        data: DataRow[];
+        /**
+         * the vertical position; bound to the x scale
+         */
+        y?: ChannelAccessor;
+        /**
+         * the horizontal position; bound to the x scale, which must be band. If the x channel
+         * is not specified, the tick will span the full horizontal extent of the frame.
+         */
+        x?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        /**
+         * if ticks are used on a non-bandwidth scale, this will determine the
+         * length of the tick. Defaults to 10 pixel
+         */
+        tickLength?: ConstantAccessor<number>;
+    };
+
+    let { data = [{}], ...options }: TickYMarkProps = $props();
+
+    let args = $derived(recordizeY({ data, ...options }, { withIndex: false }));
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    let testFacet = $derived(getTestFacet());
+</script>
+
+<Mark type="tickY" channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+    {#snippet children({ mark, usedScales })}
+        <g class="tick-y">
+            {#each args.data as datum}
+                {#if testFacet(datum, mark.options) && testFilter(datum, args)}
+                    {@const y_ = resolveChannel('y', datum, args)}
+                    {@const x_ = resolveChannel('x', datum, args)}
+                    {@const inset_ = resolveProp(args.inset, datum, 0)}
+                    {@const tickLength_ = resolveProp(args.tickLength, datum, 10)}
+                    {@const dx_ = resolveProp(args.dx, datum, 0)}
+                    {@const dy_ = resolveProp(args.dy, datum, 0)}
+                    {#if isValid(y_) && (isValid(x_) || args.x == null)}
+                        {@const y = usedScales.y ? projectY('y', plot.scales, y_) : y_}
+                        {@const x1 =
+                            args.x != null
+                                ? usedScales.x
+                                    ? projectX('x1', plot.scales, x_)
+                                    : x_
+                                : plot.options.marginLeft}
+                        {@const x2 =
+                            args.x != null
+                                ? usedScales.x
+                                    ? projectX('x2', plot.scales, x_)
+                                    : x_
+                                : plot.options.marginLeft + plot.facetWidth}
+                        {@const inset = parseInset(inset_, Math.abs(x2 - x1))}
+                        <line
+                            transform="translate({dx_}, {y + dy_})"
+                            style={resolveScaledStyles(datum, args, usedScales, plot, 'stroke')}
+                            x1={x1 + inset + (x1 === x2 ? tickLength_ * 0.5 : 0)}
+                            x2={x2 - inset - (x1 === x2 ? tickLength_ * 0.5 : 0)} />
+                    {/if}
+                {/if}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>
+
+<style>
+    .tick-y line {
+        stroke: currentColor;
+    }
+</style>

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

@@ -0,0 +1,22 @@
+import type { BaseMarkProps, ChannelAccessor, DataRow, ConstantAccessor } from '../types.js';
+type TickYMarkProps = BaseMarkProps & {
+    data: DataRow[];
+    /**
+     * the vertical position; bound to the x scale
+     */
+    y?: ChannelAccessor;
+    /**
+     * the horizontal position; bound to the x scale, which must be band. If the x channel
+     * is not specified, the tick will span the full horizontal extent of the frame.
+     */
+    x?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    /**
+     * if ticks are used on a non-bandwidth scale, this will determine the
+     * length of the tick. Defaults to 10 pixel
+     */
+    tickLength?: ConstantAccessor<number>;
+};
+declare const TickY: import("svelte").Component<TickYMarkProps, {}, "">;
+type TickY = ReturnType<typeof TickY>;
+export default TickY;

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>