Working on dashboard
This commit is contained in:
Manson Wang
parent
d636248073
commit
f744bf266c
|
|
@ -50,16 +50,6 @@ class Admin::DashboardsController < OrbitBackendController
|
||||||
render :json => @usw.uw_diskused_perc.to_s
|
render :json => @usw.uw_diskused_perc.to_s
|
||||||
end
|
end
|
||||||
|
|
||||||
def get_month_traffic
|
|
||||||
result = []
|
|
||||||
(0..31).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.strftime("%b-%d")=>visits})
|
|
||||||
end
|
|
||||||
render :js => result.to_json
|
|
||||||
end
|
|
||||||
|
|
||||||
protected
|
protected
|
||||||
|
|
||||||
def get_module_app_count(*args)
|
def get_module_app_count(*args)
|
||||||
|
|
|
||||||
|
|
@ -242,6 +242,17 @@ module ApplicationHelper
|
||||||
display_visitors(created_at: {'$gte' => Date.today.beginning_of_year, '$lte' => Date.today.end_of_year})
|
display_visitors(created_at: {'$gte' => Date.today.beginning_of_year, '$lte' => Date.today.end_of_year})
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def get_month_traffic
|
||||||
|
result = [['Date','Visits']]
|
||||||
|
(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.strftime("%b-%d"), visits])
|
||||||
|
# result.push({'x'=> i, 'y'=> visits})
|
||||||
|
end
|
||||||
|
result.to_json
|
||||||
|
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
|
||||||
|
|
|
||||||
|
|
@ -2,399 +2,399 @@
|
||||||
<h2>
|
<h2>
|
||||||
<i class="icons-book-2"></i>
|
<i class="icons-book-2"></i>
|
||||||
<span class="break"></span>
|
<span class="break"></span>
|
||||||
Server Loading
|
Server Status
|
||||||
</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="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></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="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></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="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></span>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(function () {
|
$(function () {
|
||||||
get_cpu_usage();
|
// get_cpu_usage();
|
||||||
get_mem_usage();
|
// get_mem_usage();
|
||||||
get_disk_usage();
|
// get_disk_usage();
|
||||||
});
|
});
|
||||||
|
|
||||||
function get_cpu_usage(){
|
// function get_cpu_usage(){
|
||||||
$('#cpu_usage').highcharts({
|
// $('#cpu_usage').highcharts({
|
||||||
chart: {
|
// chart: {
|
||||||
type: 'gauge',
|
// type: 'gauge',
|
||||||
plotBackgroundColor: null,
|
// plotBackgroundColor: null,
|
||||||
plotBackgroundImage: null,
|
// plotBackgroundImage: null,
|
||||||
plotBorderWidth: 0,
|
// plotBorderWidth: 0,
|
||||||
plotShadow: false
|
// plotShadow: false
|
||||||
},
|
// },
|
||||||
|
|
||||||
title: {
|
// title: {
|
||||||
text: 'CPU Usage'
|
// text: 'CPU Usage'
|
||||||
},
|
// },
|
||||||
|
|
||||||
pane: {
|
// pane: {
|
||||||
startAngle: -150,
|
// startAngle: -150,
|
||||||
endAngle: 150,
|
// endAngle: 150,
|
||||||
background: [{
|
// background: [{
|
||||||
backgroundColor: {
|
// backgroundColor: {
|
||||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
// linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||||
stops: [
|
// stops: [
|
||||||
[0, '#FFF'],
|
// [0, '#FFF'],
|
||||||
[1, '#333']
|
// [1, '#333']
|
||||||
]
|
// ]
|
||||||
},
|
// },
|
||||||
borderWidth: 0,
|
// borderWidth: 0,
|
||||||
outerRadius: '109%'
|
// outerRadius: '109%'
|
||||||
}, {
|
// }, {
|
||||||
backgroundColor: {
|
// backgroundColor: {
|
||||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
// linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||||
stops: [
|
// stops: [
|
||||||
[0, '#333'],
|
// [0, '#333'],
|
||||||
[1, '#FFF']
|
// [1, '#FFF']
|
||||||
]
|
// ]
|
||||||
},
|
// },
|
||||||
borderWidth: 1,
|
// borderWidth: 1,
|
||||||
outerRadius: '107%'
|
// outerRadius: '107%'
|
||||||
}, {
|
// }, {
|
||||||
// default background
|
// // default background
|
||||||
}, {
|
// }, {
|
||||||
backgroundColor: '#DDD',
|
// backgroundColor: '#DDD',
|
||||||
borderWidth: 0,
|
// borderWidth: 0,
|
||||||
outerRadius: '105%',
|
// outerRadius: '105%',
|
||||||
innerRadius: '103%'
|
// innerRadius: '103%'
|
||||||
}]
|
// }]
|
||||||
},
|
// },
|
||||||
|
|
||||||
// the value axis
|
// // the value axis
|
||||||
yAxis: {
|
// yAxis: {
|
||||||
min: 0,
|
// min: 0,
|
||||||
max: 100,
|
// max: 100,
|
||||||
|
|
||||||
minorTickInterval: 'auto',
|
// minorTickInterval: 'auto',
|
||||||
minorTickWidth: 1,
|
// minorTickWidth: 1,
|
||||||
minorTickLength: 10,
|
// minorTickLength: 10,
|
||||||
minorTickPosition: 'inside',
|
// minorTickPosition: 'inside',
|
||||||
minorTickColor: '#666',
|
// minorTickColor: '#666',
|
||||||
|
|
||||||
tickPixelInterval: 30,
|
// tickPixelInterval: 30,
|
||||||
tickWidth: 2,
|
// tickWidth: 2,
|
||||||
tickPosition: 'inside',
|
// tickPosition: 'inside',
|
||||||
tickLength: 10,
|
// tickLength: 10,
|
||||||
tickColor: '#666',
|
// tickColor: '#666',
|
||||||
labels: {
|
// labels: {
|
||||||
step: 2,
|
// step: 2,
|
||||||
rotation: 'auto'
|
// rotation: 'auto'
|
||||||
},
|
// },
|
||||||
title: {
|
// title: {
|
||||||
text: ''
|
// text: ''
|
||||||
},
|
// },
|
||||||
plotBands: [{
|
// plotBands: [{
|
||||||
from: 0,
|
// from: 0,
|
||||||
to: 60,
|
// to: 60,
|
||||||
color: '#55BF3B' // green
|
// color: '#55BF3B' // green
|
||||||
}, {
|
// }, {
|
||||||
from: 60,
|
// from: 60,
|
||||||
to: 80,
|
// to: 80,
|
||||||
color: '#DDDF0D' // yellow
|
// color: '#DDDF0D' // yellow
|
||||||
}, {
|
// }, {
|
||||||
from: 80,
|
// from: 80,
|
||||||
to: 100,
|
// to: 100,
|
||||||
color: '#DF5353' // red
|
// color: '#DF5353' // red
|
||||||
}]
|
// }]
|
||||||
},
|
// },
|
||||||
|
|
||||||
series: [{
|
// series: [{
|
||||||
name: 'CPU Usage',
|
// name: 'CPU Usage',
|
||||||
data: [0],
|
// data: [0],
|
||||||
dataLabels: {
|
// dataLabels: {
|
||||||
formatter: function () {
|
// formatter: function () {
|
||||||
var usage = this.y;
|
// var usage = this.y;
|
||||||
return '<span style="color:#339">'+ usage + ' %</span><br/>';
|
// return '<span style="color:#339">'+ usage + ' %</span><br/>';
|
||||||
},
|
// },
|
||||||
backgroundColor: {
|
// backgroundColor: {
|
||||||
linearGradient: {
|
// linearGradient: {
|
||||||
x1: 0,
|
// x1: 0,
|
||||||
y1: 0,
|
// y1: 0,
|
||||||
x2: 0,
|
// x2: 0,
|
||||||
y2: 1
|
// y2: 1
|
||||||
},
|
// },
|
||||||
stops: [
|
// stops: [
|
||||||
[0, '#DDD'],
|
// [0, '#DDD'],
|
||||||
[1, '#FFF']
|
// [1, '#FFF']
|
||||||
]
|
// ]
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
valueSuffix: ' %'
|
// valueSuffix: ' %'
|
||||||
}
|
// }
|
||||||
}]
|
// }]
|
||||||
},
|
// },
|
||||||
function(chart) {
|
// function(chart) {
|
||||||
update_cpu_usage(chart);
|
// update_cpu_usage(chart);
|
||||||
setInterval(function() {
|
// setInterval(function() {
|
||||||
update_cpu_usage(chart);
|
// update_cpu_usage(chart);
|
||||||
}, 2000);
|
// }, 2000);
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
function update_cpu_usage(chart){
|
// function update_cpu_usage(chart){
|
||||||
$.get('/admin/dashboards/get_cpu_usage',function(usage){
|
// $.get('/admin/dashboards/get_cpu_usage',function(usage){
|
||||||
var point = chart.series[0].points[0],
|
// var point = chart.series[0].points[0],
|
||||||
newVal = Math.round(usage);
|
// newVal = Math.round(usage);
|
||||||
point.update(newVal);
|
// point.update(newVal);
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
function get_mem_usage(){
|
// function get_mem_usage(){
|
||||||
$('#mem_usage').highcharts({
|
// $('#mem_usage').highcharts({
|
||||||
chart: {
|
// chart: {
|
||||||
type: 'gauge',
|
// type: 'gauge',
|
||||||
plotBackgroundColor: null,
|
// plotBackgroundColor: null,
|
||||||
plotBackgroundImage: null,
|
// plotBackgroundImage: null,
|
||||||
plotBorderWidth: 0,
|
// plotBorderWidth: 0,
|
||||||
plotShadow: false
|
// plotShadow: false
|
||||||
},
|
// },
|
||||||
|
|
||||||
title: {
|
// title: {
|
||||||
text: 'Memory Usage'
|
// text: 'Memory Usage'
|
||||||
},
|
// },
|
||||||
|
|
||||||
pane: {
|
// pane: {
|
||||||
startAngle: -150,
|
// startAngle: -150,
|
||||||
endAngle: 150,
|
// endAngle: 150,
|
||||||
background: [{
|
// background: [{
|
||||||
backgroundColor: {
|
// backgroundColor: {
|
||||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
// linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||||
stops: [
|
// stops: [
|
||||||
[0, '#FFF'],
|
// [0, '#FFF'],
|
||||||
[1, '#333']
|
// [1, '#333']
|
||||||
]
|
// ]
|
||||||
},
|
// },
|
||||||
borderWidth: 0,
|
// borderWidth: 0,
|
||||||
outerRadius: '109%'
|
// outerRadius: '109%'
|
||||||
}, {
|
// }, {
|
||||||
backgroundColor: {
|
// backgroundColor: {
|
||||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
// linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||||
stops: [
|
// stops: [
|
||||||
[0, '#333'],
|
// [0, '#333'],
|
||||||
[1, '#FFF']
|
// [1, '#FFF']
|
||||||
]
|
// ]
|
||||||
},
|
// },
|
||||||
borderWidth: 1,
|
// borderWidth: 1,
|
||||||
outerRadius: '107%'
|
// outerRadius: '107%'
|
||||||
}, {
|
// }, {
|
||||||
// default background
|
// // default background
|
||||||
}, {
|
// }, {
|
||||||
backgroundColor: '#DDD',
|
// backgroundColor: '#DDD',
|
||||||
borderWidth: 0,
|
// borderWidth: 0,
|
||||||
outerRadius: '105%',
|
// outerRadius: '105%',
|
||||||
innerRadius: '103%'
|
// innerRadius: '103%'
|
||||||
}]
|
// }]
|
||||||
},
|
// },
|
||||||
|
|
||||||
// the value axis
|
// // the value axis
|
||||||
yAxis: {
|
// yAxis: {
|
||||||
min: 0,
|
// min: 0,
|
||||||
max: 100,
|
// max: 100,
|
||||||
|
|
||||||
minorTickInterval: 'auto',
|
// minorTickInterval: 'auto',
|
||||||
minorTickWidth: 1,
|
// minorTickWidth: 1,
|
||||||
minorTickLength: 10,
|
// minorTickLength: 10,
|
||||||
minorTickPosition: 'inside',
|
// minorTickPosition: 'inside',
|
||||||
minorTickColor: '#666',
|
// minorTickColor: '#666',
|
||||||
|
|
||||||
tickPixelInterval: 30,
|
// tickPixelInterval: 30,
|
||||||
tickWidth: 2,
|
// tickWidth: 2,
|
||||||
tickPosition: 'inside',
|
// tickPosition: 'inside',
|
||||||
tickLength: 10,
|
// tickLength: 10,
|
||||||
tickColor: '#666',
|
// tickColor: '#666',
|
||||||
labels: {
|
// labels: {
|
||||||
step: 2,
|
// step: 2,
|
||||||
rotation: 'auto'
|
// rotation: 'auto'
|
||||||
},
|
// },
|
||||||
title: {
|
// title: {
|
||||||
text: ''
|
// text: ''
|
||||||
},
|
// },
|
||||||
plotBands: [{
|
// plotBands: [{
|
||||||
from: 0,
|
// from: 0,
|
||||||
to: 60,
|
// to: 60,
|
||||||
color: '#55BF3B' // green
|
// color: '#55BF3B' // green
|
||||||
}, {
|
// }, {
|
||||||
from: 60,
|
// from: 60,
|
||||||
to: 80,
|
// to: 80,
|
||||||
color: '#DDDF0D' // yellow
|
// color: '#DDDF0D' // yellow
|
||||||
}, {
|
// }, {
|
||||||
from: 80,
|
// from: 80,
|
||||||
to: 100,
|
// to: 100,
|
||||||
color: '#DF5353' // red
|
// color: '#DF5353' // red
|
||||||
}]
|
// }]
|
||||||
},
|
// },
|
||||||
|
|
||||||
series: [{
|
// series: [{
|
||||||
name: 'Memory Usage',
|
// name: 'Memory Usage',
|
||||||
data: [0],
|
// data: [0],
|
||||||
dataLabels: {
|
// dataLabels: {
|
||||||
formatter: function () {
|
// formatter: function () {
|
||||||
var usage = this.y;
|
// var usage = this.y;
|
||||||
return '<span style="color:#339">'+ usage + ' %</span><br/>';
|
// return '<span style="color:#339">'+ usage + ' %</span><br/>';
|
||||||
},
|
// },
|
||||||
backgroundColor: {
|
// backgroundColor: {
|
||||||
linearGradient: {
|
// linearGradient: {
|
||||||
x1: 0,
|
// x1: 0,
|
||||||
y1: 0,
|
// y1: 0,
|
||||||
x2: 0,
|
// x2: 0,
|
||||||
y2: 1
|
// y2: 1
|
||||||
},
|
// },
|
||||||
stops: [
|
// stops: [
|
||||||
[0, '#DDD'],
|
// [0, '#DDD'],
|
||||||
[1, '#FFF']
|
// [1, '#FFF']
|
||||||
]
|
// ]
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
valueSuffix: ' %'
|
// valueSuffix: ' %'
|
||||||
}
|
// }
|
||||||
}]
|
// }]
|
||||||
},
|
// },
|
||||||
function(chart) {
|
// function(chart) {
|
||||||
update_mem_usage(chart)
|
// update_mem_usage(chart)
|
||||||
setInterval(function() {
|
// setInterval(function() {
|
||||||
update_mem_usage(chart);
|
// update_mem_usage(chart);
|
||||||
}, 5000);
|
// }, 5000);
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
function update_mem_usage(chart){
|
// function update_mem_usage(chart){
|
||||||
$.get('/admin/dashboards/get_mem_usage',function(usage){
|
// $.get('/admin/dashboards/get_mem_usage',function(usage){
|
||||||
var point = chart.series[0].points[0],
|
// var point = chart.series[0].points[0],
|
||||||
newVal = Math.round(usage);
|
// newVal = Math.round(usage);
|
||||||
point.update(newVal);
|
// point.update(newVal);
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
function get_disk_usage(){
|
// function get_disk_usage(){
|
||||||
$('#disk_usage').highcharts({
|
// $('#disk_usage').highcharts({
|
||||||
chart: {
|
// chart: {
|
||||||
type: 'gauge',
|
// type: 'gauge',
|
||||||
plotBackgroundColor: null,
|
// plotBackgroundColor: null,
|
||||||
plotBackgroundImage: null,
|
// plotBackgroundImage: null,
|
||||||
plotBorderWidth: 0,
|
// plotBorderWidth: 0,
|
||||||
plotShadow: false
|
// plotShadow: false
|
||||||
},
|
// },
|
||||||
|
|
||||||
title: {
|
// title: {
|
||||||
text: 'Disk Usage'
|
// text: 'Disk Usage'
|
||||||
},
|
// },
|
||||||
|
|
||||||
pane: {
|
// pane: {
|
||||||
startAngle: -150,
|
// startAngle: -150,
|
||||||
endAngle: 150,
|
// endAngle: 150,
|
||||||
background: [{
|
// background: [{
|
||||||
backgroundColor: {
|
// backgroundColor: {
|
||||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
// linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||||
stops: [
|
// stops: [
|
||||||
[0, '#FFF'],
|
// [0, '#FFF'],
|
||||||
[1, '#333']
|
// [1, '#333']
|
||||||
]
|
// ]
|
||||||
},
|
// },
|
||||||
borderWidth: 0,
|
// borderWidth: 0,
|
||||||
outerRadius: '109%'
|
// outerRadius: '109%'
|
||||||
}, {
|
// }, {
|
||||||
backgroundColor: {
|
// backgroundColor: {
|
||||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
// linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||||
stops: [
|
// stops: [
|
||||||
[0, '#333'],
|
// [0, '#333'],
|
||||||
[1, '#FFF']
|
// [1, '#FFF']
|
||||||
]
|
// ]
|
||||||
},
|
// },
|
||||||
borderWidth: 1,
|
// borderWidth: 1,
|
||||||
outerRadius: '107%'
|
// outerRadius: '107%'
|
||||||
}, {
|
// }, {
|
||||||
// default background
|
// // default background
|
||||||
}, {
|
// }, {
|
||||||
backgroundColor: '#DDD',
|
// backgroundColor: '#DDD',
|
||||||
borderWidth: 0,
|
// borderWidth: 0,
|
||||||
outerRadius: '105%',
|
// outerRadius: '105%',
|
||||||
innerRadius: '103%'
|
// innerRadius: '103%'
|
||||||
}]
|
// }]
|
||||||
},
|
// },
|
||||||
|
|
||||||
// the value axis
|
// // the value axis
|
||||||
yAxis: {
|
// yAxis: {
|
||||||
min: 0,
|
// min: 0,
|
||||||
max: 100,
|
// max: 100,
|
||||||
|
|
||||||
minorTickInterval: 'auto',
|
// minorTickInterval: 'auto',
|
||||||
minorTickWidth: 1,
|
// minorTickWidth: 1,
|
||||||
minorTickLength: 10,
|
// minorTickLength: 10,
|
||||||
minorTickPosition: 'inside',
|
// minorTickPosition: 'inside',
|
||||||
minorTickColor: '#666',
|
// minorTickColor: '#666',
|
||||||
|
|
||||||
tickPixelInterval: 30,
|
// tickPixelInterval: 30,
|
||||||
tickWidth: 2,
|
// tickWidth: 2,
|
||||||
tickPosition: 'inside',
|
// tickPosition: 'inside',
|
||||||
tickLength: 10,
|
// tickLength: 10,
|
||||||
tickColor: '#666',
|
// tickColor: '#666',
|
||||||
labels: {
|
// labels: {
|
||||||
step: 2,
|
// step: 2,
|
||||||
rotation: 'auto'
|
// rotation: 'auto'
|
||||||
},
|
// },
|
||||||
title: {
|
// title: {
|
||||||
text: ''
|
// text: ''
|
||||||
},
|
// },
|
||||||
plotBands: [{
|
// plotBands: [{
|
||||||
from: 0,
|
// from: 0,
|
||||||
to: 60,
|
// to: 60,
|
||||||
color: '#55BF3B' // green
|
// color: '#55BF3B' // green
|
||||||
}, {
|
// }, {
|
||||||
from: 60,
|
// from: 60,
|
||||||
to: 80,
|
// to: 80,
|
||||||
color: '#DDDF0D' // yellow
|
// color: '#DDDF0D' // yellow
|
||||||
}, {
|
// }, {
|
||||||
from: 80,
|
// from: 80,
|
||||||
to: 100,
|
// to: 100,
|
||||||
color: '#DF5353' // red
|
// color: '#DF5353' // red
|
||||||
}]
|
// }]
|
||||||
},
|
// },
|
||||||
|
|
||||||
series: [{
|
// series: [{
|
||||||
name: 'Disk Usage',
|
// name: 'Disk Usage',
|
||||||
data: [0],
|
// data: [0],
|
||||||
dataLabels: {
|
// dataLabels: {
|
||||||
formatter: function () {
|
// formatter: function () {
|
||||||
var usage = this.y;
|
// var usage = this.y;
|
||||||
return '<span style="color:#339">'+ usage + ' %</span><br/>';
|
// return '<span style="color:#339">'+ usage + ' %</span><br/>';
|
||||||
},
|
// },
|
||||||
backgroundColor: {
|
// backgroundColor: {
|
||||||
linearGradient: {
|
// linearGradient: {
|
||||||
x1: 0,
|
// x1: 0,
|
||||||
y1: 0,
|
// y1: 0,
|
||||||
x2: 0,
|
// x2: 0,
|
||||||
y2: 1
|
// y2: 1
|
||||||
},
|
// },
|
||||||
stops: [
|
// stops: [
|
||||||
[0, '#DDD'],
|
// [0, '#DDD'],
|
||||||
[1, '#FFF']
|
// [1, '#FFF']
|
||||||
]
|
// ]
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
valueSuffix: ' %'
|
// valueSuffix: ' %'
|
||||||
}
|
// }
|
||||||
}]
|
// }]
|
||||||
},
|
// },
|
||||||
function(chart) {
|
// function(chart) {
|
||||||
update_disk_usage(chart);
|
// update_disk_usage(chart);
|
||||||
setInterval(function() {
|
// setInterval(function() {
|
||||||
update_disk_usage(chart);
|
// update_disk_usage(chart);
|
||||||
}, 60000);
|
// }, 60000);
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
function update_disk_usage(chart){
|
// function update_disk_usage(chart){
|
||||||
$.get('/admin/dashboards/get_disk_usage',function(usage){
|
// $.get('/admin/dashboards/get_disk_usage',function(usage){
|
||||||
var point = chart.series[0].points[0],
|
// var point = chart.series[0].points[0],
|
||||||
newVal = Math.round(usage);
|
// newVal = Math.round(usage);
|
||||||
point.update(newVal);
|
// point.update(newVal);
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -2,61 +2,58 @@
|
||||||
<h2>
|
<h2>
|
||||||
<i class="icons-book-2"></i>
|
<i class="icons-book-2"></i>
|
||||||
<span class="break"></span>
|
<span class="break"></span>
|
||||||
Traffic Loading
|
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"></div>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(function () {
|
google.load("visualization", "1", {packages:["corechart"]});
|
||||||
$.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({
|
var chart;
|
||||||
chart: {
|
var datas =<%= raw(get_month_traffic) %>;
|
||||||
type: 'spline'
|
var initData;
|
||||||
},
|
|
||||||
title: {
|
google.setOnLoadCallback(init);
|
||||||
text: 'Monthly Traffic',
|
window.onresize = drawChart;
|
||||||
x: 0 //center
|
|
||||||
},
|
function init() {
|
||||||
xAxis: {
|
initData = new google.visualization.DataTable();
|
||||||
categories: dates
|
|
||||||
},
|
$.each(datas,function(idx,data){
|
||||||
yAxis: {
|
initData.setValue(idx,1,[data[0],0]);
|
||||||
title: {
|
});
|
||||||
text: 'Number of visits'
|
|
||||||
},
|
var options = {
|
||||||
plotLines: [{
|
title: 'Monthly Visits',
|
||||||
value: 0,
|
titlePosition: 'in',
|
||||||
width: 1,
|
fontSize: 10,
|
||||||
color: '#808080'
|
curveType: 'function',
|
||||||
}]
|
hAxis:{
|
||||||
},
|
slantedText: true,
|
||||||
tooltip: {
|
slantedTextAngle: 35
|
||||||
valueSuffix: ''
|
},
|
||||||
},
|
chartArea:{
|
||||||
legend: {
|
width: '90%',
|
||||||
layout: 'vertical',
|
left: 50,
|
||||||
align: 'right',
|
right: 0
|
||||||
verticalAlign: 'middle',
|
},
|
||||||
borderWidth: 0
|
animation:{
|
||||||
},
|
duration: 1000,
|
||||||
series: [{
|
easing: 'out',
|
||||||
name: 'Visits',
|
}
|
||||||
data: visits
|
};
|
||||||
}]
|
|
||||||
});
|
drawChart();
|
||||||
});
|
}
|
||||||
});
|
|
||||||
|
function drawChart() {
|
||||||
|
chart = new google.visualization.AreaChart(document.getElementById('month_traffic'));
|
||||||
|
chart.draw(google.visualization.arrayToDataTable(initData), options);
|
||||||
|
|
||||||
|
// $.each(datas,function(idx,data){
|
||||||
|
// initData.push([data[0],0]);
|
||||||
|
// });
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,10 +1,4 @@
|
||||||
<script src="http://code.highcharts.com/highcharts.js"></script>
|
<script type="text/javascript" src="https://www.google.com/jsapi"></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" />
|
|
||||||
|
|
||||||
<section id="main-wrap">
|
<section id="main-wrap">
|
||||||
<div class="wrap-inner initial">
|
<div class="wrap-inner initial">
|
||||||
|
|
@ -14,11 +8,6 @@
|
||||||
<%= render 'server_loading' %>
|
<%= render 'server_loading' %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box span4">
|
|
||||||
<div id='traffic'>
|
|
||||||
<%= render 'traffic' %>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<div class="box span">
|
<div class="box span">
|
||||||
|
|
@ -47,6 +36,11 @@
|
||||||
<%= render 'most_visited' %>
|
<%= render 'most_visited' %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="box span4">
|
||||||
|
<div id='traffic'>
|
||||||
|
<%= render 'traffic' %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -70,7 +70,7 @@ Orbit::Application.routes.draw do
|
||||||
get 'get_cpu_usage'
|
get 'get_cpu_usage'
|
||||||
get 'get_mem_usage'
|
get 'get_mem_usage'
|
||||||
get 'get_disk_usage'
|
get 'get_disk_usage'
|
||||||
get 'get_month_traffic'
|
# get 'get_month_traffic'
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
resources :designs do
|
resources :designs do
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue