svelteplot 0.10.3-pr-472.0 → 0.10.3-pr-474.0

package/dist/marks/BollingerX.svelte

@@ -29,13 +29,7 @@
         k?: number;
     }
 
-    let {
-        data,
-        class: className = '',
-        n = 20,
-        k = 2,
-        ...options
-    }: BollingerXMarkProps = $props();
+    let { data, class: className = '', n = 20, k = 2, ...options }: BollingerXMarkProps = $props();
 
     let args = $derived(
         bollingerX(recordizeX({ data, ...options } as TransformArg<DataRecord>), { n, k })

package/dist/marks/CustomMark.svelte

@@ -6,8 +6,6 @@
     interface CustomMarkProps extends BaseMarkProps<Datum> {
         /** the input data array */
         data?: Datum[];
-        /** a custom mark type identifier for debugging */
-        type?: string;
         /** the horizontal position channel; bound to the x scale */
         x?: ChannelAccessor<Datum>;
         /** the starting horizontal position; bound to the x scale */
@@ -37,7 +35,8 @@
         BaseMarkProps,
         ScaledDataRecord,
         UsedScales,
-        ScaledChannelName
+        ScaledChannelName,
+        MarkType
     } from '../types/index.js';
     import type { Snippet } from 'svelte';
     import { sort } from '../index.js';
@@ -70,7 +69,7 @@
     ];
 </script>
 
-<Mark {type} required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
+<Mark type="custom" required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
     {#snippet children({ scaledData, usedScales })}
         {#if marks}
             {@render marks({ records: scaledData.filter((d) => d.valid), usedScales })}

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

@@ -138,8 +138,6 @@ declare function $$render<Datum extends DataRecord>(): {
     }> & {
         /** the input data array */
         data?: Datum[];
-        /** a custom mark type identifier for debugging */
-        type?: string;
         /** the horizontal position channel; bound to the x scale */
         x?: ChannelAccessor<Datum>;
         /** the starting horizontal position; bound to the x scale */

package/dist/marks/Image.svelte

@@ -32,13 +32,14 @@
         ChannelAccessor,
         ConstantAccessor,
         DataRecord,
-        LinkableMarkProps
+        LinkableMarkProps,
+        TransformArg
     } from '../types';
     import { resolveProp } from '../helpers/resolve';
-    import CustomMark from './CustomMark.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults';
     import { sort } from '../transforms';
     import Anchor from './helpers/Anchor.svelte';
+    import Mark from '../Mark.svelte';
 
     let markProps: ImageMarkProps = $props();
 
@@ -62,25 +63,39 @@
         ...markProps
     });
 
-    const args = $derived(sort({ data, ...options }));
+    const args = $derived(sort({ data, ...options } as TransformArg<Datum>) as ImageMarkProps);
 </script>
 
-<CustomMark type="image" {...args}>
-    {#snippet mark({ record, index, usedScales })}
-        {@const w = record.r !== undefined ? record.r * 2 : resolveProp(width, record.datum, 20)}
-        {@const h =
-            record.r !== undefined ? record.r * 2 : resolveProp(height || width, record.datum, 20)}
-        <Anchor {options} datum={record.datum}>
-            <image
-                class={resolveProp(imageClass, record.datum, null)}
-                href={resolveProp(src, record.datum, '')}
-                x={record.x - w * 0.5}
-                y={record.y - h * 0.5}
-                {preserveAspectRatio}
-                clip-path={record.r !== undefined ? `circle(${record.r}px)` : null}
-                width={w}
-                height={h}
-                >{#if title}<title>{resolveProp(title, record.datum, '')}</title>{/if}</image>
-        </Anchor>
+<Mark
+    required={['x', 'y']}
+    channels={['x', 'y', 'r', 'fill', 'opacity', 'stroke', 'fillOpacity', 'strokeOpacity']}
+    {...args}
+    type="image">
+    {#snippet children({ scaledData })}
+        {#each scaledData as record, i (i)}
+            {#if record.valid}
+                {@const w =
+                    record.r !== undefined
+                        ? record.r * 2
+                        : Number(resolveProp(width, record.datum, 20) ?? 20)}
+                {@const h =
+                    record.r !== undefined
+                        ? record.r * 2
+                        : Number(resolveProp(height || width, record.datum, 20) ?? 20)}
+                <Anchor {options} datum={record.datum}>
+                    <image
+                        class={resolveProp(imageClass, record.datum, null)}
+                        href={resolveProp(src, record.datum, '')}
+                        x={record.x! - w * 0.5}
+                        y={record.y! - h * 0.5}
+                        {preserveAspectRatio}
+                        clip-path={record.r !== undefined ? `circle(${record.r}px)` : null}
+                        width={w}
+                        height={h}
+                        >{#if title}<title>{resolveProp(title, record.datum, '')}</title
+                            >{/if}</image>
+                </Anchor>
+            {/if}
+        {/each}
     {/snippet}
-</CustomMark>
+</Mark>

package/dist/marks/helpers/Anchor.svelte

@@ -5,10 +5,25 @@
     interface AnchorProps {
         datum?: Datum;
         options?: {
+            /**
+             * The URL or URL fragment the hyperlink points to.
+             */
             href?: ConstantAccessor<string, Datum>;
+            /**
+             * Where to display the linked URL, e.g. _self, _blank
+             */
             target?: ConstantAccessor<string, Datum>;
+            /**
+             * The relationship of the target object to the link object.
+             */
             rel?: ConstantAccessor<string, Datum>;
+            /**
+             * A MIME type for the linked URL.
+             */
             type?: ConstantAccessor<string, Datum>;
+            /**
+             * Instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file.
+             */
             download?: ConstantAccessor<string, Datum>;
             [key: string]: any;
         };

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

@@ -3,10 +3,25 @@ declare function $$render<Datum extends Record<string, any>>(): {
     props: {
         datum?: Datum;
         options?: {
+            /**
+             * The URL or URL fragment the hyperlink points to.
+             */
             href?: ConstantAccessor<string, Datum>;
+            /**
+             * Where to display the linked URL, e.g. _self, _blank
+             */
             target?: ConstantAccessor<string, Datum>;
+            /**
+             * The relationship of the target object to the link object.
+             */
             rel?: ConstantAccessor<string, Datum>;
+            /**
+             * A MIME type for the linked URL.
+             */
             type?: ConstantAccessor<string, Datum>;
+            /**
+             * Instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file.
+             */
             download?: ConstantAccessor<string, Datum>;
             [key: string]: any;
         };

package/dist/types/mark.d.ts

@@ -6,7 +6,7 @@ export type Mark<T> = {
     data: DataRecord<T>[];
     options: T;
 };
-export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY' | 'trail' | 'waffleX' | 'waffleY';
+export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'image' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY' | 'trail' | 'waffleX' | 'waffleY';
 export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontFamily' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'letterSpacing' | 'wordSpacing' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'textTransform' | 'textDecoration' | 'width';
 import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';
 import type * as CSS from 'csstype';
@@ -193,7 +193,7 @@ export type LinkableMarkProps<T> = {
      * 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, T>;
+    download?: ConstantAccessor<string, T>;
     [key: `data-sveltekit-${string}`]: unknown;
 };
 export type BorderRadius = number | {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.10.3-pr-472.0",
+    "version": "0.10.3-pr-474.0",
     "description": "A Svelte-native data visualization framework based on the layered grammar of graphics principles.",
     "keywords": [
         "svelte",