diff --git a/src/lib/marks/helpers/BaseAxisX.svelte b/src/lib/marks/helpers/BaseAxisX.svelte index 845e61b7..ced6c016 100644 --- a/src/lib/marks/helpers/BaseAxisX.svelte +++ b/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 }; }) diff --git a/src/lib/marks/helpers/BaseAxisY.svelte b/src/lib/marks/helpers/BaseAxisY.svelte index c09ca826..660440e9 100644 --- a/src/lib/marks/helpers/BaseAxisY.svelte +++ b/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 }; }); diff --git a/src/routes/examples/axis/unit-tick.svelte b/src/routes/examples/axis/unit-tick.svelte new file mode 100644 index 00000000..b0c2d7d8 --- /dev/null +++ b/src/routes/examples/axis/unit-tick.svelte @@ -0,0 +1,17 @@ + + + + + + `${d}${i === ticks.length - 1 ? ' USD' : ''}` + }}> + + diff --git a/src/tests/axisX.test.ts b/src/tests/axisX.test.ts index 04bc418a..70803414 100644 --- a/src/tests/axisX.test.ts +++ b/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 + ); + 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]]); + }); }); diff --git a/src/tests/axisY.test.ts b/src/tests/axisY.test.ts index 8008bdf8..ab9ebc30 100644 --- a/src/tests/axisY.test.ts +++ b/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 + ); + 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]]); + }); }); diff --git a/static/examples/axis/unit-tick.dark.png b/static/examples/axis/unit-tick.dark.png new file mode 100644 index 00000000..9df737a9 Binary files /dev/null and b/static/examples/axis/unit-tick.dark.png differ diff --git a/static/examples/axis/unit-tick.png b/static/examples/axis/unit-tick.png new file mode 100644 index 00000000..3e897374 Binary files /dev/null and b/static/examples/axis/unit-tick.png differ