Dashboard with Google Chart
This commit is contained in:
parent
2c8705ac3e
commit
7ad05ef034
3
Gemfile
3
Gemfile
|
@ -71,8 +71,7 @@ gem 'redis-search'
|
|||
gem 'syslog-logger'
|
||||
gem "recaptcha", :require => "recaptcha/rails"
|
||||
|
||||
gem 'puma'
|
||||
gem 'request-log-analyzer'
|
||||
gem "chartkick"
|
||||
gem 'usagewatch'
|
||||
|
||||
# Gems used only for assets and not required
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
module ApplicationHelper
|
||||
|
||||
Time.zone = ActiveSupport::TimeZone[+8.hours]
|
||||
FLASH_NOTICE_KEYS = [:error, :notice, :warning]
|
||||
|
||||
|
||||
|
@ -223,25 +223,49 @@ module ApplicationHelper
|
|||
end
|
||||
|
||||
def display_visitors(options={})
|
||||
Impression.where(options).and(:referrer.ne => nil).distinct(:session_hash).count
|
||||
Impression.where(options).count
|
||||
end
|
||||
|
||||
def display_visitors_today
|
||||
display_visitors(created_at: {'$gte' => Date.today.beginning_of_day, '$lte' => Date.today.end_of_day})
|
||||
display_visitors(created_at: {'$gte' => Time.now.beginning_of_day, '$lte' => Time.now})
|
||||
end
|
||||
|
||||
def display_visitors_this_week
|
||||
display_visitors(created_at: {'$gte' => Date.today.beginning_of_week, '$lte' => Date.today.end_of_week})
|
||||
display_visitors(created_at: {'$gte' => Time.now-7.days, '$lte' => Time.now})
|
||||
end
|
||||
|
||||
def display_visitors_this_month
|
||||
display_visitors(created_at: {'$gte' => Date.today.beginning_of_month, '$lte' => Date.today.end_of_month})
|
||||
display_visitors(created_at: {'$gte' => Time.now-30.days, '$lte' => Time.now})
|
||||
end
|
||||
|
||||
def display_visitors_this_year
|
||||
display_visitors(created_at: {'$gte' => Date.today.beginning_of_year, '$lte' => Date.today.end_of_year})
|
||||
display_visitors(created_at: {'$gte' => Time.now-365.days, '$lte' => Time.now})
|
||||
end
|
||||
|
||||
def get_month_traffic
|
||||
result = []
|
||||
(0..30).each do |i|
|
||||
visits = Impression.where( created_at: {
|
||||
'$gte' => Time.now.beginning_of_day-i.days,
|
||||
'$lte' => Time.now.end_of_day-i.days}
|
||||
).count
|
||||
result.push([ Time.now.beginning_of_day-i.days, visits])
|
||||
end
|
||||
[:name=> t(:visitors_count),:data=>result]
|
||||
end
|
||||
|
||||
# def get_today_traffic
|
||||
# result = []
|
||||
# (0..30).each do |i|
|
||||
# the_day = i.day.ago
|
||||
# visits = Impression.where( created_at: {'$gte' => the_day.beginning_of_day, '$lte' => the_day.end_of_day}).count
|
||||
# # result.push([ the_day.to_time.to_i, visits])
|
||||
# result.push([ the_day.strftime("%m %d"), visits])
|
||||
# # result.push({'x'=> i, 'y'=> visits})
|
||||
# end
|
||||
# result
|
||||
# end
|
||||
|
||||
def display_date_time(object)
|
||||
object.strftime("%Y-%m-%d %H:%M")
|
||||
end
|
||||
|
|
|
@ -2,399 +2,45 @@
|
|||
<h2>
|
||||
<i class="icons-book-2"></i>
|
||||
<span class="break"></span>
|
||||
Server Loading
|
||||
<%= t(:server_usage) %>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="box-content" style='overflow: hidden;'>
|
||||
<div id="cpu_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
|
||||
<div id="mem_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
|
||||
<div id="disk_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
|
||||
<span id="cpu_usage" style="display:inline-block;margin: 0 auto"></span>
|
||||
<span id="mem_usage" style="display:inline-block;margin: 0 auto"></span>
|
||||
<span id="disk_usage" style="display:inline-block;margin: 0 auto"></span>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
google.load('visualization', '1', {packages:['gauge']});
|
||||
|
||||
var UsageTpye = {'CPU':{'fn':'get_cpu_usage','chart':null,'id':'cpu_usage','interval':2000},
|
||||
'Mem':{'fn':'get_mem_usage','chart':null,'id':'mem_usage','interval':5000},
|
||||
'Disk':{'fn':'get_disk_usage','chart':null,'id':'disk_usage','interval':30000}};
|
||||
|
||||
$(function () {
|
||||
get_cpu_usage();
|
||||
get_mem_usage();
|
||||
get_disk_usage();
|
||||
$.each(UsageTpye,function(type,option){
|
||||
option['chart'] = new google.visualization.Gauge(document.getElementById(option['id']));
|
||||
update_usage(type,option);
|
||||
|
||||
setInterval(function() { update_usage(type,option); }, option['interval']);
|
||||
});
|
||||
});
|
||||
|
||||
function get_cpu_usage(){
|
||||
$('#cpu_usage').highcharts({
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
plotBackgroundColor: null,
|
||||
plotBackgroundImage: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'CPU Usage'
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
background: [{
|
||||
backgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#FFF'],
|
||||
[1, '#333']
|
||||
]
|
||||
},
|
||||
borderWidth: 0,
|
||||
outerRadius: '109%'
|
||||
}, {
|
||||
backgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#333'],
|
||||
[1, '#FFF']
|
||||
]
|
||||
},
|
||||
borderWidth: 1,
|
||||
outerRadius: '107%'
|
||||
}, {
|
||||
// default background
|
||||
}, {
|
||||
backgroundColor: '#DDD',
|
||||
borderWidth: 0,
|
||||
outerRadius: '105%',
|
||||
innerRadius: '103%'
|
||||
}]
|
||||
},
|
||||
|
||||
// the value axis
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
|
||||
minorTickInterval: 'auto',
|
||||
minorTickWidth: 1,
|
||||
minorTickLength: 10,
|
||||
minorTickPosition: 'inside',
|
||||
minorTickColor: '#666',
|
||||
|
||||
tickPixelInterval: 30,
|
||||
tickWidth: 2,
|
||||
tickPosition: 'inside',
|
||||
tickLength: 10,
|
||||
tickColor: '#666',
|
||||
labels: {
|
||||
step: 2,
|
||||
rotation: 'auto'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 60,
|
||||
color: '#55BF3B' // green
|
||||
}, {
|
||||
from: 60,
|
||||
to: 80,
|
||||
color: '#DDDF0D' // yellow
|
||||
}, {
|
||||
from: 80,
|
||||
to: 100,
|
||||
color: '#DF5353' // red
|
||||
}]
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'CPU Usage',
|
||||
data: [0],
|
||||
dataLabels: {
|
||||
formatter: function () {
|
||||
var usage = this.y;
|
||||
return '<span style="color:#339">'+ usage + ' %</span><br/>';
|
||||
},
|
||||
backgroundColor: {
|
||||
linearGradient: {
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 0,
|
||||
y2: 1
|
||||
},
|
||||
stops: [
|
||||
[0, '#DDD'],
|
||||
[1, '#FFF']
|
||||
]
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' %'
|
||||
}
|
||||
}]
|
||||
},
|
||||
function(chart) {
|
||||
update_cpu_usage(chart);
|
||||
setInterval(function() {
|
||||
update_cpu_usage(chart);
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
function update_usage(type,option){
|
||||
$.get('/admin/dashboards/'+option['fn'],function(usage){
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Label', 'Value'],
|
||||
[type, parseInt(usage)]
|
||||
]);
|
||||
|
||||
function update_cpu_usage(chart){
|
||||
$.get('/admin/dashboards/get_cpu_usage',function(usage){
|
||||
var point = chart.series[0].points[0],
|
||||
newVal = Math.round(usage);
|
||||
point.update(newVal);
|
||||
});
|
||||
}
|
||||
|
||||
function get_mem_usage(){
|
||||
$('#mem_usage').highcharts({
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
plotBackgroundColor: null,
|
||||
plotBackgroundImage: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false
|
||||
},
|
||||
var options = {
|
||||
width: 400, height: 180,
|
||||
redFrom: 80, redTo: 100,
|
||||
yellowFrom:60, yellowTo: 80,
|
||||
minorTicks: 5
|
||||
};
|
||||
|
||||
title: {
|
||||
text: 'Memory Usage'
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
background: [{
|
||||
backgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#FFF'],
|
||||
[1, '#333']
|
||||
]
|
||||
},
|
||||
borderWidth: 0,
|
||||
outerRadius: '109%'
|
||||
}, {
|
||||
backgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#333'],
|
||||
[1, '#FFF']
|
||||
]
|
||||
},
|
||||
borderWidth: 1,
|
||||
outerRadius: '107%'
|
||||
}, {
|
||||
// default background
|
||||
}, {
|
||||
backgroundColor: '#DDD',
|
||||
borderWidth: 0,
|
||||
outerRadius: '105%',
|
||||
innerRadius: '103%'
|
||||
}]
|
||||
},
|
||||
|
||||
// the value axis
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
|
||||
minorTickInterval: 'auto',
|
||||
minorTickWidth: 1,
|
||||
minorTickLength: 10,
|
||||
minorTickPosition: 'inside',
|
||||
minorTickColor: '#666',
|
||||
|
||||
tickPixelInterval: 30,
|
||||
tickWidth: 2,
|
||||
tickPosition: 'inside',
|
||||
tickLength: 10,
|
||||
tickColor: '#666',
|
||||
labels: {
|
||||
step: 2,
|
||||
rotation: 'auto'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 60,
|
||||
color: '#55BF3B' // green
|
||||
}, {
|
||||
from: 60,
|
||||
to: 80,
|
||||
color: '#DDDF0D' // yellow
|
||||
}, {
|
||||
from: 80,
|
||||
to: 100,
|
||||
color: '#DF5353' // red
|
||||
}]
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Memory Usage',
|
||||
data: [0],
|
||||
dataLabels: {
|
||||
formatter: function () {
|
||||
var usage = this.y;
|
||||
return '<span style="color:#339">'+ usage + ' %</span><br/>';
|
||||
},
|
||||
backgroundColor: {
|
||||
linearGradient: {
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 0,
|
||||
y2: 1
|
||||
},
|
||||
stops: [
|
||||
[0, '#DDD'],
|
||||
[1, '#FFF']
|
||||
]
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' %'
|
||||
}
|
||||
}]
|
||||
},
|
||||
function(chart) {
|
||||
update_mem_usage(chart)
|
||||
setInterval(function() {
|
||||
update_mem_usage(chart);
|
||||
}, 5000);
|
||||
});
|
||||
}
|
||||
|
||||
function update_mem_usage(chart){
|
||||
$.get('/admin/dashboards/get_mem_usage',function(usage){
|
||||
var point = chart.series[0].points[0],
|
||||
newVal = Math.round(usage);
|
||||
point.update(newVal);
|
||||
});
|
||||
}
|
||||
|
||||
function get_disk_usage(){
|
||||
$('#disk_usage').highcharts({
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
plotBackgroundColor: null,
|
||||
plotBackgroundImage: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Disk Usage'
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
background: [{
|
||||
backgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#FFF'],
|
||||
[1, '#333']
|
||||
]
|
||||
},
|
||||
borderWidth: 0,
|
||||
outerRadius: '109%'
|
||||
}, {
|
||||
backgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#333'],
|
||||
[1, '#FFF']
|
||||
]
|
||||
},
|
||||
borderWidth: 1,
|
||||
outerRadius: '107%'
|
||||
}, {
|
||||
// default background
|
||||
}, {
|
||||
backgroundColor: '#DDD',
|
||||
borderWidth: 0,
|
||||
outerRadius: '105%',
|
||||
innerRadius: '103%'
|
||||
}]
|
||||
},
|
||||
|
||||
// the value axis
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
|
||||
minorTickInterval: 'auto',
|
||||
minorTickWidth: 1,
|
||||
minorTickLength: 10,
|
||||
minorTickPosition: 'inside',
|
||||
minorTickColor: '#666',
|
||||
|
||||
tickPixelInterval: 30,
|
||||
tickWidth: 2,
|
||||
tickPosition: 'inside',
|
||||
tickLength: 10,
|
||||
tickColor: '#666',
|
||||
labels: {
|
||||
step: 2,
|
||||
rotation: 'auto'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 60,
|
||||
color: '#55BF3B' // green
|
||||
}, {
|
||||
from: 60,
|
||||
to: 80,
|
||||
color: '#DDDF0D' // yellow
|
||||
}, {
|
||||
from: 80,
|
||||
to: 100,
|
||||
color: '#DF5353' // red
|
||||
}]
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Disk Usage',
|
||||
data: [0],
|
||||
dataLabels: {
|
||||
formatter: function () {
|
||||
var usage = this.y;
|
||||
return '<span style="color:#339">'+ usage + ' %</span><br/>';
|
||||
},
|
||||
backgroundColor: {
|
||||
linearGradient: {
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 0,
|
||||
y2: 1
|
||||
},
|
||||
stops: [
|
||||
[0, '#DDD'],
|
||||
[1, '#FFF']
|
||||
]
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' %'
|
||||
}
|
||||
}]
|
||||
},
|
||||
function(chart) {
|
||||
update_disk_usage(chart);
|
||||
setInterval(function() {
|
||||
update_disk_usage(chart);
|
||||
}, 60000);
|
||||
});
|
||||
}
|
||||
|
||||
function update_disk_usage(chart){
|
||||
$.get('/admin/dashboards/get_disk_usage',function(usage){
|
||||
var point = chart.series[0].points[0],
|
||||
newVal = Math.round(usage);
|
||||
point.update(newVal);
|
||||
option['chart'].draw(data, options);
|
||||
});
|
||||
}
|
||||
</script>
|
|
@ -2,61 +2,33 @@
|
|||
<h2>
|
||||
<i class="icons-book-2"></i>
|
||||
<span class="break"></span>
|
||||
Traffic Loading
|
||||
<%= t(:monthly_traffic)%>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div id="month_traffic" style="min-width: 310px; height: 230px; margin: 0 auto"></div>
|
||||
<div id="month_traffic" style="min-width: 310px; margin: 0 auto">
|
||||
<%= line_chart get_month_traffic, :height => "200px", :name => 'Visit',
|
||||
:library => {
|
||||
legend: 'none',
|
||||
chartArea:{ width: '95%', left: 50, right: 0},
|
||||
hAxis:{format:'MMM-d',gridlines:{color: '#CCC', count: 31}},
|
||||
vAxis:{minValue:-100,viewWindowMode: 'maximized'}
|
||||
} %>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$.getJSON('/admin/dashboards/get_month_traffic', function (data) {
|
||||
// console.log(data);
|
||||
dates = [];
|
||||
visits = [];
|
||||
$.each(data,function(key,value){
|
||||
// console.log(value);
|
||||
$.each(value,function(date,visit){
|
||||
dates.push(date);
|
||||
visits.push(visit);
|
||||
});
|
||||
});
|
||||
|
||||
$('#month_traffic').highcharts({
|
||||
chart: {
|
||||
type: 'spline'
|
||||
},
|
||||
title: {
|
||||
text: 'Monthly Traffic',
|
||||
x: 0 //center
|
||||
},
|
||||
xAxis: {
|
||||
categories: dates
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Number of visits'
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
color: '#808080'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ''
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
borderWidth: 0
|
||||
},
|
||||
series: [{
|
||||
name: 'Visits',
|
||||
data: visits
|
||||
}]
|
||||
});
|
||||
});
|
||||
});
|
||||
renderLineChart = function (element, series, opts) {
|
||||
waitForLoaded(function () {
|
||||
var options = jsOptions(series, opts);
|
||||
var data = createDataTable(series, "datetime");
|
||||
var formatter = new google.visualization.DateFormat({
|
||||
pattern: options.pattern
|
||||
});
|
||||
formatter.format(data, 0);
|
||||
var chart = new google.visualization.LineChart(element);
|
||||
resize(function () {
|
||||
chart.draw(data, options);
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
|
@ -1,20 +1,15 @@
|
|||
<script src="http://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="http://code.highcharts.com/highcharts-more.js"></script>
|
||||
<script src="http://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
|
||||
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
|
||||
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
|
||||
|
||||
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
|
||||
<section id="main-wrap">
|
||||
<div class="wrap-inner initial">
|
||||
<div class="row-fluid">
|
||||
<% if is_admin? %>
|
||||
<div class="box span6">
|
||||
<div id='server_loading'>
|
||||
<%= render 'server_loading' %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box span4">
|
||||
<% end %>
|
||||
<div class="box span6">
|
||||
<div id='traffic'>
|
||||
<%= render 'traffic' %>
|
||||
</div>
|
||||
|
|
|
@ -289,6 +289,7 @@ en:
|
|||
menu_enabled_for: Menu enabled for
|
||||
module: Module
|
||||
module_authorization: Module Authorization
|
||||
monthly_traffic: Monthly Traffic
|
||||
more_plus: more+
|
||||
most_visited_page: Most Visited Page
|
||||
multilingual: Multilingual
|
||||
|
@ -377,6 +378,7 @@ en:
|
|||
search_: Search
|
||||
search_google: Search Google
|
||||
setup_member: Member setup
|
||||
server_usage: Server Usage
|
||||
show: Show
|
||||
show_mode:
|
||||
index: Index
|
||||
|
@ -516,6 +518,7 @@ en:
|
|||
vertical: Vertical
|
||||
view: View
|
||||
view_count: View count
|
||||
visitors_count: Visits
|
||||
visitors_this_month: This month's visitors
|
||||
visitors_this_week: This week's visitors
|
||||
visitors_this_year: This year's visitors
|
||||
|
|
|
@ -290,6 +290,7 @@ zh_tw:
|
|||
menu_enabled_for: 選單啟用
|
||||
module: 模組
|
||||
module_authorization: 模組授權
|
||||
monthly_traffic: 本月流量
|
||||
more_plus: 更多+
|
||||
most_visited_page: 最多瀏覽頁面
|
||||
multilingual: 多語系
|
||||
|
@ -378,6 +379,7 @@ zh_tw:
|
|||
search_: 搜尋
|
||||
search_google: 搜尋Google
|
||||
setup_member: 會員設定
|
||||
server_usage: 主機負載
|
||||
show: 顯示
|
||||
show_mode:
|
||||
index: 檢索
|
||||
|
@ -517,6 +519,7 @@ zh_tw:
|
|||
vertical: 垂直的
|
||||
view: 檢視
|
||||
view_count: 查看次數
|
||||
visitors_count: 造訪人次
|
||||
visitors_this_month: 本月造訪人次
|
||||
visitors_this_week: 本星期造訪人次
|
||||
visitors_this_year: 今年造訪人次
|
||||
|
|
Reference in New Issue