Dashboard with Google Chart

This commit is contained in:
Manson Wang 2013-11-04 17:45:01 +08:00
parent 2c8705ac3e
commit 7ad05ef034
7 changed files with 94 additions and 452 deletions

View File

@ -71,8 +71,7 @@ gem 'redis-search'
gem 'syslog-logger' gem 'syslog-logger'
gem "recaptcha", :require => "recaptcha/rails" gem "recaptcha", :require => "recaptcha/rails"
gem 'puma' gem "chartkick"
gem 'request-log-analyzer'
gem 'usagewatch' gem 'usagewatch'
# Gems used only for assets and not required # Gems used only for assets and not required

View File

@ -1,5 +1,5 @@
module ApplicationHelper module ApplicationHelper
Time.zone = ActiveSupport::TimeZone[+8.hours]
FLASH_NOTICE_KEYS = [:error, :notice, :warning] FLASH_NOTICE_KEYS = [:error, :notice, :warning]
@ -223,25 +223,49 @@ module ApplicationHelper
end end
def display_visitors(options={}) def display_visitors(options={})
Impression.where(options).and(:referrer.ne => nil).distinct(:session_hash).count Impression.where(options).count
end end
def display_visitors_today 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 end
def display_visitors_this_week 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 end
def display_visitors_this_month 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 end
def display_visitors_this_year 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 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) def display_date_time(object)
object.strftime("%Y-%m-%d %H:%M") object.strftime("%Y-%m-%d %H:%M")
end end

View File

@ -2,399 +2,45 @@
<h2> <h2>
<i class="icons-book-2"></i> <i class="icons-book-2"></i>
<span class="break"></span> <span class="break"></span>
Server Loading <%= t(:server_usage) %>
</h2> </h2>
</div> </div>
<div class="box-content" style='overflow: hidden;'> <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> <span id="cpu_usage" style="display:inline-block;margin: 0 auto"></span>
<div id="mem_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div> <span id="mem_usage" style="display:inline-block;margin: 0 auto"></span>
<div id="disk_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div> <span id="disk_usage" style="display:inline-block;margin: 0 auto"></span>
</div> </div>
<script type="text/javascript"> <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 () { $(function () {
get_cpu_usage(); $.each(UsageTpye,function(type,option){
get_mem_usage(); option['chart'] = new google.visualization.Gauge(document.getElementById(option['id']));
get_disk_usage(); update_usage(type,option);
setInterval(function() { update_usage(type,option); }, option['interval']);
});
}); });
function get_cpu_usage(){ function update_usage(type,option){
$('#cpu_usage').highcharts({ $.get('/admin/dashboards/'+option['fn'],function(usage){
chart: { var data = google.visualization.arrayToDataTable([
type: 'gauge', ['Label', 'Value'],
plotBackgroundColor: null, [type, parseInt(usage)]
plotBackgroundImage: null, ]);
plotBorderWidth: 0,
plotShadow: false
},
title: { var options = {
text: 'CPU Usage' width: 400, height: 180,
}, redFrom: 80, redTo: 100,
yellowFrom:60, yellowTo: 80,
minorTicks: 5
};
pane: { option['chart'].draw(data, options);
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_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
},
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);
}); });
} }
</script> </script>

View File

@ -2,61 +2,33 @@
<h2> <h2>
<i class="icons-book-2"></i> <i class="icons-book-2"></i>
<span class="break"></span> <span class="break"></span>
Traffic Loading <%= t(:monthly_traffic)%>
</h2> </h2>
</div> </div>
<div class="box-content"> <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> </div>
<script type="text/javascript"> <script type="text/javascript">
$(function () { renderLineChart = function (element, series, opts) {
$.getJSON('/admin/dashboards/get_month_traffic', function (data) { waitForLoaded(function () {
// console.log(data); var options = jsOptions(series, opts);
dates = []; var data = createDataTable(series, "datetime");
visits = []; var formatter = new google.visualization.DateFormat({
$.each(data,function(key,value){ pattern: options.pattern
// console.log(value); });
$.each(value,function(date,visit){ formatter.format(data, 0);
dates.push(date); var chart = new google.visualization.LineChart(element);
visits.push(visit); resize(function () {
chart.draw(data, options);
}); });
}); });
};
$('#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
}]
});
});
});
</script> </script>

View File

@ -1,20 +1,15 @@
<script src="http://code.highcharts.com/highcharts.js"></script> <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
<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" />
<section id="main-wrap"> <section id="main-wrap">
<div class="wrap-inner initial"> <div class="wrap-inner initial">
<div class="row-fluid"> <div class="row-fluid">
<% if is_admin? %>
<div class="box span6"> <div class="box span6">
<div id='server_loading'> <div id='server_loading'>
<%= render 'server_loading' %> <%= render 'server_loading' %>
</div> </div>
</div> </div>
<div class="box span4"> <% end %>
<div class="box span6">
<div id='traffic'> <div id='traffic'>
<%= render 'traffic' %> <%= render 'traffic' %>
</div> </div>

View File

@ -289,6 +289,7 @@ en:
menu_enabled_for: Menu enabled for menu_enabled_for: Menu enabled for
module: Module module: Module
module_authorization: Module Authorization module_authorization: Module Authorization
monthly_traffic: Monthly Traffic
more_plus: more+ more_plus: more+
most_visited_page: Most Visited Page most_visited_page: Most Visited Page
multilingual: Multilingual multilingual: Multilingual
@ -377,6 +378,7 @@ en:
search_: Search search_: Search
search_google: Search Google search_google: Search Google
setup_member: Member setup setup_member: Member setup
server_usage: Server Usage
show: Show show: Show
show_mode: show_mode:
index: Index index: Index
@ -516,6 +518,7 @@ en:
vertical: Vertical vertical: Vertical
view: View view: View
view_count: View count view_count: View count
visitors_count: Visits
visitors_this_month: This month's visitors visitors_this_month: This month's visitors
visitors_this_week: This week's visitors visitors_this_week: This week's visitors
visitors_this_year: This year's visitors visitors_this_year: This year's visitors

View File

@ -290,6 +290,7 @@ zh_tw:
menu_enabled_for: 選單啟用 menu_enabled_for: 選單啟用
module: 模組 module: 模組
module_authorization: 模組授權 module_authorization: 模組授權
monthly_traffic: 本月流量
more_plus: 更多+ more_plus: 更多+
most_visited_page: 最多瀏覽頁面 most_visited_page: 最多瀏覽頁面
multilingual: 多語系 multilingual: 多語系
@ -378,6 +379,7 @@ zh_tw:
search_: 搜尋 search_: 搜尋
search_google: 搜尋Google search_google: 搜尋Google
setup_member: 會員設定 setup_member: 會員設定
server_usage: 主機負載
show: 顯示 show: 顯示
show_mode: show_mode:
index: 檢索 index: 檢索
@ -517,6 +519,7 @@ zh_tw:
vertical: 垂直的 vertical: 垂直的
view: 檢視 view: 檢視
view_count: 查看次數 view_count: 查看次數
visitors_count: 造訪人次
visitors_this_month: 本月造訪人次 visitors_this_month: 本月造訪人次
visitors_this_week: 本星期造訪人次 visitors_this_week: 本星期造訪人次
visitors_this_year: 今年造訪人次 visitors_this_year: 今年造訪人次