Change graphing library for node view
Server view coming soon
This commit is contained in:
Dane Everitt
parent
e98e7d5e7f
commit
aa54e657e1
5 changed files with 453 additions and 187 deletions
|
|
@ -36,12 +36,16 @@ Bootstrap - [license](https://github.com/twbs/bootstrap/blob/master/LICENSE) - [
|
||||||
|
|
||||||
BootStrap Notify - [license](https://github.com/mouse0270/bootstrap-notify/blob/master/LICENSE) - [homepage](http://bootstrap-notify.remabledesigns.com)
|
BootStrap Notify - [license](https://github.com/mouse0270/bootstrap-notify/blob/master/LICENSE) - [homepage](http://bootstrap-notify.remabledesigns.com)
|
||||||
|
|
||||||
|
D3.js - [license](https://github.com/mbostock/d3/blob/master/LICENSE) - [homepage](https://d3js.org/)
|
||||||
|
|
||||||
FontAwesome - [license](http://fontawesome.io/license/) - [homepage](http://fontawesome.io)
|
FontAwesome - [license](http://fontawesome.io/license/) - [homepage](http://fontawesome.io)
|
||||||
|
|
||||||
FuelUX - [license](https://github.com/ExactTarget/fuelux/blob/master/LICENSE) - [homepage](http://getfuelux.com)
|
FuelUX - [license](https://github.com/ExactTarget/fuelux/blob/master/LICENSE) - [homepage](http://getfuelux.com)
|
||||||
|
|
||||||
jQuery - [license](https://github.com/jquery/jquery/blob/master/LICENSE.txt) - [homepage](http://jquery.com)
|
jQuery - [license](https://github.com/jquery/jquery/blob/master/LICENSE.txt) - [homepage](http://jquery.com)
|
||||||
|
|
||||||
|
MetricsGraphics.js - [license](https://github.com/mozilla/metrics-graphics/blob/master/LICENSE) - [homepage](http://metricsgraphicsjs.org/)
|
||||||
|
|
||||||
Socket.io - [license](https://github.com/socketio/socket.io/blob/master/LICENSE) - [homepage](http://socket.io)
|
Socket.io - [license](https://github.com/socketio/socket.io/blob/master/LICENSE) - [homepage](http://socket.io)
|
||||||
|
|
||||||
SweetAlert - [license](https://github.com/t4t5/sweetalert/blob/master/LICENSE) - [homepage](http://t4t5.github.io/sweetalert/)
|
SweetAlert - [license](https://github.com/t4t5/sweetalert/blob/master/LICENSE) - [homepage](http://t4t5.github.io/sweetalert/)
|
||||||
|
|
|
||||||
368
public/css/metricsgraphics.css
Executable file
368
public/css/metricsgraphics.css
Executable file
|
|
@ -0,0 +1,368 @@
|
||||||
|
.mg-active-datapoint {
|
||||||
|
fill: black;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-area1-color {
|
||||||
|
fill: #0000ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-area2-color {
|
||||||
|
fill: #05b378;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-area3-color {
|
||||||
|
fill: #db4437;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-area4-color {
|
||||||
|
fill: #f8b128;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-area5-color {
|
||||||
|
fill: #5c5c5c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-barplot rect.mg-bar {
|
||||||
|
shape-rendering: auto;
|
||||||
|
fill: #b6b6fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-barplot rect.mg-bar.active {
|
||||||
|
fill: #9e9efc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-barplot .mg-bar-prediction {
|
||||||
|
fill: #5b5b5b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-barplot .mg-bar-baseline {
|
||||||
|
stroke: #5b5b5b;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-baselines line {
|
||||||
|
opacity: 1;
|
||||||
|
shape-rendering: auto;
|
||||||
|
stroke: #b3b2b2;
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-baselines text {
|
||||||
|
fill: black;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-baselines-small text {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-header {
|
||||||
|
cursor: default;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-header .mg-chart-description {
|
||||||
|
fill: #ccc;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-points circle {
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-popover {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-popover-content {
|
||||||
|
cursor: auto;
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-data-table {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-data-table thead tr th {
|
||||||
|
border-bottom: 1px solid darkgray;
|
||||||
|
cursor: default;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 5px 5px 8px 5px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-data-table thead tr th .fa {
|
||||||
|
color: #ccc;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-data-table thead tr th .popover {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-data-table .secondary-title {
|
||||||
|
color: darkgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-data-table tbody tr td {
|
||||||
|
margin: 2px;
|
||||||
|
padding: 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-data-table tbody tr td.table-text {
|
||||||
|
opacity: 0.8;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-y-axis line.mg-extended-y-ticks {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-x-axis line.mg-extended-x-ticks {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-histogram .axis path,
|
||||||
|
.mg-histogram .axis line {
|
||||||
|
fill: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
shape-rendering: auto;
|
||||||
|
stroke: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-histogram .mg-bar rect {
|
||||||
|
fill: #b6b6fc;
|
||||||
|
shape-rendering: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-histogram .mg-bar rect.active {
|
||||||
|
fill: #9e9efc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-least-squares-line {
|
||||||
|
stroke: red;
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-lowess-line {
|
||||||
|
fill: none;
|
||||||
|
stroke: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line1-color {
|
||||||
|
stroke: #4040e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-hover-line1-color {
|
||||||
|
fill: #4040e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line2-color {
|
||||||
|
stroke: #05b378;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-hover-line2-color {
|
||||||
|
fill: #05b378;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line3-color {
|
||||||
|
stroke: #db4437;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-hover-line3-color {
|
||||||
|
fill: #db4437;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line4-color {
|
||||||
|
stroke: #f8b128;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-hover-line4-color {
|
||||||
|
fill: #f8b128;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line5-color {
|
||||||
|
stroke: #5c5c5c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-hover-line5-color {
|
||||||
|
fill: #5c5c5c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line-legend text {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 300;
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line1-legend-color {
|
||||||
|
color: #4040e8;
|
||||||
|
fill: #4040e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line2-legend-color {
|
||||||
|
color: #05b378;
|
||||||
|
fill: #05b378;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line3-legend-color {
|
||||||
|
color: #db4437;
|
||||||
|
fill: #db4437;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line4-legend-color {
|
||||||
|
color: #f8b128;
|
||||||
|
fill: #f8b128;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-line5-legend-color {
|
||||||
|
color: #5c5c5c;
|
||||||
|
fill: #5c5c5c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-main-area-solid svg .mg-main-area {
|
||||||
|
fill: #ccccff;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-markers line {
|
||||||
|
opacity: 1;
|
||||||
|
shape-rendering: auto;
|
||||||
|
stroke: #b3b2b2;
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-markers text {
|
||||||
|
fill: black;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-missing-text {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-missing-background {
|
||||||
|
stroke: blue;
|
||||||
|
fill: none;
|
||||||
|
stroke-dasharray: 10,5;
|
||||||
|
stroke-opacity: 0.05;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-missing .mg-main-line {
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-missing .mg-main-area {
|
||||||
|
opacity: 0.03;
|
||||||
|
}
|
||||||
|
|
||||||
|
path.mg-main-area {
|
||||||
|
opacity: 0.2;
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
path.mg-confidence-band {
|
||||||
|
fill: #ccc;
|
||||||
|
opacity: 0.4;
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
path.mg-main-line {
|
||||||
|
fill: none;
|
||||||
|
opacity: 0.8;
|
||||||
|
stroke-width: 1.1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-points circle {
|
||||||
|
fill-opacity: 0.4;
|
||||||
|
stroke-opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
circle.mg-points-mono {
|
||||||
|
fill: #0000ff;
|
||||||
|
stroke: #0000ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a selected point in a scatterplot */
|
||||||
|
.mg-points circle.selected {
|
||||||
|
fill-opacity: 1;
|
||||||
|
stroke-opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-voronoi path {
|
||||||
|
fill: none;
|
||||||
|
pointer-events: all;
|
||||||
|
stroke: none;
|
||||||
|
stroke-opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-x-rug-mono,
|
||||||
|
.mg-y-rug-mono {
|
||||||
|
stroke: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-x-axis line,
|
||||||
|
.mg-y-axis line {
|
||||||
|
opacity: 1;
|
||||||
|
shape-rendering: auto;
|
||||||
|
stroke: #b3b2b2;
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-x-axis text,
|
||||||
|
.mg-y-axis text,
|
||||||
|
.mg-histogram .axis text {
|
||||||
|
fill: black;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-x-axis .label,
|
||||||
|
.mg-y-axis .label,
|
||||||
|
.mg-axis .label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-x-axis-small text,
|
||||||
|
.mg-y-axis-small text,
|
||||||
|
.mg-active-datapoint-small {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-x-axis-small .label,
|
||||||
|
.mg-y-axis-small .label {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-european-hours {
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-year-marker text {
|
||||||
|
fill: black;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-year-marker line {
|
||||||
|
opacity: 1;
|
||||||
|
shape-rendering: auto;
|
||||||
|
stroke: #b3b2b2;
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-year-marker-small text {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
5
public/js/d3.min.js
vendored
Normal file
5
public/js/d3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
public/js/metricsgraphics.min.js
vendored
Executable file
3
public/js/metricsgraphics.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
|
|
@ -25,7 +25,9 @@
|
||||||
|
|
||||||
@section('scripts')
|
@section('scripts')
|
||||||
@parent
|
@parent
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.1/highcharts.js"></script>
|
{!! Theme::css('css/metricsgraphics.css') !!}
|
||||||
|
{!! Theme::js('js/d3.min.js') !!}
|
||||||
|
{!! Theme::js('js/metricsgraphics.min.js') !!}
|
||||||
{!! Theme::js('js/socket.io.min.js') !!}
|
{!! Theme::js('js/socket.io.min.js') !!}
|
||||||
{!! Theme::js('js/bootstrap-notify.min.js') !!}
|
{!! Theme::js('js/bootstrap-notify.min.js') !!}
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -518,189 +520,51 @@ $(document).ready(function () {
|
||||||
// -----------------+
|
// -----------------+
|
||||||
// Charting Methods |
|
// Charting Methods |
|
||||||
// -----------------+
|
// -----------------+
|
||||||
$(window).resize(function() {
|
var memoryGraphSettings = {
|
||||||
$('#chart_memory').highcharts().setSize($('#col11_setter').width(), 250);
|
title: 'Memory Usage',
|
||||||
$('#chart_cpu').highcharts().setSize($('#col11_setter').width(), 250);
|
data: [{
|
||||||
$('#chart_players').highcharts().setSize($('#col11_setter').width(), 250);
|
'date': new Date(),
|
||||||
});
|
'memory': -1
|
||||||
$('#chart_memory').highcharts({
|
|
||||||
chart: {
|
|
||||||
type: 'area',
|
|
||||||
animation: Highcharts.svg,
|
|
||||||
marginRight: 10,
|
|
||||||
renderTo: 'container',
|
|
||||||
width: $('#col11_setter').width()
|
|
||||||
},
|
|
||||||
colors: [
|
|
||||||
'#113F8C'
|
|
||||||
],
|
|
||||||
credits: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: 'Memory Usage of All Servers',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
shared: true,
|
|
||||||
crosshairs: true,
|
|
||||||
formatter: function () {
|
|
||||||
var s = '<b>Memory Usage</b>';
|
|
||||||
|
|
||||||
$.each(this.points, function () {
|
|
||||||
s += '<br/>' + this.series.name + ': ' +
|
|
||||||
this.y + 'MB';
|
|
||||||
});
|
|
||||||
|
|
||||||
return s;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
visible: false,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
title: {
|
|
||||||
text: 'Memory Usage (MB)',
|
|
||||||
},
|
|
||||||
plotLines: [{
|
|
||||||
value: 0,
|
|
||||||
width: 1,
|
|
||||||
}],
|
}],
|
||||||
},
|
full_width: true,
|
||||||
plotOptions: {
|
full_height: true,
|
||||||
area: {
|
target: document.getElementById('chart_memory'),
|
||||||
fillOpacity: 0.10,
|
x_accessor: 'date',
|
||||||
marker: {
|
y_accessor: 'memory',
|
||||||
enabled: false,
|
area: false,
|
||||||
},
|
};
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
enabled: false
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: 'Total Memory',
|
|
||||||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#chart_cpu').highcharts({
|
var cpuGraphSettings = {
|
||||||
chart: {
|
title: 'CPU Usage',
|
||||||
type: 'area',
|
data: [{
|
||||||
animation: Highcharts.svg,
|
'date': new Date(),
|
||||||
marginRight: 10,
|
'cpu': -1
|
||||||
renderTo: 'container',
|
|
||||||
width: $('#col11_setter').width()
|
|
||||||
},
|
|
||||||
colors: [
|
|
||||||
'#00A1CB',
|
|
||||||
],
|
|
||||||
credits: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: 'CPU Usage of all Servers',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
shared: true,
|
|
||||||
crosshairs: true,
|
|
||||||
formatter: function () {
|
|
||||||
var s = '<b>CPU Usage</b>';
|
|
||||||
|
|
||||||
$.each(this.points, function () {
|
|
||||||
s += '<br/>' + this.series.name + ': ' +
|
|
||||||
this.y + '%';
|
|
||||||
});
|
|
||||||
|
|
||||||
return s;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
visible: false,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
title: {
|
|
||||||
text: 'CPU Usage (%)',
|
|
||||||
},
|
|
||||||
plotLines: [{
|
|
||||||
value: 0,
|
|
||||||
width: 1,
|
|
||||||
}],
|
}],
|
||||||
},
|
full_width: true,
|
||||||
plotOptions: {
|
full_height: true,
|
||||||
area: {
|
target: document.getElementById('chart_cpu'),
|
||||||
fillOpacity: 0.10,
|
x_accessor: 'date',
|
||||||
marker: {
|
y_accessor: 'cpu',
|
||||||
enabled: false,
|
area: false,
|
||||||
},
|
};
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: 'Total CPU',
|
|
||||||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#chart_players').highcharts({
|
var playersGraphSettings = {
|
||||||
chart: {
|
title: 'Players Online',
|
||||||
type: 'area',
|
data: [{
|
||||||
animation: Highcharts.svg,
|
'date': new Date(),
|
||||||
marginRight: 10,
|
'players': -1
|
||||||
renderTo: 'container',
|
|
||||||
width: $('#col11_setter').width()
|
|
||||||
},
|
|
||||||
colors: [
|
|
||||||
'#01A4A4',
|
|
||||||
],
|
|
||||||
credits: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: 'Total Players on All Servers',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
shared: true,
|
|
||||||
crosshairs: true,
|
|
||||||
formatter: function () {
|
|
||||||
var s = '<b>Total Players</b>';
|
|
||||||
|
|
||||||
$.each(this.points, function () {
|
|
||||||
s += '<br/>' + this.series.name + ': ' + this.y;
|
|
||||||
});
|
|
||||||
|
|
||||||
return s;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
visible: false,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
title: {
|
|
||||||
text: 'Total Players',
|
|
||||||
},
|
|
||||||
plotLines: [{
|
|
||||||
value: 0,
|
|
||||||
width: 1,
|
|
||||||
}],
|
}],
|
||||||
},
|
full_width: true,
|
||||||
plotOptions: {
|
full_height: true,
|
||||||
area: {
|
target: document.getElementById('chart_players'),
|
||||||
fillOpacity: 0.10,
|
x_accessor: 'date',
|
||||||
marker: {
|
y_accessor: 'players',
|
||||||
enabled: false,
|
area: false,
|
||||||
},
|
};
|
||||||
},
|
|
||||||
},
|
MG.data_graphic(memoryGraphSettings);
|
||||||
legend: {
|
MG.data_graphic(cpuGraphSettings);
|
||||||
enabled: true
|
MG.data_graphic(playersGraphSettings);
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: 'Total Players',
|
|
||||||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
|
|
||||||
// Main Socket Object
|
// Main Socket Object
|
||||||
var socket = io('{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/stats/', {
|
var socket = io('{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/stats/', {
|
||||||
|
|
@ -732,13 +596,35 @@ $(document).ready(function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on('live-stats', function (data) {
|
socket.on('live-stats', function (data) {
|
||||||
var CPUChart = $('#chart_cpu').highcharts();
|
|
||||||
var MemoryChart = $('#chart_memory').highcharts();
|
|
||||||
var PlayerChart = $('#chart_players').highcharts();
|
|
||||||
|
|
||||||
CPUChart.series[0].addPoint(data.stats.cpu, true, true);
|
if (typeof memoryGraphSettings.data[0][100] !== 'undefined' || memoryGraphSettings.data[0][0].memory === -1) {
|
||||||
MemoryChart.series[0].addPoint(parseInt(data.stats.memory / (1024 * 1024)), true, true);
|
memoryGraphSettings.data[0].shift();
|
||||||
PlayerChart.series[0].addPoint(data.stats.players, true, true);
|
}
|
||||||
|
if (typeof cpuGraphSettings.data[0][100] !== 'undefined' || cpuGraphSettings.data[0][0].cpu === -1) {
|
||||||
|
cpuGraphSettings.data[0].shift();
|
||||||
|
}
|
||||||
|
if (typeof playersGraphSettings.data[0][100] !== 'undefined' || playersGraphSettings.data[0][0].players === -1) {
|
||||||
|
playersGraphSettings.data[0].shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
memoryGraphSettings.data[0].push({
|
||||||
|
'date': new Date(),
|
||||||
|
'memory': parseInt(data.stats.memory / (1024 * 1024))
|
||||||
|
});
|
||||||
|
|
||||||
|
cpuGraphSettings.data[0].push({
|
||||||
|
'date': new Date(),
|
||||||
|
'cpu': data.stats.cpu
|
||||||
|
});
|
||||||
|
|
||||||
|
playersGraphSettings.data[0].push({
|
||||||
|
'date': new Date(),
|
||||||
|
'players': data.stats.players
|
||||||
|
});
|
||||||
|
|
||||||
|
MG.data_graphic(memoryGraphSettings);
|
||||||
|
MG.data_graphic(cpuGraphSettings);
|
||||||
|
MG.data_graphic(playersGraphSettings);
|
||||||
|
|
||||||
$.each(data.servers, function (uuid, info) {
|
$.each(data.servers, function (uuid, info) {
|
||||||
var element = $('tr[data-server="' + uuid + '"]');
|
var element = $('tr[data-server="' + uuid + '"]');
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue