feat: pass ticks array to tickFormat function

src/lib/marks/helpers/BaseAxisX.svelte

@@ -22,7 +22,7 @@
         scaleFn: (d: RawValue) => number;
         scaleType: ScaleType;
         ticks: RawValue[];
-        tickFormat: (d: RawValue, i: number) => string | string[];
+        tickFormat: (d: RawValue, i: number, ticks: RawValue[]) => string | string[];
         anchor: 'top' | 'bottom';
         tickSize: number;
         tickPadding: number;
@@ -87,7 +87,7 @@
                     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)),
+                    text: splitTick(tickFormat(tick, i, ticks)),
                     element: null as SVGTextElement | null
                 };
             })

src/lib/marks/helpers/BaseAxisY.svelte

@@ -19,7 +19,7 @@
         scaleFn: (d: RawValue) => number;
         scaleType: ScaleType;
         ticks: RawValue[];
-        tickFormat: (d: RawValue) => string | string[];
+        tickFormat: (d: RawValue, i: number, ticks: RawValue[]) => string | string[];
         anchor: 'left' | 'right';
         lineAnchor: 'top' | 'center' | 'bottom';
         tickSize: number;
@@ -72,7 +72,7 @@
                 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, i),
+                text: tickFormat(tick, i, ticks),
                 element: null as SVGTextElement | null
             };
         });

src/routes/examples/axis/unit-tick.svelte

@@ -0,0 +1,17 @@
+<script module>
+    export const title = 'Unit label tick format';
+</script>
+
+<script>
+    import { Plot, AxisX, AxisY, Line } from 'svelteplot';
+    import { page } from '$app/state';
+    let { aapl } = $derived(page.data.data);
+</script>
+
+<Plot
+    y={{
+        tickFormat: (d, i, ticks) =>
+            `${d}${i === ticks.length - 1 ? ' USD' : ''}`
+    }}>
+    <Line data={aapl} x="Date" y="Close" />
+</Plot>

src/tests/axisX.test.ts

@@ -254,4 +254,23 @@ describe('AxisX mark', () => {
         const fontSizes = ticks.map((t) => t.querySelector('text')?.textContent);
         expect(fontSizes).toStrictEqual(['0', '1', '2', '3', '4', '5']);
     });
+
+    it('passes ticks array to tickFormat functions', () => {
+        const checkTicks = vi.fn((d, i, ticks) => String(d));
+        const { container } = render(AxisXTest, {
+            props: {
+                plotArgs: { width: 500, x: { domain: [0, 100] } },
+                axisArgs: {
+                    interval: 20,
+                    tickFormat: (d, i, ticks) => checkTicks(d, i, ticks)
+                }
+            }
+        });
+        const ticks = Array.from(
+            container.querySelectorAll('g.axis-x > g.tick') as NodeListOf<SVGGElement>
+        );
+        expect(ticks.length).toBe(6);
+        expect(checkTicks.mock.calls[0]).toStrictEqual([0, 0, [0, 20, 40, 60, 80, 100]]);
+        expect(checkTicks.mock.calls[1]).toStrictEqual([20, 1, [0, 20, 40, 60, 80, 100]]);
+    });
 });

src/tests/axisY.test.ts

@@ -176,4 +176,23 @@ describe('AxisY mark', () => {
         const fontSizes = ticks.map((t) => t.querySelector('text')?.textContent);
         expect(fontSizes).toStrictEqual(['0', '1', '2', '3', '4', '5']);
     });
+
+    it('passes ticks array to tickFormat functions', () => {
+        const checkTicks = vi.fn((d, i, ticks) => String(d));
+        const { container } = render(AxisYTest, {
+            props: {
+                plotArgs: { width: 500, y: { domain: [0, 100] } },
+                axisArgs: {
+                    interval: 20,
+                    tickFormat: (d, i, ticks) => checkTicks(d, i, ticks)
+                }
+            }
+        });
+        const ticks = Array.from(
+            container.querySelectorAll('g.axis-y > g.tick') as NodeListOf<SVGGElement>
+        );
+        expect(ticks.length).toBe(6);
+        expect(checkTicks.mock.calls[0]).toStrictEqual([0, 0, [0, 20, 40, 60, 80, 100]]);
+        expect(checkTicks.mock.calls[1]).toStrictEqual([20, 1, [0, 20, 40, 60, 80, 100]]);
+    });
 });