generated from daviddarnes/component-template
-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdemo.html
130 lines (130 loc) · 5.38 KB
/
demo.html
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
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Demo of svg-sparkline Web Component" />
<title>svg-sparkline Web Component Demo</title>
<style>
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
}
</style>
<script type="module" src="svg-sparkline.js"></script>
</head>
<body>
<h2 id="general">General usage example</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9"></svg-sparkline>
</p>
<h2 id="curve">With curve</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
</p>
<h2 id="labels">Start and End labels</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
</p>
<h2 id="animate">Animated</h2>
<p>Only animates when the <code>prefers-reduced-motion</code> media query has the value <code>no-preference</code>.</p>
<p>Waits until the sparkline is visible in the viewport to initate the animation.</p>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true"></svg-sparkline>
</p>
<h2 id="animation-duration">Defined Animation Duration</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-duration="2s"></svg-sparkline>
</p>
<h2 id="animation-delay">Defined Animation Delay</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-delay="2s"></svg-sparkline>
</p>
<h2 id="color">Defined color</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" color="red"></svg-sparkline>
</p>
<h2 id="gradient">With gradient</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
</p>
<h2 id="gradient-color">Defined gradient color</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" gradient="true" gradient-color="red"></svg-sparkline>
</p>
<h2 id="fill">Filled</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
</p>
<h2 id="fill-color">Defined fill color</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" fill="true" fill-color="red"></svg-sparkline>
</p>
<h2 id="endpoint-color">Defined endpoint color</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>
</p>
<h2 id="endpoint">Without endpoint</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
</p>
<h2 id="endpoint-width">Defined endpoint width</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>
</p>
<h2 id="line-width">Defined line width</h2>
<p>Doesn’t look great when the <code>line-width</code> is greater than the <code>endpoint-width</code>!</p>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" line-width="10"></svg-sparkline>
</p>
<h2 id="size">Defined width and height</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" width="300" height="100"></svg-sparkline>
</p>
<h2 id="server-rendered">Server-rendered and hydrated</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End">
<span>Start</span>
<svg width="200px" height="36px" viewBox="0 0 15 12" preserveAspectRatio="none" role="img">
<title>Sparkline ranging from 1 to 10.</title>
<path d="M 0,3 L 1,8 L 2,9 L 3,4 L 4,2 L 5,10 L 6,6 L 7,5 L 8,7 L 9,1 L 10,8 L 11,3 L 12,9 L 13,4 L 14,10 L 15,2" stroke="var(--svg-sparkline-color, currentColor)" stroke-width="2" stroke-linecap="round" fill="transparent" vector-effect="non-scaling-stroke"></path>
</svg>
<svg width="200px" height="36px" viewBox="0 0 200 36" preserveAspectRatio="xMaxYMid meet" aria-hidden="true">
<title>Sparkline Endpoint</title>
<circle r="3" cx="200" cy="6" fill="var(--svg-sparkline-endpoint-color, currentColor)"></circle>
</svg>
<span>End</span>
</svg-sparkline>
</p>
<style>
svg-sparkline:not(:defined) {
display: grid;
display: inline-grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto;
svg {
inline-size: auto;
grid-column: 1 / 3;
grid-row: 1 / 2;
padding: var(--svg-sparkline-padding, 0.375rem);
overflow: visible;
}
svg[aria-hidden] {
pointer-events: none;
}
span {
padding-inline: var(--svg-sparkline-padding, 0.375rem);
}
span:nth-of-type(1) {
grid-column: 1 / 2;
text-align: start;
}
span:nth-of-type(2) {
grid-column: 2 / 3;
text-align: end;
}
}
</style>
</body>
</html>