Skip to content

Commit eadab31

Browse files
themustafaomarthemustafaomar
authored
Merge pull request #4 from themustafaomar/widgets
Widgets
2 parents 922c98e + 28caa60 commit eadab31

File tree

32 files changed

+1841
-90
lines changed

32 files changed

+1841
-90
lines changed

‎package-lock.json‎

Lines changed: 298 additions & 35 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,18 @@
1111
},
1212
"dependencies": {
1313
"@badrap/bar-of-progress": "^0.2.2",
14+
"@kurkle/color": "^0.3.2",
1415
"@mdi/font": "^7.2.96",
1516
"@vueuse/core": "^10.2.1",
1617
"axios": "^1.3.4",
18+
"chart.js": "^4.3.2",
19+
"chartjs-adapter-luxon": "^1.3.1",
1720
"cropperjs": "^1.5.13",
1821
"dayjs": "^1.11.7",
1922
"emoji-mart-vue-fast": "^15.0.0",
2023
"laravel-echo": "^1.15.1",
2124
"laravel-permission-to-vuejs": "^3.0.1",
25+
"luxon": "^3.3.0",
2226
"mitt": "^3.0.0",
2327
"object-to-formdata": "^4.5.1",
2428
"pinia": "^2.1.3",
@@ -27,6 +31,7 @@
2731
"vee-validate": "^4.10.2",
2832
"vform": "^2.1.2",
2933
"vue": "^3.2.47",
34+
"vue-chart-3": "^3.1.8",
3035
"vue-i18n": "^9.2.2",
3136
"vue-router": "^4.1.6",
3237
"vuetify": "^3.1.15",
@@ -42,6 +47,7 @@
4247
"eslint-plugin-vue": "^9.11.0",
4348
"prettier": "^2.8.4",
4449
"sass": "^1.60.0",
50+
"unplugin-vue-components": "^0.25.1",
4551
"vite": "^4.1.4",
4652
"vite-plugin-eslint": "^1.8.1",
4753
"vite-plugin-vuetify": "^1.0.2"

‎src/assets/js/charts/bar.js‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { Chart } from 'chart.js/auto'
2+
import { months, numbers, transparentize, CHART_COLORS } from './utils'
3+
4+
const DATA_COUNT = 12
5+
6+
export default () => {
7+
const labels = months({ count: 12 })
8+
9+
/* new Chart('bar1', {
10+
type: 'bar',
11+
data: {
12+
labels: labels,
13+
datasets: [{
14+
label: 'Fully Rounded',
15+
data: numbers({
16+
count: DATA_COUNT,
17+
min: 0,
18+
max: 100
19+
}),
20+
// borderColor: CHART_COLORS.red,
21+
// borderColor: 'transparent',
22+
// borderWidth: 0,
23+
backgroundColor: CHART_COLORS.red,
24+
borderRadius: 100,
25+
barPercentage: 0.6,
26+
// borderSkipped: false,
27+
}, {
28+
label: 'Fully other',
29+
data: numbers({
30+
count: DATA_COUNT,
31+
min: 0,
32+
max: 100
33+
}),
34+
// borderColor: CHART_COLORS.red,
35+
// borderColor: 'transparent',
36+
// borderWidth: 0,
37+
backgroundColor: CHART_COLORS.blue,
38+
borderRadius: 100,
39+
barPercentage: 0.6,
40+
// borderSkipped: false,
41+
}]
42+
},
43+
options: {
44+
responsive: true,
45+
plugins: {
46+
legend: {
47+
position: 'top',
48+
},
49+
title: {
50+
display: false,
51+
text: 'Chart.js Bar Chart'
52+
}
53+
}
54+
},
55+
}) */
56+
57+
const bars = [
58+
{
59+
id: 'bar-small-1',
60+
data: [
61+
4.32441701, 36.5835048, 90.96193416, 39.06464335, 15.45953361, 95.45524691, 39.54561043,
62+
4.5207476, 21.24485597, 39.10065158, 37.10048011, 1.66409465,
63+
],
64+
labels: months({ count: 12 }),
65+
},
66+
{
67+
id: 'bar-small-2',
68+
data: numbers({ count: 6, min: 0, max: 100 }),
69+
labels: months({ count: 6 }),
70+
},
71+
{
72+
id: 'bar-small-3',
73+
data: numbers({ count: 8, min: 0, max: 100 }),
74+
labels: months({ count: 8 }),
75+
},
76+
]
77+
78+
bars.forEach(({ id, data, labels }) => {
79+
console.log(id, data, labels)
80+
new Chart(id, {
81+
type: 'bar',
82+
data: {
83+
labels,
84+
datasets: [
85+
{
86+
label: 'My First Dataset',
87+
data,
88+
backgroundColor: ['rgba(0, 148, 255, 0.15)', 'rgba(0, 148, 255, 1)'],
89+
barPercentage: 0.7,
90+
// barThickness: 3, // Width
91+
maxBarThickness: 10,
92+
// minBarLength: 2,
93+
// borderColor: [
94+
// 'rgb(255, 99, 132)',
95+
// 'rgb(255, 159, 64)',
96+
// 'rgb(255, 205, 86)',
97+
// 'rgb(75, 192, 192)',
98+
// 'rgb(54, 162, 235)',
99+
// 'rgb(153, 102, 255)',
100+
// 'rgb(201, 203, 207)'
101+
// ],
102+
// borderWidth: 1
103+
},
104+
],
105+
},
106+
options: {
107+
responsive: true,
108+
aspectRatio: 3.5,
109+
plugins: {
110+
legend: {
111+
display: false,
112+
},
113+
},
114+
scales: {
115+
x: {
116+
display: false,
117+
// grid: {
118+
// display: false,
119+
// }
120+
},
121+
y: {
122+
display: false,
123+
beginAtZero: true,
124+
// grid: {
125+
// display: false
126+
// }
127+
},
128+
},
129+
},
130+
})
131+
})
132+
}

‎src/assets/js/charts/line.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Chart } from 'chart.js/auto'
2+
import { months, numbers, transparentize, CHART_COLORS } from './utils'
3+
4+
export default () => {
5+
const lines = [
6+
{
7+
id: document.querySelector('#line-1'),
8+
data: [
9+
24.27640604, 94.39557613, 2.68347051, 50.37465706, 79.44444444, 17.05332647, 86.65809328,
10+
85.78960905, 30.49725652, 66.46004801, 46.76440329, 76.34859396,
11+
],
12+
labels: months({ count: 12 }),
13+
borderColor: '#517bf3',
14+
tension: 0.5,
15+
},
16+
]
17+
18+
lines.forEach(({ id, data, labels, borderColor, fill, backgroundColor, tension }) => {
19+
new Chart(id, {
20+
type: 'line',
21+
data: {
22+
labels: ['Desktop', 'Tablets', 'Mobile'],
23+
datasets: [
24+
{
25+
label: 'My First Dataset',
26+
data: [60, 25, 15],
27+
backgroundColor: ['#3498db', '#7ed6df', '#e056fd'],
28+
// spacing
29+
borderRadius: 8,
30+
// hoverOffset: 50,
31+
// borderWidth: 10,
32+
// hoverBorderColor: ['#3498db','#7ed6df','#e056fd'],
33+
},
34+
],
35+
},
36+
options: {
37+
responsive: true,
38+
cutout: 135,
39+
40+
// Plugins
41+
plugins: {
42+
legend: {
43+
position: 'bottom',
44+
labels: {
45+
color: '#2d3748',
46+
padding: 20,
47+
font: {
48+
// size: 14,
49+
// family: 'Inter',
50+
},
51+
boxHeight: 10,
52+
// boxWidth: 10,
53+
usePointStyle: true,
54+
},
55+
},
56+
},
57+
},
58+
})
59+
})
60+
}

0 commit comments

Comments
 (0)