Skip to content

Commit 09d72cf

Browse files
techniqtechniq
authored
fix(Axis): Fix display of axis labels (#591)
1 parent 0e0d337 commit 09d72cf

3 files changed

Lines changed: 94 additions & 40 deletions

File tree

‎.changeset/cyan-cougars-occur.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'layerchart': patch
3+
---
4+
5+
fix(Axis): Fix display of axis labels

‎packages/layerchart/src/lib/components/Axis.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -361,13 +361,15 @@
361361
});
362362
363363
const resolvedLabelProps = $derived({
364-
value: typeof label === 'function' ? '' : undefined,
364+
value: typeof label === 'function' ? '' : label,
365365
x: resolvedLabelX,
366366
y: resolvedLabelY,
367367
textAnchor: resolvedLabelTextAnchor,
368368
verticalAnchor: resolvedLabelVerticalAnchor,
369369
rotate: orientation === 'vertical' && labelPlacement === 'middle' ? -90 : 0,
370-
capHeight: '.5rem', // text-[10px]
370+
// complement 10px text (until Text supports custom styles)
371+
capHeight: '7px',
372+
lineHeight: '11px',
371373
...labelProps,
372374
class: cls(
373375
layerClass('axis-label'),

‎packages/layerchart/src/routes/docs/components/Axis/+page.svelte‎

Lines changed: 85 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
timeMillisecond,
1313
} from 'd3-time';
1414
import { RangeField } from 'svelte-ux';
15+
import { startOfInterval } from '@layerstack/utils';
1516
1617
import Preview from '$lib/docs/Preview.svelte';
1718
@@ -21,31 +22,43 @@
2122
2223
const largeData = createDateSeries({ count: 100, min: 50, max: 100, value: 'integer' });
2324
24-
const now = new Date();
25+
const today = startOfInterval('day', new Date());
2526
26-
let initialXDomain = [timeYear.offset(now, -4), now];
27-
let xDomain = $state([timeYear.offset(now, -4), now]);
27+
let initialXDomain = [timeYear.offset(today, -4), today];
28+
let xDomain = $state([timeYear.offset(today, -4), today]);
2829
2930
const timeScaleExamples = [
30-
{ label: '5 years', domain: [timeYear.offset(now, -5), now], interval: timeYear.every(1) },
31-
{ label: '1 year', domain: [timeYear.offset(now, -1), now], interval: timeMonth.every(1) },
32-
{ label: '6 months', domain: [timeMonth.offset(now, -6), now], interval: timeMonth.every(1) },
33-
{ label: '90 days', domain: [timeDay.offset(now, -90), now], interval: timeDay.every(7) },
34-
{ label: '30 days', domain: [timeDay.offset(now, -30), now], interval: timeDay.every(1) },
35-
{ label: '10 days', domain: [timeDay.offset(now, -10), now], interval: timeDay.every(1) },
36-
{ label: '7 days', domain: [timeDay.offset(now, -7), now], interval: timeDay.every(1) },
37-
{ label: '3 days', domain: [timeDay.offset(now, -3), now], interval: timeHour.every(4) },
38-
{ label: '24 hours', domain: [timeHour.offset(now, -24), now], interval: timeHour.every(1) },
39-
{ label: '12 hours', domain: [timeHour.offset(now, -12), now], interval: timeHour.every(1) },
40-
{ label: '1 hour', domain: [timeHour.offset(now, -1), now], interval: timeMinute.every(5) },
31+
{ label: '5 years', domain: [timeYear.offset(today, -5), today], interval: timeYear.every(1) },
32+
{ label: '1 year', domain: [timeYear.offset(today, -1), today], interval: timeMonth.every(1) },
33+
{
34+
label: '6 months',
35+
domain: [timeMonth.offset(today, -6), today],
36+
interval: timeMonth.every(1),
37+
},
38+
{ label: '90 days', domain: [timeDay.offset(today, -90), today], interval: timeDay.every(7) },
39+
{ label: '30 days', domain: [timeDay.offset(today, -30), today], interval: timeDay.every(1) },
40+
{ label: '10 days', domain: [timeDay.offset(today, -10), today], interval: timeDay.every(1) },
41+
{ label: '7 days', domain: [timeDay.offset(today, -7), today], interval: timeDay.every(1) },
42+
{ label: '3 days', domain: [timeDay.offset(today, -3), today], interval: timeHour.every(4) },
43+
{
44+
label: '24 hours',
45+
domain: [timeHour.offset(today, -24), today],
46+
interval: timeHour.every(1),
47+
},
48+
{
49+
label: '12 hours',
50+
domain: [timeHour.offset(today, -12), today],
51+
interval: timeHour.every(1),
52+
},
53+
{ label: '1 hour', domain: [timeHour.offset(today, -1), today], interval: timeMinute.every(5) },
4154
{
4255
label: '1 minute',
43-
domain: [timeMinute.offset(now, -1), now],
56+
domain: [timeMinute.offset(today, -1), today],
4457
interval: timeSecond.every(10),
4558
},
4659
{
4760
label: '1 second',
48-
domain: [timeSecond.offset(now, -1), now],
61+
domain: [timeSecond.offset(today, -1), today],
4962
interval: timeMillisecond.every(100),
5063
},
5164
];
@@ -63,7 +76,7 @@
6376
<div class="h-[300px] p-4 border rounded-sm">
6477
<Chart
6578
xScale={scaleTime()}
66-
xDomain={[timeDay.offset(now, -10), now]}
79+
xDomain={[timeDay.offset(today, -10), today]}
6780
yDomain={[0, 100]}
6881
yNice
6982
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
@@ -82,7 +95,7 @@
8295
<div class="h-[300px] p-4 border rounded-sm">
8396
<Chart
8497
xScale={scaleTime()}
85-
xDomain={[timeDay.offset(now, -10), now]}
98+
xDomain={[timeDay.offset(today, -10), today]}
8699
yDomain={[0, 100]}
87100
yNice
88101
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
@@ -101,7 +114,7 @@
101114
<div class="h-[300px] p-4 border rounded-sm">
102115
<Chart
103116
xScale={scaleTime()}
104-
xDomain={[timeDay.offset(now, -10), now]}
117+
xDomain={[timeDay.offset(today, -10), today]}
105118
yDomain={[0, 100]}
106119
yNice
107120
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
@@ -120,7 +133,7 @@
120133
<div class="h-[300px] p-4 border rounded-sm">
121134
<Chart
122135
xScale={scaleTime()}
123-
xDomain={[timeDay.offset(now, -10), now]}
136+
xDomain={[timeDay.offset(today, -10), today]}
124137
yDomain={[0, 100]}
125138
yNice
126139
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
@@ -139,7 +152,7 @@
139152
<div class="h-[300px] p-4 border rounded-sm">
140153
<Chart
141154
xScale={scaleTime()}
142-
xDomain={[timeDay.offset(now, -10), now]}
155+
xDomain={[timeDay.offset(today, -10), today]}
143156
yDomain={[0, 100]}
144157
yNice
145158
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
@@ -158,7 +171,7 @@
158171
<div class="h-[300px] p-4 border rounded-sm">
159172
<Chart
160173
xScale={scaleTime()}
161-
xDomain={[timeDay.offset(now, -10), now]}
174+
xDomain={[timeDay.offset(today, -10), today]}
162175
yDomain={[0, 100]}
163176
yNice
164177
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
@@ -177,7 +190,7 @@
177190
<div class="h-[300px] p-4 border rounded-sm">
178191
<Chart
179192
xScale={scaleTime()}
180-
xDomain={[timeDay.offset(now, -10), now]}
193+
xDomain={[timeDay.offset(today, -10), today]}
181194
yDomain={[0, 100]}
182195
yNice
183196
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
@@ -198,7 +211,7 @@
198211
<div class="h-[300px] p-4 border rounded-sm">
199212
<Chart
200213
xScale={scaleTime()}
201-
xDomain={[timeDay.offset(now, -10), now]}
214+
xDomain={[timeDay.offset(today, -10), today]}
202215
yDomain={[0, 100]}
203216
yNice
204217
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
@@ -220,7 +233,7 @@
220233
<div class="h-[300px] p-4 border rounded-sm">
221234
<Chart
222235
xScale={scaleTime()}
223-
xDomain={[timeDay.offset(now, -10), now]}
236+
xDomain={[timeDay.offset(today, -10), today]}
224237
yDomain={[0, 100]}
225238
yNice
226239
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
@@ -240,7 +253,7 @@
240253
<div class="h-[300px] p-4 border rounded-sm">
241254
<Chart
242255
xScale={scaleTime()}
243-
xDomain={[timeDay.offset(now, -10), now]}
256+
xDomain={[timeDay.offset(today, -10), today]}
244257
yDomain={[0, 100]}
245258
yNice
246259
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
@@ -257,7 +270,11 @@
257270

258271
<Preview>
259272
<div class="h-[80px] p-4 border rounded-sm">
260-
<Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} padding={{ bottom: 24 }}>
273+
<Chart
274+
xScale={scaleTime()}
275+
xDomain={[timeDay.offset(today, -10), today]}
276+
padding={{ bottom: 24 }}
277+
>
261278
<Layer type={shared.renderContext}>
262279
<Axis
263280
placement="bottom"
@@ -277,7 +294,11 @@
277294

278295
<Preview>
279296
<div class="h-[80px] p-4 border rounded-sm">
280-
<Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} padding={{ bottom: 24 }}>
297+
<Chart
298+
xScale={scaleTime()}
299+
xDomain={[timeDay.offset(today, -10), today]}
300+
padding={{ bottom: 24 }}
301+
>
281302
<Layer type={shared.renderContext}>
282303
<Axis
283304
placement="bottom"
@@ -296,7 +317,11 @@
296317

297318
<Preview>
298319
<div class="h-[80px] p-4 border rounded-sm">
299-
<Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} padding={{ bottom: 24 }}>
320+
<Chart
321+
xScale={scaleTime()}
322+
xDomain={[timeDay.offset(today, -10), today]}
323+
padding={{ bottom: 24 }}
324+
>
300325
<Layer type={shared.renderContext}>
301326
<Axis placement="bottom" rule tickMarks={false} />
302327
</Layer>
@@ -310,7 +335,7 @@
310335
<div class="h-[200px] p-4 border rounded-sm">
311336
<Chart
312337
xScale={scaleTime()}
313-
xDomain={[timeDay.offset(now, -10), now]}
338+
xDomain={[timeDay.offset(today, -10), today]}
314339
yDomain={[0, 100]}
315340
padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
316341
>
@@ -400,7 +425,11 @@
400425

401426
<Preview>
402427
<div class="h-[80px] p-4 border rounded-sm">
403-
<Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} padding={{ bottom: 24 }}>
428+
<Chart
429+
xScale={scaleTime()}
430+
xDomain={[timeDay.offset(today, -10), today]}
431+
padding={{ bottom: 24 }}
432+
>
404433
<Layer type={shared.renderContext}>
405434
<Axis
406435
placement="bottom"
@@ -460,8 +489,8 @@
460489
<div class="h-[300px] p-4 border rounded-sm">
461490
<Chart
462491
xScale={scaleTime()}
463-
xDomain={[timeDay.offset(now, -10), now]}
464-
padding={{ top: 32, bottom: 32, left: 20, right: 20 }}
492+
xDomain={[timeDay.offset(today, -10), today]}
493+
padding={{ top: 40, bottom: 40, left: 20, right: 20 }}
465494
>
466495
<Layer type={shared.renderContext}>
467496
{#if debug}
@@ -485,7 +514,7 @@
485514

486515
<Preview>
487516
<div class="h-[300px] p-4 border rounded-sm">
488-
<Chart yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 32, right: 32 }}>
517+
<Chart yDomain={[0, 100]} padding={{ top: 24, bottom: 24, left: 40, right: 40 }}>
489518
<Layer type={shared.renderContext}>
490519
{#if debug}
491520
<Frame class="fill-danger/5" />
@@ -508,7 +537,11 @@
508537

509538
<Preview>
510539
<div class="h-[80px] p-4 border rounded-sm">
511-
<Chart xScale={scaleTime()} xDomain={[timeYear.offset(now, -2), now]} padding={{ bottom: 30 }}>
540+
<Chart
541+
xScale={scaleTime()}
542+
xDomain={[timeYear.offset(today, -2), today]}
543+
padding={{ bottom: 30 }}
544+
>
512545
<Layer type={shared.renderContext}>
513546
{#if debug}
514547
<Frame class="fill-danger/5" />
@@ -536,7 +569,11 @@
536569

537570
<Preview>
538571
<div class="h-[80px] p-4 border rounded-sm">
539-
<Chart xScale={scaleTime()} xDomain={[timeYear.offset(now, -2), now]} padding={{ bottom: 30 }}>
572+
<Chart
573+
xScale={scaleTime()}
574+
xDomain={[timeYear.offset(today, -2), today]}
575+
padding={{ bottom: 30 }}
576+
>
540577
<Layer type={shared.renderContext}>
541578
{#if debug}
542579
<Frame class="fill-danger/5" />
@@ -593,7 +630,12 @@
593630

594631
<Preview>
595632
<div class="h-[300px] p-4 border rounded-sm">
596-
<Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} yDomain={[0, 100]} radial>
633+
<Chart
634+
xScale={scaleTime()}
635+
xDomain={[timeDay.offset(today, -10), today]}
636+
yDomain={[0, 100]}
637+
radial
638+
>
597639
<Layer type={shared.renderContext} center>
598640
<Axis placement="radius" rule />
599641
<Axis placement="angle" rule />
@@ -606,7 +648,12 @@
606648

607649
<Preview>
608650
<div class="h-[300px] p-4 border rounded-sm">
609-
<Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} yDomain={[0, 100]} radial>
651+
<Chart
652+
xScale={scaleTime()}
653+
xDomain={[timeDay.offset(today, -10), today]}
654+
yDomain={[0, 100]}
655+
radial
656+
>
610657
<Layer type={shared.renderContext} center>
611658
<Axis placement="radius" grid />
612659
<Axis placement="angle" grid />

0 commit comments

Comments
 (0)