Skip to content

Commit 7054705

Browse files
mrholekmrholek
committed
refactor: update example views
1 parent aec0ced commit 7054705

File tree

3 files changed

+101
-51
lines changed

3 files changed

+101
-51
lines changed

‎src/js/main.js

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ Chart.defaults.plugins.tooltip.position = 'nearest'
1515
Chart.defaults.plugins.tooltip.external = coreui.ChartJS.customTooltips
1616
Chart.defaults.defaultFontColor = '#646470'
1717

18+
const random = (min, max) => {
19+
// eslint-disable-next-line no-mixed-operators
20+
return Math.floor(Math.random() * (max - min + 1) + min)
21+
}
22+
1823
// eslint-disable-next-line no-unused-vars
1924
const cardChart1 = new Chart(document.getElementById('card-chart1'), {
2025
type: 'line',
@@ -225,31 +230,47 @@ const cardChart4 = new Chart(document.getElementById('card-chart4'), {
225230
const mainChart = new Chart(document.getElementById('main-chart'), {
226231
type: 'line',
227232
data: {
228-
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
233+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
229234
datasets: [
230235
{
231236
label: 'My First dataset',
232237
backgroundColor: coreui.Utils.hexToRgba(coreui.Utils.getStyle('--cui-info'), 10),
233238
borderColor: coreui.Utils.getStyle('--cui-info'),
234239
pointHoverBackgroundColor: '#fff',
235240
borderWidth: 2,
236-
data: [165, 180, 70, 69, 77, 57, 125, 165, 172, 91, 173, 138, 155, 89, 50, 161, 65, 163, 160, 103, 114, 185, 125, 196, 183, 64, 137, 95, 112, 175],
241+
data: [
242+
random(50, 200),
243+
random(50, 200),
244+
random(50, 200),
245+
random(50, 200),
246+
random(50, 200),
247+
random(50, 200),
248+
random(50, 200)
249+
],
237250
fill: true
238251
},
239252
{
240253
label: 'My Second dataset',
241254
borderColor: coreui.Utils.getStyle('--cui-success'),
242255
pointHoverBackgroundColor: '#fff',
243256
borderWidth: 2,
244-
data: [92, 97, 80, 100, 86, 97, 83, 98, 87, 98, 93, 83, 87, 98, 96, 84, 91, 97, 88, 86, 94, 86, 95, 91, 98, 91, 92, 80, 83, 82]
257+
data: [
258+
random(50, 200),
259+
random(50, 200),
260+
random(50, 200),
261+
random(50, 200),
262+
random(50, 200),
263+
random(50, 200),
264+
random(50, 200)
265+
]
245266
},
246267
{
247268
label: 'My Third dataset',
248269
borderColor: coreui.Utils.getStyle('--cui-danger'),
249270
pointHoverBackgroundColor: '#fff',
250271
borderWidth: 1,
251272
borderDash: [8, 5],
252-
data: [65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65]
273+
data: [65, 65, 65, 65, 65, 65, 65]
253274
}
254275
]
255276
},

‎src/pug/views/index.pug

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,12 @@ block view
2020
.card.mb-4.text-white.bg-primary
2121
.card-body.pb-0.d-flex.justify-content-between.align-items-start
2222
div
23-
.fs-4.fw-semibold 9.823
24-
div Members online
23+
.fs-4.fw-semibold 26K
24+
span.fs-6.fw-normal (
25+
svg.icon
26+
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-bottom")
27+
| 12.4%)
28+
div Users
2529
.dropdown
2630
button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
2731
svg.icon
@@ -38,8 +42,12 @@ block view
3842
.card.mb-4.text-white.bg-info
3943
.card-body.pb-0.d-flex.justify-content-between.align-items-start
4044
div
41-
.fs-4.fw-semibold 9.823
42-
div Members online
45+
.fs-4.fw-semibold $6.200
46+
span.fs-6.fw-normal (
47+
svg.icon
48+
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-top")
49+
| 40.9%)
50+
div Income
4351
.dropdown
4452
button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
4553
svg.icon
@@ -55,8 +63,12 @@ block view
5563
.card.mb-4.text-white.bg-warning
5664
.card-body.pb-0.d-flex.justify-content-between.align-items-start
5765
div
58-
.fs-4.fw-semibold 9.823
59-
div Members online
66+
.fs-4.fw-semibold 2.49%
67+
span.fs-6.fw-normal (
68+
svg.icon
69+
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-top")
70+
| 84.7%)
71+
div Conversion Rate
6072
.dropdown
6173
button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
6274
svg.icon
@@ -72,8 +84,12 @@ block view
7284
.card.mb-4.text-white.bg-danger
7385
.card-body.pb-0.d-flex.justify-content-between.align-items-start
7486
div
75-
.fs-4.fw-semibold 9.823
76-
div Members online
87+
.fs-4.fw-semibold 44K
88+
span.fs-6.fw-normal (
89+
svg.icon
90+
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-bottom")
91+
| 23.6%)
92+
div Sessions
7793
.dropdown
7894
button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
7995
svg.icon
@@ -91,7 +107,7 @@ block view
91107
.d-flex.justify-content-between
92108
div
93109
h4.card-title.mb-0 Traffic
94-
.small.text-medium-emphasis January 2021
110+
.small.text-medium-emphasis January - July 2021
95111
.btn-toolbar.d-none.d-md-block(role='toolbar' aria-label='Toolbar with buttons')
96112
.btn-group.btn-group-toggle.mx-3(data-coreui-toggle='buttons')
97113
input.btn-check#option1(type='radio', name='options', autocomplete='off')
@@ -140,7 +156,7 @@ block view
140156
.col-sm-6.col-lg-4
141157
.card.mb-4(style='--cui-card-cap-bg: #3b5998')
142158
.card-header.position-relative.d-flex.justify-content-center.align-items-center
143-
svg.icon.icon-3xl.text-white.my-4
159+
svg.icon.text-white.my-4(style='height: 3rem; width: 3rem;')
144160
use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-facebook-f")
145161
.chart-wrapper.position-absolute.top-0.start-0.w-100.h-100
146162
canvas#social-box-chart-1(height='90')
@@ -156,7 +172,7 @@ block view
156172
.col-sm-6.col-lg-4
157173
.card.mb-4(style='--cui-card-cap-bg: #00aced')
158174
.card-header.position-relative.d-flex.justify-content-center.align-items-center
159-
svg.icon.icon-3xl.text-white.my-4
175+
svg.icon.text-white.my-4(style='height: 3rem; width: 3rem;')
160176
use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-twitter")
161177
.chart-wrapper.position-absolute.top-0.start-0.w-100.h-100
162178
canvas#social-box-chart-2(height='90')
@@ -172,7 +188,7 @@ block view
172188
.col-sm-6.col-lg-4
173189
.card.mb-4(style='--cui-card-cap-bg: #4875b4')
174190
.card-header.position-relative.d-flex.justify-content-center.align-items-center
175-
svg.icon.icon-3xl.text-white.my-4
191+
svg.icon.text-white.my-4(style='height: 3rem; width: 3rem;')
176192
use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-linkedin")
177193
.chart-wrapper.position-absolute.top-0.start-0.w-100.h-100
178194
canvas#social-box-chart-3(height='90')

0 commit comments

Comments
 (0)