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)"; x.style.transform = "translate3d(" + value + "%,0px,0)";
}; };
} }
</script> </script>
</div> </div>
</body> </body>

View File

@ -9,6 +9,8 @@
<link rel="stylesheet" href="./main.css"> <link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet"> <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://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> </head>
<body> <body>
<header> <header>
@ -221,8 +223,23 @@
<div class="box-header"> <div class="box-header">
<h2><i class="fa fa-cogs"></i> Performance</h2> <h2><i class="fa fa-cogs"></i> Performance</h2>
</div> </div>
<div class="box-footer"> <div class="box-footer" style="height: 640px;">
<div id="tpsGraph" style="width: 100%; height: 600px;"></div> <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> </div>
<div class="column"> <div class="column">
@ -448,10 +465,11 @@
color: '#222', color: '#222',
data: ${punchCardSeries} data: ${punchCardSeries}
}; };
</script>
<script>
$( function() {
$( "#tabs" ).tabs();
});
</script> </script>
<script> <script>
var navButtons = document.getElementsByClassName("nav-button"); var navButtons = document.getElementsByClassName("nav-button");
@ -473,10 +491,10 @@
worldPie('worldPie', worldSeries, gmSeries); worldPie('worldPie', worldSeries, gmSeries);
playersChart('playerChartDay', playersOnlineSeries, 1); playersChart('playerChartDay', playersOnlineSeries, 1);
playersChart('playerChartMonth', playersOnlineSeries, 4); playersChart('playerChartMonth', playersOnlineSeries, 4);
performanceChart('tpsGraph', playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries); <!--performanceChart('tpsGraph', playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries);-->
<!--tpsChart('tpsGraph', tpsSeries, playersOnlineSeries);--> tpsChart('tpsGraph', tpsSeries, playersOnlineSeries);
<!--resourceChart('resourceGraph', cpuSeries, ramSeries);--> resourceChart('resourceGraph', cpuSeries, ramSeries);
<!--worldChart('worldGraph', entitySeries, chunkSeries);--> worldChart('worldGraph', entitySeries, chunkSeries);
worldMap('choropleth', '#EEFFEE', '#267f00', mapSeries); worldMap('choropleth', '#EEFFEE', '#267f00', mapSeries);
punchCard('punchcard', punchcardSeries); punchCard('punchcard', punchcardSeries);
/*countUpTimer();*/ /*countUpTimer();*/

View File

@ -23,29 +23,6 @@ function resourceChart(id, cpuSeries, ramSeries) {
text: 'All' 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: { tooltip: {
split: true split: true
}, },
@ -55,6 +32,9 @@ function resourceChart(id, cpuSeries, ramSeries) {
fillOpacity: 0.4 fillOpacity: 0.4
} }
}, },
legend: {
enabled: true,
},
series: [cpuSeries, ramSeries] series: [cpuSeries, ramSeries]
}); });
} }

View File

@ -23,28 +23,6 @@ function tpsChart(id, tpsSeries, playersOnlineSeries) {
text: 'All' 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: { tooltip: {
split: true split: true
}, },
@ -54,6 +32,9 @@ function tpsChart(id, tpsSeries, playersOnlineSeries) {
fillOpacity: 0.4 fillOpacity: 0.4
} }
}, },
legend: {
enabled: true,
},
series: [tpsSeries, playersOnlineSeries] series: [tpsSeries, playersOnlineSeries]
}); });
} }

View File

@ -23,29 +23,6 @@ function worldChart(id, entitySeries, chunkSeries) {
text: 'All' 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: { tooltip: {
split: true split: true
}, },
@ -55,6 +32,9 @@ function worldChart(id, entitySeries, chunkSeries) {
fillOpacity: 0.4 fillOpacity: 0.4
} }
}, },
legend: {
enabled: true,
},
series: [entitySeries, chunkSeries] series: [entitySeries, chunkSeries]
}); });
} }