Skip to content

Commit 8f46b99

Browse files
ALPIXELMaikiALPIXELMaiki
committed
Add charts on dashboard and change container width
1 parent 42f74eb commit 8f46b99

File tree

12 files changed

+275
-14
lines changed

12 files changed

+275
-14
lines changed

‎dist/build.js

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

‎dist/build.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"karma-cli": "^1.0.1",
1515
"lodash": "^4.17.4",
1616
"vue": "^2.2",
17-
"webpack": "^2.3.1",
17+
"webpack": "^2.3.2",
1818
"webpack-dev-server": "^2.4.2"
1919
},
2020
"devDependencies": {

‎src/js/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
<!-- App MAIN CONTENT -->
8686
<main>
8787
<!-- General transition effect when changing page -->
88-
<transition :duration="{ enter: 600, leave: 300 }" name="fade" mode="out-in" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
88+
<transition :duration="{ enter: 600, leave: 30 }" name="fade" mode="out-in" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
8989

9090
<!-- Page container -->
9191
<router-view></router-view>

‎src/js/components/widget-highcharts.vue renamed to ‎src/js/components/widget-highcharts-1.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
2424
Vue.use(VueHighcharts)
2525
26-
const api = 'src/js/fakeapi/widget-highcharts.json'
26+
const api = 'src/js/fakeapi/widget-highcharts-1.json'
2727
2828
export default {
2929
name: 'widget-highcharts',

‎src/js/components/widget-highcharts-2.vue

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
3+
<div class="wrap-widget">
4+
<div class="cc-loader" v-if="loading">
5+
<div class="spinner"></div>
6+
</div>
7+
8+
<div v-else>
9+
<div v-if="!fetchError">
10+
<highcharts :options="options"></highcharts>
11+
</div>
12+
13+
<div v-else class="alert alert-error">
14+
{{fetchError}}
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import Vue from 'vue'
22+
import VueHighcharts from 'vue-highcharts'
23+
24+
Vue.use(VueHighcharts)
25+
26+
const api = 'src/js/fakeapi/widget-highcharts-2.json'
27+
28+
export default {
29+
name: 'widget-highcharts',
30+
data() {
31+
return {
32+
loading:true,
33+
options: {},
34+
fetchError: null
35+
}
36+
},
37+
created() {
38+
this.fetchHighCharts()
39+
},
40+
methods: {
41+
fetchHighCharts() {
42+
43+
this.fetchError = null
44+
45+
Vue.axios.get(api, {
46+
// params
47+
}).then(response => {
48+
49+
if(response.data.error) {
50+
51+
this.showError('data.error : JSON file return an error value')
52+
53+
} else {
54+
55+
this.loading = false
56+
this.options = response.data
57+
58+
}
59+
60+
}).catch(error => {
61+
62+
this.showError('JSON not found')
63+
64+
})
65+
66+
},
67+
68+
// Show error message
69+
showError(msg) {
70+
this.fetchError = msg
71+
this.loading = false
72+
this.options = {}
73+
}
74+
}
75+
}
76+
77+
</script>

‎src/js/components/widget-highcharts-3.vue

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
3+
<div class="wrap-widget">
4+
<div class="cc-loader" v-if="loading">
5+
<div class="spinner"></div>
6+
</div>
7+
8+
<div v-else>
9+
<div v-if="!fetchError">
10+
<highcharts :options="options"></highcharts>
11+
</div>
12+
13+
<div v-else class="alert alert-error">
14+
{{fetchError}}
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import Vue from 'vue'
22+
import VueHighcharts from 'vue-highcharts'
23+
24+
Vue.use(VueHighcharts)
25+
26+
const api = 'src/js/fakeapi/widget-highcharts-3.json'
27+
28+
export default {
29+
name: 'widget-highcharts',
30+
data() {
31+
return {
32+
loading:true,
33+
options: {},
34+
fetchError: null
35+
}
36+
},
37+
created() {
38+
this.fetchHighCharts()
39+
},
40+
methods: {
41+
fetchHighCharts() {
42+
43+
this.fetchError = null
44+
45+
Vue.axios.get(api, {
46+
// params
47+
}).then(response => {
48+
49+
if(response.data.error) {
50+
51+
this.showError('data.error : JSON file return an error value')
52+
53+
} else {
54+
55+
this.loading = false
56+
this.options = response.data
57+
58+
}
59+
60+
}).catch(error => {
61+
62+
this.showError('JSON not found')
63+
64+
})
65+
66+
},
67+
68+
// Show error message
69+
showError(msg) {
70+
this.fetchError = msg
71+
this.loading = false
72+
this.options = {}
73+
}
74+
}
75+
}
76+
77+
</script>

‎src/js/fakeapi/widget-highcharts.json renamed to ‎src/js/fakeapi/widget-highcharts-1.json

File renamed without changes.

‎src/js/fakeapi/widget-highcharts-2.json

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"error": false,
3+
"chart": {
4+
"plotBackgroundColor": null,
5+
"plotBorderWidth": null,
6+
"plotShadow": false,
7+
"type": "pie"
8+
},
9+
"title": {
10+
"text": "Browser market shares January, 2015 to May, 2015"
11+
},
12+
"tooltip": {
13+
"pointFormat": "{series.name}: <b>{point.percentage:.1f}%</b>"
14+
},
15+
"plotOptions": {
16+
"pie": {
17+
"allowPointSelect": true,
18+
"cursor": "pointer",
19+
"dataLabels": {
20+
"enabled": false
21+
},
22+
"showInLegend": true
23+
}
24+
},
25+
"series": [{
26+
"name": "Brands",
27+
"colorByPoint": true,
28+
"data": [
29+
{
30+
"name": "Microsoft Internet Explorer",
31+
"y": 56.33
32+
},
33+
{
34+
"name": "Chrome",
35+
"y": 24.03,
36+
"sliced": true,
37+
"selected": true
38+
},
39+
{
40+
"name": "Firefox",
41+
"y": 10.38
42+
},
43+
{
44+
"name": "Safari",
45+
"y": 4.77
46+
},
47+
{
48+
"name": "Opera",
49+
"y": 0.91
50+
},
51+
{
52+
"name": "Proprietary or Undetectable",
53+
"y": 0.2
54+
}
55+
]
56+
}]
57+
}

‎src/js/fakeapi/widget-highcharts-3.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"error": false,
3+
"chart": {
4+
"type": "column"
5+
},
6+
"title": {
7+
"text": "Users Vs Admins"
8+
},
9+
"xAxis": {
10+
"categories": [
11+
"Registered Users"
12+
],
13+
"visible": false
14+
},
15+
"yAxis": {
16+
"min": 0,
17+
"visible": false
18+
},
19+
"tooltip": {
20+
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y} %</b><br/>",
21+
"shared": true
22+
},
23+
"plotOptions": {
24+
"series": {
25+
"stacking": "normal",
26+
"dataLabels": {
27+
"enabled": true
28+
}
29+
}
30+
},
31+
"series": [
32+
{
33+
"name": "Users",
34+
"data": [85.5]
35+
},
36+
{
37+
"name": "Admins",
38+
"data": [14.5]
39+
}
40+
]
41+
}

0 commit comments

Comments
 (0)