svelteplot 0.2.1 → 0.2.2

package/dist/helpers/resolve.d.ts

@@ -3,7 +3,7 @@ import type { ScaleName, ChannelName, ScaledChannelName, ChannelAccessor, DataRo
 type ChannelAlias = {
     channel: ScaledChannelName;
 };
-export declare function resolveProp<T>(accessor: ConstantAccessor<T>, datum: DataRecord | null, _defaultValue?: T | null): T | null;
+export declare function resolveProp<T>(accessor: ConstantAccessor<T>, datum: DataRecord | null, _defaultValue?: T | null): T | typeof _defaultValue;
 type ChannelOptions = {
     value: ChannelAccessor;
     scale?: ScaleName | null;

package/dist/index.d.ts

@@ -58,10 +58,12 @@ export { normalizeX, normalizeY } from './transforms/normalize.js';
 export { group, groupX, groupY, groupZ } from './transforms/group.js';
 export { intervalX, intervalY } from './transforms/interval.js';
 export { recordizeX, recordizeY } from './transforms/recordize.js';
-export { renameChannels } from './transforms/rename.js';
+export { renameChannels, replaceChannels } from './transforms/rename.js';
 export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './transforms/select.js';
 export { shiftX, shiftY } from './transforms/shift.js';
 export { sort, shuffle, reverse } from './transforms/sort.js';
 export { stackX, stackY } from './transforms/stack.js';
 export { windowX, windowY } from './transforms/window.js';
 export { formatMonth } from './helpers/formats.js';
+export { default as LinearGradientX } from './marks/helpers/LinearGradientX.svelte';
+export { default as LinearGradientY } from './marks/helpers/LinearGradientY.svelte';

package/dist/index.js

@@ -61,11 +61,13 @@ export { normalizeX, normalizeY } from './transforms/normalize.js';
 export { group, groupX, groupY, groupZ } from './transforms/group.js';
 export { intervalX, intervalY } from './transforms/interval.js';
 export { recordizeX, recordizeY } from './transforms/recordize.js';
-export { renameChannels } from './transforms/rename.js';
+export { renameChannels, replaceChannels } from './transforms/rename.js';
 export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './transforms/select.js';
 export { shiftX, shiftY } from './transforms/shift.js';
 export { sort, shuffle, reverse } from './transforms/sort.js';
 export { stackX, stackY } from './transforms/stack.js';
 export { windowX, windowY } from './transforms/window.js';
-// format helpers
+// helpers
 export { formatMonth } from './helpers/formats.js';
+export { default as LinearGradientX } from './marks/helpers/LinearGradientX.svelte';
+export { default as LinearGradientY } from './marks/helpers/LinearGradientY.svelte';

package/dist/marks/BarX.svelte

@@ -6,13 +6,11 @@
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
     import { stackX, recordizeX, intervalX, sort } from '../index.js';
-    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { roundedRect } from '../helpers/roundedRect.js';
     import type { PlotContext, BaseMarkProps, RectMarkProps, ChannelAccessor } from '../types.js';
     import type { StackOptions } from '../transforms/stack.js';
     import type { DataRow } from '../types.js';
-    import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import RectPath from './helpers/RectPath.svelte';
 
     type BarXProps = BaseMarkProps & {
         data: DataRow[];
@@ -21,14 +19,6 @@
         x2?: ChannelAccessor;
         y?: ChannelAccessor;
         stack?: StackOptions;
-        borderRadius?:
-            | number
-            | {
-                  topLeft?: number;
-                  topRight?: number;
-                  bottomRight?: number;
-                  bottomLeft?: number;
-              };
     } & RectMarkProps;
 
     let { data = [{}], class: className = null, stack, ...options }: BarXProps = $props();
@@ -59,33 +49,17 @@
                 {@const bw = plot.scales.y.fn.bandwidth()}
                 {@const minx = Math.min(d.x1, d.x2)}
                 {@const maxx = Math.max(d.x1, d.x2)}
-                {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
-                {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
-                {@const insetTop = resolveProp(args.insetTop || args.inset, d.datum, 0)}
-                {@const insetBottom = resolveProp(args.insetBottom || args.inset, d.datum, 0)}
-                {@const dx = resolveProp(args.dx, d.datum, 0)}
-                {@const dy = resolveProp(args.dy, d.datum, 0)}
                 {#if d.valid}
-                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
-                    <path
-                        d={roundedRect(
-                            0,
-                            0,
-                            maxx - minx - insetLeft - insetRight,
-                            bw - insetTop - insetBottom,
-                            options.borderRadius
-                        )}
-                        class={[styleClass, className]}
-                        {style}
-                        transform="translate({[
-                            minx + dx + insetLeft,
-                            d.y + insetTop + dy - bw * 0.5
-                        ]})"
-                        use:addEventHandlers={{
-                            getPlotState,
-                            options: args,
-                            datum: d.datum
-                        }} />
+                    <RectPath
+                        {usedScales}
+                        class={className}
+                        {options}
+                        datum={d}
+                        x={minx}
+                        useInsetAsFallbackHorizontally={false}
+                        y={d.y - bw * 0.5}
+                        width={maxx - minx}
+                        height={bw} />
                 {/if}
             {/each}
         </GroupMultiple>

package/dist/marks/BarY.svelte

@@ -6,40 +6,25 @@
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
     import { intervalY, stackY, recordizeY, sort } from '../index.js';
-    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { roundedRect } from '../helpers/roundedRect.js';
-    import {
-        type PlotContext,
-        type BaseMarkProps,
-        type ChannelAccessor,
-        type DataRow
-    } from '../types.js';
+    import type { PlotContext, BaseMarkProps, BaseRectMarkProps } from '../types.js';
     import type { StackOptions } from '../transforms/stack.js';
-    import { maybeData } from '../helpers/index.js';
-    import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import RectPath from './helpers/RectPath.svelte';
 
-    type BarYProps = BaseMarkProps & {
-        data: DataRow[];
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-        stack?: StackOptions;
-        /**
-         * Converts y into y1/y2 ranges based on the provided interval. Disables the
-         * implicit stacking
-         */
-        interval?: number | string;
-        borderRadius?:
-            | number
-            | {
-                  topLeft?: number;
-                  topRight?: number;
-                  bottomRight?: number;
-                  bottomLeft?: number;
-              };
-    };
+    type BarYProps = BaseMarkProps &
+        BaseRectMarkProps & {
+            data: DataRow[];
+            x?: ChannelAccessor;
+            y?: ChannelAccessor;
+            y1?: ChannelAccessor;
+            y2?: ChannelAccessor;
+            stack?: StackOptions;
+            /**
+             * Converts y into y1/y2 ranges based on the provided interval. Disables the
+             * implicit stacking
+             */
+            interval?: number | string;
+        };
 
     let { data = [{}], class: className = null, stack, ...options }: BarYProps = $props();
 
@@ -63,39 +48,23 @@
     requiredScales={{ x: ['band'] }}
     channels={['x', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     {...args}>
-    {#snippet children({ mark, scaledData, usedScales })}
+    {#snippet children({ scaledData, usedScales })}
         <GroupMultiple class="bar-y" length={scaledData.length}>
             {#each scaledData as d}
                 {@const bw = plot.scales.x.fn.bandwidth()}
                 {@const miny = Math.min(d.y1, d.y2)}
                 {@const maxy = Math.max(d.y1, d.y2)}
-                {@const insetLeft = resolveProp(args.insetLeft || args.inset, d.datum, 0)}
-                {@const insetRight = resolveProp(args.insetRight || args.inset, d.datum, 0)}
-                {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
-                {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
-                {@const dx = resolveProp(args.dx, d.datum, 0)}
-                {@const dy = resolveProp(args.dy, d.datum, 0)}
                 {#if d.valid}
-                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
-                    <path
-                        d={roundedRect(
-                            0,
-                            0,
-                            bw - insetLeft - insetRight,
-                            maxy - miny - insetTop - insetBottom,
-                            options.borderRadius
-                        )}
-                        class={[styleClass, className]}
-                        {style}
-                        transform="translate({[
-                            d.x + insetLeft + dx - bw * 0.5,
-                            miny + dy + insetTop
-                        ]})"
-                        use:addEventHandlers={{
-                            getPlotState,
-                            options: args,
-                            datum: d.datum
-                        }} />
+                    <RectPath
+                        x={d.x - bw * 0.5}
+                        y={miny}
+                        options={args}
+                        class={className}
+                        width={bw}
+                        height={maxy - miny}
+                        datum={d}
+                        {usedScales}
+                        useInsetAsFallbackVertically={false} />
                 {/if}
             {/each}
         </GroupMultiple>

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

@@ -1,6 +1,6 @@
-import { type BaseMarkProps, type ChannelAccessor, type DataRow } from '../types.js';
+import type { BaseMarkProps, BaseRectMarkProps } from '../types.js';
 import type { StackOptions } from '../transforms/stack.js';
-type BarYProps = BaseMarkProps & {
+type BarYProps = BaseMarkProps & BaseRectMarkProps & {
     data: DataRow[];
     x?: ChannelAccessor;
     y?: ChannelAccessor;
@@ -12,12 +12,6 @@ type BarYProps = BaseMarkProps & {
      * implicit stacking
      */
     interval?: number | string;
-    borderRadius?: number | {
-        topLeft?: number;
-        topRight?: number;
-        bottomRight?: number;
-        bottomLeft?: number;
-    };
 };
 /** For vertical column charts using a band scale as x axis */
 declare const BarY: import("svelte").Component<BarYProps, {}, "">;

package/dist/marks/Cell.svelte

@@ -6,9 +6,7 @@
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
     import { recordizeY, sort } from '../index.js';
-    import { roundedRect } from '../helpers/roundedRect.js';
-    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { coalesce, maybeNumber } from '../helpers/index.js';
+    import { resolveChannel } from '../helpers/resolve.js';
     import type {
         PlotContext,
         DataRecord,
@@ -17,7 +15,7 @@
         ChannelAccessor
     } from '../types.js';
     import { isValid } from '../helpers/isValid.js';
-    import { addEventHandlers } from './helpers/events.js';
+    import RectPath from './helpers/RectPath.svelte';
 
     type CellProps = BaseMarkProps & {
         data: DataRecord[];
@@ -59,43 +57,21 @@
     requiredScales={{ x: ['band'], y: ['band'] }}
     channels={['x', 'y', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     {...args}>
-    {#snippet children({ mark, scaledData, usedScales })}
+    {#snippet children({ scaledData, usedScales })}
         {@const bwx = plot.scales.x.fn.bandwidth()}
         {@const bwy = plot.scales.y.fn.bandwidth()}
         <g class="cell {className || ''}" data-fill={usedScales.fillOpacity}>
             {#each scaledData as d}
-                {@const inset = resolveProp(args.inset, d.datum, 0)}
-                {@const insetLeft = resolveProp(args.insetLeft, d.datum)}
-                {@const insetRight = resolveProp(args.insetRight, d.datum)}
-                {@const insetTop = resolveProp(args.insetTop, d.datum)}
-                {@const insetBottom = resolveProp(args.insetBottom, d.datum)}
-                {@const dx = resolveProp(args.dx, d.datum, 0)}
-                {@const dy = resolveProp(args.dy, d.datum, 0)}
-                {@const insetL = maybeNumber(coalesce(insetLeft, inset, 0))}
-                {@const insetT = maybeNumber(coalesce(insetTop, inset, 0))}
-                {@const insetR = maybeNumber(coalesce(insetRight, inset, 0))}
-                {@const insetB = maybeNumber(coalesce(insetBottom, inset, 0))}
                 {#if d.valid && (args.fill == null || isValid(resolveChannel('fill', d.datum, args)))}
-                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
-                    <path
-                        d={roundedRect(
-                            0,
-                            0,
-                            bwx - insetL - insetR,
-                            bwy - insetT - insetB,
-                            options.borderRadius
-                        )}
-                        class={[styleClass]}
-                        {style}
-                        transform="translate({[
-                            d.x + insetL + dx - bwx * 0.5,
-                            d.y + insetT + dy - bwy * 0.5
-                        ]})"
-                        use:addEventHandlers={{
-                            getPlotState,
-                            options: args,
-                            datum: d.datum
-                        }} />
+                    <RectPath
+                        datum={d}
+                        class={className}
+                        {usedScales}
+                        options={args}
+                        x={d.x - bwx * 0.5}
+                        y={d.y - bwy * 0.5}
+                        width={bwx}
+                        height={bwy} />
                 {/if}
             {/each}
         </g>

package/dist/marks/Line.svelte

@@ -18,8 +18,9 @@
         data: DataRecord[];
         z?: ChannelAccessor;
         stroke?: ChannelAccessor;
-        outlineStroke?: ConstantAccessor<string>;
-        outlineStrokeWidth?: ConstantAccessor<number>;
+        outlineStroke?: string;
+        outlineStrokeWidth?: number;
+        outlineStrokeOpacity?: number;
         dx?: ConstantAccessor<number>;
         dy?: ConstantAccessor<number>;
         curve?: CurveName | CurveFactory;
@@ -31,6 +32,7 @@
         textStartOffset?: ConstantAccessor<string>;
         textStrokeWidth?: ConstantAccessor<number>;
         lineClass?: ConstantAccessor<string>;
+        canvas?: boolean;
     } & MarkerOptions;
 </script>
 
@@ -39,11 +41,12 @@
     import MarkerPath from './helpers/MarkerPath.svelte';
     import { getContext } from 'svelte';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { line, type CurveFactory } from 'd3-shape';
+    import { line, type CurveFactory, type Line } from 'd3-shape';
     import { geoPath } from 'd3-geo';
     import callWithProps from '../helpers/callWithProps.js';
     import { maybeCurve } from '../helpers/curves.js';
     import { pick } from 'es-toolkit';
+    import LineCanvas from './helpers/LineCanvas.svelte';
 
     type LineMarkProps = BaseMarkProps & {
         x?: ChannelAccessor;
@@ -61,6 +64,7 @@
         curve = 'auto',
         tension = 0,
         text,
+        canvas = false,
         class: className = null,
         lineClass = null,
         ...options
@@ -96,9 +100,7 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    type LinePath = (dr: DataRecord[]) => string;
-
-    const linePath: LinePath = $derived(
+    const linePath: Line<ScaledDataRecord> = $derived(
         plot.scales.projection && curve === 'auto'
             ? sphereLine(plot.scales.projection)
             : callWithProps(line, [], {
@@ -111,7 +113,7 @@
 
     function sphereLine(projection) {
         const path = geoPath(projection);
-        return (lineData: ScaledDataRecord[]) => {
+        const fn = (lineData: ScaledDataRecord[]) => {
             let line = [];
             const lines = [line];
             for (const { x, y } of lineData) {
@@ -125,6 +127,8 @@
             }
             return path({ type: 'MultiLineString', coordinates: lines });
         };
+        fn.context = path.context;
+        return fn;
     }
 </script>
 
@@ -135,88 +139,102 @@
     {...args}>
     {#snippet children({ mark, usedScales, scaledData })}
         {#if scaledData.length > 0}
-            <g class={['lines', className]}>
-                {#each groupIndex(scaledData, groupByKey) as lineData, i}
-                    {@const pathString = linePath(lineData)}
-                    {#if pathString}
-                        <GroupMultiple class={resolveProp(lineClass, lineData[0])}>
-                            {#if options.outlineStroke}
-                                {@const [outlineStyle, outlineStyleClass] = resolveStyles(
+            {@const groupedLineData = groupIndex(scaledData, groupByKey)};
+            {#if canvas}
+                <LineCanvas {groupedLineData} {mark} {usedScales} {linePath} {groupByKey} />
+            {:else}
+                <g class={['lines', className]}>
+                    {#each groupedLineData as lineData, i}
+                        {@const pathString = linePath(lineData)}
+                        {#if pathString}
+                            <GroupMultiple class={resolveProp(lineClass, lineData[0])}>
+                                {#if options.outlineStroke}
+                                    {@const [outlineStyle, outlineStyleClass] = resolveStyles(
+                                        plot,
+                                        { ...lineData[0], stroke: options.outlineStroke },
+                                        {
+                                            strokeLinejoin: 'round',
+                                            ...args,
+                                            stroke: options.outlineStroke,
+                                            strokeOpacity: options.outlineStrokeOpacity ?? 1,
+                                            strokeWidth:
+                                                options.outlineStrokeWidth ||
+                                                resolveProp(
+                                                    options.strokeWidth,
+                                                    lineData[0].datum,
+                                                    1.4
+                                                ) + 2
+                                        },
+                                        'stroke',
+                                        usedScales
+                                    )}
+                                    <path
+                                        d={pathString}
+                                        style={outlineStyle}
+                                        class={['is-outline', outlineStyleClass]} />
+                                {/if}
+                                {@const [style, styleClass] = resolveStyles(
                                     plot,
-                                    { ...lineData[0], stroke: options.outlineStroke },
+                                    lineData[0],
                                     {
+                                        strokeWidth: 1.4,
                                         strokeLinejoin: 'round',
                                         ...args,
-                                        stroke: options.outlineStroke,
-                                        strokeWidth:
-                                            options.outlineStrokeWidth ||
-                                            (+options.strokeWidth || 1.4) + 2
+                                        stroke: lineData[0].stroke
                                     },
                                     'stroke',
                                     usedScales
                                 )}
-                                <path
+                                {@const [textStyle, textStyleClass] = resolveStyles(
+                                    plot,
+                                    lineData[0],
+                                    {
+                                        textAnchor: 'middle',
+                                        ...pick(args, [
+                                            'fontSize',
+                                            'fontWeight',
+                                            'fontStyle',
+                                            'textAnchor'
+                                        ]),
+                                        strokeWidth: args.textStrokeWidth
+                                            ? args.textStrokeWidth
+                                            : args.textStroke
+                                              ? 2
+                                              : 0,
+                                        fill: args.textFill || args.stroke,
+                                        stroke: args.textStroke
+                                    },
+                                    'fill',
+                                    usedScales,
+                                    true
+                                )}
+                                <MarkerPath
+                                    {mark}
+                                    scales={plot.scales}
+                                    markerStart={args.markerStart}
+                                    markerMid={args.markerMid}
+                                    markerEnd={args.markerEnd}
+                                    marker={args.marker}
+                                    strokeWidth={args.strokeWidth}
+                                    datum={lineData[0]}
                                     d={pathString}
-                                    style={outlineStyle}
-                                    class={['is-outline', outlineStyleClass]} />
-                            {/if}
-                            {@const [style, styleClass] = resolveStyles(
-                                plot,
-                                lineData[0],
-                                {
-                                    strokeWidth: 1.4,
-                                    strokeLinejoin: 'round',
-                                    ...args,
-                                    stroke: lineData[0].stroke
-                                },
-                                'stroke',
-                                usedScales
-                            )}
-                            {@const [textStyle, textStyleClass] = resolveStyles(
-                                plot,
-                                lineData[0],
-                                {
-                                    textAnchor: 'middle',
-                                    ...pick(args, [
-                                        'fontSize',
-                                        'fontWeight',
-                                        'fontStyle',
-                                        'textAnchor'
-                                    ]),
-                                    strokeWidth: args.textStrokeWidth
-                                        ? args.textStrokeWidth
-                                        : args.textStroke
-                                          ? 2
-                                          : 0,
-                                    fill: args.textFill || args.stroke,
-                                    stroke: args.textStroke
-                                },
-                                'fill',
-                                usedScales,
-                                true
-                            )}
-                            <MarkerPath
-                                {mark}
-                                scales={plot.scales}
-                                markerStart={args.markerStart}
-                                markerMid={args.markerMid}
-                                markerEnd={args.markerEnd}
-                                marker={args.marker}
-                                strokeWidth={args.strokeWidth}
-                                datum={lineData[0]}
-                                d={pathString}
-                                dInv={text ? linePath(lineData.toReversed()) : null}
-                                color={lineData[0].stroke || 'currentColor'}
-                                {style}
-                                class={styleClass}
-                                text={text ? resolveProp(text, lineData[0]) : null}
-                                startOffset={resolveProp(args.textStartOffset, lineData[0], '50%')}
-                                {textStyle}
-                                {textStyleClass} />
-                        </GroupMultiple>
-                    {/if}
-                {/each}
-            </g>
+                                    dInv={text ? linePath(lineData.toReversed()) : null}
+                                    color={lineData[0].stroke || 'currentColor'}
+                                    {style}
+                                    class={styleClass}
+                                    text={text ? resolveProp(text, lineData[0]) : null}
+                                    startOffset={resolveProp(
+                                        args.textStartOffset,
+                                        lineData[0],
+                                        '50%'
+                                    )}
+                                    {textStyle}
+                                    {textStyleClass} />
+                            </GroupMultiple>
+                        {/if}
+                    {/each}
+                </g>
+            {/if}
         {/if}
     {/snippet}
 </Mark>

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

@@ -3,8 +3,9 @@ export type BaseLineMarkProps = {
     data: DataRecord[];
     z?: ChannelAccessor;
     stroke?: ChannelAccessor;
-    outlineStroke?: ConstantAccessor<string>;
-    outlineStrokeWidth?: ConstantAccessor<number>;
+    outlineStroke?: string;
+    outlineStrokeWidth?: number;
+    outlineStrokeOpacity?: number;
     dx?: ConstantAccessor<number>;
     dy?: ConstantAccessor<number>;
     curve?: CurveName | CurveFactory;
@@ -18,8 +19,9 @@ export type BaseLineMarkProps = {
     textStartOffset?: ConstantAccessor<string>;
     textStrokeWidth?: ConstantAccessor<number>;
     lineClass?: ConstantAccessor<string>;
+    canvas?: boolean;
 } & MarkerOptions;
-import { type CurveFactory } from 'd3-shape';
+import { type CurveFactory, type Line } from 'd3-shape';
 import type { RawValue } from '../types.js';
 type LineMarkProps = BaseMarkProps & {
     x?: ChannelAccessor;

package/dist/marks/Rect.svelte

@@ -17,6 +17,7 @@
     } from '../types.js';
     import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import RectPath from './helpers/RectPath.svelte';
 
     type RectMarkProps = BaseMarkProps & {
         data: DataRecord[];
@@ -57,31 +58,16 @@
                     {@const maxy = Math.max(y1, y2)}
                     {@const minx = Math.min(x1, x2)}
                     {@const maxx = Math.max(x1, x2)}
-                    {@const inset = resolveProp(args.inset, d.datum, 0)}
-                    {@const insetLeft = resolveProp(args.insetLeft, d.datum)}
-                    {@const insetRight = resolveProp(args.insetRight, d.datum)}
-                    {@const insetTop = resolveProp(args.insetTop, d.datum)}
-                    {@const insetBottom = resolveProp(args.insetBottom, d.datum)}
-                    {@const insetL = maybeNumber(coalesce(insetLeft, inset, 0)) ?? 0}
-                    {@const insetT = maybeNumber(coalesce(insetTop, inset, 0)) ?? 0}
-                    {@const insetR = maybeNumber(coalesce(insetRight, inset, 0)) ?? 0}
-                    {@const insetB = maybeNumber(coalesce(insetBottom, inset, 0)) ?? 0}
 
-                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
-                    <rect
-                        class={[scaledData.length === 1 && className, styleClass]}
-                        {style}
-                        x={minx + insetL}
-                        y={miny + insetT}
-                        width={maxx - minx - insetL - insetR}
-                        height={maxy - miny - insetT - insetB}
-                        rx={resolveProp(args.rx, d.datum, null)}
-                        ry={resolveProp(args.ry, d.datum, null)}
-                        use:addEventHandlers={{
-                            getPlotState,
-                            options: args,
-                            datum: d.datum
-                        }} />
+                    <RectPath
+                        datum={d}
+                        class={scaledData.length === 1 ? className : null}
+                        x={minx}
+                        y={miny}
+                        width={maxx - minx}
+                        height={maxy - miny}
+                        options={args}
+                        {usedScales} />
                 {/if}
             {/each}
         </GroupMultiple>

package/dist/marks/helpers/DotCanvas.svelte

@@ -14,6 +14,7 @@
     import CanvasLayer from './CanvasLayer.svelte';
     import { getContext } from 'svelte';
     import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { resolveColor } from './canvas';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -46,19 +47,8 @@
                     if (datum.valid) {
                         let { fill, stroke } = datum;
 
-                        if (`${fill}`.toLowerCase() === 'currentcolor')
-                            fill = getComputedStyle(
-                                canvas?.parentElement?.parentElement
-                            ).getPropertyValue('color');
-                        if (`${stroke}`.toLowerCase() === 'currentcolor')
-                            stroke = getComputedStyle(
-                                canvas?.parentElement?.parentElement
-                            ).getPropertyValue('color');
-
-                        if (CSS_VAR.test(fill))
-                            fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
-                        if (CSS_VAR.test(stroke))
-                            stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
+                        fill = resolveColor(fill, canvas);
+                        stroke = resolveColor(stroke, canvas);
 
                         if (stroke && stroke !== 'none') {
                             const strokeWidth = resolveProp(

package/dist/marks/helpers/LineCanvas.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import type {
+        Mark,
+        BaseMarkProps,
+        PlotContext,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types.js';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import { getContext } from 'svelte';
+    import { type Line } from 'd3-shape';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { resolveColor } from './canvas';
+
+    let {
+        mark,
+        groupedLineData,
+        usedScales,
+        linePath
+    }: {
+        mark: Mark<BaseMarkProps>;
+        groupedLineData: ScaledDataRecord[][];
+        usedScales: UsedScales;
+        linePath: Line<ScaledDataRecord>;
+        groupByKey?: unknown;
+    } = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    function maybeOpacity(value: unknown) {
+        return value == null ? 1 : +value;
+    }
+
+    const render = ((canvas: HTMLCanvasElement) => {
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (context) {
+                linePath.context(context);
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+                context.lineJoin = 'round';
+                context.lineCap = 'round';
+
+                for (const group of groupedLineData) {
+                    if (group.length < 2) continue;
+
+                    // Get the first point to determine line styles
+                    const firstPoint = group[0];
+                    if (!firstPoint || !firstPoint.valid) continue;
+
+                    let { stroke, ...restStyles } = resolveScaledStyleProps(
+                        firstPoint.datum,
+                        mark.options,
+                        usedScales,
+                        plot,
+                        'stroke'
+                    );
+
+                    const opacity = maybeOpacity(restStyles['opacity']);
+                    const strokeOpacity = maybeOpacity(restStyles['stroke-opacity']);
+
+                    const strokeWidth = resolveProp(
+                        mark.options.strokeWidth,
+                        firstPoint.datum,
+                        1.4
+                    ) as number;
+
+                    if (mark.options.outlineStroke) {
+                        // draw stroke outline first
+                        const outlineStroke = resolveColor(mark.options.outlineStroke, canvas);
+                        const outlineStrokeWidth =
+                            mark.options.outlineStrokeWidth ?? strokeWidth + 2;
+                        const outlineStrokeOpacity = mark.options.outlineStrokeOpacity ?? 1;
+
+                        context.lineWidth = outlineStrokeWidth;
+                        context.strokeStyle = outlineStroke;
+                        context.globalAlpha = opacity * outlineStrokeOpacity;
+                        context.beginPath();
+                        linePath(group);
+                        context.stroke();
+                    }
+
+                    stroke = resolveColor(stroke, canvas);
+
+                    if (stroke && stroke !== 'none') {
+                        context.lineWidth = strokeWidth ?? 1.4;
+                    }
+
+                    context.strokeStyle = stroke ? stroke : 'currentColor';
+                    context.globalAlpha = opacity * strokeOpacity;
+
+                    // Start drawing the line
+                    context.beginPath();
+                    linePath(group);
+                    context.stroke();
+                }
+                linePath.context(null);
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    }) as Attachment;
+</script>
+
+<CanvasLayer {@attach render} />

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

@@ -0,0 +1,12 @@
+import type { Mark, BaseMarkProps, ScaledDataRecord, UsedScales } from '../../types.js';
+import { type Line } from 'd3-shape';
+type $$ComponentProps = {
+    mark: Mark<BaseMarkProps>;
+    groupedLineData: ScaledDataRecord[][];
+    usedScales: UsedScales;
+    linePath: Line<ScaledDataRecord>;
+    groupByKey?: unknown;
+};
+declare const LineCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
+type LineCanvas = ReturnType<typeof LineCanvas>;
+export default LineCanvas;

package/dist/marks/helpers/LinearGradientX.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import type { PlotContext, RawValue } from '../../types';
+
+    let {
+        id,
+        stops
+    }: {
+        id: string;
+        stops: { x: RawValue; color: string }[];
+    } = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const projectedStops = $derived(
+        stops
+            .map((d) => ({ ...d, px: plot.scales.x.fn(d.x) / plot.width }))
+            .sort((a, b) => a.px - b.px)
+    );
+</script>
+
+<linearGradient {id} gradientUnits="userSpaceOnUse" x1={0} y2={0} y1={0} x2={plot.width}>
+    {#each projectedStops as { px, color }}
+        <stop stop-color={color} offset={px} />
+    {/each}
+</linearGradient>

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

@@ -0,0 +1,11 @@
+import type { RawValue } from '../../types';
+type $$ComponentProps = {
+    id: string;
+    stops: {
+        x: RawValue;
+        color: string;
+    }[];
+};
+declare const LinearGradientX: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinearGradientX = ReturnType<typeof LinearGradientX>;
+export default LinearGradientX;

package/dist/marks/helpers/LinearGradientY.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import type { PlotContext, RawValue } from '../../types';
+
+    let {
+        id,
+        stops
+    }: {
+        id: string;
+        stops: { y: RawValue; color: string }[];
+    } = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const projectedStops = $derived(
+        stops
+            .map((d) => ({ ...d, py: plot.scales.y.fn(d.y) / plot.height }))
+            .sort((a, b) => a.py - b.py)
+    );
+</script>
+
+<linearGradient {id} gradientUnits="userSpaceOnUse" x1={0} x2={0} y1={0} y2={plot.height}>
+    {#each projectedStops as { py, color }}
+        <stop stop-color={color} offset={py} />
+    {/each}
+</linearGradient>

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

@@ -0,0 +1,11 @@
+import type { RawValue } from '../../types';
+type $$ComponentProps = {
+    id: string;
+    stops: {
+        y: RawValue;
+        color: string;
+    }[];
+};
+declare const LinearGradientY: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinearGradientY = ReturnType<typeof LinearGradientY>;
+export default LinearGradientY;

package/dist/marks/helpers/RectPath.svelte

@@ -0,0 +1,129 @@
+<!-- @component
+Helper component for rendering rectangular marks in SVG
+-->
+<script lang="ts">
+    import { resolveProp, resolveStyles } from '../../helpers/resolve';
+    import { roundedRect } from '../../helpers/roundedRect';
+    import type {
+        BaseMarkProps,
+        BaseRectMarkProps,
+        BorderRadius,
+        ScaledDataRecord,
+        UsedScales,
+        PlotContext
+    } from '../../types';
+    import { addEventHandlers } from './events';
+    import { getContext } from 'svelte';
+
+    let {
+        datum,
+        options,
+        class: className = null,
+        x,
+        y,
+        width,
+        height,
+        useInsetAsFallbackVertically = true,
+        useInsetAsFallbackHorizontally = true,
+        usedScales
+    }: {
+        datum: ScaledDataRecord;
+        class: string | null;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        options: BaseRectMarkProps & BaseMarkProps;
+        /**
+         * By default, the `inset` property is applied to all four insets. Mark components
+         * can tweak this behavior for insetTop and insetBottom by setting the
+         * useInsetAsFallbackVertically prop to false.
+         */
+        useInsetAsFallbackVertically?: boolean;
+        /**
+         * By default, the `inset` property is applied to all four insets. Mark components
+         * can tweak this behavior for insetLeft and insetRight by setting the
+         * useInsetAsFallbackHorizontally prop to false.
+         */
+        useInsetAsFallbackHorizontally?: boolean;
+        usedScales: UsedScales;
+    } = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const dx = $derived(+(resolveProp(options.dx, datum.datum, 0) as number));
+    const dy = $derived(+(resolveProp(options.dy, datum.datum, 0) as number));
+    const inset = $derived(+(resolveProp(options.inset, datum.datum, 0) as number));
+    const insetLeft = $derived(
+        +(resolveProp(
+            options.insetLeft,
+            datum.datum,
+            useInsetAsFallbackHorizontally ? inset : 0
+        ) as number)
+    );
+    const insetRight = $derived(
+        +(resolveProp(
+            options.insetRight,
+            datum.datum,
+            useInsetAsFallbackHorizontally ? inset : 0
+        ) as number)
+    );
+    const insetTop = $derived(
+        +(resolveProp(
+            options.insetTop,
+            datum.datum,
+            useInsetAsFallbackVertically ? inset : 0
+        ) as number)
+    );
+    const insetBottom = $derived(
+        +(resolveProp(
+            options.insetBottom,
+            datum.datum,
+            useInsetAsFallbackVertically ? inset : 0
+        ) as number)
+    );
+    const borderRadius = $derived((options.borderRadius ?? 0) as BorderRadius);
+    const hasBorderRadius = $derived(
+        (typeof borderRadius === 'number' && borderRadius > 0) ||
+            (typeof borderRadius === 'object' &&
+                Math.max(
+                    borderRadius.topRight ?? 0,
+                    borderRadius.bottomRight ?? 0,
+                    borderRadius.topLeft ?? 0,
+                    borderRadius.bottomLeft ?? 0
+                ) > 0)
+    );
+    const [style, styleClass] = $derived(resolveStyles(plot, datum, options, 'fill', usedScales));
+</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}

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

@@ -0,0 +1,27 @@
+import type { BaseMarkProps, BaseRectMarkProps, ScaledDataRecord, UsedScales } from '../../types';
+type $$ComponentProps = {
+    datum: ScaledDataRecord;
+    class: string | null;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    options: BaseRectMarkProps & BaseMarkProps;
+    /**
+     * By default, the `inset` property is applied to all four insets. Mark components
+     * can tweak this behavior for insetTop and insetBottom by setting the
+     * useInsetAsFallbackVertically prop to false.
+     */
+    useInsetAsFallbackVertically?: boolean;
+    /**
+     * By default, the `inset` property is applied to all four insets. Mark components
+     * can tweak this behavior for insetLeft and insetRight by setting the
+     * useInsetAsFallbackHorizontally prop to false.
+     */
+    useInsetAsFallbackHorizontally?: boolean;
+    usedScales: UsedScales;
+};
+/** Helper component for rendering rectangular marks in SVG */
+declare const RectPath: import("svelte").Component<$$ComponentProps, {}, "">;
+type RectPath = ReturnType<typeof RectPath>;
+export default RectPath;

package/dist/marks/helpers/canvas.d.ts

@@ -0,0 +1 @@
+export declare function resolveColor(color: string, canvas: HTMLCanvasElement): string | CanvasGradient;

package/dist/marks/helpers/canvas.js

@@ -0,0 +1,34 @@
+import { CSS_URL, CSS_VAR } from "../../constants";
+export function resolveColor(color, canvas) {
+    if (`${color}`.toLowerCase() === 'currentcolor') {
+        color = getComputedStyle(canvas?.parentElement?.parentElement).getPropertyValue('color');
+    }
+    if (CSS_VAR.test(color)) {
+        color = getComputedStyle(canvas).getPropertyValue(color.slice(4, -1));
+    }
+    if (CSS_URL.test(color)) {
+        // might be a gradient we can parse!
+        const m = color.match(/^url\((#[^\)]+)\)/);
+        const gradientId = m[1];
+        const gradient = canvas.ownerDocument.querySelector(gradientId);
+        if (gradient) {
+            // parse gradient
+            if (gradient.nodeName.toLowerCase() === 'lineargradient') {
+                const x0 = +gradient.getAttribute('x1');
+                const x1 = +gradient.getAttribute('x2');
+                const y0 = +gradient.getAttribute('y1');
+                const y1 = +gradient.getAttribute('y2');
+                const ctxGradient = canvas
+                    .getContext('2d')
+                    .createLinearGradient(x0, y0, x1, y1);
+                for (const stop of gradient.querySelectorAll('stop')) {
+                    const offset = +stop.getAttribute('offset');
+                    const color = resolveColor(stop.getAttribute('stop-color'), canvas);
+                    ctxGradient.addColorStop(offset, color);
+                }
+                return ctxGradient;
+            }
+        }
+    }
+    return color;
+}

package/dist/types.d.ts

@@ -555,14 +555,19 @@ export type BaseMarkProps = Partial<{
     class: string;
     cursor: ConstantAccessor<CSS.Property.Cursor>;
 }>;
+export type BorderRadius = number | {
+    topLeft?: number;
+    topRight?: number;
+    bottomRight?: number;
+    bottomLeft?: number;
+};
 export type BaseRectMarkProps = {
-    rx?: ConstantAccessor<number>;
-    ry?: ConstantAccessor<number>;
     inset?: ConstantAccessor<number>;
     insetLeft?: ConstantAccessor<number>;
     insetTop?: ConstantAccessor<number>;
     insetRight?: ConstantAccessor<number>;
     insetBottom?: ConstantAccessor<number>;
+    borderRadius?: BorderRadius;
 };
 export type Channels = Record<string, ChannelAccessor | ConstantAccessor<string | number | boolean | symbol>>;
 export type TransformArg<K> = Channels & {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -87,6 +87,7 @@
         "svelte-check": "^4.2.1",
         "svelte-eslint-parser": "1.2.0",
         "svelte-highlight": "^7.8.3",
+        "svg-path-parser": "^1.1.0",
         "topojson-client": "^3.1.0",
         "tslib": "^2.8.1",
         "typedoc": "^0.28.4",