svelteplot 0.1.3-next.7 → 0.1.3-next.8

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,
@@ -78,6 +78,8 @@
         }
     }
 
+    
+
     const mark = new Mark(type);
 
     $effect(() => {
@@ -126,7 +128,7 @@
     const testFacet = $derived(getTestFacet());
 
     const resolvedData: ResolvedDataRecord[] = $derived(
-        data.flatMap((row) => {
+        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 = {

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
      */
@@ -158,7 +156,7 @@
             explicitDomains,
             hasProjection: !!initialOpts.projection,
             margins: initialOpts.margins,
-            inset: initialOpts.inset
+            inset: initialOpts.inset, 
         })
     );
 

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/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/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.8",
     "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"
     }
 }