Hugging Face's logo

Spaces:
privateuserh
/
chart-js
Running

App Files Community
privateuserh commited on
Commit
a17ca2f
·
verified ·
1 Parent(s): eb44712

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +391 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chart Js
3
- emoji: 🏢
4
- colorFrom: red
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: chart-js
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,391 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Data Visualization Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .chart-container {
12
+ position: relative;
13
+ height: 100%;
14
+ width: 100%;
15
+ }
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
18
+ }
19
+ .card-hover:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ .transition-all {
24
+ transition: all 0.3s ease;
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="gradient-bg min-h-screen">
29
+ <div class="container mx-auto px-4 py-8">
30
+ <!-- Header -->
31
+ <header class="flex justify-between items-center mb-8">
32
+ <div>
33
+ <h1 class="text-3xl font-bold text-gray-800">Analytics Dashboard</h1>
34
+ <p class="text-gray-600">Visualizing your data with Chart.js</p>
35
+ </div>
36
+ <div class="flex items-center space-x-4">
37
+ <div class="relative">
38
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
39
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
40
+ </div>
41
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all">
42
+ <i class="fas fa-download mr-2"></i> Export
43
+ </button>
44
+ </div>
45
+ </header>
46
+
47
+ <!-- Stats Cards -->
48
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
49
+ <div class="bg-white rounded-xl shadow-md p-6 transition-all card-hover">
50
+ <div class="flex justify-between items-center">
51
+ <div>
52
+ <p class="text-gray-500">Total Users</p>
53
+ <h3 class="text-2xl font-bold text-gray-800">1,254</h3>
54
+ <p class="text-green-500 text-sm"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p>
55
+ </div>
56
+ <div class="bg-blue-100 p-3 rounded-full">
57
+ <i class="fas fa-users text-blue-600 text-xl"></i>
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="bg-white rounded-xl shadow-md p-6 transition-all card-hover">
63
+ <div class="flex justify-between items-center">
64
+ <div>
65
+ <p class="text-gray-500">Revenue</p>
66
+ <h3 class="text-2xl font-bold text-gray-800">$8,542</h3>
67
+ <p class="text-green-500 text-sm"><i class="fas fa-arrow-up mr-1"></i> 5.4% from last month</p>
68
+ </div>
69
+ <div class="bg-green-100 p-3 rounded-full">
70
+ <i class="fas fa-dollar-sign text-green-600 text-xl"></i>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <div class="bg-white rounded-xl shadow-md p-6 transition-all card-hover">
76
+ <div class="flex justify-between items-center">
77
+ <div>
78
+ <p class="text-gray-500">Conversion Rate</p>
79
+ <h3 class="text-2xl font-bold text-gray-800">3.2%</h3>
80
+ <p class="text-red-500 text-sm"><i class="fas fa-arrow-down mr-1"></i> 0.8% from last month</p>
81
+ </div>
82
+ <div class="bg-purple-100 p-3 rounded-full">
83
+ <i class="fas fa-percent text-purple-600 text-xl"></i>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="bg-white rounded-xl shadow-md p-6 transition-all card-hover">
89
+ <div class="flex justify-between items-center">
90
+ <div>
91
+ <p class="text-gray-500">Avg. Session</p>
92
+ <h3 class="text-2xl font-bold text-gray-800">4m 23s</h3>
93
+ <p class="text-green-500 text-sm"><i class="fas fa-arrow-up mr-1"></i> 1.2% from last month</p>
94
+ </div>
95
+ <div class="bg-yellow-100 p-3 rounded-full">
96
+ <i class="fas fa-clock text-yellow-600 text-xl"></i>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Main Charts -->
103
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
104
+ <!-- Line Chart -->
105
+ <div class="bg-white rounded-xl shadow-md p-6 transition-all card-hover">
106
+ <div class="flex justify-between items-center mb-4">
107
+ <h2 class="text-xl font-semibold text-gray-800">Monthly Performance</h2>
108
+ <div class="flex space-x-2">
109
+ <button class="px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded-md">2023</button>
110
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md">2022</button>
111
+ </div>
112
+ </div>
113
+ <div class="chart-container">
114
+ <canvas id="lineChart"></canvas>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Bar Chart -->
119
+ <div class="bg-white rounded-xl shadow-md p-6 transition-all card-hover">
120
+ <div class="flex justify-between items-center mb-4">
121
+ <h2 class="text-xl font-semibold text-gray-800">Revenue by Category</h2>
122
+ <div class="flex space-x-2">
123
+ <button class="px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded-md">Monthly</button>
124
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md">Yearly</button>
125
+ </div>
126
+ </div>
127
+ <div class="chart-container">
128
+ <canvas id="barChart"></canvas>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Secondary Charts -->
134
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
135
+ <!-- Pie Chart -->
136
+ <div class="bg-white rounded-xl shadow-md p-6 transition-all card-hover">
137
+ <div class="flex justify-between items-center mb-4">
138
+ <h2 class="text-xl font-semibold text-gray-800">Traffic Sources</h2>
139
+ <i class="fas fa-ellipsis-h text-gray-400"></i>
140
+ </div>
141
+ <div class="chart-container">
142
+ <canvas id="pieChart"></canvas>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Doughnut Chart -->
147
+ <div class="bg-white rounded-xl shadow-md p-6 transition-all card-hover">
148
+ <div class="flex justify-between items-center mb-4">
149
+ <h2 class="text-xl font-semibold text-gray-800">Device Distribution</h2>
150
+ <i class="fas fa-ellipsis-h text-gray-400"></i>
151
+ </div>
152
+ <div class="chart-container">
153
+ <canvas id="doughnutChart"></canvas>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Radar Chart -->
158
+ <div class="bg-white rounded-xl shadow-md p-6 transition-all card-hover">
159
+ <div class="flex justify-between items-center mb-4">
160
+ <h2 class="text-xl font-semibold text-gray-800">Skill Assessment</h2>
161
+ <i class="fas fa-ellipsis-h text-gray-400"></i>
162
+ </div>
163
+ <div class="chart-container">
164
+ <canvas id="radarChart"></canvas>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Footer -->
170
+ <footer class="mt-12 text-center text-gray-500 text-sm">
171
+ <p>© 2023 Analytics Dashboard. All rights reserved.</p>
172
+ </footer>
173
+ </div>
174
+
175
+ <script>
176
+ // Line Chart
177
+ const lineCtx = document.getElementById('lineChart').getContext('2d');
178
+ const lineChart = new Chart(lineCtx, {
179
+ type: 'line',
180
+ data: {
181
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
182
+ datasets: [
183
+ {
184
+ label: 'Revenue',
185
+ data: [1200, 1900, 1700, 2100, 2500, 2800, 3100, 3400, 2800, 3000, 3200, 3800],
186
+ borderColor: 'rgba(79, 70, 229, 1)',
187
+ backgroundColor: 'rgba(79, 70, 229, 0.05)',
188
+ borderWidth: 2,
189
+ tension: 0.3,
190
+ fill: true
191
+ },
192
+ {
193
+ label: 'Users',
194
+ data: [800, 1200, 1100, 1400, 1800, 2000, 2200, 2400, 2100, 2300, 2500, 2900],
195
+ borderColor: 'rgba(14, 165, 233, 1)',
196
+ backgroundColor: 'rgba(14, 165, 233, 0.05)',
197
+ borderWidth: 2,
198
+ tension: 0.3,
199
+ fill: true
200
+ }
201
+ ]
202
+ },
203
+ options: {
204
+ responsive: true,
205
+ maintainAspectRatio: false,
206
+ plugins: {
207
+ legend: {
208
+ position: 'top',
209
+ },
210
+ tooltip: {
211
+ mode: 'index',
212
+ intersect: false,
213
+ }
214
+ },
215
+ scales: {
216
+ y: {
217
+ beginAtZero: true,
218
+ grid: {
219
+ drawBorder: false
220
+ }
221
+ },
222
+ x: {
223
+ grid: {
224
+ display: false
225
+ }
226
+ }
227
+ }
228
+ }
229
+ });
230
+
231
+ // Bar Chart
232
+ const barCtx = document.getElementById('barChart').getContext('2d');
233
+ const barChart = new Chart(barCtx, {
234
+ type: 'bar',
235
+ data: {
236
+ labels: ['Electronics', 'Fashion', 'Home', 'Beauty', 'Sports'],
237
+ datasets: [{
238
+ label: 'Revenue',
239
+ data: [12000, 9000, 7500, 6000, 4500],
240
+ backgroundColor: [
241
+ 'rgba(99, 102, 241, 0.7)',
242
+ 'rgba(14, 165, 233, 0.7)',
243
+ 'rgba(20, 184, 166, 0.7)',
244
+ 'rgba(244, 63, 94, 0.7)',
245
+ 'rgba(245, 158, 11, 0.7)'
246
+ ],
247
+ borderColor: [
248
+ 'rgba(99, 102, 241, 1)',
249
+ 'rgba(14, 165, 233, 1)',
250
+ 'rgba(20, 184, 166, 1)',
251
+ 'rgba(244, 63, 94, 1)',
252
+ 'rgba(245, 158, 11, 1)'
253
+ ],
254
+ borderWidth: 1
255
+ }]
256
+ },
257
+ options: {
258
+ responsive: true,
259
+ maintainAspectRatio: false,
260
+ plugins: {
261
+ legend: {
262
+ display: false
263
+ }
264
+ },
265
+ scales: {
266
+ y: {
267
+ beginAtZero: true,
268
+ grid: {
269
+ drawBorder: false
270
+ }
271
+ },
272
+ x: {
273
+ grid: {
274
+ display: false
275
+ }
276
+ }
277
+ }
278
+ }
279
+ });
280
+
281
+ // Pie Chart
282
+ const pieCtx = document.getElementById('pieChart').getContext('2d');
283
+ const pieChart = new Chart(pieCtx, {
284
+ type: 'pie',
285
+ data: {
286
+ labels: ['Direct', 'Organic Search', 'Social', 'Email', 'Referral'],
287
+ datasets: [{
288
+ data: [35, 30, 15, 10, 10],
289
+ backgroundColor: [
290
+ 'rgba(99, 102, 241, 0.7)',
291
+ 'rgba(14, 165, 233, 0.7)',
292
+ 'rgba(20, 184, 166, 0.7)',
293
+ 'rgba(244, 63, 94, 0.7)',
294
+ 'rgba(245, 158, 11, 0.7)'
295
+ ],
296
+ borderColor: [
297
+ 'rgba(99, 102, 241, 1)',
298
+ 'rgba(14, 165, 233, 1)',
299
+ 'rgba(20, 184, 166, 1)',
300
+ 'rgba(244, 63, 94, 1)',
301
+ 'rgba(245, 158, 11, 1)'
302
+ ],
303
+ borderWidth: 1
304
+ }]
305
+ },
306
+ options: {
307
+ responsive: true,
308
+ maintainAspectRatio: false,
309
+ plugins: {
310
+ legend: {
311
+ position: 'right',
312
+ }
313
+ }
314
+ }
315
+ });
316
+
317
+ // Doughnut Chart
318
+ const doughnutCtx = document.getElementById('doughnutChart').getContext('2d');
319
+ const doughnutChart = new Chart(doughnutCtx, {
320
+ type: 'doughnut',
321
+ data: {
322
+ labels: ['Desktop', 'Mobile', 'Tablet'],
323
+ datasets: [{
324
+ data: [55, 40, 5],
325
+ backgroundColor: [
326
+ 'rgba(99, 102, 241, 0.7)',
327
+ 'rgba(14, 165, 233, 0.7)',
328
+ 'rgba(20, 184, 166, 0.7)'
329
+ ],
330
+ borderColor: [
331
+ 'rgba(99, 102, 241, 1)',
332
+ 'rgba(14, 165, 233, 1)',
333
+ 'rgba(20, 184, 166, 1)'
334
+ ],
335
+ borderWidth: 1
336
+ }]
337
+ },
338
+ options: {
339
+ responsive: true,
340
+ maintainAspectRatio: false,
341
+ plugins: {
342
+ legend: {
343
+ position: 'right',
344
+ }
345
+ },
346
+ cutout: '70%'
347
+ }
348
+ });
349
+
350
+ // Radar Chart
351
+ const radarCtx = document.getElementById('radarChart').getContext('2d');
352
+ const radarChart = new Chart(radarCtx, {
353
+ type: 'radar',
354
+ data: {
355
+ labels: ['JavaScript', 'HTML/CSS', 'React', 'Node.js', 'Database', 'UI/UX'],
356
+ datasets: [
357
+ {
358
+ label: 'Current Skills',
359
+ data: [85, 90, 80, 75, 70, 85],
360
+ backgroundColor: 'rgba(99, 102, 241, 0.2)',
361
+ borderColor: 'rgba(99, 102, 241, 1)',
362
+ borderWidth: 2,
363
+ pointBackgroundColor: 'rgba(99, 102, 241, 1)'
364
+ },
365
+ {
366
+ label: 'Target Skills',
367
+ data: [95, 95, 90, 85, 85, 90],
368
+ backgroundColor: 'rgba(14, 165, 233, 0.2)',
369
+ borderColor: 'rgba(14, 165, 233, 1)',
370
+ borderWidth: 2,
371
+ pointBackgroundColor: 'rgba(14, 165, 233, 1)'
372
+ }
373
+ ]
374
+ },
375
+ options: {
376
+ responsive: true,
377
+ maintainAspectRatio: false,
378
+ scales: {
379
+ r: {
380
+ angleLines: {
381
+ display: true
382
+ },
383
+ suggestedMin: 0,
384
+ suggestedMax: 100
385
+ }
386
+ }
387
+ }
388
+ });
389
+ </script>
390
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/chart-js" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
391
+ </html>