fix grid styles

gka · gka · commit c4bc8b441324 · 2025-05-09T16:11:01.000+02:00
diff --git a/src/lib/marks/GridX.svelte b/src/lib/marks/GridX.svelte
@@ -2,9 +2,10 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue } from '../types.js';
-    import { resolveChannel, resolveScaledStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '$lib/helpers/autoTicks.js';
     import { testFilter } from '$lib/helpers/index.js';
+    import { RAW_VALUE } from '$lib/transforms/recordize.js';
 
     type GrixXMarkProps = BaseMarkProps & {
         data?: RawValue[];
@@ -14,13 +15,13 @@
     let { data = [], automatic = false, ...options }: GrixXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let autoTickCount = $derived(
+    const autoTickCount = $derived(
         Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
     );
 
-    let ticks: RawValue[] = $derived(
+    const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
               data
@@ -53,9 +54,18 @@
                     {@const y2_ = resolveChannel('y2', tick, options)}
                     {@const y1 = options.y1 != null ? plot.scales.y.fn(y1_) : 0}
                     {@const y2 = options.y2 != null ? plot.scales.y.fn(y2_) : plot.facetHeight}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        { datum: { [RAW_VALUE]: tick } },
+                        options,
+                        'stroke',
+                        usedScales,
+                        true
+                    )}
                     <line
+                        class={styleClass}
                         transform="translate({x},{plot.options.marginTop})"
-                        style={resolveScaledStyles(tick, options, usedScales, plot, 'stroke')}
+                        {style}
                         {y1}
                         {y2} />
                 {/if}
diff --git a/src/lib/marks/GridY.svelte b/src/lib/marks/GridY.svelte
@@ -2,23 +2,23 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue, DataRecord } from '../types.js';
-    import { resolveChannel, resolveScaledStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '$lib/helpers/autoTicks.js';
-    import { getUsedScales } from '$lib/helpers/scales.js';
     import { testFilter } from '$lib/helpers/index.js';
+    import { RAW_VALUE } from '$lib/transforms/recordize.js';
 
     type GridYMarkProps = BaseMarkProps & { data?: RawValue[]; automatic?: boolean };
 
     let { data = [], automatic = false, ...options }: GridYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let autoTickCount = $derived(
+    const autoTickCount = $derived(
         Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
     );
 
-    let ticks: RawValue[] = $derived(
+    const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
               data
@@ -51,9 +51,18 @@
                     {@const x2_ = resolveChannel('x2', tick, options)}
                     {@const x1 = options.x1 != null ? plot.scales.x.fn(x1_) : 0}
                     {@const x2 = options.x2 != null ? plot.scales.x.fn(x2_) : plot.facetWidth}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        { datum: { [RAW_VALUE]: tick } },
+                        options,
+                        'stroke',
+                        usedScales,
+                        true
+                    )}
                     <line
+                        {style}
+                        class={styleClass}
                         transform="translate({plot.options.marginLeft},{y})"
-                        style={resolveScaledStyles(tick, options, usedScales, plot, 'stroke')}
                         {x1}
                         {x2} />
                 {/if}
diff --git a/src/tests/gridX.test.ts b/src/tests/gridX.test.ts
@@ -17,7 +17,7 @@ describe('GridX mark', () => {
           stroke: '#008000',
           strokeOpacity: 0.5,
           strokeDasharray: '5, 5',
-          ticks: [0, 5, 10],
+          data: [0, 5, 10],
         },
       },
     });
