svelteplot 0.5.3 → 0.6.0

package/dist/marks/CustomMark.svelte

@@ -5,6 +5,7 @@
 <script lang="ts" generics="Datum extends DataRecord">
     interface CustomMarkProps extends BaseMarkProps<Datum> {
         data?: Datum[];
+        type?: string;
         x?: ChannelAccessor<Datum>;
         x1?: ChannelAccessor<Datum>;
         x2?: ChannelAccessor<Datum>;
@@ -18,7 +19,6 @@
         marks?: Snippet<[{ records: ScaledDataRecord<Datum>[]; usedScales: UsedScales }]>;
     }
 
-    import { getContext } from 'svelte';
     import type {
         PlotContext,
         DataRecord,
@@ -33,7 +33,13 @@
 
     import Mark from '../Mark.svelte';
 
-    let { data = [{} as Datum], mark, marks, ...options }: CustomMarkProps = $props();
+    let {
+        data = [{} as Datum],
+        mark,
+        type = 'custom',
+        marks,
+        ...options
+    }: CustomMarkProps = $props();
 
     const args = $derived(sort({ data, ...options })) as CustomMarkProps;
 
@@ -53,7 +59,7 @@
     ];
 </script>
 
-<Mark type="custom" required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
+<Mark {type} 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

@@ -65,6 +65,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
     }> & {
         data?: Datum[] | undefined;
+        type?: string;
         x?: ChannelAccessor<Datum>;
         x1?: ChannelAccessor<Datum>;
         x2?: ChannelAccessor<Datum>;

package/dist/marks/Image.svelte

@@ -0,0 +1,76 @@
+<!--
+    @component 
+    For showing images positioned at x/y coordinates
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface ImageMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        data: Datum[];
+        x: ChannelAccessor<Datum>;
+        y: ChannelAccessor<Datum>;
+        r?: ChannelAccessor<Datum>;
+        width?: ConstantAccessor<number, Datum>;
+        height?: ConstantAccessor<number, Datum>;
+        src?: ConstantAccessor<string, Datum>;
+        title?: ConstantAccessor<string, Datum>;
+        preserveAspectRatio?: string;
+        // canvas?: boolean;
+        imageClass?: ConstantAccessor<string, Datum>;
+    }
+
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        ConstantAccessor,
+        DataRecord,
+        LinkableMarkProps
+    } 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';
+
+    let markProps: ImageMarkProps = $props();
+
+    const DEFAULTS: Partial<ImageMarkProps> = {
+        width: 20,
+        preserveAspectRatio: 'xMidYMin slice',
+        ...getPlotDefaults().image
+    };
+
+    const {
+        data = [{} as Datum],
+        width,
+        height,
+        src,
+        title,
+        imageClass,
+        preserveAspectRatio,
+        ...options
+    }: ImageMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
+
+    const args = $derived(sort({ data, ...options }));
+</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>
+    {/snippet}
+</CustomMark>

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

@@ -0,0 +1,92 @@
+import type { ChannelAccessor, ConstantAccessor, DataRecord, LinkableMarkProps } from '../types';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): Partial<{
+        filter: ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: ConstantAccessor<number, Datum>;
+        dy: ConstantAccessor<number, Datum>;
+        dodgeX: import("../transforms/dodge").DodgeXOptions;
+        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: ConstantAccessor<number, Datum>;
+        sort: ((a: import("../types").RawValue, b: import("../types").RawValue) => number) | {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | ConstantAccessor<import("../types").RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: ConstantAccessor<number, Datum>;
+        strokeOpacity: ConstantAccessor<number, Datum>;
+        strokeLinejoin: ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: ConstantAccessor<string, Datum>;
+        strokeDashoffset: ConstantAccessor<number, Datum>;
+        mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        imageFilter: ConstantAccessor<string, Datum>;
+        shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: ConstantAccessor<string, Datum>;
+        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;
+        style: string;
+        cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }> & LinkableMarkProps<Datum> & {
+        data: Datum[];
+        x: ChannelAccessor<Datum>;
+        y: ChannelAccessor<Datum>;
+        r?: ChannelAccessor<Datum>;
+        width?: ConstantAccessor<number, Datum>;
+        height?: ConstantAccessor<number, Datum>;
+        src?: ConstantAccessor<string, Datum>;
+        title?: ConstantAccessor<string, Datum>;
+        preserveAspectRatio?: string;
+        imageClass?: ConstantAccessor<string, Datum>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** For showing images positioned at x/y coordinates */
+declare const Image: $$IsomorphicComponent;
+type Image<Datum extends DataRecord> = InstanceType<typeof Image<Datum>>;
+export default Image;

package/dist/marks/Line.svelte

@@ -201,7 +201,7 @@
                                             : args.textStroke
                                               ? 2
                                               : 0,
-                                        fill: args.textFill || args.stroke,
+                                        fill: args.textFill || lineData[0].stroke,
                                         stroke: args.textStroke
                                     },
                                     'fill',
@@ -222,7 +222,7 @@
                                     color={lineData[0].stroke || 'currentColor'}
                                     {style}
                                     class={styleClass}
-                                    text={text ? resolveProp(text, lineData[0]) : null}
+                                    text={text ? resolveProp(text, lineData[0].datum) : null}
                                     startOffset={resolveProp(
                                         args.textStartOffset,
                                         lineData[0].datum,

package/dist/marks/helpers/Anchor.svelte

@@ -1,7 +1,21 @@
-<script>
+<script lang="ts" generics="Datum extends Record<string, any>">
     import { resolveProp } from '../../helpers/resolve.js';
+    import type { ConstantAccessor } from '../../types';
 
-    let { datum = {}, options = {}, children } = $props();
+    interface AnchorProps {
+        datum?: Datum;
+        options?: {
+            href?: ConstantAccessor<string, Datum>;
+            target?: ConstantAccessor<string, Datum>;
+            rel?: ConstantAccessor<string, Datum>;
+            type?: ConstantAccessor<string, Datum>;
+            download?: ConstantAccessor<string, Datum>;
+            [key: string]: any;
+        };
+        children?: () => any;
+    }
+
+    let { datum = {}, options = {}, children }: AnchorProps = $props();
 
     const href = $derived(resolveProp(options.href, datum, null));
     const target = $derived(resolveProp(options.target, datum, null));

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

@@ -1,15 +1,29 @@
+import type { ConstantAccessor } from '../../types';
+declare class __sveltets_Render<Datum extends Record<string, any>> {
+    props(): {
+        datum?: Datum | undefined;
+        options?: {
+            [key: string]: any;
+            href?: ConstantAccessor<string, Datum>;
+            target?: ConstantAccessor<string, Datum>;
+            rel?: ConstantAccessor<string, Datum>;
+            type?: ConstantAccessor<string, Datum>;
+            download?: ConstantAccessor<string, Datum>;
+        } | undefined;
+        children?: (() => any) | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Anchor: $$IsomorphicComponent;
+type Anchor<Datum extends Record<string, any>> = InstanceType<typeof Anchor<Datum>>;
 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/index.d.ts

@@ -27,6 +27,7 @@ export { default as Geo } from './Geo.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as GridX } from './GridX.svelte';
 export { default as GridY } from './GridY.svelte';
+export { default as Image } from './Image.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LineX } from './LineX.svelte';
 export { default as LineY } from './LineY.svelte';

package/dist/marks/index.js

@@ -27,6 +27,7 @@ export { default as Geo } from './Geo.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as GridX } from './GridX.svelte';
 export { default as GridY } from './GridY.svelte';
+export { default as Image } from './Image.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LineX } from './LineX.svelte';
 export { default as LineY } from './LineY.svelte';

package/dist/types/plot.d.ts

@@ -3,7 +3,7 @@ import type { ColorScheme } from './colorScheme.js';
 import type { GeoProjection } from 'd3-geo';
 import type { ChannelAccessor, ChannelName, ColorScaleOptions, DataRecord, LegendScaleOptions, PlotScales, ScaleOptions, XScaleOptions, YScaleOptions } from './index.js';
 import type { Snippet } from 'svelte';
-import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Line, Link, Pointer, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Vector } from '../marks/index.js';
+import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Image, Line, Link, Pointer, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Vector } from '../marks/index.js';
 export type PlotState = {
     width: number;
     height: number;
@@ -230,6 +230,10 @@ export type PlotDefaults = {
     gridY: Partial<Omit<ComponentProps<typeof GridY>, IgnoreDefaults> & {
         implicit: boolean;
     }>;
+    /**
+     * default props for image marks
+     */
+    image: Partial<Omit<ComponentProps<typeof Image>, IgnoreDefaults>>;
     /**
      * default props for line marks
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteplot",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "license": "ISC",
   "author": {
     "name": "Gregor Aisch",