developers
/
orbit-basic
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Gemfile
View File

@ -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

36
app/helpers/application_helper.rb
View File

@ -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

412
app/views/admin/dashboards/_server_loading.erb
View File

@ -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
},
function update_usage(type,option){
$.get('/admin/dashboards/'+option['fn'],function(usage){
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
[type, parseInt(usage)]
]);
title: {
text: 'CPU Usage'
},
var options = {
width: 400, height: 180,
redFrom: 80, redTo: 100,
yellowFrom:60, yellowTo: 80,
minorTicks: 5
};
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_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);
option['chart'].draw(data, options);
});
}
</script>

76
app/views/admin/dashboards/_traffic_loading.erb
View File

@ -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>

13
app/views/admin/dashboards/index.html.erb
View File

@ -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>

3
config/locales/en.yml
View File

@ -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

3
config/locales/zh_tw.yml
View File

@ -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: 今年造訪人次