Skip to content

Commit c5a00a4

Browse files
gkagka
committed
fix axis styles
1 parent 36af02a commit c5a00a4

File tree

6 files changed

+66
-39
lines changed

6 files changed

+66
-39
lines changed

‎src/lib/core/FacetAxes.svelte

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
scaleType="band"
3737
ticks={fxValues}
3838
tickFormat={(d) => d}
39+
tickFontSize={11}
3940
tickSize={0}
4041
tickPadding={5}
4142
anchor={plot.options.fx.axis}
@@ -53,6 +54,7 @@
5354
scaleType="band"
5455
ticks={fyValues}
5556
tickFormat={(d) => d}
57+
tickFontSize={11}
5658
tickSize={0}
5759
tickPadding={5}
5860
anchor={plot.options.fy.axis}

‎src/lib/marks/AxisX.svelte

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,14 @@
2626
> {
2727
data?: Datum[];
2828
automatic?: boolean;
29-
title?: string;
29+
title?: string | false | null;
3030
anchor?: 'top' | 'bottom';
3131
interval?: string | number;
3232
facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
3333
labelAnchor?: 'auto' | 'left' | 'center' | 'right';
3434
tickSize?: number;
3535
tickFontSize?: ConstantAccessor<number, Datum>;
36+
titleFontSize?: number;
3637
tickPadding?: number;
3738
tickFormat?:
3839
| 'auto'
@@ -56,6 +57,7 @@
5657
tickSize: 6,
5758
tickPadding: 3,
5859
tickFontSize: 11,
60+
titleFontSize: 11,
5961
anchor: 'bottom',
6062
...getContext<PlotDefaults>('svelteplot/_defaults').axis,
6163
...getContext<PlotDefaults>('svelteplot/_defaults').axisX
@@ -140,18 +142,19 @@
140142
const isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
141143
142144
const useTitle = $derived(
143-
title ||
144-
(optionsLabel === null
145-
? null
146-
: optionsLabel !== undefined
147-
? optionsLabel
148-
: plot.scales.x.autoTitle
149-
? isQuantitative
150-
? plot.options.x?.reverse
151-
? `← ${plot.scales.x.autoTitle}${plot.options.x.percent ? ' (%)' : ''}`
152-
: `${plot.scales.x.autoTitle}${plot.options.x.percent ? ' (%)' : ''} →`
153-
: plot.scales.x.autoTitle
154-
: '')
145+
title !== undefined
146+
? title || ''
147+
: optionsLabel === null
148+
? null
149+
: optionsLabel !== undefined
150+
? optionsLabel
151+
: plot.scales.x.autoTitle
152+
? isQuantitative
153+
? plot.options.x?.reverse
154+
? `← ${plot.scales.x.autoTitle}${plot.options.x.percent ? ' (%)' : ''}`
155+
: `${plot.scales.x.autoTitle}${plot.options.x.percent ? ' (%)' : ''} →`
156+
: plot.scales.x.autoTitle
157+
: ''
155158
);
156159
157160
const useLabelAnchor = $derived(labelAnchor || plot.options?.x?.labelAnchor || 'auto');
@@ -188,8 +191,10 @@
188191
style={resolveScaledStyles(
189192
null,
190193
{
194+
opacity: 0.8,
191195
...options,
192196
stroke: null,
197+
fontSize: options.titleFontSize || 11,
193198
textAnchor:
194199
titleAlign === 'right'
195200
? 'end'
@@ -231,8 +236,6 @@
231236

232237
<style>
233238
text {
234-
font-size: 11px;
235-
opacity: 0.8;
236239
fill: currentColor;
237240
}
238241
</style>

‎src/lib/marks/AxisY.svelte

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,16 @@
2525
> {
2626
data?: Datum[];
2727
automatic?: boolean;
28-
title?: string;
28+
title?: string | false | null;
2929
anchor?: 'left' | 'right';
3030
facetAnchor?: 'auto' | 'left' | 'right' | 'left-empty' | 'right-empty';
3131
lineAnchor?: 'top' | 'center' | 'bottom';
3232
interval?: string | number;
3333
labelAnchor?: 'auto' | 'left' | 'center' | 'right';
34+
textAnchor?: 'auto' | 'start' | 'middle' | 'end';
3435
tickSize?: number;
3536
tickFontSize?: ConstantAccessor<number, Datum>;
37+
titleFontSize?: number;
3638
tickPadding?: number;
3739
tickFormat?:
3840
| 'auto'
@@ -43,7 +45,7 @@
4345
/** ticks is a shorthand for defining data, tickCount or interval */
4446
ticks?: number | string | Datum[];
4547
/** set to false or null to disable tick labels */
46-
text: boolean | null;
48+
text?: boolean | null;
4749
/** approximate number of ticks to be generated */
4850
tickCount?: number;
4951
/** approximate number of pixels between generated ticks */
@@ -57,6 +59,7 @@
5759
tickPadding: 3,
5860
tickFontSize: 11,
5961
anchor: 'left',
62+
textAnchor: 'auto',
6063
...getContext<PlotDefaults>('svelteplot/_defaults').axis,
6164
...getContext<PlotDefaults>('svelteplot/_defaults').axisY
6265
};
@@ -71,6 +74,7 @@
7174
facetAnchor = 'auto',
7275
interval = typeof magicTicks === 'string' ? magicTicks : undefined,
7376
lineAnchor = 'center',
77+
textAnchor,
7478
tickSize,
7579
tickFontSize,
7680
tickPadding,
@@ -138,14 +142,15 @@
138142
const optionsLabel = $derived(plot.options.y.label);
139143
140144
const useTitle = $derived(
141-
title ||
142-
(optionsLabel === null
143-
? null
144-
: optionsLabel !== undefined
145-
? optionsLabel
146-
: plot.scales.y.autoTitle
147-
? `↑ ${plot.scales.y.autoTitle}${plot.options.y.percent ? ' (%)' : ''}`
148-
: '')
145+
title !== undefined
146+
? title || ''
147+
: optionsLabel === null
148+
? null
149+
: optionsLabel !== undefined
150+
? optionsLabel
151+
: plot.scales.y.autoTitle
152+
? `↑ ${plot.scales.y.autoTitle}${plot.options.y.percent ? ' (%)' : ''}`
153+
: ''
149154
);
150155
151156
const { getFacetState } = getContext<FacetContext>('svelteplot/facet');
@@ -176,22 +181,37 @@
176181
<text
177182
style={resolveScaledStyles(
178183
null,
179-
{ ...options, stroke: null, textAnchor: anchor === 'left' ? 'start' : 'end' },
184+
{
185+
opacity: 0.8,
186+
...options,
187+
fontSize: options.titleFontSize ?? 11,
188+
fill: 'currentColor',
189+
stroke: null,
190+
textAnchor: anchor === 'left' ? 'start' : 'end'
191+
},
180192
{},
181193
plot,
182194
'fill'
183195
)}
184196
x={anchor === 'left' ? 0 : plot.width}
185197
y={5}
186198
class="axis-x-title"
187-
dominant-baseline="hanging">{useTitle}</text>
199+
dominant-baseline="hanging">{options.opacity}-{useTitle}</text>
188200
{/if}
189201
{#if showAxis}
190202
<BaseAxisY
191203
{anchor}
192204
{className}
193205
{lineAnchor}
194-
{options}
206+
options={{
207+
...options,
208+
textAnchor:
209+
textAnchor == null || textAnchor === 'auto'
210+
? anchor === 'left'
211+
? 'end'
212+
: 'start'
213+
: textAnchor
214+
}}
195215
{plot}
196216
{text}
197217
{tickClass}
@@ -210,8 +230,6 @@
210230

211231
<style>
212232
text {
213-
font-size: 11px;
214-
opacity: 0.8;
215233
fill: currentColor;
216234
}
217235
</style>

‎src/lib/marks/helpers/BaseAxisX.svelte

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,8 @@
160160
tick,
161161
options,
162162
'stroke',
163-
{ x: true }
163+
{ x: true },
164+
true
164165
)}
165166
<line
166167
style={tickLineStyle}
@@ -185,7 +186,8 @@
185186
stroke: null
186187
},
187188
'fill',
188-
{ x: true }
189+
{ x: true },
190+
true
189191
)}
190192
<text
191193
bind:this={tickTextElements[t]}

‎src/lib/marks/helpers/BaseAxisY.svelte

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,14 @@
2121
tickSize: number;
2222
tickPadding: number;
2323
tickFontSize: ConstantAccessor<number>;
24+
tickClass: ConstantAccessor<number>;
2425
marginLeft: number;
2526
width: number;
2627
title: string | null;
2728
options: {
2829
dx: ConstantAccessor<number>;
2930
dy: ConstantAccessor<number>;
31+
textAnchor: 'start' | 'middle' | 'end';
3032
};
3133
plot: PlotState;
3234
text: boolean | null;
@@ -93,6 +95,8 @@
9395
// generate id used for registering margins
9496
const id = randomId();
9597
98+
$inspect({ options });
99+
96100
const { autoMarginLeft, autoMarginRight, autoMarginTop } =
97101
getContext<AutoMarginStores>('svelteplot/autoMargins');
98102
@@ -160,7 +164,8 @@
160164
stroke: null
161165
},
162166
'fill',
163-
{ y: true }
167+
{ y: true },
168+
true
164169
)}
165170
<g
166171
class="tick {tickClass_ || ''}"
@@ -173,7 +178,8 @@
173178
tick,
174179
options,
175180
'stroke',
176-
{ y: true }
181+
{ y: true },
182+
true
177183
)}
178184
<line
179185
style={tickLineStyle}
@@ -199,10 +205,6 @@
199205
stroke: currentColor;
200206
}
201207
text {
202-
opacity: 0.8;
203208
fill: currentColor;
204209
}
205-
text.is-left {
206-
text-anchor: end;
207-
}
208210
</style>

‎src/routes/examples/axis/ticks-inside.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<script>
66
import { Plot, AxisY, Line } from 'svelteplot';
77
import { page } from '$app/state';
8+
import { setContext } from 'svelte';
89
910
let { aapl } = $derived(page.data.data);
1011
</script>
@@ -17,7 +18,6 @@
1718
tickSize={0}
1819
tickPadding={0}
1920
dy={-5}
20-
title={false}
2121
lineAnchor="bottom"
2222
textAnchor="start" />
2323
<Line data={aapl} x="Date" y="Close" />

0 commit comments

Comments
 (0)
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