svelteplot 0.1.3-next.7 → 0.1.3-next.9

package/dist/Mark.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { getContext, untrack, type Snippet } from 'svelte';
 
-    import { CHANNEL_SCALE } from './constants.js';
+    import { CHANNEL_SCALE, INDEX } from './constants.js';
     import type {
         ScaledChannelName,
         MarkType,
@@ -126,24 +126,26 @@
     const testFacet = $derived(getTestFacet());
 
     const resolvedData: ResolvedDataRecord[] = $derived(
-        data.flatMap((row) => {
-            const channels = options as Record<ChannelName, ChannelAccessor>;
-            if (!testFacet(row, channels) || !testFilter(row, channels)) return [];
-            const out: ResolvedDataRecord = {
-                datum: row
-            };
-            for (const [channel] of Object.entries(CHANNEL_SCALE) as [
-                ScaledChannelName,
-                ScaleName
-            ][]) {
-                // check if the mark has defined an accessor for this channel
-                if (options?.[channel] !== undefined && out[channel] === undefined) {
-                    // resolve value
-                    out[channel] = resolveChannel(channel, row, options);
+        data
+            .map((d, i) => ({ ...d, [INDEX]: i }))
+            .flatMap((row) => {
+                const channels = options as Record<ChannelName, ChannelAccessor>;
+                if (!testFacet(row, channels) || !testFilter(row, channels)) return [];
+                const out: ResolvedDataRecord = {
+                    datum: row
+                };
+                for (const [channel] of Object.entries(CHANNEL_SCALE) as [
+                    ScaledChannelName,
+                    ScaleName
+                ][]) {
+                    // check if the mark has defined an accessor for this channel
+                    if (options?.[channel] !== undefined && out[channel] === undefined) {
+                        // resolve value
+                        out[channel] = resolveChannel(channel, row, options);
+                    }
                 }
-            }
-            return [out];
-        })
+                return [out];
+            })
     );
 
     let prevResolvedData: ResolvedDataRecord[] = [];
@@ -156,7 +158,6 @@
         }
     });
 
-     
     function isDifferent(array1: ResolvedDataRecord[], array2: ResolvedDataRecord[]) {
         if (array1.length !== array2.length) return true;
         for (let i = 0; i < array1.length; i++) {

package/dist/constants.d.ts

@@ -12,3 +12,4 @@ export declare const CSS_COLOR_MIX: RegExp;
 export declare const CSS_COLOR_CONTRAST: RegExp;
 export declare const CSS_RGBA: RegExp;
 export declare const CSS_URL: RegExp;
+export declare const INDEX: unique symbol;

package/dist/constants.js

@@ -94,6 +94,7 @@ export const CSS_COLOR_MIX = /^color-mix\(/; // just check for prefix
 export const CSS_COLOR_CONTRAST = /^color-contrast\(/; // just check for prefix
 export const CSS_RGBA = /^rgba\(/; // just check for prefix
 export const CSS_URL = /^url\(#/; // just check for prefix
+export const INDEX = Symbol('index');
 // export const CHANNEL_MAP: Record<ScaleName, ValueOf<typeof SCALE_TYPES>> = {
 // 	x: SCALE_TYPES.x,
 // 	y: SCALE_TYPES.y,

package/dist/core/Plot.svelte

@@ -108,8 +108,6 @@
         inset?: number;
     };
 
-    let scaleCounter = $state(0);
-
     /**
      * the marks used in the plot
      */
@@ -177,7 +175,9 @@
 
     const hasProjection = $derived(!!preScales.projection);
 
-    const plotWidth = $derived((fixedWidth || width) - plotOptions.marginLeft - plotOptions.marginRight);
+    const plotWidth = $derived(
+        (fixedWidth || width) - plotOptions.marginLeft - plotOptions.marginRight
+    );
 
     // the facet and y domain counts are used for computing the automatic height
     const xFacetCount = $derived(Math.max(1, preScales.fx.domain.length));

package/dist/helpers/index.js

@@ -1,5 +1,6 @@
 import { resolveProp } from './resolve.js';
 import { isDate } from './typeChecks';
+import { RAW_VALUE } from '../transforms/recordize.js';
 /**
  * Returns first argument that is not null or undefined
  */
@@ -12,7 +13,8 @@ export function coalesce(...args) {
     return null; // Return null if all arguments are null or undefined
 }
 export function testFilter(datum, options) {
-    return options.filter == null || resolveProp(options.filter, datum);
+    return (options.filter == null ||
+        resolveProp(options.filter, datum?.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum));
 }
 export function randomId() {
     return Math.ceil(1e9 + Math.random() * 1e9).toString(36);

package/dist/helpers/scales.js

@@ -147,7 +147,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         valueArr.sort(ascending);
     }
     const domain = scaleOptions.domain
-        ? scaleOptions.domain
+        ? extent(scaleOptions.zero ? [0, ...scaleOptions.domain] : scaleOptions.domain)
         : type === 'band' ||
             type === 'point' ||
             type === 'ordinal' ||

package/dist/marks/BarX.svelte

@@ -46,6 +46,8 @@
             stack
         )
     );
+
+    $inspect({ args });
 </script>
 
 <Mark
@@ -71,7 +73,7 @@
                         transform="translate({[minx + dx, d.y + inset + dy - bw * 0.5]})"
                         use:addEventHandlers={{
                             getPlotState,
-                            options: mark.options,
+                            options: args,
                             datum: d.datum
                         }} />
                 {/if}

package/dist/marks/BarY.svelte

@@ -85,7 +85,7 @@
                         transform="translate({[d.x + inset + dx - bw * 0.5, miny + dy]})"
                         use:addEventHandlers={{
                             getPlotState,
-                            options: mark.options,
+                            options: args,
                             datum: d.datum
                         }} />
                 {/if}

package/dist/marks/Cell.svelte

@@ -93,7 +93,7 @@
                         ]})"
                         use:addEventHandlers={{
                             getPlotState,
-                            options: mark.options,
+                            options: args,
                             datum: d.datum
                         }} />
                 {/if}

package/dist/marks/Dot.svelte

@@ -123,7 +123,7 @@
                             {style}
                             use:addEventHandlers={{
                                 getPlotState,
-                                options: mark.options,
+                                options: args,
                                 datum: d.datum
                             }} />
                     {/if}

package/dist/marks/Frame.svelte

@@ -14,10 +14,17 @@
     let { automatic, class: className = null, ...options }: FrameMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let dx = $derived(resolveProp(options.dx, null, 0));
-    let dy = $derived(resolveProp(options.dy, null, 0));
+    const dx = $derived(resolveProp(options.dx, null, 0));
+    const dy = $derived(resolveProp(options.dy, null, 0));
+
+    const {
+        insetLeft = options.inset || 0,
+        insetTop = options.inset || 0,
+        insetRight = options.inset || 0,
+        insetBottom = options.inset || 0
+    } = $derived(options);
 </script>
 
 <Mark type="frame" {automatic}>
@@ -25,12 +32,12 @@
         class={['frame', className]}
         transform={dx || dy ? `translate(${dx},${dy})` : null}
         style={resolveScaledStyles({}, options, {}, plot, 'stroke')}
-        x={plot.options.marginLeft}
-        y={plot.options.marginTop}
+        x={plot.options.marginLeft + +insetLeft}
+        y={plot.options.marginTop + +insetTop}
         rx={resolveProp(options.rx, null, null)}
         ry={resolveProp(options.ry, null, null)}
-        width={plot.facetWidth}
-        height={plot.facetHeight}
+        width={plot.facetWidth - (insetLeft || 0) - (insetRight || 0)}
+        height={plot.facetHeight - (insetBottom || 0) - (insetTop || 0)}
         use:addEventHandlers={{ getPlotState, options: options, datum: {} }} />
 </Mark>
 

package/dist/marks/Geo.svelte

@@ -79,7 +79,7 @@
                                 )}
                                 use:addEventHandlers={{
                                     getPlotState,
-                                    options: mark.options,
+                                    options: args,
                                     datum
                                 }}>
                                 {#if title}<title>{title}</title>{/if}

package/dist/marks/Link.svelte

@@ -156,7 +156,7 @@
                     )}
 
                     <MarkerPath
-                        {mark}
+                        mark={{ ...mark, options: args }}
                         scales={plot.scales}
                         markerStart={args.markerStart}
                         markerEnd={args.markerEnd}

package/dist/marks/Text.svelte

@@ -131,8 +131,13 @@
                     {@const [style, styleClass] = resolveStyles(
                         plot,
                         { ...d, __tspanIndex: 0 },
-                        { fontSize: 12, fontWeight: 500, strokeWidth: 1.6,
-                            textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle', ...args },
+                        {
+                            fontSize: 12,
+                            fontWeight: 500,
+                            strokeWidth: 1.6,
+                            textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle',
+                            ...args
+                        },
                         'fill',
                         usedScales
                     )}
@@ -156,8 +161,11 @@
                                             fontSize
                                 )
                             ]})"
-                            >{#each textLines as line, l}<tspan x="0" dy={l ? fontSize : 0} class={styleClass} {style}
-                                    >{line}</tspan
+                            >{#each textLines as line, l}<tspan
+                                    x="0"
+                                    dy={l ? fontSize : 0}
+                                    class={styleClass}
+                                    {style}>{line}</tspan
                                 >{/each}{#if title}<title>{title}</title>{/if}</text>
                     {:else}
                         <!-- singleline text-->

package/dist/marks/Vector.svelte

@@ -48,6 +48,7 @@
     import Mark from '../Mark.svelte';
     //import DotCanvas from './helpers/DotCanvas.svelte';
     import { maybeData, testFilter, isValid } from '../helpers/index.js';
+    import { addEventHandlers } from './helpers/events.js';
 
     const defaultRadius = 3.5;
 
@@ -198,6 +199,11 @@
                                   ? `translate(0, ${d.length})`
                                   : `translate(0, ${d.length / 2})`}"
                             {style}
+                            use:addEventHandlers={{
+                                getPlotState,
+                                options: args,
+                                datum: d.datum
+                            }}
                             class={[styleClass]} />
                     {/if}
                 {/each}

package/dist/marks/helpers/events.js

@@ -1,4 +1,6 @@
-import { pick } from 'es-toolkit';
+import { invert, pick } from 'es-toolkit';
+import { RAW_VALUE } from '../../transforms/recordize.js';
+import { INDEX } from '../../constants.js';
 export function addEventHandlers(node, { options, datum, getPlotState }) {
     const events = pick(options, [
         'onclick',
@@ -38,13 +40,11 @@ export function addEventHandlers(node, { options, datum, getPlotState }) {
                         origEvent.dataY = y;
                     }
                     else {
-                        origEvent.dataX =
-                            scales.x.fn.invert && scales.x.fn.invert(origEvent.layerX);
-                        origEvent.dataY =
-                            scales.y.fn.invert && scales.y.fn.invert(origEvent.layerY);
+                        origEvent.dataX = invertScale(scales.x, origEvent.layerX);
+                        origEvent.dataY = invertScale(scales.y, origEvent.layerY);
                     }
                 }
-                eventHandler(origEvent, datum.___orig___ !== undefined ? datum.___orig___ : datum);
+                eventHandler(origEvent, datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum, datum[INDEX]);
             };
             listeners.set(eventName, wrappedHandler);
             node.addEventListener(eventName.substring(2), wrappedHandler);
@@ -62,3 +62,13 @@ export function addEventHandlers(node, { options, datum, getPlotState }) {
         }
     };
 }
+function invertScale(scale, position) {
+    if (scale.type === 'band') {
+        // invert band scale since scaleBand doesn't have an invert function
+        const eachBand = scale.fn.step();
+        console.log({ eachBand, position });
+        const index = Math.floor(position / eachBand);
+        return scale.fn.domain()[index];
+    }
+    return scale.fn.invert ? scale.fn.invert(position) : undefined;
+}

package/dist/transforms/recordize.d.ts

@@ -1,4 +1,5 @@
 import type { TransformArgsRow, TransformArgsRecord } from '../types.js';
+export declare const RAW_VALUE: unique symbol;
 export declare function recordizeX({ data, ...channels }: TransformArgsRow, { withIndex }?: {
     withIndex: boolean;
 }): TransformArgsRecord;

package/dist/transforms/recordize.js

@@ -1,4 +1,5 @@
 import isDataRecord from '../helpers/isDataRecord.js';
+export const RAW_VALUE = Symbol();
 /*
  * This transform takes an array of raw values as input and returns data records
  * in which the values are interpreted as x channel and their index as y
@@ -10,6 +11,8 @@ export function recordizeX({ data, ...channels }, { withIndex } = { withIndex: t
             data: data.map((value, index) => ({
                 __value: value,
                 ...(withIndex ? { __index: index } : {}),
+                [RAW_VALUE]: value,
+                // TODO: remove ___orig___ references
                 ___orig___: value
             })),
             ...channels,
@@ -32,6 +35,7 @@ export function recordizeY({ data, ...channels }, { withIndex } = { withIndex: t
             data: Array.from(data).map((value, index) => ({
                 __value: value,
                 ...(withIndex ? { __index: index } : {}),
+                [RAW_VALUE]: value,
                 ___orig___: value
             })),
             ...channels,

package/dist/transforms/sort.d.ts

@@ -1,10 +1,10 @@
 import type { DataRecord, DataRow, TransformArg } from '../types.js';
+export declare const SORT_KEY: unique symbol;
 export declare function sort({ data, ...channels }: TransformArg<DataRecord>, options?: {
     reverse?: boolean;
 }): {
     sort: null;
     data: {
-        __sortkey: import("../types.js").RawValue;
         ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
     }[];
 } | {

package/dist/transforms/sort.js

@@ -2,6 +2,7 @@ import isDataRecord from '../helpers/isDataRecord.js';
 import { resolveChannel } from '../helpers/resolve.js';
 import { shuffler } from 'd3-array';
 import { randomLcg } from 'd3-random';
+export const SORT_KEY = Symbol('sortKey');
 export function sort({ data, ...channels }, options = {}) {
     if (!Array.isArray(data))
         return { data, ...channels };
@@ -16,11 +17,15 @@ export function sort({ data, ...channels }, options = {}) {
         // sort data
         return {
             data: data
-                .map((d) => ({ ...d, __sortkey: resolveChannel('sort', d, { ...channels, sort }) }))
-                .toSorted((a, b) => (a.__sortkey > b.__sortkey ? 1 : a.__sortkey < b.__sortkey ? -1 : 0) *
+                .map((d) => ({
+                ...d,
+                [SORT_KEY]: resolveChannel('sort', d, { ...channels, sort })
+            }))
+                .toSorted((a, b) => (a[SORT_KEY] > b[SORT_KEY] ? 1 : a[SORT_KEY] < b[SORT_KEY] ? -1 : 0) *
                 (options.reverse || (isDataRecord(sort) && sort?.order === 'descending')
                     ? -1
-                    : 1)),
+                    : 1))
+                .map(({ [SORT_KEY]: a, ...rest }) => rest),
             ...channels,
             // set the sort channel to null to disable the implicit alphabetical
             // ordering of ordinal domains, and also to avoid double sorting in case

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.1.3-next.7",
+    "version": "0.1.3-next.9",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -67,12 +67,12 @@
         "@types/d3-scale": "^4.0.9",
         "@types/d3-scale-chromatic": "^3.1.0",
         "@types/d3-shape": "^3.1.7",
-        "@typescript-eslint/eslint-plugin": "^8.30.1",
-        "@typescript-eslint/parser": "^8.30.1",
+        "@typescript-eslint/eslint-plugin": "^8.31.1",
+        "@typescript-eslint/parser": "^8.31.1",
         "d3-dsv": "^3.0.1",
         "d3-fetch": "^3.0.1",
         "d3-force": "^3.0.0",
-        "eslint": "^9.25.0",
+        "eslint": "^9.25.1",
         "eslint-config-prettier": "^10.1.2",
         "eslint-plugin-svelte": "3.5.1",
         "jsdom": "^26.1.0",
@@ -81,17 +81,17 @@
         "remark-code-extra": "^1.0.1",
         "remark-code-frontmatter": "^1.0.0",
         "resize-observer-polyfill": "^1.5.1",
-        "sass": "^1.86.3",
+        "sass": "^1.87.0",
         "svelte-check": "^4.1.6",
         "svelte-eslint-parser": "1.1.3",
         "svelte-highlight": "^7.8.3",
         "topojson-client": "^3.1.0",
         "tslib": "^2.8.1",
         "typedoc": "^0.28.3",
-        "typedoc-plugin-markdown": "^4.6.2",
+        "typedoc-plugin-markdown": "^4.6.3",
         "typescript": "^5.8.3",
-        "vite": "^6.3.2",
-        "vitest": "^3.1.1"
+        "vite": "^6.3.3",
+        "vitest": "^3.1.2"
     },
     "types": "./dist/index.d.ts",
     "type": "module",
@@ -109,9 +109,9 @@
         "d3-scale-chromatic": "^3.1.0",
         "d3-shape": "^3.2.0",
         "d3-time": "^3.1.0",
-        "es-toolkit": "^1.35.0",
+        "es-toolkit": "^1.36.0",
         "fast-equals": "^5.2.2",
         "merge-deep": "^3.0.3",
-        "svelte": "5.28.1"
+        "svelte": "5.28.2"
     }
 }