Skip to content

Commit 73cfdc8

Browse files
edokehedokeh
committed
Add log view in dashboard
1 parent f6f5ef0 commit 73cfdc8

File tree

5 files changed

+236
-145
lines changed

5 files changed

+236
-145
lines changed

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

Lines changed: 157 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,190 @@
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', '$modal', function($scope, $http, $modal) {
10+
$http.get('/admin/dashboard').then(function(resp) {
1111
$scope.dashboard = resp.data;
1212

13-
// 如果没有启用 ga chart
14-
if ($scope.dashboard.total_visits !== null) {
15-
$scope.enable_chart = true;
16-
17-
$http.get('/admin/dashboard/top_pages').then(function (resp) {
18-
$scope.topPages = resp.data;
19-
});
13+
// 如果启用了 ga chart
14+
if ($scope.dashboard.ga_enable) {
15+
$scope.getTopPage();
16+
$scope.getDailyVisit();
17+
$scope.getBrowser();
18+
}
19+
else {
20+
$scope.nowDate = Highcharts.dateFormat('%m月%d日', new Date().getTime());
21+
}
22+
});
2023

21-
$http.get('/admin/dashboard/browser').then(function (resp) {
22-
var data = resp.data;
24+
// 获取评论最多的 blog
25+
$http.get('/admin/dashboard/hot_blogs').then(function(resp) {
26+
$scope.hotBlogs = resp.data;
27+
});
2328

24-
var totalVisits = _.reduce(data, function (memo, i) {
29+
// 获取浏览器份额
30+
$scope.getBrowser = function() {
31+
$http.get('/admin/dashboard/browser').then(function(resp) {
32+
var data = resp.data;
33+
// 将数据处理为两层
34+
var totalVisits = _.reduce(data, function(memo, i) {
35+
return memo + i.visits;
36+
}, 0);
37+
38+
var browserData = [];
39+
var versionsData = [];
40+
var groupData = _.groupBy(data, 'browser');
41+
_.each(groupData, function(versions, browser) {
42+
var versionTotalVisits = _.reduce(versions, function(memo, i) {
2543
return memo + i.visits;
2644
}, 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-
}));
45+
var color = COLORS[browserData.length];
46+
browserData.push({
47+
name: browser,
48+
y: toPercent(versionTotalVisits, totalVisits),
49+
color: color
5150
});
5251

53-
$scope.browser = {
54-
title: {
55-
text: '浏览器占有率',
56-
margin: 25,
57-
style: chartTitleStyle()
58-
},
59-
plotOptions: {
60-
pie: {
61-
center: ['50%', '50%']
52+
versionsData = versionsData.concat(versions.map(function(v, index) {
53+
var brightness = 0.2 - (index / versions.length) / 5;
54+
return {
55+
name: v.browser + ' ' + v.browserVersion,
56+
y: toPercent(v.visits, totalVisits),
57+
color: Highcharts.Color(color).brighten(brightness).get()
58+
};
59+
}));
60+
});
61+
62+
$scope.browser = {
63+
title: chartTitle('浏览器占有率'),
64+
plotOptions: {
65+
pie: {
66+
center: ['50%', '50%']
67+
}
68+
},
69+
legend: {
70+
enabled: false
71+
},
72+
tooltip: {
73+
valueSuffix: '%'
74+
},
75+
series: [
76+
{
77+
name: 'Browsers',
78+
data: browserData,
79+
size: '60%',
80+
dataLabels: {
81+
formatter: function() {
82+
return this.y > 5 ? this.point.name : null;
83+
},
84+
color: 'white',
85+
distance: -40
6286
}
6387
},
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-
}
88+
{
89+
name: 'Versions',
90+
data: versionsData,
91+
size: '80%',
92+
innerSize: '60%',
93+
dataLabels: {
94+
formatter: function() {
95+
// display only if larger than 1
96+
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
9497
}
9598
}
96-
]
97-
};
98-
});
99-
100-
$http.get('/admin/dashboard/daily_visits').then(function (resp) {
101-
102-
$scope.daily_visits = {
99+
}
100+
]
101+
};
102+
});
103+
};
104+
105+
// 获取每日的访问量
106+
$scope.getDailyVisit = function() {
107+
$http.get('/admin/dashboard/daily_visits').then(function(resp) {
108+
109+
$scope.daily_visits = {
110+
title: chartTitle('每日访问次数'),
111+
xAxis: {
112+
type: 'datetime',
113+
labels: {
114+
format: '{value:%b%e日}'
115+
}
116+
},
117+
yAxis: {
103118
title: {
104-
text: '每日访问次数',
105-
margin: 25,
106-
style: chartTitleStyle()
107-
},
108-
xAxis: {
109-
type: 'datetime',
110-
labels: {
111-
format: '{value:%b%e日}'
112-
}
119+
text: ''
113120
},
114-
yAxis: {
115-
title: {
116-
text: ''
117-
},
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
130-
}
131-
]
121+
min: 0
122+
},
123+
legend: {
124+
enabled: false
125+
},
126+
tooltip: {
127+
headerFormat: '<span style="font-size: 10px;font-weight:bolder">{point.key:%b%e日 %A}</span><br/>'
128+
},
129+
series: [
130+
{
131+
name: "访问次数",
132+
data: resp.data
133+
}
134+
]
135+
};
136+
});
137+
};
138+
139+
// 获取访问最多的页面
140+
$scope.getTopPage = function() {
141+
$http.get('/admin/dashboard/top_pages').then(function(resp) {
142+
$scope.topPages = resp.data;
143+
});
144+
};
145+
146+
// 同步日志
147+
$scope.showSynLogs = function() {
148+
var modal = $modal.open({
149+
template: require('../template/logs.html'),
150+
controller: ['$scope', '$modalInstance', function($scope, $modalInstance) {
151+
152+
$scope.getLogs = function() {
153+
$http.get('/admin/dashboard/sync_comment_logs').then(function(resp) {
154+
$scope.logs = resp.data;
155+
});
132156
};
133-
});
134-
} else {
135-
$scope.now = Highcharts.dateFormat('%Y %m %d', new Date().getTime())
136-
}
137-
});
138157

158+
$scope.sync = function() {
159+
$scope.sync_loading = true;
160+
$http.post('/admin/dashboard/sync_comment').then(function() {
161+
$scope.getLogs();
162+
$scope.sync_loading = false;
163+
});
164+
};
139165

140-
$http.get('/admin/dashboard/hot_blogs').then(function (resp) {
141-
$scope.hotBlogs = resp.data;
142-
});
166+
$scope.getLogs();
167+
$scope.modal = $modalInstance;
168+
}]
169+
});
170+
return modal.result;
171+
};
143172

173+
// 保留一位小数的百分率
144174
function toPercent(v, total) {
145175
return parseFloat((v / total * 100).toFixed(1));
146176
}
147177

148-
function chartTitleStyle() {
178+
// Chart 标题生成
179+
function chartTitle(title) {
149180
return {
150-
'font-weight': 'bolder',
151-
'font-family': '微软雅黑',
152-
'font-size': '20px'
181+
text: title,
182+
margin: 25,
183+
style: {
184+
'font-weight': 'bolder',
185+
'font-family': '微软雅黑',
186+
'font-size': '20px'
187+
}
153188
};
154189
}
155190
}];

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

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,27 @@
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="enable_chart">
5+
<div class="total-visits" ng-show="dashboard.ga_enable">
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>
9+
<div class="total-visits" ng-show="!dashboard.ga_enable">
10+
<h2 style="margin-bottom: 0"><strong>{{ nowDate }} </strong></h2><br/>
1211
</div>
1312
<div class="stat-count">
1413
<span><strong>{{ dashboard.blog.publish }}</strong> <small>已发布</small></span>
1514
<span><strong>{{ dashboard.blog.draft }}</strong> <small>草稿</small></span>
16-
<span><strong>{{ dashboard.comment }}</strong> <small ng-click="showSync()">评论</small></span>
15+
<span>
16+
<strong>{{ dashboard.comment }}</strong>
17+
<small>评论 <a ng-click="showSynLogs()" ng-if="dashboard.disqus_enable" href=""><i
18+
class="fa fa-info-circle"></i></a></small>
19+
</span>
20+
</div>
21+
<div class="others" ng-if="!dashboard.disqus_enable || !dashboard.ga_enable">
22+
尚未启用
23+
<a href="#/setting/disqus" ng-if="!dashboard.disqus_enable">Disqus</a>
24+
<span ng-if="!dashboard.disqus_enable && !dashboard.ga_enable">和</span>
25+
<a href="#/setting/ga" ng-if="!dashboard.ga_enable">GA 统计报表</a>
1726
</div>
1827
</div>
1928
</div>
@@ -27,38 +36,41 @@ <h2>评论最多的 Blog</h2>
2736
<td>
2837
<a ng-href="/blog/{{blog.slug}}.html" target="_blank">{{ blog.title }}</a>
2938
</td>
30-
<td>
39+
<td class="text-right">
3140
<small><i class="fa fa-comments"></i> {{ blog.comment_count}}</small>
3241
</td>
3342
</tr>
3443
</table>
3544
</div>
3645
</div>
3746

38-
<div class="col-md-4 dashboard-widget" ng-if="enable_chart">
47+
<div class="col-md-4 dashboard-widget" ng-if="dashboard.ga_enable">
3948
<div class="panel panel-blue" ng-class="{'panel-loading': !topPages}">
4049
<h2>访问最多的 URL</h2>
4150
<table class="table table-hover">
4251
<tr ng-repeat="page in topPages">
4352
<td>
4453
<a ng-href="{{page.pagePath}}" target="_blank">{{ page.pagePath }}</a>
4554
</td>
46-
<td>
55+
<td class="text-right">
4756
<small><i class="fa fa-eye"></i> {{ page.pageviews}}</small>
4857
</td>
4958
</tr>
5059
</table>
60+
<div class="others">
61+
最近 1 个月统计数据
62+
</div>
5163
</div>
5264
</div>
5365

54-
<div class="col-md-8 dashboard-widget" style="height: 420px;" ng-if="enable_chart">
66+
<div class="col-md-8 dashboard-widget" style="height: 420px;" ng-if="dashboard.ga_enable">
5567
<div class="panel panel-blue" ng-class="{'panel-loading': !dashboard}">
5668
<div>
5769
<div high-chart options="daily_visits" type="line" height="390"></div>
5870
</div>
5971
</div>
6072
</div>
61-
<div class="col-md-4 dashboard-widget" style="height: 420px;" ng-if="enable_chart">
73+
<div class="col-md-4 dashboard-widget" style="height: 420px;" ng-if="dashboard.ga_enable">
6274
<div class="panel panel-blue" ng-class="{'panel-loading': !dashboard}">
6375
<div>
6476
<div high-chart options="browser" type="pie" height="390"></div>

0 commit comments

Comments
 (0)