1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
< html lang ="en ">
3
3
< head >
4
4
< meta charset ="UTF-8 " />
5
- < meta name ="description " content ="A Stimulus controller to deal with chart.js. " />
5
+ < meta name ="description " content ="TODO " />
6
6
< meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
7
7
8
8
< title > Stimulus Chartjs</ title >
9
9
10
10
< script type ="module " defer >
11
- import ' ./src/app.css'
12
- import { Application } from ' @hotwired/stimulus'
13
- import Chart from ' ./src/index'
11
+ import " ./src/app.css"
12
+ import { Application } from " @hotwired/stimulus"
13
+ import Chart from " ./src/index"
14
14
15
15
const application = Application . start ( )
16
- application . register ( ' chart' , Chart )
16
+ application . register ( " chart" , Chart )
17
17
</ script >
18
18
</ head >
19
+
19
20
< body >
20
- <!-- This example requires Tailwind CSS v2.0+ -->
21
- < div class ="relative bg-gray-50 overflow-hidden ">
22
- < div class ="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full " aria-hidden ="true ">
23
- < div class ="relative h-full max-w-7xl mx-auto ">
24
- < svg
25
- class ="absolute right-full transform translate-y-1/4 translate-x-1/4 lg:translate-x-1/2 "
26
- width ="404 "
27
- height ="784 "
28
- fill ="none "
29
- viewBox ="0 0 404 784 "
30
- >
31
- < defs >
32
- < pattern
33
- id ="f210dbf6-a58d-4871-961e-36d5016a0f49 "
34
- x ="0 "
35
- y ="0 "
36
- width ="20 "
37
- height ="20 "
38
- patternUnits ="userSpaceOnUse "
39
- >
40
- < rect x ="0 " y ="0 " width ="4 " height ="4 " class ="text-gray-200 " fill ="currentColor " />
41
- </ pattern >
42
- </ defs >
43
- < rect width ="404 " height ="784 " fill ="url(#f210dbf6-a58d-4871-961e-36d5016a0f49) " />
44
- </ svg >
45
- < svg
46
- class ="
47
- absolute
48
- left-full
49
- transform
50
- -translate-y-3/4 -translate-x-1/4
51
- md:-translate-y-1/2
52
- lg:-translate-x-1/2
21
+ < div class ="relative bg-white overflow-hidden ">
22
+ < div class ="relative isolate pt-14 ">
23
+ < div
24
+ class ="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)] "
25
+ aria-hidden ="true "
26
+ >
27
+ < div
28
+ class ="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-yellow-500 to-orange-500 opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem] "
29
+ style ="
30
+ clip-path: polygon(
31
+ 74.1% 44.1%,
32
+ 100% 61.6%,
33
+ 97.5% 26.9%,
34
+ 85.5% 0.1%,
35
+ 80.7% 2%,
36
+ 72.5% 32.5%,
37
+ 60.2% 62.4%,
38
+ 52.4% 68.1%,
39
+ 47.5% 58.3%,
40
+ 45.2% 34.5%,
41
+ 27.5% 76.7%,
42
+ 0.1% 64.9%,
43
+ 17.9% 100%,
44
+ 27.6% 76.8%,
45
+ 76.1% 97.7%,
46
+ 74.1% 44.1%
47
+ );
53
48
"
54
- width ="404 "
55
- height ="784 "
56
- fill ="none "
57
- viewBox ="0 0 404 784 "
58
- >
59
- < defs >
60
- < pattern
61
- id ="5d0dd344-b041-4d26-bec4-8d33ea57ec9b "
62
- x ="0 "
63
- y ="0 "
64
- width ="20 "
65
- height ="20 "
66
- patternUnits ="userSpaceOnUse "
67
- >
68
- < rect x ="0 " y ="0 " width ="4 " height ="4 " class ="text-gray-200 " fill ="currentColor " />
69
- </ pattern >
70
- </ defs >
71
- < rect width ="404 " height ="784 " fill ="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b) " />
72
- </ svg >
49
+ > </ div >
73
50
</ div >
74
51
</ div >
75
52
@@ -88,8 +65,8 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
88
65
</ p >
89
66
90
67
< p class ="text-center mt-3 ">
91
- < img class ="inline-block " src ="https://img.shields.io/npm/dt/stimulus-chartjs.svg " />
92
- < img class ="inline-block " src ="https://img.shields.io/npm/v/stimulus-chartjs.svg " />
68
+ < img class ="inline-block " src ="https://img.shields.io/npm/dt/@ stimulus-components/ chartjs.svg " />
69
+ < img class ="inline-block " src ="https://img.shields.io/npm/v/@ stimulus-components/ chartjs.svg " />
93
70
94
71
< img
95
72
class ="inline-block "
@@ -105,49 +82,18 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
105
82
< div class ="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8 ">
106
83
< div class ="rounded-md shadow ">
107
84
< a
108
- href ="https://www.stimulus-components.com/docs/stimulus-chartjs "
109
- class ="
110
- w-full
111
- flex
112
- items-center
113
- justify-center
114
- px-8
115
- py-3
116
- border border-transparent
117
- text-base
118
- font-medium
119
- rounded-md
120
- text-white
121
- bg-gradient-to-r
122
- from-yellow-500
123
- to-orange-500
124
- md:py-4 md:text-lg md:px-10
125
- "
85
+ href ="https://www.stimulus-components.com/docs/stimulus-chartjs/ "
86
+ class ="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-yellow-500 to-orange-500 md:py-4 md:text-lg md:px-10 "
126
87
>
127
88
Documentation →
128
89
</ a >
129
90
</ div >
130
91
< div class ="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 ">
131
92
< a
132
93
href ="https://github.com/stimulus-components/stimulus-chartjs "
133
- class ="
134
- w-full
135
- flex
136
- items-center
137
- justify-center
138
- gap-1
139
- px-8
140
- py-3
141
- border border-transparent
142
- text-base
143
- font-medium
144
- rounded-md
145
- bg-white
146
- hover:bg-gray-50
147
- md:py-4 md:text-lg md:px-10
148
- "
94
+ class ="w-full flex items-center justify-center gap-1 px-8 py-3 border border-transparent text-base font-medium rounded-md bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10 "
149
95
>
150
- < svg fill ="currentColor " viewBox ="0 0 24 24 " aria-hidden ="true " class ="h-6 w -6 ">
96
+ < svg fill ="currentColor " viewBox ="0 0 24 24 " aria-hidden ="true " class ="size -6 ">
151
97
< path
152
98
fill-rule ="evenodd "
153
99
d ="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z "
@@ -180,7 +126,6 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
180
126
</ section >
181
127
</ div >
182
128
183
- <!-- This example requires Tailwind CSS v2.0+ -->
184
129
< footer class ="bg-white ">
185
130
< div class ="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8 ">
186
131
< div class ="-mx-5 -my-2 flex flex-wrap justify-center " aria-label ="Footer ">
@@ -203,9 +148,11 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
203
148
class ="text-gray-400 hover:text-gray-500 "
204
149
>
205
150
< span class ="sr-only "> Twitter</ span >
206
- < svg class ="h-6 w-6 " fill ="currentColor " viewBox ="0 0 24 24 " aria-hidden =" true ">
151
+ < svg class ="size-6 " fill ="currentColor " viewBox ="0 0 512 512 ">
207
152
< path
208
- d ="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84 "
153
+ fill-rule ="evenodd "
154
+ d ="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z "
155
+ clip-rule ="evenodd "
209
156
/>
210
157
</ svg >
211
158
</ a >
@@ -217,7 +164,7 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
217
164
class ="text-gray-400 hover:text-gray-500 "
218
165
>
219
166
< span class ="sr-only "> GitHub</ span >
220
- < svg class ="h-6 w -6 " fill ="currentColor " viewBox ="0 0 24 24 " aria-hidden ="true ">
167
+ < svg class ="size -6 " fill ="currentColor " viewBox ="0 0 24 24 " aria-hidden ="true ">
221
168
< path
222
169
fill-rule ="evenodd "
223
170
d ="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z "
0 commit comments