Skip to content

Commit 0db334e

Browse files
xidedixxidedix
committed
refactor: chart examples
- add: getStyle() - minor fixes
1 parent 6c463c7 commit 0db334e

File tree

10 files changed

+60
-41
lines changed

10 files changed

+60
-41
lines changed

‎index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
77
<title>CoreUI - Open Source Bootstrap Admin Template</title>
8+
9+
<link rel="shortcut icon" href="./favicon.ico">
810
</head>
911

1012
<!-- BODY options, add following classes to body to change options

‎scss/vendors/_variables.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Override Boostrap variables
22
@import "../variables";
3-
@import "node_modules/@coreui/coreui/scss/bootstrap-variables";
4-
@import "node_modules/bootstrap/scss/mixins";
5-
@import "node_modules/bootstrap/scss/functions";
6-
@import "node_modules/bootstrap/scss/variables";
7-
@import "node_modules/@coreui/coreui/scss/variables";
3+
@import "~@coreui/coreui/scss/bootstrap-variables";
4+
@import "~bootstrap/scss/mixins";
5+
@import "~bootstrap/scss/functions";
6+
@import "~bootstrap/scss/variables";
7+
@import "~@coreui/coreui/scss/variables";

‎src/views/Dashboard.vue

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
<div class="brand-card-header bg-facebook">
130130
<i class="fa fa-facebook"></i>
131131
<div class="chart-wrapper">
132-
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="100"/>
132+
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
133133
</div>
134134
</div>
135135
<div class="brand-card-body">
@@ -149,7 +149,7 @@
149149
<div class="brand-card-header bg-twitter">
150150
<i class="fa fa-twitter"></i>
151151
<div class="chart-wrapper">
152-
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="100"/>
152+
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
153153
</div>
154154
</div>
155155
<div class="brand-card-body">
@@ -169,7 +169,7 @@
169169
<div class="brand-card-header bg-linkedin">
170170
<i class="fa fa-linkedin"></i>
171171
<div class="chart-wrapper">
172-
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="100"/>
172+
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
173173
</div>
174174
</div>
175175
<div class="brand-card-body">
@@ -189,7 +189,7 @@
189189
<div class="brand-card-header bg-google-plus">
190190
<i class="fa fa-google-plus"></i>
191191
<div class="chart-wrapper">
192-
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="100"/>
192+
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
193193
</div>
194194
</div>
195195
<div class="brand-card-body">
@@ -216,7 +216,8 @@
216216
<small class="text-muted">New Clients</small><br>
217217
<strong class="h4">9,123</strong>
218218
<div class="chart-wrapper" :style="{ top: '-10px'}">
219-
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />
219+
<!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
220+
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
220221
</div>
221222
</Callout>
222223
</b-col>
@@ -225,7 +226,7 @@
225226
<small class="text-muted">Recurring Clients</small><br>
226227
<strong class="h4">22,643</strong>
227228
<div class="chart-wrapper" :style="{ top: '-10px'}">
228-
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#f86c6b" width="80" height="30" />
229+
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
229230
</div>
230231
</Callout>
231232
</b-col>

‎src/views/Widgets.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@
234234
<div class="brand-card-header bg-facebook">
235235
<i class="fa fa-facebook"></i>
236236
<div class="chart-wrapper">
237-
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="100"/>
237+
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
238238
</div>
239239
</div>
240240
<div class="brand-card-body">
@@ -254,7 +254,7 @@
254254
<div class="brand-card-header bg-twitter">
255255
<i class="fa fa-twitter"></i>
256256
<div class="chart-wrapper">
257-
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="100"/>
257+
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
258258
</div>
259259
</div>
260260
<div class="brand-card-body">
@@ -274,7 +274,7 @@
274274
<div class="brand-card-header bg-linkedin">
275275
<i class="fa fa-linkedin"></i>
276276
<div class="chart-wrapper">
277-
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="100"/>
277+
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
278278
</div>
279279
</div>
280280
<div class="brand-card-body">
@@ -294,7 +294,7 @@
294294
<div class="brand-card-header bg-google-plus">
295295
<i class="fa fa-google-plus"></i>
296296
<div class="chart-wrapper">
297-
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="100"/>
297+
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
298298
</div>
299299
</div>
300300
<div class="brand-card-body">

‎src/views/dashboard/CalloutChartExample.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
22
import { Line } from 'vue-chartjs'
3+
import { getStyle } from '@coreui/coreui/js/src/utilities'
34
45
// const brandPrimary = '#20a8d8'
56
// const brandSuccess = '#4dbd74'
@@ -8,6 +9,9 @@ import { Line } from 'vue-chartjs'
89
// const brandDanger = '#f86c6b'
910
1011
export default {
12+
components: {
13+
getStyle
14+
},
1115
extends: Line,
1216
props: ['data', 'height', 'width', 'variant'],
1317
mounted () {
@@ -16,7 +20,7 @@ export default {
1620
datasets: [
1721
{
1822
backgroundColor: 'transparent',
19-
borderColor: this.variant ? this.variant : '#c2cfd6',
23+
borderColor: this.getVariant(this.variant) || '#c2cfd6',
2024
data: this.data
2125
}
2226
]
@@ -46,6 +50,11 @@ export default {
4650
display: false
4751
}
4852
})
53+
},
54+
methods: {
55+
getVariant (val, el) {
56+
return val[0] === '#' ? val : getStyle(`--${val}`, el)
57+
}
4958
}
5059
}
5160
</script>

‎src/views/dashboard/CardLine1ChartExample.vue

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<script>
22
import { Line } from 'vue-chartjs'
3+
// import { getStyle } from '@coreui/coreui/js/src/utilities'
34
45
const brandPrimary = '#20a8d8'
5-
const datasets = [
6+
// const brandPrimary = getStyle('--primary')
7+
8+
const datasets1 = [
69
{
710
label: 'My First dataset',
811
backgroundColor: brandPrimary,
@@ -13,11 +16,11 @@ const datasets = [
1316
1417
export default {
1518
extends: Line,
16-
props: ['height'],
19+
props: ['height', 'width'],
1720
mounted () {
1821
this.renderChart({
1922
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
20-
datasets: datasets
23+
datasets: datasets1
2124
}, {
2225
maintainAspectRatio: false,
2326
legend: {
@@ -38,8 +41,8 @@ export default {
3841
display: false,
3942
ticks: {
4043
display: false,
41-
min: Math.min.apply(Math, datasets[0].data) - 5,
42-
max: Math.max.apply(Math, datasets[0].data) + 5
44+
min: Math.min.apply(Math, datasets1[0].data) - 5,
45+
max: Math.max.apply(Math, datasets1[0].data) + 5
4346
}
4447
}]
4548
},

‎src/views/dashboard/CardLine2ChartExample.vue

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<script>
22
import { Line } from 'vue-chartjs'
3+
// import { getStyle } from '@coreui/coreui/js/src/utilities'
34
45
const brandInfo = '#63c2de'
5-
const datasets = [
6+
// const brandInfo = getStyle('--light-blue')
7+
8+
const datasets2 = [
69
{
710
label: 'My First dataset',
811
backgroundColor: brandInfo,
@@ -13,11 +16,11 @@ const datasets = [
1316
1417
export default {
1518
extends: Line,
16-
props: ['height'],
19+
props: ['height', 'width'],
1720
mounted () {
1821
this.renderChart({
1922
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
20-
datasets: datasets
23+
datasets: datasets2
2124
}, {
2225
maintainAspectRatio: false,
2326
legend: {
@@ -39,8 +42,8 @@ export default {
3942
display: false,
4043
ticks: {
4144
display: false,
42-
min: Math.min.apply(Math, datasets[0].data) - 5,
43-
max: Math.max.apply(Math, datasets[0].data) + 5
45+
min: Math.min.apply(Math, datasets2[0].data) - 5,
46+
max: Math.max.apply(Math, datasets2[0].data) + 5
4447
}
4548
}]
4649
},

‎src/views/dashboard/CardLine3ChartExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const datasets = [
1212
1313
export default {
1414
extends: Line,
15-
props: ['height'],
15+
props: ['height', 'width'],
1616
mounted () {
1717
this.renderChart({
1818
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],

‎src/views/dashboard/MainChartExample.vue

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
<script>
22
import { Line } from 'vue-chartjs'
3+
import { getStyle } from '@coreui/coreui/js/src/utilities'
34
45
// const brandPrimary = '#20a8d8'
5-
const brandSuccess = '#4dbd74'
6-
const brandInfo = '#63c2de'
7-
const brandDanger = '#f86c6b'
6+
// const brandSuccess = '#4dbd74'
7+
// const brandInfo = '#63c2de'
8+
// const brandDanger = '#f86c6b'
89
910
function convertHex (hex, opacity) {
1011
hex = hex.replace('#', '')
1112
const r = parseInt(hex.substring(0, 2), 16)
1213
const g = parseInt(hex.substring(2, 4), 16)
1314
const b = parseInt(hex.substring(4, 6), 16)
1415
15-
const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
16-
return result
16+
// const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
17+
return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`
1718
}
1819
1920
function random (min, max) {
@@ -24,12 +25,12 @@ export default {
2425
extends: Line,
2526
props: ['height'],
2627
mounted () {
27-
var elements = 27
28-
var data1 = []
29-
var data2 = []
30-
var data3 = []
28+
let elements = 27
29+
const data1 = []
30+
const data2 = []
31+
const data3 = []
3132
32-
for (var i = 0; i <= elements; i++) {
33+
for (let i = 0; i <= elements; i++) {
3334
data1.push(random(50, 200))
3435
data2.push(random(80, 100))
3536
data3.push(65)
@@ -39,24 +40,24 @@ export default {
3940
datasets: [
4041
{
4142
label: 'My First dataset',
42-
backgroundColor: convertHex(brandInfo, 10),
43-
borderColor: brandInfo,
43+
backgroundColor: convertHex(getStyle('--info'), 10),
44+
borderColor: getStyle('--info'),
4445
pointHoverBackgroundColor: '#fff',
4546
borderWidth: 2,
4647
data: data1
4748
},
4849
{
4950
label: 'My Second dataset',
5051
backgroundColor: 'transparent',
51-
borderColor: brandSuccess,
52+
borderColor: getStyle('--success'),
5253
pointHoverBackgroundColor: '#fff',
5354
borderWidth: 2,
5455
data: data2
5556
},
5657
{
5758
label: 'My Third dataset',
5859
backgroundColor: 'transparent',
59-
borderColor: brandDanger,
60+
borderColor: getStyle('--danger'),
6061
pointHoverBackgroundColor: '#fff',
6162
borderWidth: 1,
6263
borderDash: [8, 5],

‎static/favicon.ico

1.12 KB
Binary file not shown.

0 commit comments

Comments
 (0)