Split the Performance graphs back to 3 graphs

This commit is contained in:
Rsl1122 2017-09-27 21:13:37 +03:00
parent 161fe4bdd6
commit 962aecd1d2
5 changed files with 37 additions and 82 deletions

View File

@ -272,10 +272,6 @@
x.style.transform = "translate3d(" + value + "%,0px,0)";
};
}
</script>
</div>
</body>

View File

@ -9,6 +9,8 @@
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet">
<script src="https://use.fontawesome.com/df48eb908b.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<header>
@ -221,8 +223,23 @@
<div class="box-header">
<h2><i class="fa fa-cogs"></i> Performance</h2>
</div>
<div class="box-footer">
<div id="tpsGraph" style="width: 100%; height: 600px;"></div>
<div class="box-footer" style="height: 640px;">
<div id="tabs">
<ul style="list-style: none; padding: 0; float: left; position: relative; top: 0; white-space: nowrap;">
<li style="display: inline;"><a class="button" href="#tabs-1">TPS</a></li>
<li style="display: inline;"><a class="button" href="#tabs-2">CPU & RAM</a></li>
<li style="display: inline;"><a class="button" href="#tabs-3">World Load</a></li>
</ul>
<div id="tabs-1">
<div id="tpsGraph" style="width: 100%; height: 550px;"></div>
</div>
<div id="tabs-2">
<div id="resourceGraph" style="width: 100%; height: 550px;"></div>
</div>
<div id="tabs-3">
<div id="worldGraph" style="width: 100%; height: 550px;"></div>
</div>
</div>
</div>
</div>
<div class="column">
@ -448,10 +465,11 @@
color: '#222',
data: ${punchCardSeries}
};
</script>
<script>
$( function() {
$( "#tabs" ).tabs();
});
</script>
<script>
var navButtons = document.getElementsByClassName("nav-button");
@ -473,10 +491,10 @@
worldPie('worldPie', worldSeries, gmSeries);
playersChart('playerChartDay', playersOnlineSeries, 1);
playersChart('playerChartMonth', playersOnlineSeries, 4);
performanceChart('tpsGraph', playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries);
<!--tpsChart('tpsGraph', tpsSeries, playersOnlineSeries);-->
<!--resourceChart('resourceGraph', cpuSeries, ramSeries);-->
<!--worldChart('worldGraph', entitySeries, chunkSeries);-->
<!--performanceChart('tpsGraph', playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries);-->
tpsChart('tpsGraph', tpsSeries, playersOnlineSeries);
resourceChart('resourceGraph', cpuSeries, ramSeries);
worldChart('worldGraph', entitySeries, chunkSeries);
worldMap('choropleth', '#EEFFEE', '#267f00', mapSeries);
punchCard('punchcard', punchcardSeries);
/*countUpTimer();*/

View File

@ -23,29 +23,6 @@ function resourceChart(id, cpuSeries, ramSeries) {
text: 'All'
}]
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'CPU / %'
},
height: '55%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'RAM / MB'
},
top: '55%',
height: '40%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
@ -55,6 +32,9 @@ function resourceChart(id, cpuSeries, ramSeries) {
fillOpacity: 0.4
}
},
legend: {
enabled: true,
},
series: [cpuSeries, ramSeries]
});
}

View File

@ -23,28 +23,6 @@ function tpsChart(id, tpsSeries, playersOnlineSeries) {
text: 'All'
}]
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Players'
},
height: '30%'
}, {
lineWidth: 2,
labels: {
align: 'right',
x: -3
},
title: {
text: 'TPS'
},
height: '70%',
top: '30%',
offset: 0
}],
tooltip: {
split: true
},
@ -54,6 +32,9 @@ function tpsChart(id, tpsSeries, playersOnlineSeries) {
fillOpacity: 0.4
}
},
legend: {
enabled: true,
},
series: [tpsSeries, playersOnlineSeries]
});
}

View File

@ -23,29 +23,6 @@ function worldChart(id, entitySeries, chunkSeries) {
text: 'All'
}]
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Chunks'
},
height: '50%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Entities'
},
top: '50%',
height: '40%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
@ -55,6 +32,9 @@ function worldChart(id, entitySeries, chunkSeries) {
fillOpacity: 0.4
}
},
legend: {
enabled: true,
},
series: [entitySeries, chunkSeries]
});
}