Skip to content

Commit 4663251

Browse files
woothuwoothu
committed
feat: replace charts with charts built on coreui-vue-chartjs library
1 parent d938bd4 commit 4663251

29 files changed

+788
-814
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
},
1616
"dependencies": {
1717
"@coreui/coreui": "^2.1.6",
18-
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
18+
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.0",
19+
"@coreui/coreui-vue-chartjs": "file:../coreui-vue-chartjs",
1920
"@coreui/icons": "0.3.0",
2021
"@coreui/vue": "../coreui-vue",
2122
"babel-polyfill": "^6.26.0",

‎src/views/Charts.vue

Lines changed: 12 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,43 @@
11
<template>
22
<div class="animated fadeIn">
3-
<CCardGroup columns class="card-columns">
3+
<CCardGroup columns class="card-columns cols-2">
44
<CCard headerHtml="Line Chart" bodyWrapper>
5-
<LineExample/>
5+
<CChartLineExample/>
66
</CCard>
77
<CCard headerHtml="Bar Chart" bodyWrapper>
8-
<BarExample/>
8+
<CChartBarExample/>
99
</CCard>
1010
<CCard headerHtml="Doughnut Chart" bodyWrapper>
11-
<DoughnutExample/>
11+
<CChartDoughnutExample/>
1212
</CCard>
1313
<CCard headerHtml="Radar Chart" bodyWrapper>
14-
<RadarExample/>
14+
<CChartRadarExample/>
1515
</CCard>
1616
<CCard headerHtml="Pie Chart" bodyWrapper>
17-
<PieExample/>
17+
<CChartPieExample/>
1818
</CCard>
1919
<CCard headerHtml="Polar Area Chart" bodyWrapper>
20-
<PolarAreaExample/>
20+
<CChartPolarAreaExample/>
2121
</CCard>
2222
<CCard headerHtml="Simple line chart" bodyWrapper>
23-
<CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
24-
label='Sales' borderColor='success'/>
23+
<CChartLineSimple borderColor="success" labels="months"/>
2524
</CCard>
2625
<CCard headerHtml="Simple pointed chart" bodyWrapper>
27-
<CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
28-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
29-
style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
26+
<CChartLineSimple pointed borderColor="warning"/>
3027
</CCard>
3128
<CCard headerHtml="Simple bar chart" bodyWrapper>
32-
<CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
33-
label='Sales' color='danger'/>
29+
<CChartBarSimple backgroundColor="danger"/>
3430
</CCard>
3531
</CCardGroup>
3632
</div>
3733
</template>
3834
<script>
39-
import BarExample from './charts/BarExample'
40-
import LineExample from './charts/LineExample'
41-
import DoughnutExample from './charts/DoughnutExample'
42-
import RadarExample from './charts/RadarExample'
43-
import PieExample from './charts/PieExample'
44-
import PolarAreaExample from './charts/PolarAreaExample'
35+
import * as Charts from './charts/index.js'
4536
4637
export default {
4738
name: 'Charts',
4839
components: {
49-
BarExample,
50-
LineExample,
51-
DoughnutExample,
52-
RadarExample,
53-
PieExample,
54-
PolarAreaExample
40+
...Charts
5541
}
5642
}
5743
</script>

‎src/views/Dashboard.vue

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</CButtonGroup>
2424
</CCol>
2525
</CRow>
26-
<MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
26+
<MainChartExample style="height:300px;margin-top:40px;"/>
2727
</CCardBody>
2828
<CCardFooter>
2929
<CRow class="text-center">
@@ -66,19 +66,29 @@
6666
<CCallout variant="info">
6767
<small class="text-muted">New Clients</small><br>
6868
<strong class="h4">9,123</strong>
69-
<div :style="{ top: '-10px'}">
70-
<!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
71-
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
72-
</div>
7369
</CCallout>
70+
<!-- <CCallout variant="info" class="d-inline">
71+
<div class="d-inline">
72+
<small class="text-muted">New Clients</small><br>
73+
<strong class="h4">9,123</strong>
74+
</div>
75+
<div class="d-inline">
76+
<CChartLineSimple
77+
:data="[35, 23, 56, 22, 97, 23, 64]"
78+
borderColor="info"
79+
style="width:80px !important"
80+
:options="{ maintainAspectRatio: true, aspectRatio: 3 }"
81+
/>
82+
</div>
83+
</CCallout> -->
7484
</CCol>
7585
<CCol sm="6">
7686
<CCallout variant="danger">
7787
<small class="text-muted">Recurring Clients</small><br>
7888
<strong class="h4">22,643</strong>
79-
<div :style="{ top: '-10px'}">
89+
<!-- <div :style="{ top: '-10px'}">
8090
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
81-
</div>
91+
</div> -->
8292
</CCallout>
8393
</CCol>
8494
</CRow>
@@ -176,18 +186,18 @@
176186
<CCallout variant="warning">
177187
<small class="text-muted">Pageviews</small><br>
178188
<strong class="h4">78,623</strong>
179-
<div :style="{ top: '-10px'}">
189+
<!-- <div :style="{ top: '-10px'}">
180190
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
181-
</div>
191+
</div> -->
182192
</CCallout>
183193
</CCol>
184194
<CCol sm="6">
185195
<CCallout variant="success">
186196
<small class="text-muted">Organic</small><br>
187197
<strong class="h4">49,123</strong>
188-
<div :style="{ top: '-10px'}">
198+
<!-- <div :style="{ top: '-10px'}">
189199
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
190-
</div>
200+
</div> -->
191201
</CCallout>
192202
</CCol>
193203
</CRow>
@@ -333,20 +343,21 @@
333343
</template>
334344

335345
<script>
336-
import MainChartExample from './dashboard/MainChartExample'
346+
import MainChartExample from './charts/MainChartExample'
337347
import WidgetsDropdown from './widgets/WidgetsDropdown'
338348
import WidgetsSocial from './widgets/WidgetsSocial'
339-
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
340-
import CalloutChartExample from './dashboard/CalloutChartExample'
349+
import CalloutChartExample from './charts/CalloutChartExample'
350+
import CChartLineSimple from './charts/CChartLineSimple'
351+
341352
342353
export default {
343354
name: 'Dashboard',
344355
components: {
345356
MainChartExample,
346-
SocialBoxChartExample,
347357
CalloutChartExample,
348358
WidgetsDropdown,
349-
WidgetsSocial
359+
WidgetsSocial,
360+
CChartLineSimple
350361
},
351362
data: function () {
352363
return {

‎src/views/charts/BarExample.vue

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎src/views/charts/CChartBarExample.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<CChartBar
3+
:datasets="defaultDatasets"
4+
labels="months"
5+
/>
6+
</template>
7+
8+
<script>
9+
import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
10+
import { CChartBar } from '@coreui/coreui-vue-chartjs'
11+
12+
export default {
13+
name: 'CChartBarExample',
14+
components: { CChartBar },
15+
computed: {
16+
defaultDatasets () {
17+
return [
18+
{
19+
label: 'GitHub Commits',
20+
backgroundColor: '#f87979',
21+
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
22+
}
23+
]
24+
}
25+
}
26+
}
27+
</script>

‎src/views/charts/CChartBarSimple.vue

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<CChartBar
3+
:datasets="computedDatasets"
4+
:options="computedOptions"
5+
:labels="labels"
6+
/>
7+
</template>
8+
9+
<script>
10+
import { CChartBar } from '@coreui/coreui-vue-chartjs'
11+
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
12+
export default {
13+
name: 'CChartBarSimple',
14+
components: { CChartBar },
15+
props: {
16+
...CChartBar.props,
17+
backgroundColor: {
18+
type: String,
19+
default: 'rgba(0,0,0,.2)'
20+
},
21+
pointHoverBackgroundColor: String,
22+
dataPoints: {
23+
type: Array,
24+
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
25+
},
26+
label: {
27+
type: String,
28+
default: 'Sales'
29+
},
30+
pointed: Boolean
31+
},
32+
computed: {
33+
defaultDatasets () {
34+
return [
35+
{
36+
data: this.dataPoints,
37+
backgroundColor: getColor(this.backgroundColor),
38+
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
39+
label: this.label
40+
}
41+
]
42+
},
43+
defaultOptions () {
44+
return {
45+
maintainAspectRatio: false,
46+
legend: {
47+
display: false
48+
},
49+
scales: {
50+
xAxes: [{
51+
display: false,
52+
categoryPercentage: 1,
53+
barPercentage: 0.5
54+
}],
55+
yAxes: [{
56+
display: false
57+
}]
58+
}
59+
}
60+
},
61+
computedDatasets () {
62+
return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
63+
},
64+
computedOptions () {
65+
return deepObjectsMerge(this.defaultOptions, this.options || {})
66+
}
67+
}
68+
}
69+
</script>

‎src/views/charts/CChartDoughnutExample.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<CChartDoughnut
3+
:datasets="defaultDatasets"
4+
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
5+
/>
6+
</template>
7+
8+
<script>
9+
import { CChartDoughnut } from '@coreui/coreui-vue-chartjs'
10+
11+
export default {
12+
name: 'CChartDoughnutExample',
13+
components: { CChartDoughnut },
14+
computed: {
15+
defaultDatasets () {
16+
return [
17+
{
18+
backgroundColor: [
19+
'#41B883',
20+
'#E46651',
21+
'#00D8FF',
22+
'#DD1B16'
23+
],
24+
data: [40, 20, 80, 10]
25+
}
26+
]
27+
}
28+
}
29+
}
30+
</script>

‎src/views/charts/CChartLineExample.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<CChartLine
3+
:datasets="defaultDatasets"
4+
labels="months"
5+
/>
6+
</template>
7+
8+
<script>
9+
import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
10+
import { CChartLine } from '@coreui/coreui-vue-chartjs'
11+
12+
export default {
13+
name: 'CChartLineExample',
14+
components: { CChartLine },
15+
computed: {
16+
defaultDatasets () {
17+
return [
18+
{
19+
label: 'Data One',
20+
backgroundColor: 'rgb(228,102,81,0.9)',
21+
data: [30, 39, 10, 50, 30, 70, 35]
22+
},
23+
{
24+
label: 'Data Two',
25+
backgroundColor: 'rgb(0,216,255,0.9)',
26+
data: [39, 80, 40, 35, 40, 20, 45]
27+
}
28+
]
29+
}
30+
}
31+
}
32+
</script>

0 commit comments

Comments
 (0)