Skip to content

Commit 1f29237

Browse files
edokehedokeh
committed
Modify dashboard
1 parent a258b3e commit 1f29237

File tree

3 files changed

+133
-121
lines changed

3 files changed

+133
-121
lines changed

‎app/assets/javascripts/admin/dashboard/controller/index.js‎

Lines changed: 124 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,144 @@
11
/**
22
* Dashboard
33
*/
4-
define(function(require, exports, module) {
4+
define(function (require, exports, module) {
55
var _ = require('_');
66
var Highcharts = require('angular-highcharts').Highcharts;
77
var COLORS = Highcharts.getOptions().colors;
88

9-
var IndexController = ['$scope', '$http', function($scope, $http) {
10-
$http.get('/admin/dashboard').then(function(resp) {
9+
var IndexController = ['$scope', '$http', function ($scope, $http) {
10+
$http.get('/admin/dashboard').then(function (resp) {
1111
$scope.dashboard = resp.data;
12-
});
13-
14-
$http.get('/admin/dashboard/top_pages').then(function(resp) {
15-
$scope.topPages = resp.data;
16-
});
1712

18-
$http.get('/admin/dashboard/hot_blogs').then(function(resp) {
19-
$scope.hotBlogs = resp.data;
20-
});
13+
// 如果没有启用 ga chart
14+
if ($scope.dashboard.total_visits !== null) {
15+
$scope.enable_chart = true;
2116

22-
$http.get('/admin/dashboard/browser').then(function(resp) {
23-
var data = resp.data;
24-
25-
var totalVisits = _.reduce(data, function(memo, i) {
26-
return memo + i.visits;
27-
}, 0);
28-
29-
var browserData = [];
30-
var versionsData = [];
31-
32-
var groupData = _.groupBy(data, 'browser');
33-
_.each(groupData, function(versions, browser) {
34-
var versionTotalVisits = _.reduce(versions, function(memo, i) {
35-
return memo + i.visits;
36-
}, 0);
37-
var color = COLORS[browserData.length];
38-
browserData.push({
39-
name: browser,
40-
y: toPercent(versionTotalVisits, totalVisits),
41-
color: color
17+
$http.get('/admin/dashboard/top_pages').then(function (resp) {
18+
$scope.topPages = resp.data;
4219
});
4320

44-
versionsData = versionsData.concat(versions.map(function(v, index) {
45-
var brightness = 0.2 - (index / versions.length) / 5;
46-
return {
47-
name: v.browser + ' ' + v.browserVersion,
48-
y: toPercent(v.visits, totalVisits),
49-
color: Highcharts.Color(color).brighten(brightness).get()
21+
$http.get('/admin/dashboard/browser').then(function (resp) {
22+
var data = resp.data;
23+
24+
var totalVisits = _.reduce(data, function (memo, i) {
25+
return memo + i.visits;
26+
}, 0);
27+
28+
var browserData = [];
29+
var versionsData = [];
30+
31+
var groupData = _.groupBy(data, 'browser');
32+
_.each(groupData, function (versions, browser) {
33+
var versionTotalVisits = _.reduce(versions, function (memo, i) {
34+
return memo + i.visits;
35+
}, 0);
36+
var color = COLORS[browserData.length];
37+
browserData.push({
38+
name: browser,
39+
y: toPercent(versionTotalVisits, totalVisits),
40+
color: color
41+
});
42+
43+
versionsData = versionsData.concat(versions.map(function (v, index) {
44+
var brightness = 0.2 - (index / versions.length) / 5;
45+
return {
46+
name: v.browser + ' ' + v.browserVersion,
47+
y: toPercent(v.visits, totalVisits),
48+
color: Highcharts.Color(color).brighten(brightness).get()
49+
};
50+
}));
51+
});
52+
53+
$scope.browser = {
54+
title: {
55+
text: '浏览器占有率',
56+
margin: 25,
57+
style: chartTitleStyle()
58+
},
59+
plotOptions: {
60+
pie: {
61+
center: ['50%', '50%']
62+
}
63+
},
64+
legend: {
65+
enabled: false
66+
},
67+
tooltip: {
68+
//headerFormat: '<span style="font-size: 10px;font-weight:bolder">{point.key:%b%e日 %A}</span><br/>'
69+
valueSuffix: '%'
70+
},
71+
series: [
72+
{
73+
name: 'Browsers',
74+
data: browserData,
75+
size: '60%',
76+
dataLabels: {
77+
formatter: function () {
78+
return this.y > 5 ? this.point.name : null;
79+
},
80+
color: 'white',
81+
distance: -40
82+
}
83+
},
84+
{
85+
name: 'Versions',
86+
data: versionsData,
87+
size: '80%',
88+
innerSize: '60%',
89+
dataLabels: {
90+
formatter: function () {
91+
// display only if larger than 1
92+
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
93+
}
94+
}
95+
}
96+
]
5097
};
51-
}));
52-
});
53-
54-
$scope.browser = {
55-
title: {
56-
text: '浏览器占有率',
57-
margin: 25,
58-
style: chartTitleStyle()
59-
},
60-
plotOptions: {
61-
pie: {
62-
center: ['50%', '50%']
63-
}
64-
},
65-
legend: {
66-
enabled: false
67-
},
68-
tooltip: {
69-
//headerFormat: '<span style="font-size: 10px;font-weight:bolder">{point.key:%b%e日 %A}</span><br/>'
70-
valueSuffix: '%'
71-
},
72-
series: [
73-
{
74-
name: 'Browsers',
75-
data: browserData,
76-
size: '60%',
77-
dataLabels: {
78-
formatter: function() {
79-
return this.y > 5 ? this.point.name : null;
98+
});
99+
100+
$http.get('/admin/dashboard/daily_visits').then(function (resp) {
101+
102+
$scope.daily_visits = {
103+
title: {
104+
text: '每日访问次数',
105+
margin: 25,
106+
style: chartTitleStyle()
107+
},
108+
xAxis: {
109+
type: 'datetime',
110+
labels: {
111+
format: '{value:%b%e日}'
112+
}
113+
},
114+
yAxis: {
115+
title: {
116+
text: ''
80117
},
81-
color: 'white',
82-
distance: -40
83-
}
84-
},
85-
{
86-
name: 'Versions',
87-
data: versionsData,
88-
size: '80%',
89-
innerSize: '60%',
90-
dataLabels: {
91-
formatter: function() {
92-
// display only if larger than 1
93-
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
118+
min: 0
119+
},
120+
legend: {
121+
enabled: false
122+
},
123+
tooltip: {
124+
headerFormat: '<span style="font-size: 10px;font-weight:bolder">{point.key:%b%e日 %A}</span><br/>'
125+
},
126+
series: [
127+
{
128+
name: "访问次数",
129+
data: resp.data
94130
}
95-
}
96-
}
97-
]
98-
};
131+
]
132+
};
133+
});
134+
} else {
135+
$scope.now = Highcharts.dateFormat('%Y %m %d', new Date().getTime())
136+
}
99137
});
100138

101-
$http.get('/admin/dashboard/daily_visits').then(function(resp) {
102-
103-
$scope.daily_visits = {
104-
title: {
105-
text: '每日访问次数',
106-
margin: 25,
107-
style: chartTitleStyle()
108-
},
109-
xAxis: {
110-
type: 'datetime',
111-
labels: {
112-
format: '{value:%b%e日}'
113-
}
114-
},
115-
yAxis: {
116-
title: {
117-
text: ''
118-
},
119-
min: 0
120-
},
121-
legend: {
122-
enabled: false
123-
},
124-
tooltip: {
125-
headerFormat: '<span style="font-size: 10px;font-weight:bolder">{point.key:%b%e日 %A}</span><br/>'
126-
},
127-
series: [
128-
{
129-
name: "访问次数",
130-
data: resp.data
131-
}
132-
]
133-
};
139+
140+
$http.get('/admin/dashboard/hot_blogs').then(function (resp) {
141+
$scope.hotBlogs = resp.data;
134142
});
135143

136144
function toPercent(v, total) {

‎app/assets/javascripts/admin/dashboard/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ define(function (require, exports, module) {
88
angularHighcharts.Highcharts.setOptions({
99
lang: {
1010
shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
11-
weekdays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期七']
11+
weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
1212
}
1313
});
1414

‎app/assets/javascripts/admin/dashboard/template/index.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@
22
<div class="col-md-4 dashboard-widget">
33
<div class="panel panel-blue statistics" ng-class="{'panel-loading': !dashboard}">
44
<div ng-show="dashboard">
5-
<div class="total-visits" ng-show="dashboard.total_visits > -1">
5+
<div class="total-visits" ng-show="enable_chart">
66
<strong>{{ dashboard.total_visits }} </strong>
77
<small>访问次数</small>
88
</div>
9+
<div class="total-visits" ng-show="!enable_chart">
10+
<strong>{{ now }}</strong>
11+
<small></small>
12+
</div>
913
<div class="stat-count">
1014
<span><strong>{{ dashboard.blog.publish }}</strong> <small>已发布</small></span>
1115
<span><strong>{{ dashboard.blog.draft }}</strong> <small>草稿</small></span>
@@ -31,7 +35,7 @@ <h2>评论最多的 Blog</h2>
3135
</div>
3236
</div>
3337

34-
<div class="col-md-4 dashboard-widget">
38+
<div class="col-md-4 dashboard-widget" ng-if="enable_chart">
3539
<div class="panel panel-blue" ng-class="{'panel-loading': !topPages}">
3640
<h2>访问最多的 URL</h2>
3741
<table class="table table-hover">
@@ -47,14 +51,14 @@ <h2>访问最多的 URL</h2>
4751
</div>
4852
</div>
4953

50-
<div class="col-md-8 dashboard-widget" style="height: 420px;">
54+
<div class="col-md-8 dashboard-widget" style="height: 420px;" ng-if="enable_chart">
5155
<div class="panel panel-blue" ng-class="{'panel-loading': !dashboard}">
5256
<div>
5357
<div high-chart options="daily_visits" type="line" height="390"></div>
5458
</div>
5559
</div>
5660
</div>
57-
<div class="col-md-4 dashboard-widget" style="height: 420px;">
61+
<div class="col-md-4 dashboard-widget" style="height: 420px;" ng-if="enable_chart">
5862
<div class="panel panel-blue" ng-class="{'panel-loading': !dashboard}">
5963
<div>
6064
<div high-chart options="browser" type="pie" height="390"></div>

0 commit comments

Comments
 (0)