svelteplot 0.4.2-pr-194.1 → 0.4.2-pr-194.2

package/dist/helpers/index.js

@@ -13,8 +13,7 @@ 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, isObject(datum) && datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum));
+    return options.filter == null || resolveProp(options.filter, datum);
 }
 export function randomId() {
     return Math.ceil(1e9 + Math.random() * 1e9).toString(36);

package/dist/marks/AxisX.svelte

@@ -39,7 +39,7 @@
             | 'auto'
             | Intl.DateTimeFormatOptions
             | Intl.NumberFormatOptions
-            | ((d: RawValue) => string);
+            | ((d: RawValue, i: number) => string);
         tickClass?: ConstantAccessor<string, Datum>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | Datum[];

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

@@ -71,7 +71,7 @@ declare class __sveltets_Render<Datum extends RawValue> {
         tickFontSize?: ConstantAccessor<number, Datum>;
         titleFontSize?: number;
         tickPadding?: number;
-        tickFormat?: "auto" | Intl.NumberFormatOptions | Intl.DateTimeFormatOptions | ((d: RawValue) => string) | undefined;
+        tickFormat?: "auto" | Intl.NumberFormatOptions | Intl.DateTimeFormatOptions | ((d: RawValue, i: number) => string) | undefined;
         tickClass?: ConstantAccessor<string, Datum>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: string | number | Datum[] | undefined;

package/dist/marks/helpers/BaseAxisX.svelte

@@ -9,11 +9,14 @@
         ConstantAccessor,
         PlotState,
         RawValue,
+        ScaledDataRecord,
         ScaleType
     } from '../../types/index.js';
     import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
     import { max } from 'd3-array';
     import { randomId, testFilter } from '../../helpers/index.js';
+    import { INDEX } from '../../constants';
+    import { RAW_VALUE } from '../../transforms/recordize';
 
     type BaseAxisXProps = {
         scaleFn: (d: RawValue) => number;
@@ -76,11 +79,12 @@
     const positionedTicks = $derived.by(() => {
         let tickObjects = removeIdenticalLines(
             ticks.map((tick, i) => {
+                const datum = { [RAW_VALUE]: tick, [INDEX]: i };
                 return {
-                    value: tick,
+                    ...datum,
                     hidden: false,
-                    dx: +resolveProp(options.dx, tick, 0),
-                    dy: +resolveProp(options.dy, tick, 0),
+                    dx: +resolveProp(options.dx, datum, 0),
+                    dy: +resolveProp(options.dy, datum, 0),
                     x: scaleFn(tick) + (scaleType === 'band' ? scaleFn.bandwidth() * 0.5 : 0),
                     text: splitTick(tickFormat(tick, i)),
                     element: null as SVGTextElement | null
@@ -101,7 +105,7 @@
                 }
             }
         }
-        return tickObjects;
+        return tickObjects as ScaledDataRecord[];
     });
 
     $effect(() => {
@@ -114,11 +118,11 @@
                 max(
                     positionedTicks.map((tick, i) => {
                         if (
-                            resolveProp(options.anchor, tick.value, outsideTextAnchor) !==
+                            resolveProp(options.anchor, tick, outsideTextAnchor) !==
                             outsideTextAnchor
                         )
                             return 0;
-                        if (tick.hidden || !testFilter(tick.value, options)) return 0;
+                        if (tick.hidden || !testFilter(tick, options)) return 0;
                         if (tickTextElements[i])
                             return tickTextElements[i].getBoundingClientRect().height;
                         return 0;
@@ -148,8 +152,9 @@
 
 <g class="axis-x">
     {#each positionedTicks as tick, t (t)}
-        {#if testFilter(tick.value, options) && !tick.hidden}
-            {@const tickClass_ = resolveProp(tickClass, tick.value)}
+        {#if testFilter(tick, options) && !tick.hidden}
+            {@const tickClass_ = resolveProp(tickClass, tick)}
+            {@const tickFontSize_ = +resolveProp(tickFontSize, tick, 10)}
             <g
                 class="tick {tickClass_ || ''}"
                 transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
@@ -157,7 +162,7 @@
                 {#if tickSize}
                     {@const [tickLineStyle, tickLineClass] = resolveStyles(
                         plot,
-                        tick,
+                        { datum: tick },
                         options,
                         'stroke',
                         { x: true },
@@ -174,15 +179,15 @@
                     {@const prevTextLines = t && positionedTicks[t - 1].text}
 
                     {@const moveDown =
-                        (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
+                        (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize_ * 0.35 : 0)) *
                         (anchor === 'bottom' ? 1 : -1)}
                     {@const [textStyle, textClass] = resolveStyles(
                         plot,
-                        tick,
+                        { datum: tick },
                         {
                             fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
                             ...options,
-                            fontSize: tickFontSize,
+                            fontSize: tickFontSize_,
                             stroke: null
                         },
                         'fill',

package/dist/marks/helpers/BaseAxisY.svelte

@@ -6,10 +6,14 @@
     import type {
         AutoMarginStores,
         ConstantAccessor,
+        DataRecord,
         PlotState,
         RawValue,
+        ScaledDataRecord,
         ScaleType
     } from '../../types/index.js';
+    import { RAW_VALUE } from '../../transforms/recordize';
+    import { INDEX } from '../../constants';
 
     type BaseAxisYProps = {
         scaleFn: (d: RawValue) => number;
@@ -61,13 +65,14 @@
 
     const positionedTicks = $derived.by(() => {
         let tickObjects = ticks.map((tick, i) => {
+            const datum = { [RAW_VALUE]: tick, [INDEX]: i };
             return {
-                value: tick,
+                ...datum,
                 hidden: false,
-                dx: +resolveProp(options.dx, tick, 0),
-                dy: +resolveProp(options.dy, tick, 0),
+                dx: +resolveProp(options.dx, datum, 0),
+                dy: +resolveProp(options.dy, datum, 0),
                 y: scaleFn(tick) + (scaleType === 'band' ? scaleFn.bandwidth() * 0.5 : 0),
-                text: tickFormat(tick),
+                text: tickFormat(tick, i),
                 element: null as SVGTextElement | null
             };
         });
@@ -107,11 +112,11 @@
                 max(
                     positionedTicks.map((tick, i) => {
                         if (
-                            resolveProp(options.textAnchor, tick.value, outsideTextAnchor) !==
+                            resolveProp(options.textAnchor, tick, outsideTextAnchor) !==
                             outsideTextAnchor
                         )
                             return 0;
-                        if (tick.hidden || !testFilter(tick.value, options)) return 0;
+                        if (tick.hidden || !testFilter(tick, options)) return 0;
                         if (tickTexts[i]) return tickTexts[i].getBoundingClientRect().width;
                         return 0;
                     }) as number[]
@@ -150,11 +155,11 @@
 
 <g class="axis-y">
     {#each positionedTicks as tick, t (t)}
-        {#if testFilter(tick.value, options) && !tick.hidden}
-            {@const tickClass_ = resolveProp(tickClass, tick.value)}
+        {#if testFilter(tick, options) && !tick.hidden}
+            {@const tickClass_ = resolveProp(tickClass, tick)}
             {@const [textStyle, textClass] = resolveStyles(
                 plot,
-                tick,
+                { datum: tick },
                 {
                     fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
                     ...options,
@@ -173,7 +178,7 @@
                 {#if tickSize}
                     {@const [tickLineStyle, tickLineClass] = resolveStyles(
                         plot,
-                        tick,
+                        { datum: tick },
                         options,
                         'stroke',
                         { y: true },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.4.2-pr-194.1",
+    "version": "0.4.2-pr-194.2",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",