svelteplot 0.2.0 → 0.2.2

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

@@ -13,3 +13,4 @@ export declare function recordizeY({ data, ...channels }: TransformArgsRow, { wi
  * the rest of our code doesn't have to deal with this case anymore.
  */
 export declare function recordizeXY({ data, ...channels }: TransformArgsRow): TransformArgsRecord;
+export declare function recordize({ data, ...channels }: TransformArgsRow): TransformArgsRecord;

package/dist/transforms/recordize.js

@@ -11,13 +11,12 @@ export function recordizeX({ data, ...channels }, { withIndex } = { withIndex: t
         return {
             data: data.map((value, index) => ({
                 __value: value,
-                ...(withIndex ? { __index: index } : {}),
+                ...(withIndex ? { [INDEX]: index } : {}),
                 [RAW_VALUE]: value,
-                ___orig___: value
             })),
             ...channels,
-            x: '__value',
-            ...(withIndex ? { y: '__index' } : {})
+            x: RAW_VALUE,
+            ...(withIndex ? { y: INDEX } : {})
         };
     }
     return { data: data, ...channels };
@@ -35,7 +34,6 @@ export function recordizeY({ data, ...channels }, { withIndex } = { withIndex: t
             data: Array.from(data).map((value, index) => ({
                 ...(withIndex ? { __index: index } : {}),
                 [RAW_VALUE]: value,
-                ___orig___: value
             })),
             ...channels,
             ...(withIndex ? { x: '__index' } : {}),
@@ -76,3 +74,16 @@ export function recordizeXY({ data, ...channels }) {
     }
     return { data, ...channels };
 }
+export function recordize({ data, ...channels }) {
+    if (!data)
+        return { data, ...channels };
+    if (!isDataRecord(data[0])) {
+        return {
+            data: data.map((d) => ({
+                [RAW_VALUE]: d,
+            })),
+            ...channels,
+        };
+    }
+    return { data, ...channels };
+}

package/dist/transforms/stack.js

@@ -2,6 +2,9 @@ import isDataRecord from '../helpers/isDataRecord.js';
 import { resolveChannel } from '../helpers/resolve.js';
 import { stack, stackOffsetExpand, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAppearance, stackOrderAscending, stackOrderInsideOut, stackOrderNone, stackOffsetDiverging } from 'd3-shape';
 import { index, union, groups as d3Groups } from 'd3-array';
+import { RAW_VALUE } from './recordize';
+const GROUP = Symbol('group');
+const FACET = Symbol('group');
 const DEFAULT_STACK_OPTIONS = {
     order: null,
     offset: null,
@@ -39,8 +42,8 @@ function stackXY(byDim, data, channels, options) {
         const resolvedData = data.map((d) => ({
             ...(isDataRecord(d) ? d : { __orig: d }),
             [`__${secondDim}`]: resolveChannel(secondDim, d, channels),
-            __group: groupBy === true ? 'G' : resolveChannel(groupBy, d, channels),
-            __facet: groupFacetsBy.length > 0
+            [GROUP]: groupBy === true ? 'G' : resolveChannel(groupBy, d, channels),
+            [FACET]: groupFacetsBy.length > 0
                 ? groupFacetsBy
                     .map((channel) => String(resolveChannel(channel, d, channels)))
                     .join('---')
@@ -51,11 +54,11 @@ function stackXY(byDim, data, channels, options) {
         const out = [];
         // first we group the dataset by facets to avoid stacking of rows that are
         // in separate panels
-        const groups = d3Groups(resolvedData, (d) => d.__facet);
+        const groups = d3Groups(resolvedData, (d) => d[FACET]);
         for (const [, facetData] of groups) {
             // now we index the data on the second dimension, e.g. over x
             // when stacking over y
-            const indexed = index(facetData, (d) => d[`__${secondDim}`], (d) => d.__group);
+            const indexed = index(facetData, (d) => d[`__${secondDim}`], (d) => d[GROUP]);
             const stackOrder = (series) => {
                 const f = STACK_ORDER[options.order || 'none'];
                 return options.reverse ? f(series).reverse() : f(series);
@@ -64,7 +67,7 @@ function stackXY(byDim, data, channels, options) {
             const series = stack()
                 .order(stackOrder)
                 .offset(STACK_OFFSET[options.offset])
-                .keys(union(facetData.map((d) => d.__group)))
+                .keys(union(facetData.map((d) => d[GROUP])))
                 .value(([, group], key) => (group.get(key) ? group.get(key)[`__${byDim}`] : 0))(indexed);
             // and combine it all back into a flat array
             const newData = series
@@ -75,8 +78,8 @@ function stackXY(byDim, data, channels, options) {
                     .map((d) => {
                     const datum = d.data[1].get(groupKey);
                     // cleanup our internal keys
-                    delete datum.__group;
-                    delete datum.__facet;
+                    delete datum[GROUP];
+                    delete datum[FACET];
                     return { ...datum, [`__${byLow}`]: d[0], [`__${byHigh}`]: d[1] };
                 });
             })

package/dist/types.d.ts

@@ -246,11 +246,11 @@ export type PlotOptions = {
     /**
      * Options for the shared radius scale
      */
-    r: ScaleOptions;
+    r: Partial<ScaleOptions>;
     color: Partial<ColorScaleOptions>;
-    opacity: ScaleOptions;
-    symbol: LegendScaleOptions;
-    length: ScaleOptions;
+    opacity: Partial<ScaleOptions>;
+    symbol: Partial<LegendScaleOptions>;
+    length: Partial<ScaleOptions>;
     fx: Partial<ScaleOptions>;
     fy: Partial<ScaleOptions>;
     children: Snippet<[
@@ -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 & {
@@ -652,4 +657,5 @@ export type MapIndexObject = {
 };
 export type MapMethod = 'cumsum' | 'rank' | 'quantile' | ((I: number[], S: number[]) => number[]) | MapIndexObject;
 export type MapOptions = Partial<Record<ScaledChannelName, MapMethod>>;
+export type UsedScales = Record<ScaledChannelName, boolean>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.0",
+    "version": "0.2.2",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -47,15 +47,15 @@
     "devDependencies": {
         "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
         "@emotion/css": "^11.13.5",
-        "@sveltejs/adapter-auto": "^6.0.0",
+        "@sveltejs/adapter-auto": "^6.0.1",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/eslint-config": "^8.2.0",
-        "@sveltejs/kit": "^2.20.8",
+        "@sveltejs/kit": "^2.21.0",
         "@sveltejs/package": "^2.3.11",
         "@sveltejs/vite-plugin-svelte": "5.0.3",
-        "@sveltepress/theme-default": "^6.0.2",
-        "@sveltepress/twoslash": "^1.2.1",
-        "@sveltepress/vite": "^1.2.1",
+        "@sveltepress/theme-default": "^6.0.3",
+        "@sveltepress/twoslash": "^1.2.2",
+        "@sveltepress/vite": "^1.2.2",
         "@testing-library/svelte": "^5.2.7",
         "@testing-library/user-event": "^14.6.1",
         "@types/d3-array": "^3.2.1",
@@ -68,32 +68,34 @@
         "@types/d3-scale": "^4.0.9",
         "@types/d3-scale-chromatic": "^3.1.0",
         "@types/d3-shape": "^3.1.7",
-        "@typescript-eslint/eslint-plugin": "^8.31.1",
-        "@typescript-eslint/parser": "^8.31.1",
+        "@typescript-eslint/eslint-plugin": "^8.32.1",
+        "@typescript-eslint/parser": "^8.32.1",
         "csstype": "^3.1.3",
         "d3-dsv": "^3.0.1",
         "d3-fetch": "^3.0.1",
         "d3-force": "^3.0.0",
         "eslint": "^9.26.0",
-        "eslint-config-prettier": "^10.1.2",
-        "eslint-plugin-svelte": "3.5.1",
+        "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-svelte": "3.7.0",
         "jsdom": "^26.1.0",
         "prettier": "^3.5.3",
-        "prettier-plugin-svelte": "^3.3.3",
+        "prettier-plugin-svelte": "^3.4.0",
         "remark-code-extra": "^1.0.1",
         "remark-code-frontmatter": "^1.0.0",
         "resize-observer-polyfill": "^1.5.1",
-        "sass": "^1.87.0",
-        "svelte-check": "^4.1.7",
-        "svelte-eslint-parser": "1.1.3",
+        "sass": "^1.89.0",
+        "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",
         "typedoc-plugin-markdown": "^4.6.3",
         "typescript": "^5.8.3",
-        "vite": "^6.3.4",
-        "vitest": "^3.1.2"
+        "vite": "^6.3.5",
+        "vitest": "^3.1.3",
+        "vitest-matchmedia-mock": "^2.0.3"
     },
     "types": "./dist/index.d.ts",
     "type": "module",
@@ -114,6 +116,6 @@
         "es-toolkit": "^1.37.2",
         "fast-equals": "^5.2.2",
         "merge-deep": "^3.0.3",
-        "svelte": "5.28.2"
+        "svelte": "5.30.1"
     }
 }