svelteplot 0.2.9 → 0.2.10-pr-110.1

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

@@ -1,61 +1,6 @@
-import { type BaseMarkProps } from '../types.js';
-export type SphereMarkProps = BaseMarkProps;
+import { type BaseMarkProps, type LinkableMarkProps } from '../types.js';
+export type SphereMarkProps = BaseMarkProps & LinkableMarkProps;
 /** Geo mark with Sphere geometry object */
-declare const Sphere: import("svelte").Component<Partial<{
-    filter?: import("../types.js").ConstantAccessor<boolean>;
-    facet?: "auto" | "include" | "exclude";
-    fx: import("../types.js").ChannelAccessor;
-    fy: import("../types.js").ChannelAccessor;
-    dx: import("../types.js").ConstantAccessor<number>;
-    dy: import("../types.js").ConstantAccessor<number>;
-    fill: import("../types.js").ConstantAccessor<string>;
-    fillOpacity: import("../types.js").ConstantAccessor<number>;
-    stroke: import("../types.js").ConstantAccessor<string>;
-    strokeWidth: import("../types.js").ConstantAccessor<number>;
-    strokeOpacity: import("../types.js").ConstantAccessor<number>;
-    strokeLinejoin: import("../types.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin>;
-    strokeLinecap: import("../types.js").ConstantAccessor<import("csstype").Property.StrokeLinecap>;
-    strokeMiterlimit: import("../types.js").ConstantAccessor<number>;
-    opacity: import("../types.js").ConstantAccessor<number>;
-    strokeDasharray: import("../types.js").ConstantAccessor<string>;
-    strokeDashoffset: import("../types.js").ConstantAccessor<number>;
-    mixBlendMode: import("../types.js").ConstantAccessor<import("csstype").Property.MixBlendMode>;
-    clipPath: string;
-    imageFilter: import("../types.js").ConstantAccessor<string>;
-    shapeRendering: import("../types.js").ConstantAccessor<import("csstype").Property.ShapeRendering>;
-    paintOrder: import("../types.js").ConstantAccessor<string>;
-    onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    class: string | null;
-    cursor: import("../types.js").ConstantAccessor<import("csstype").Property.Cursor>;
-}>, {}, "">;
+declare const Sphere: import("svelte").Component<any, {}, "">;
 type Sphere = ReturnType<typeof Sphere>;
 export default Sphere;

package/dist/marks/Text.svelte

@@ -39,13 +39,30 @@
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
-        ChannelAccessor
+        ChannelAccessor,
+        PlotDefaults
     } from '../types.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import Mark from '../Mark.svelte';
     import { sort } from '../index.js';
 
-    let { data = [{}], class: className = null, ...options }: TextMarkProps = $props();
+    const DEFAULTS = {
+        fontSize: 12,
+        fontWeight: 500,
+        strokeWidth: 1.6,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').text
+    };
+
+    let markProps: TextMarkProps = $props();
+
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: TextMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
@@ -54,7 +71,7 @@
         bottom: 'auto',
         middle: 'central',
         top: 'hanging'
-    };
+    } as const;
 
     const args = $derived(
         sort({
@@ -77,9 +94,10 @@
         'strokeOpacity',
         'fillOpacity'
     ]}
+    required={['x', 'y']}
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
-        <GroupMultiple class="text {className || null}" length={className ? 2 : args.data.length}>
+        <GroupMultiple class="text {className}" length={className ? 2 : args.data.length}>
             {#each scaledData as d, i (i)}
                 {#if d.valid}
                     {@const title = resolveProp(args.title, d.datum, '')}

package/dist/marks/TickX.svelte

@@ -31,7 +31,8 @@
         BaseMarkProps,
         ChannelAccessor,
         DataRow,
-        FacetContext
+        FacetContext,
+        PlotDefaults
     } from '../types.js';
     import { recordizeX } from '../index.js';
     import { projectX, projectY } from '../helpers/scales.js';
@@ -41,7 +42,19 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    let { data = [{}], ...options }: TickXMarkProps = $props();
+    let markProps: TickXMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').tick,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').tickX
+    };
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: TickXMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     let args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
 

package/dist/marks/TickY.svelte

@@ -32,7 +32,8 @@
         ChannelAccessor,
         DataRow,
         FacetContext,
-        ConstantAccessor
+        ConstantAccessor,
+        PlotDefaults
     } from '../types.js';
     import { recordizeY } from '../index.js';
     import { projectX, projectY } from '../helpers/scales.js';
@@ -42,7 +43,19 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    let { data = [{}], ...options }: TickYMarkProps = $props();
+    let markProps: TickYMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').tick,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').tickY
+    };
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: TickYMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     let args = $derived(recordizeY({ data, ...options }, { withIndex: false }));
 

package/dist/marks/Vector.svelte

@@ -9,7 +9,8 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext
+        FacetContext,
+        PlotDefaults
     } from '../types.js';
 
     type D3Path = ReturnType<typeof import('d3-path').path>;
@@ -53,19 +54,26 @@
     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;
+    // 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.
+    // That said, we'll probably want a arrow with a fixed head size, too.
     const wingRatio = defaultRadius * 5;
 
-    let {
+    let markProps: VectorMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').vector
+    };
+    const {
         data = [{}],
         canvas,
         shape = 'arrow',
         anchor = 'middle',
         r = defaultRadius,
         ...options
-    }: VectorMarkProps = $props();
+    }: VectorMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/helpers/Anchor.svelte

@@ -0,0 +1,37 @@
+<script>
+    import { resolveProp } from '../../helpers/resolve';
+
+    let { datum = {}, options = {}, children } = $props();
+
+    const href = $derived(resolveProp(options.href, datum, null));
+    const target = $derived(resolveProp(options.target, datum, null));
+    const rel = $derived(resolveProp(options.rel, datum, null));
+    const type = $derived(resolveProp(options.type, datum, null));
+    const download = $derived(resolveProp(options.download, datum, null));
+
+    // filter data attributes from options
+    const dataAttributes = $derived(
+        Object.fromEntries(
+            Object.entries(options).filter(([key]) => key.startsWith('data-sveltekit-'))
+        )
+    );
+</script>
+
+{#if href}
+    <!-- we can't use <a> directly here because Svelte confuses it with the 
+ HTMLAElement which breaks the rendering -->
+    <svelte:element
+        this={'a'}
+        {href}
+        {target}
+        {rel}
+        {type}
+        {download}
+        {...dataAttributes}
+        aria-label="link"
+        xmlns="http://www.w3.org/2000/svg">
+        {@render children?.()}
+    </svelte:element>
+{:else}
+    {@render children?.()}
+{/if}

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

@@ -0,0 +1,15 @@
+export default Anchor;
+type Anchor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Anchor: import("svelte").Component<{
+    datum?: Record<string, any>;
+    options?: Record<string, any>;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    datum?: Record<string, any>;
+    options?: Record<string, any>;
+    children: any;
+};

package/dist/marks/helpers/BaseAxisX.svelte

@@ -33,6 +33,7 @@
             dy: ConstantAccessor<number>;
             filter: ChannelAccessor;
         };
+        text: boolean;
         plot: PlotState;
     };
 
@@ -50,7 +51,8 @@
         height,
         options,
         plot,
-        title
+        title,
+        text = true
     }: BaseAxisXProps = $props();
 
     function splitTick(tick: string | string[]) {
@@ -86,15 +88,17 @@
             })
         );
         const T = tickObjects.length;
-        for (let i = 0; i < T; i++) {
-            let j = i;
-            // find the preceding 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;
+        if (text) {
+            for (let i = 0; i < T; i++) {
+                let j = i;
+                // find the preceding 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;
@@ -102,6 +106,7 @@
 
     $effect(() => {
         untrack(() => [$autoMarginTop, $autoMarginBottom]);
+        if (!text) return;
         const outsideTextAnchor = anchor === 'top' ? 'end' : 'start';
         // measure tick label heights
         const maxLabelHeight =
@@ -144,26 +149,7 @@
 <g class="axis-x">
     {#each positionedTicks as tick, t (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)}
-            {@const [textStyle, textClass] = resolveStyles(
-                plot,
-                tick,
-                {
-                    fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
-                    ...options,
-                    fontSize: tickFontSize,
-                    stroke: null
-                },
-                'fill',
-                { x: true }
-            )}
             <g
                 class="tick {tickClass_ || ''}"
                 transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
@@ -182,31 +168,51 @@
                         y2={anchor === 'bottom' ? tickSize : -tickSize} />
                 {/if}
 
-                <text
-                    bind:this={tickTextElements[t]}
-                    transform="translate(0, {moveDown})  rotate({tickRotate})"
-                    style={textStyle}
-                    class={textClass}
-                    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 (i)}
-                                <tspan x="0" dy={i ? 12 : 0}
-                                    >{!prevTextLines || prevTextLines[i] !== line
-                                        ? line
-                                        : ''}</tspan>
-                            {/each}
+                {#if text}
+                    {@const textLines = tick.text}
+                    {@const prevTextLines = t && positionedTicks[t - 1].text}
+
+                    {@const moveDown =
+                        (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
+                        (anchor === 'bottom' ? 1 : -1)}
+                    {@const [textStyle, textClass] = resolveStyles(
+                        plot,
+                        tick,
+                        {
+                            fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
+                            ...options,
+                            fontSize: tickFontSize,
+                            stroke: null
+                        },
+                        'fill',
+                        { x: true }
+                    )}
+                    <text
+                        bind:this={tickTextElements[t]}
+                        transform="translate(0, {moveDown})  rotate({tickRotate})"
+                        style={textStyle}
+                        class={textClass}
+                        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 (i)}
+                                    <tspan x="0" dy={i ? 12 : 0}
+                                        >{!prevTextLines || prevTextLines[i] !== line
+                                            ? line
+                                            : ''}</tspan>
+                                {/each}
+                            {/if}
                         {/if}
-                    {/if}
-                </text>
+                    </text>
+                {/if}
             </g>
         {/if}
     {/each}

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

@@ -17,6 +17,7 @@ type BaseAxisXProps = {
         dy: ConstantAccessor<number>;
         filter: ChannelAccessor;
     };
+    text: boolean;
     plot: PlotState;
 };
 declare const BaseAxisX: import("svelte").Component<BaseAxisXProps, {}, "">;

package/dist/marks/helpers/BaseAxisY.svelte

@@ -29,6 +29,7 @@
             dy: ConstantAccessor<number>;
         };
         plot: PlotState;
+        text: boolean | null;
     };
 
     let {
@@ -46,7 +47,8 @@
         width,
         title,
         plot,
-        options
+        options,
+        text = true
     }: BaseAxisYProps = $props();
 
     const LINE_ANCHOR = {
@@ -67,16 +69,18 @@
                 element: null as SVGTextElement | null
             };
         });
-        const T = tickObjects.length;
-        for (let i = 0; i < T; i++) {
-            let j = i;
-            // find the preceding 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;
+        if (text) {
+            const T = tickObjects.length;
+            for (let i = 0; i < T; i++) {
+                let j = i;
+                // find the preceding 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;
@@ -176,13 +180,15 @@
                         class={tickLineClass}
                         x2={anchor === 'left' ? -tickSize : tickSize} />
                 {/if}
-                <text
-                    bind:this={tickTexts[t]}
-                    class={[textClass, { 'is-left': anchor === 'left' }]}
-                    style={textStyle}
-                    x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
-                    dominant-baseline={LINE_ANCHOR[lineAnchor]}
-                    >{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>
+                {#if text}
+                    <text
+                        bind:this={tickTexts[t]}
+                        class={[textClass, { 'is-left': anchor === 'left' }]}
+                        style={textStyle}
+                        x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
+                        dominant-baseline={LINE_ANCHOR[lineAnchor]}
+                        >{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>
+                {/if}
             </g>
         {/if}
     {/each}

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

@@ -17,6 +17,7 @@ type BaseAxisYProps = {
         dy: ConstantAccessor<number>;
     };
     plot: PlotState;
+    text: boolean | null;
 };
 declare const BaseAxisY: import("svelte").Component<BaseAxisYProps, {}, "">;
 type BaseAxisY = ReturnType<typeof BaseAxisY>;

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

@@ -1,44 +1,4 @@
-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
-     * circle
-     */
-    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, {}, "">;
+declare const MarkerPath: import("svelte").Component<any, {}, "">;
 type MarkerPath = ReturnType<typeof MarkerPath>;
 export default MarkerPath;

package/dist/marks/helpers/RectPath.svelte

@@ -14,6 +14,7 @@ Helper component for rendering rectangular marks in SVG
     } from '../../types';
     import { addEventHandlers } from './events';
     import { getContext } from 'svelte';
+    import Anchor from './Anchor.svelte';
 
     let {
         datum,
@@ -101,33 +102,35 @@ Helper component for rendering rectangular marks in SVG
     );
 </script>
 
-{#if hasBorderRadius}
-    <path
-        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
-        d={roundedRect(
-            0,
-            0,
-            width - insetLeft - insetRight,
-            height - insetTop - insetBottom,
-            borderRadius
-        )}
-        class={[styleClass, className]}
-        {style}
-        use:addEventHandlers={{
-            getPlotState,
-            options,
-            datum: datum?.datum
-        }} />
-{:else}
-    <rect
-        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
-        width={width - insetLeft - insetRight}
-        height={height - insetTop - insetBottom}
-        class={[styleClass, className]}
-        {style}
-        use:addEventHandlers={{
-            getPlotState,
-            options,
-            datum: datum?.datum
-        }} />
-{/if}
+<Anchor {options} datum={datum?.datum}>
+    {#if hasBorderRadius}
+        <path
+            transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
+            d={roundedRect(
+                0,
+                0,
+                width - insetLeft - insetRight,
+                height - insetTop - insetBottom,
+                borderRadius
+            )}
+            class={[styleClass, className]}
+            {style}
+            use:addEventHandlers={{
+                getPlotState,
+                options,
+                datum: datum?.datum
+            }} />
+    {:else}
+        <rect
+            transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
+            width={width - insetLeft - insetRight}
+            height={height - insetTop - insetBottom}
+            class={[styleClass, className]}
+            {style}
+            use:addEventHandlers={{
+                getPlotState,
+                options,
+                datum: datum?.datum
+            }} />
+    {/if}
+</Anchor>

package/dist/marks/helpers/Regression.svelte

@@ -123,7 +123,7 @@
     );
 
     let confBandGen = $derived(
-        confidence !== false
+        confidence !== false && regression.predict
             ? confidenceInterval(
                   data
                       .map((d) => ({