diff --git a/src/lib/marks/AxisX.svelte b/src/lib/marks/AxisX.svelte index df156afb..89593a11 100644 --- a/src/lib/marks/AxisX.svelte +++ b/src/lib/marks/AxisX.svelte @@ -25,6 +25,8 @@ tickClass?: ConstantAccessor; /** ticks is a shorthand for defining data, tickCount or interval */ ticks?: number | string | RawValue[]; + /** set to false or null to disable tick labels */ + text: boolean | null; } & XOR< { /** approximate number of ticks to be generated */ @@ -79,6 +81,7 @@ class: className, tickCount = typeof magicTicks === 'number' ? magicTicks : undefined, tickSpacing, + text = true, ...options }: AxisXMarkProps = $props(); @@ -220,6 +223,7 @@ {tickPadding} {tickFontSize} {tickClass} + {text} {options} title={useTitle} {plot} /> diff --git a/src/lib/marks/AxisY.svelte b/src/lib/marks/AxisY.svelte index 642747f9..e65703dd 100644 --- a/src/lib/marks/AxisY.svelte +++ b/src/lib/marks/AxisY.svelte @@ -26,6 +26,8 @@ tickClass?: ConstantAccessor; /** ticks is a shorthand for defining data, tickCount or interval */ ticks?: number | string | RawValue[]; + /** set to false or null to disable tick labels */ + text: boolean | null; } & XOR< { /** approximate number of ticks to be generated */ @@ -78,6 +80,7 @@ tickClass, tickCount = typeof magicTicks === 'number' ? magicTicks : undefined, tickSpacing, + text = true, ...options }: AxisYMarkProps = $props(); @@ -200,6 +203,7 @@ {tickFontSize} {tickClass} {options} + {text} title={useTitle} {plot} /> {/if} diff --git a/src/lib/marks/helpers/BaseAxisX.svelte b/src/lib/marks/helpers/BaseAxisX.svelte index daa2f33d..c9c22d12 100644 --- a/src/lib/marks/helpers/BaseAxisX.svelte +++ b/src/lib/marks/helpers/BaseAxisX.svelte @@ -33,6 +33,7 @@ dy: ConstantAccessor; filter: ChannelAccessor; }; + text: boolean; plot: PlotState; }; @@ -50,7 +51,8 @@ height, options, plot, - title + title, + text = true }: BaseAxisXProps = $props(); function splitTick(tick: string | string[]) { @@ -86,15 +88,17 @@ }) ); const T = tickObjects.length; - for (let i = 0; i < T; i++) { - let j = i; - // find the preceding tick that was not hidden - do { - j--; - } while (j >= 0 && tickObjects[j].hidden); - if (j >= 0) { - const tickLabelSpace = Math.abs(tickObjects[i].x - tickObjects[j].x); - tickObjects[i].hidden = tickLabelSpace < 15; + if (text) { + for (let i = 0; i < T; i++) { + let j = i; + // find the preceding tick that was not hidden + do { + j--; + } while (j >= 0 && tickObjects[j].hidden); + if (j >= 0) { + const tickLabelSpace = Math.abs(tickObjects[i].x - tickObjects[j].x); + tickObjects[i].hidden = tickLabelSpace < 15; + } } } return tickObjects; @@ -102,6 +106,7 @@ $effect(() => { untrack(() => [$autoMarginTop, $autoMarginBottom]); + if (!text) return; const outsideTextAnchor = anchor === 'top' ? 'end' : 'start'; // measure tick label heights const maxLabelHeight = @@ -144,26 +149,7 @@ {#each positionedTicks as tick, t (t)} {#if testFilter(tick.value, options) && !tick.hidden} - {@const textLines = tick.text} - {@const prevTextLines = t && positionedTicks[t - 1].text} - {@const fontSize = resolveProp(tickFontSize, tick)} {@const tickClass_ = resolveProp(tickClass, tick.value)} - {@const estLabelWidth = max(textLines.map((t) => t.length)) * fontSize * 0.2} - {@const moveDown = - (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) * - (anchor === 'bottom' ? 1 : -1)} - {@const [textStyle, textClass] = resolveStyles( - plot, - tick, - { - fontVariant: isQuantitative ? 'tabular-nums' : 'normal', - ...options, - fontSize: tickFontSize, - stroke: null - }, - 'fill', - { x: true } - )} {/if} - - {#if ticks.length > 0 || t === 0 || t === ticks.length - 1} - {#if textLines.length === 1} - {textLines[0]} - {:else} - {#each textLines as line, i (i)} - {!prevTextLines || prevTextLines[i] !== line - ? line - : ''} - {/each} + {#if text} + {@const textLines = tick.text} + {@const prevTextLines = t && positionedTicks[t - 1].text} + + {@const moveDown = + (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) * + (anchor === 'bottom' ? 1 : -1)} + {@const [textStyle, textClass] = resolveStyles( + plot, + tick, + { + fontVariant: isQuantitative ? 'tabular-nums' : 'normal', + ...options, + fontSize: tickFontSize, + stroke: null + }, + 'fill', + { x: true } + )} + + {#if ticks.length > 0 || t === 0 || t === ticks.length - 1} + {#if textLines.length === 1} + {textLines[0]} + {:else} + {#each textLines as line, i (i)} + {!prevTextLines || prevTextLines[i] !== line + ? line + : ''} + {/each} + {/if} {/if} - {/if} - + + {/if} {/if} {/each} diff --git a/src/lib/marks/helpers/BaseAxisY.svelte b/src/lib/marks/helpers/BaseAxisY.svelte index 119bef86..5f045fd8 100644 --- a/src/lib/marks/helpers/BaseAxisY.svelte +++ b/src/lib/marks/helpers/BaseAxisY.svelte @@ -29,6 +29,7 @@ dy: ConstantAccessor; }; plot: PlotState; + text: boolean | null; }; let { @@ -46,7 +47,8 @@ width, title, plot, - options + options, + text = true }: BaseAxisYProps = $props(); const LINE_ANCHOR = { @@ -67,16 +69,18 @@ element: null as SVGTextElement | null }; }); - const T = tickObjects.length; - for (let i = 0; i < T; i++) { - let j = i; - // find the preceding tick that was not hidden - do { - j--; - } while (j >= 0 && tickObjects[j].hidden); - if (j >= 0) { - const tickLabelSpace = Math.abs(tickObjects[i].y - tickObjects[j].y); - tickObjects[i].hidden = tickLabelSpace < 15; + if (text) { + const T = tickObjects.length; + for (let i = 0; i < T; i++) { + let j = i; + // find the preceding tick that was not hidden + do { + j--; + } while (j >= 0 && tickObjects[j].hidden); + if (j >= 0) { + const tickLabelSpace = Math.abs(tickObjects[i].y - tickObjects[j].y); + tickObjects[i].hidden = tickLabelSpace < 15; + } } } return tickObjects; @@ -176,13 +180,15 @@ class={tickLineClass} x2={anchor === 'left' ? -tickSize : tickSize} /> {/if} - {Array.isArray(tick.text) ? tick.text.join(' ') : tick.text} + {#if text} + {Array.isArray(tick.text) ? tick.text.join(' ') : tick.text} + {/if} {/if} {/each} diff --git a/src/routes/examples/axis/major-minor.svelte b/src/routes/examples/axis/major-minor.svelte new file mode 100644 index 00000000..2c04a0bf --- /dev/null +++ b/src/routes/examples/axis/major-minor.svelte @@ -0,0 +1,19 @@ + + + + + + + + + + + diff --git a/src/tests/axisX.test.ts b/src/tests/axisX.test.ts index ab174fed..482365e7 100644 --- a/src/tests/axisX.test.ts +++ b/src/tests/axisX.test.ts @@ -153,4 +153,27 @@ describe('AxisX mark', () => { expect(ticks.length).toBe(5); expect(tickValues).toStrictEqual(['Jan2000', 'Jul', 'Jan2001', 'Jul', 'Jan2002']); }); + + it('disable tick texts', () => { + const { container } = render(AxisXTest, { + props: { + plotArgs: { + width: 400, + x: { domain: [new Date(2000, 0, 1), new Date(2002, 0, 1)] } + }, + axisArgs: { ticks: '1 month', text: null } + } + }); + + const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf; + const tickLines = container.querySelectorAll( + 'g.axis-x > g.tick line' + ) as NodeListOf; + const tickLabels = container.querySelectorAll( + 'g.axis-x > g.tick text' + ) as NodeListOf; + expect(ticks.length).toBe(25); + expect(tickLines.length).toBe(25); + expect(tickLabels.length).toBe(0); + }); }); diff --git a/static/examples/axis/major-minor.dark.png b/static/examples/axis/major-minor.dark.png new file mode 100644 index 00000000..bd510653 Binary files /dev/null and b/static/examples/axis/major-minor.dark.png differ diff --git a/static/examples/axis/major-minor.png b/static/examples/axis/major-minor.png new file mode 100644 index 00000000..6142b110 Binary files /dev/null and b/static/examples/axis/major-minor.png differ diff --git a/static/examples/axis/tick-spacing.dark.png b/static/examples/axis/tick-spacing.dark.png index e451e2de..6c76ebc9 100644 Binary files a/static/examples/axis/tick-spacing.dark.png and b/static/examples/axis/tick-spacing.dark.png differ diff --git a/static/examples/axis/tick-spacing.png b/static/examples/axis/tick-spacing.png index bea52550..9d13a011 100644 Binary files a/static/examples/axis/tick-spacing.png and b/static/examples/axis/tick-spacing.png differ diff --git a/static/examples/dot/2-symbol-channel.dark.png b/static/examples/dot/2-symbol-channel.dark.png new file mode 100644 index 00000000..5815684d Binary files /dev/null and b/static/examples/dot/2-symbol-channel.dark.png differ diff --git a/static/examples/dot/2-symbol-channel.png b/static/examples/dot/2-symbol-channel.png new file mode 100644 index 00000000..7c7aa271 Binary files /dev/null and b/static/examples/dot/2-symbol-channel.png differ pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy