layerchart/docs/src/examples/components/Axis/time-scale-auto-multiline.svelte at 5653872a8ecc32dcfbe328ade689ed5787c47275 · cycle4passion/layerchart · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<script lang="ts">
	import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
	import {
		timeDay,
		timeHour,
		timeMillisecond,
		timeMinute,
		timeMonth,
		timeSecond,
		timeYear,
		type TimeInterval
	} from 'd3-time';
	import { startOfInterval } from '@layerstack/utils';
	import type { ComponentProps } from 'svelte';
	import AxisControls from '$lib/components/controls/AxisControls.svelte';

	const today = startOfInterval('day', new Date());

	const examples = [
		{
			label: '5 years',
			domain: [timeYear.offset(today, -5), today],
			interval: timeYear.every(1),
			format: 'year'
		},
		{
			label: '1 year',
			domain: [timeYear.offset(today, -1), today],
			interval: timeMonth.every(1),
			format: { type: 'month', options: { variant: 'short' } }
		},
		{
			label: '6 months',
			domain: [timeMonth.offset(today, -6), today],
			interval: timeMonth.every(1),
			format: { type: 'month', options: { variant: 'short' } }
		},
		{
			label: '90 days',
			domain: [timeDay.offset(today, -90), today],
			interval: timeDay.every(7),
			format: { type: 'day', options: { variant: 'short' } }
		},
		{
			label: '30 days',
			domain: [timeDay.offset(today, -30), today],
			interval: timeDay.every(1),
			format: { type: 'day', options: { variant: 'short' } }
		},
		{
			label: '10 days',
			domain: [timeDay.offset(today, -10), today],
			interval: timeDay.every(1),
			format: { type: 'day', options: { variant: 'short' } }
		},
		{
			label: '7 days',
			domain: [timeDay.offset(today, -7), today],
			interval: timeDay.every(1),
			format: { type: 'day', options: { variant: 'short' } }
		},
		{
			label: '3 days',
			domain: [timeDay.offset(today, -3), today],
			interval: timeHour.every(4),
			format: { type: 'day', options: { variant: 'short' } }
		},
		{
			label: '24 hours',
			domain: [timeHour.offset(today, -24), today],
			interval: timeHour.every(1),
			format: 'hour'
		},
		{
			label: '12 hours',
			domain: [timeHour.offset(today, -12), today],
			interval: timeHour.every(1),
			format: 'hour'
		},
		{
			label: '1 hour',
			domain: [timeHour.offset(today, -1), today],
			interval: timeMinute.every(5),
			format: 'minute'
		},
		{
			label: '1 minute',
			domain: [timeMinute.offset(today, -1), today],
			interval: timeSecond.every(10),
			format: 'second'
		},
		{
			label: '1 second',
			domain: [timeSecond.offset(today, -1), today],
			interval: timeMillisecond.every(100),
			format: 'millisecond'
		}
	] as {
		label: string;
		domain: [Date, Date];
		interval: TimeInterval;
		format?: ComponentProps<typeof Axis>['format'];
	}[];

	let tickSpacing = $state(80); // x-axis default
</script>

<AxisControls bind:value={tickSpacing} />

<div class="grid gap-3">
	{#each examples as example}
		<div>
			<div class="text-sm mb-1">{example.label}</div>
			<div class="border rounded-sm">
				<Chart
					xDomain={example.domain}
					padding={defaultChartPadding({ top: 40, bottom: 40, left: 25, right: 25 })}
					height={100}
				>
					<Layer>
						<Axis placement="top" rule grid tickMultiline {tickSpacing} />
						<Axis placement="bottom" rule grid tickMultiline {tickSpacing} />
					</Layer>
				</Chart>
			</div>
		</div>
	{/each}
</div>