svelteplot 0.2.9-pr-104.3 → 0.2.9-pr-109.0

package/dist/marks/Area.svelte

@@ -29,6 +29,7 @@
     import { maybeCurve } from '../helpers/curves.js';
     import { isValid } from '../helpers/index.js';
     import AreaCanvas from './helpers/AreaCanvas.svelte';
+    import Anchor from './helpers/Anchor.svelte';
 
     import type {
         CurveName,
@@ -37,7 +38,6 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
         ScaledDataRecord,
         LinkableMarkProps
     } from '../types.js';
@@ -113,32 +113,24 @@
         {:else}
             <GroupMultiple length={grouped.length}>
                 {#each grouped as areaData, i (i)}
-                    {#snippet el(datum: ScaledDataRecord)}
-                        {@const title = resolveProp(options.title, datum.datum, '')}
-                        {@const [style, styleClass] = resolveStyles(
-                            plot,
-                            datum,
-                            options,
-                            'fill',
-                            usedScales
-                        )}
-                        <path
-                            class={['svelteplot-area', className, styleClass]}
-                            clip-path={options.clipPath}
-                            d={areaPath(areaData)}
-                            {style}
-                            >{#if title}<title>{title}</title>{/if}</path>
-                    {/snippet}
+                    {@const datum = areaData[0]}
                     {#if areaData.length > 0}
-                        {#if options.href}
-                            <a
-                                href={resolveProp(options.href, areaData[0].datum, '')}
-                                target={resolveProp(options.target, areaData[0].datum, '_self')}>
-                                {@render el(areaData[0])}
-                            </a>
-                        {:else}
-                            {@render el(areaData[0])}
-                        {/if}
+                        <Anchor {options} {datum}>
+                            {@const title = resolveProp(options.title, datum.datum, '')}
+                            {@const [style, styleClass] = resolveStyles(
+                                plot,
+                                datum,
+                                options,
+                                'fill',
+                                usedScales
+                            )}
+                            <path
+                                class={['svelteplot-area', className, styleClass]}
+                                clip-path={options.clipPath}
+                                d={areaPath(areaData)}
+                                {style}
+                                >{#if title}<title>{title}</title>{/if}</path>
+                        </Anchor>
                     {/if}
                 {/each}
             </GroupMultiple>

package/dist/marks/BarX.svelte

@@ -7,10 +7,12 @@
         PlotContext,
         BaseMarkProps,
         BaseRectMarkProps,
-        ChannelAccessor
+        ChannelAccessor,
+        LinkableMarkProps
     } from '../types.js';
 
     export type BarXMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;

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

@@ -1,5 +1,5 @@
-import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
-export type BarXMarkProps = BaseMarkProps & BaseRectMarkProps & {
+import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor, LinkableMarkProps } from '../types.js';
+export type BarXMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRow[];
     x?: ChannelAccessor;
     x1?: ChannelAccessor;

package/dist/marks/BarY.svelte

@@ -12,6 +12,7 @@
     } from '../types.js';
 
     export type BarYMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;

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

@@ -1,5 +1,5 @@
 import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor, DataRow } from '../types.js';
-export type BarYMarkProps = BaseMarkProps & BaseRectMarkProps & {
+export type BarYMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRow[];
     x?: ChannelAccessor;
     y?: ChannelAccessor;
@@ -14,6 +14,6 @@ export type BarYMarkProps = BaseMarkProps & BaseRectMarkProps & {
 };
 import type { StackOptions } from '../transforms/stack.js';
 /** For vertical column charts using a band scale as x axis */
-declare const BarY: import("svelte").Component<BarYMarkProps, {}, "">;
+declare const BarY: import("svelte").Component<any, {}, "">;
 type BarY = ReturnType<typeof BarY>;
 export default BarY;

package/dist/marks/BrushX.svelte

@@ -1,4 +1,4 @@
-<script module type="ts">
+<script module lang="ts">
     export type BrushXMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 </script>
 

package/dist/marks/BrushY.svelte

@@ -1,4 +1,4 @@
-<script module type="ts">
+<script module lang="ts">
     export type BrushYMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 </script>
 

package/dist/marks/Cell.svelte

@@ -12,6 +12,7 @@
     } from '../types.js';
 
     export type CellMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRecord[];
             x?: ChannelAccessor;

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

@@ -1,10 +1,10 @@
 import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
-export type CellMarkProps = BaseMarkProps & BaseRectMarkProps & {
+export type CellMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRecord[];
     x?: ChannelAccessor;
     y?: ChannelAccessor;
 };
 /** For arbitrary rectangles, requires band x and y scales */
-declare const Cell: import("svelte").Component<CellMarkProps, {}, "">;
+declare const Cell: import("svelte").Component<any, {}, "">;
 type Cell = ReturnType<typeof Cell>;
 export default Cell;

package/dist/marks/Dot.svelte

@@ -10,7 +10,7 @@
         symbol?: ChannelAccessor | Snippet<[number, string]>;
         canvas?: boolean;
         dotClass?: ConstantAccessor<string>;
-    };
+    } & LinkableMarkProps;
 </script>
 
 <script lang="ts">
@@ -21,8 +21,8 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
-        PlotDefaults
+        PlotDefaults,
+        LinkableMarkProps
     } from '../types.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { maybeSymbol } from '../helpers/symbols.js';
@@ -33,6 +33,7 @@
     import { maybeData, isValid } from '../helpers/index.js';
     import { recordizeXY } from '../transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
+    import Anchor from './helpers/Anchor.svelte';
 
     let {
         data = [{}],
@@ -95,19 +96,21 @@
                             'stroke',
                             usedScales
                         )}
-                        <path
-                            transform="translate({d.x}, {d.y})"
-                            d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
-                            class={[
-                                dotClass ? resolveProp(dotClass, d.datum, null) : null,
-                                styleClass
-                            ]}
-                            {style}
-                            use:addEventHandlers={{
-                                getPlotState,
-                                options: args,
-                                datum: d.datum
-                            }} />
+                        <Anchor {options} datum={d.datum}>
+                            <path
+                                transform="translate({d.x}, {d.y})"
+                                d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
+                                class={[
+                                    dotClass ? resolveProp(dotClass, d.datum, null) : null,
+                                    styleClass
+                                ]}
+                                {style}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum: d.datum
+                                }} />
+                        </Anchor>
                     {/if}
                 {/each}
             {/if}

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

@@ -6,9 +6,9 @@ export type DotMarkProps = BaseMarkProps & {
     symbol?: ChannelAccessor | Snippet<[number, string]>;
     canvas?: boolean;
     dotClass?: ConstantAccessor<string>;
-};
+} & LinkableMarkProps;
 import { type Snippet } from 'svelte';
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types.js';
 /** Creates dots or symbols at specified positions with customizable size and appearance */
 declare const Dot: import("svelte").Component<DotMarkProps, {}, "">;
 type Dot = ReturnType<typeof Dot>;

package/dist/marks/Frame.svelte

@@ -7,6 +7,7 @@
         BaseMarkProps,
         'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'
     > &
+        LinkableMarkProps &
         Omit<
             BaseRectMarkProps,
             'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'
@@ -27,7 +28,7 @@
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import type { PlotContext, BaseRectMarkProps } from '../types.js';
+    import type { PlotContext, BaseRectMarkProps, LinkableMarkProps } from '../types.js';
     import type { BaseMarkProps } from '../types.js';
     import RectPath from './helpers/RectPath.svelte';
 

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

@@ -1,4 +1,4 @@
-export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'> & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
+export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'> & LinkableMarkProps & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
     fill: string;
     stroke: string;
     fillOpacity: number;
@@ -10,7 +10,7 @@ export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacit
     insetTop?: number;
     insetBottom?: number;
 };
-import type { BaseRectMarkProps } from '../types.js';
+import type { BaseRectMarkProps, LinkableMarkProps } from '../types.js';
 import type { BaseMarkProps } from '../types.js';
 /** Renders a simple frame around the entire plot domain */
 declare const Frame: import("svelte").Component<FrameMarkProps, {}, "">;

package/dist/marks/Geo.svelte

@@ -7,8 +7,10 @@
         geoType?: 'sphere' | 'graticule';
         dragRotate: boolean;
         canvas: boolean;
-        href: ConstantAccessor<string>;
-        target: ConstantAccessor<string>;
+        /**
+         * simple browser tooltip to be displayed on mouseover
+         */
+        title: ConstantAccessor<string>;
     } & BaseMarkProps &
         LinkableMarkProps;
 </script>
@@ -31,6 +33,7 @@
     import GeoCanvas from './helpers/GeoCanvas.svelte';
     import { recordize } from '../transforms/recordize.js';
     import { GEOJSON_PREFER_STROKE } from '../helpers/index.js';
+    import Anchor from './helpers/Anchor.svelte';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -68,28 +71,6 @@
     channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
-        {#snippet el(d)}
-            {@const title = resolveProp(args.title, d.datum, '')}
-            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
-            {@const [style, styleClass] = resolveStyles(
-                plot,
-                d,
-                args,
-                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
-                usedScales
-            )}
-            <path
-                d={path(geometry)}
-                {style}
-                class={[styleClass]}
-                use:addEventHandlers={{
-                    getPlotState,
-                    options: args,
-                    datum: d.datum
-                }}>
-                {#if title}<title>{title}</title>{/if}
-            </path>
-        {/snippet}
         <g
             aria-label="geo"
             class={['geo', geoType && `geo-${geoType}`, className]}
@@ -99,15 +80,28 @@
             {:else}
                 {#each scaledData as d, i (i)}
                     {#if d.valid}
-                        {#if options.href}
-                            <a
-                                href={resolveProp(args.href, d.datum, '')}
-                                target={resolveProp(args.target, d.datum, '_self')}>
-                                {@render el(d)}
-                            </a>
-                        {:else}
-                            {@render el(d)}
-                        {/if}
+                        <Anchor {options} datum={d.datum}>
+                            {@const title = resolveProp(args.title, d.datum, '')}
+                            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
+                            {@const [style, styleClass] = resolveStyles(
+                                plot,
+                                d,
+                                args,
+                                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
+                                usedScales
+                            )}
+                            <path
+                                d={path(geometry)}
+                                {style}
+                                class={[styleClass]}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum: d.datum
+                                }}>
+                                {#if title}<title>{title}</title>{/if}
+                            </path>
+                        </Anchor>
                     {/if}
                 {/each}
             {/if}

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

@@ -3,8 +3,10 @@ export type GeoMarkProps = {
     geoType?: 'sphere' | 'graticule';
     dragRotate: boolean;
     canvas: boolean;
-    href: ConstantAccessor<string>;
-    target: ConstantAccessor<string>;
+    /**
+     * simple browser tooltip to be displayed on mouseover
+     */
+    title: ConstantAccessor<string>;
 } & BaseMarkProps & LinkableMarkProps;
 import type { DataRecord, BaseMarkProps, ConstantAccessor, LinkableMarkProps } from '../types.js';
 /** Renders geographical data using projections and GeoJSON geometries */

package/dist/marks/Rect.svelte

@@ -13,6 +13,7 @@
         y2?: ChannelAccessor;
         interval?: number | string;
     } & BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps;
 </script>
 

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

@@ -7,9 +7,9 @@ export type RectMarkProps = {
     y1?: ChannelAccessor;
     y2?: ChannelAccessor;
     interval?: number | string;
-} & BaseMarkProps & BaseRectMarkProps;
+} & BaseMarkProps & LinkableMarkProps & BaseRectMarkProps;
 import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
 /** For arbitrary rectangles, requires quantitative x and y scales */
-declare const Rect: import("svelte").Component<RectMarkProps, {}, "">;
+declare const Rect: import("svelte").Component<any, {}, "">;
 type Rect = ReturnType<typeof Rect>;
 export default Rect;

package/dist/marks/Sphere.svelte

@@ -2,8 +2,8 @@
     Geo mark with Sphere geometry object  -->
 
 <script module lang="ts">
-    import { type BaseMarkProps } from '../types.js';
-    export type SphereMarkProps = BaseMarkProps;
+    import { type BaseMarkProps, type LinkableMarkProps } from '../types.js';
+    export type SphereMarkProps = BaseMarkProps & LinkableMarkProps;
 </script>
 
 <script lang="ts">

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

@@ -1,6 +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<BaseMarkProps, {}, "">;
+declare const Sphere: import("svelte").Component<any, {}, "">;
 type Sphere = ReturnType<typeof Sphere>;
 export default Sphere;

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/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/types.d.ts

@@ -490,15 +490,30 @@ export type FacetContext = {
 };
 export type LinkableMarkProps = {
     /**
-     * simple browser tooltip to be displayed on mouseover
+     * if set, the mark element will be wrapped in a <a> link element
      */
-    title: ConstantAccessor<string>;
+    href: ConstantAccessor<string>;
     /**
-     * if set, the mark element will be wrapped in a <a> link
-     * element
+     * the relationship of the target object to the link object (e.g. "noopener")
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#rel
      */
-    href: ConstantAccessor<string>;
-    target: ConstantAccessor<'_self' | '_blank' | string>;
+    rel: ConstantAccessor<string>;
+    /**
+     * the link target mime type, e.g. "text/csv"
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#type
+     */
+    type: ConstantAccessor<string>;
+    /**
+     * the target of the link, e.g. "_blank" or "_self"
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#target
+     */
+    target: ConstantAccessor<'_self' | '_blank' | '_parent' | '_top' | string>;
+    /**
+     * if set to true, the link will be downloaded instead of navigating to it
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
+     */
+    download: ConstantAccessor<boolean>;
+    [key: `data-sveltekit-${string}`]: string | boolean;
 };
 export type BaseMarkProps = Partial<{
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.9-pr-104.3",
+    "version": "0.2.9-pr-109.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -80,15 +80,15 @@
         "d3-force": "^3.0.0",
         "eslint": "^9.28.0",
         "eslint-config-prettier": "^10.1.5",
-        "eslint-plugin-svelte": "3.9.0",
+        "eslint-plugin-svelte": "3.9.1",
         "jsdom": "^26.1.0",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.4.0",
-        "puppeteer": "^24.9.0",
+        "puppeteer": "^24.10.0",
         "remark-code-extra": "^1.0.1",
         "remark-code-frontmatter": "^1.0.0",
         "resize-observer-polyfill": "^1.5.1",
-        "sass": "^1.89.0",
+        "sass": "^1.89.1",
         "svelte-check": "^4.2.1",
         "svelte-eslint-parser": "1.2.0",
         "svelte-highlight": "^7.8.3",
@@ -97,7 +97,7 @@
         "ts-essentials": "^10.0.4",
         "tslib": "^2.8.1",
         "typedoc": "^0.28.5",
-        "typedoc-plugin-markdown": "^4.6.3",
+        "typedoc-plugin-markdown": "^4.6.4",
         "typescript": "^5.8.3",
         "vite": "^6.3.5",
         "vitest": "^3.1.4",
@@ -122,6 +122,6 @@
         "es-toolkit": "^1.38.0",
         "fast-equals": "^5.2.2",
         "merge-deep": "^3.0.3",
-        "svelte": "5.33.10"
+        "svelte": "5.33.13"
     }
 }