Upstream/Plan
1
0
Fork 0
mirror of https://github.com/plan-player-analytics/Plan.git synced 2025-01-15 04:31:34 +01:00
Code Issues Projects Releases Wiki Activity

Updates HTML files

Browse Source
This commit is contained in:
Fuzzlemann 2017-07-27 19:15:41 +02:00
parent 1f931ed885
commit 71f7210a82
2 changed files with 594 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
Plan/src/main/resources/analysis.html
View File

@ -278,6 +278,7 @@
} }
} }
</style> </style>
</head> </head>
<body onload="countUpTimer()"> <body onload="countUpTimer()">
@ -382,7 +383,8 @@
<i class="fa fa-calendar-plus-o" aria-hidden="true"></i> Total Login times: <i class="fa fa-calendar-plus-o" aria-hidden="true"></i> Total Login times:
%totallogins%<br/> %totallogins%<br/>
<i class="fa fa-user-circle-o" aria-hidden="true"></i> Average Unique Players/Day: <i class="fa fa-user-circle-o" aria-hidden="true"></i> Average Unique Players/Day:
%avguniquejoins%<br> %avguniquejoins% | <i class="fa fa-user-plus" aria-hidden="true"></i> Average New/Day:
%newperday%<br>
<b><i class="fa fa-crosshairs" aria-hidden="true"></i></b> Player kills: %playerkills% | <i <b><i class="fa fa-crosshairs" aria-hidden="true"></i></b> Player kills: %playerkills% | <i
class="fa fa-crosshairs" aria-hidden="true"></i> Mob kills: %mobkills% | <i class="fa fa-crosshairs" aria-hidden="true"></i> Mob kills: %mobkills% | <i
class="fa fa-meh-o" aria-hidden="true"></i> Deaths: %deaths%</p> class="fa fa-meh-o" aria-hidden="true"></i> Deaths: %deaths%</p>
@ -473,7 +475,9 @@
</div> </div>
<canvas id="playerChartDay2" width="1000" height="350" style="width: 95%;"></canvas> <canvas id="playerChartDay2" width="1000" height="350" style="width: 95%;"></canvas>
<p><i class="fa fa-user-circle" aria-hidden="true"></i> Unique Players: %uniquejoinsday% | <i <p><i class="fa fa-user-circle" aria-hidden="true"></i> Unique Players: %uniquejoinsday% | <i
class="fa fa-user-circle-o" aria-hidden="true"></i> Unique/Day: %avguniquejoinsday%</p> class="fa fa-user-circle-o" aria-hidden="true"></i> Unique/Day: %avguniquejoinsday% | <i
class="fa fa-user-plus" aria-hidden="true"></i> New/Day: %newperdayday%
</p>
</div> </div>
<div class=" box column"> <div class=" box column">
<div class="headerbox"> <div class="headerbox">
@ -497,7 +501,10 @@
</div> </div>
<canvas id="playerChartWeek" width="1000" height="350" style="width: 95%;"></canvas> <canvas id="playerChartWeek" width="1000" height="350" style="width: 95%;"></canvas>
<p><i class="fa fa-user-circle" aria-hidden="true"></i> Unique Players: %uniquejoinsweek% | <i <p><i class="fa fa-user-circle" aria-hidden="true"></i> Unique Players: %uniquejoinsweek% | <i
class="fa fa-user-circle-o" aria-hidden="true"></i> Unique/Day: %avguniquejoinsweek%</p> class="fa fa-user-circle-o" aria-hidden="true"></i> Unique/Day: %avguniquejoinsweek% |
<i
class="fa fa-user-plus" aria-hidden="true"></i> New/Day: %newperdayweek%
</p>
</div> </div>
<div class=" box column"> <div class=" box column">
<div class="headerbox"> <div class="headerbox">
@ -521,7 +528,9 @@
</div> </div>
<canvas id="playerChartMonth" width="1000" height="350" style="width: 95%;"></canvas> <canvas id="playerChartMonth" width="1000" height="350" style="width: 95%;"></canvas>
<p><i class="fa fa-user-circle" aria-hidden="true"></i> Unique Players: %uniquejoinsmonth% | <i <p><i class="fa fa-user-circle" aria-hidden="true"></i> Unique Players: %uniquejoinsmonth% | <i
class="fa fa-user-circle-o" aria-hidden="true"></i> Unique/Day: %avguniquejoinsmonth% class="fa fa-user-circle-o" aria-hidden="true"></i> Unique/Day: %avguniquejoinsmonth% |
<i
class="fa fa-user-plus" aria-hidden="true"></i> New/Day: %newperdaymonth%
</p> </p>
</div> </div>
</div> </div>
@ -717,8 +726,8 @@
</div> </div>
<div class="box column"> <div class="box column">
<canvas id="cpu24h" width="1000" height="600" style="width: 95%;"></canvas> <canvas id="cpu24h" width="1000" height="600" style="width: 95%;"></canvas>
<p>If Graph displays '-1' usage is not available for this platform.</p>
</div> </div>
<p>If CPU Graph displays '-1' CPU usage is not available for this platform.</p>
</div> </div>
</div> </div>
<div class="tab"> <div class="tab">
@ -855,8 +864,8 @@
var x = document.getElementById("main"); var x = document.getElementById("main");
x.style.transform = "translate3d(0px,0px,0)"; x.style.transform = "translate3d(0px,0px,0)";
x.style.width = "" + navButtons.length * 100 + "%"; x.style.width = "" + navButtons.length * 100 + "%";
for (var i = 0; i < navButtons.length; i++) { for (i = 0; i < navButtons.length; i++) {
navButtons[i].onclick = openFunc(i); navButtons[i].onclick = openFunc(i)
tabs[i].style.width = "" + 100 / navButtons.length + "%"; tabs[i].style.width = "" + 100 / navButtons.length + "%";
} }
x.style.opacity = "1"; x.style.opacity = "1";
@ -914,6 +923,7 @@
setTimeout('countUpTimer()', 1000); setTimeout('countUpTimer()', 1000);
} }
</script> </script>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script> <script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
@ -925,78 +935,144 @@
var ctxweek = document.getElementById("playerChartWeek"); var ctxweek = document.getElementById("playerChartWeek");
var ctxmonth = document.getElementById("playerChartMonth"); var ctxmonth = document.getElementById("playerChartMonth");
var dataday = { var dataday = {
datasets: [ datasets: [
{ {
label: "Players Online", label: "Players Online",
fill: true, fill: true,
lineTension: 0.1, lineTension: 0.1,
backgroundColor: "#%playersgraphfill%", backgroundColor: "#%playersgraphfill%",
borderColor: "#%playersgraphcolor%", borderColor: "#%playersgraphcolor%",
borderCapStyle: 'butt', borderCapStyle: 'butt',
borderDash: [], borderDash: [],
borderDashOffset: 0.0, borderDashOffset: 0.0,
borderJoinStyle: 'miter', borderJoinStyle: 'miter',
pointBorderColor: "#%playersgraphcolor%", pointBorderColor: "#%playersgraphcolor%",
pointBackgroundColor: "#fff", pointBackgroundColor: "#fff",
pointBorderWidth: 1, pointBorderWidth: 1,
pointHoverRadius: 5, pointHoverRadius: 5,
pointHoverBackgroundColor: "#%playersgraphcolor%", pointHoverBackgroundColor: "#%playersgraphcolor%",
pointHoverBorderColor: "#8fabc6", pointHoverBorderColor: "#8fabc6",
pointHoverBorderWidth: 2, pointHoverBorderWidth: 2,
pointRadius: 1, pointRadius: 1,
pointHitRadius: 10, pointHitRadius: 10,
spanGaps: false, spanGaps: false,
data: %datascatterday% , data: %datascatterday%
},
{
label: "New Players",
fill: true,
lineTension: 0.1,
backgroundColor: "#fff",
borderColor: "#7dcc24",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#7dcc24",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#7dcc24",
pointHoverBorderColor: "#8fabc6",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false,
data: %npdataday%
}] }]
} }
var dataweek = { var dataweek = {
datasets: [ datasets: [
{ {
label: "Players Online", label: "Players Online",
fill: true, fill: true,
lineTension: 0.1, lineTension: 0.1,
backgroundColor: "#%playersgraphfill%", backgroundColor: "#%playersgraphfill%",
borderColor: "#%playersgraphcolor%", borderColor: "#%playersgraphcolor%",
borderCapStyle: 'butt', borderCapStyle: 'butt',
borderDash: [], borderDash: [],
borderDashOffset: 0.0, borderDashOffset: 0.0,
borderJoinStyle: 'miter', borderJoinStyle: 'miter',
pointBorderColor: "#%playersgraphcolor%", pointBorderColor: "#%playersgraphcolor%",
pointBackgroundColor: "#fff", pointBackgroundColor: "#fff",
pointBorderWidth: 1, pointBorderWidth: 1,
pointHoverRadius: 5, pointHoverRadius: 5,
pointHoverBackgroundColor: "#%playersgraphcolor%", pointHoverBackgroundColor: "#%playersgraphcolor%",
pointHoverBorderColor: "#8fabc6", pointHoverBorderColor: "#8fabc6",
pointHoverBorderWidth: 2, pointHoverBorderWidth: 2,
pointRadius: 1, pointRadius: 1,
pointHitRadius: 10, pointHitRadius: 10,
spanGaps: false, spanGaps: false,
data: %datascatterweek% , data: %datascatterweek% ,
},
{
label: "New Players",
fill: true,
lineTension: 0.1,
backgroundColor: "#fff",
borderColor: "#7dcc24",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#7dcc24",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#7dcc24",
pointHoverBorderColor: "#8fabc6",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false,
data: %npdataweek%
}] }]
} }
var datamonth = { var datamonth = {
datasets: [ datasets: [
{ {
label: "Players Online", label: "Players Online",
fill: true, fill: true,
lineTension: 0.1, lineTension: 0.1,
backgroundColor: "#%playersgraphfill%", backgroundColor: "#%playersgraphfill%",
borderColor: "#%playersgraphcolor%", borderColor: "#%playersgraphcolor%",
borderCapStyle: 'butt', borderCapStyle: 'butt',
borderDash: [], borderDash: [],
borderDashOffset: 0.0, borderDashOffset: 0.0,
borderJoinStyle: 'miter', borderJoinStyle: 'miter',
pointBorderColor: "#%playersgraphcolor%", pointBorderColor: "#%playersgraphcolor%",
pointBackgroundColor: "#fff", pointBackgroundColor: "#fff",
pointBorderWidth: 1, pointBorderWidth: 1,
pointHoverRadius: 5, pointHoverRadius: 5,
pointHoverBackgroundColor: "#%playersgraphcolor%", pointHoverBackgroundColor: "#%playersgraphcolor%",
pointHoverBorderColor: "#8fabc6", pointHoverBorderColor: "#8fabc6",
pointHoverBorderWidth: 2, pointHoverBorderWidth: 2,
pointRadius: 1, pointRadius: 1,
pointHitRadius: 10, pointHitRadius: 10,
spanGaps: false, spanGaps: false,
data: %datascattermonth% , data: %datascattermonth% ,
},
{
label: "New Players",
fill: true,
lineTension: 0.1,
backgroundColor: "#fff",
borderColor: "#7dcc24",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#7dcc24",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#7dcc24",
pointHoverBorderColor: "#8fabc6",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false,
data: %npdatamonth%
}] }]
} }
var playersChartDay = new Chart(ctxday, { var playersChartDay = new Chart(ctxday, {
@ -1112,6 +1188,7 @@
} }
}); });
</script> </script>
<script> <script>
// TPS Graph 7d // TPS Graph 7d
@ -1210,6 +1287,7 @@
} }
}); });
</script> </script>
<script> <script>
// TPS Graph 24h // TPS Graph 24h
@ -1308,6 +1386,7 @@
} }
}); });
</script> </script>
<script> <script>
// CPU Graph 24h // CPU Graph 24h
@ -1316,6 +1395,7 @@
datasets: [ datasets: [
{ {
label: "CPU Usage", label: "CPU Usage",
yAxisID: 'A',
fill: false, fill: false,
lineTension: 0.1, lineTension: 0.1,
borderColor: "#e0d264", borderColor: "#e0d264",
@ -1334,6 +1414,27 @@
pointHitRadius: 10, pointHitRadius: 10,
spanGaps: false, spanGaps: false,
data: %cpuscatterday% data: %cpuscatterday%
}, {
label: "Memory Usage",
yAxisID: 'B',
fill: false,
lineTension: 0.1,
borderColor: "#7dcc24",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#7dcc24",
pointBackgroundColor: "#7dcc24",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#7dcc24",
pointHoverBorderColor: "#8fabc6",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false,
data: %ramscatterday%
}] }]
}; };
var cpuChart = new Chart(ctxcpu, { var cpuChart = new Chart(ctxcpu, {
@ -1352,6 +1453,7 @@
}, },
scales: { scales: {
yAxes: [{ yAxes: [{
id: 'A',
type: 'linear', type: 'linear',
position: 'left', position: 'left',
ticks: { ticks: {
@ -1360,17 +1462,30 @@
}, },
scaleLabel: { scaleLabel: {
display: true, display: true,
labelString: 'CPU Usage' labelString: 'CPU Usage (%)'
} }
}], }, {
xAxes: [{ id: 'B',
type: 'linear', type: 'linear',
display: false position: 'right',
}] ticks: {
} suggestedMax: %maxram%,
} suggestedMin: 0
},
scaleLabel: {
display: true,
labelString: 'Memory Usage (Mt)'
}
}],
xAxes: [{
type: 'linear',
display: false
}]
}
}
}); });
</script> </script>
<script> <script>
// CPU Graph 7d // CPU Graph 7d
@ -1379,6 +1494,7 @@
datasets: [ datasets: [
{ {
label: "CPU Usage", label: "CPU Usage",
yAxisID: 'A',
fill: false, fill: false,
lineTension: 0.1, lineTension: 0.1,
borderColor: "#e0d264", borderColor: "#e0d264",
@ -1397,6 +1513,27 @@
pointHitRadius: 10, pointHitRadius: 10,
spanGaps: false, spanGaps: false,
data: %cpuscatterweek% data: %cpuscatterweek%
}, {
label: "Memory Usage",
yAxisID: 'B',
fill: false,
lineTension: 0.1,
borderColor: "#7dcc24",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#7dcc24",
pointBackgroundColor: "#7dcc24",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#7dcc24",
pointHoverBorderColor: "#8fabc6",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
spanGaps: false,
data: %ramscatterday%
}] }]
}; };
var cpuChart = new Chart(ctxcpu, { var cpuChart = new Chart(ctxcpu, {
@ -1415,6 +1552,7 @@
}, },
scales: { scales: {
yAxes: [{ yAxes: [{
id: 'A',
type: 'linear', type: 'linear',
position: 'left', position: 'left',
ticks: { ticks: {
@ -1423,16 +1561,29 @@
}, },
scaleLabel: { scaleLabel: {
display: true, display: true,
labelString: 'CPU Usage' labelString: 'CPU Usage (%)'
} }
}], }, {
xAxes: [{ id: 'B',
type: 'linear', type: 'linear',
display: false position: 'right',
}] ticks: {
} suggestedMax: %maxram%,
} suggestedMin: 0
},
scaleLabel: {
display: true,
labelString: 'Memory Usage (Mt)'
}
}],
xAxes: [{
type: 'linear',
display: false
}]
}
}
}); });
</script> </script>
<script> <script>
// ActivityPie Graph // ActivityPie Graph
@ -1460,6 +1611,7 @@
} }
}); });
</script> </script>
<script> <script>
// GMPie Graph // GMPie Graph
@ -1487,6 +1639,7 @@
} }
}); });
</script> </script>
<script> <script>
// Session start puchcard bubblechart // Session start puchcard bubblechart
@ -1568,6 +1721,7 @@
} }
}); });
</script> </script>
<script> <script>
// Session length distribution barchart // Session length distribution barchart
@ -1620,6 +1774,7 @@
} }
}); });
</script> </script>
<script> <script>
// Geolocation map // Geolocation map
@ -1652,8 +1807,8 @@
var layout = { var layout = {
title: '', title: '',
autosize: false, autosize: false,
height: 1000, width: window.innerWidth*0.7,
width: 1500, height: window.innerHeight*0.7,
geo:{ geo:{
showframe: false, showframe: false,
showcoastlines: false, showcoastlines: false,
@ -1663,7 +1818,6 @@
} }
}; };
Plotly.plot(CLOROPLETH, data, layout, {showLink: false}); Plotly.plot(CLOROPLETH, data, layout, {showLink: false});
</script> </script>
</div> </div>
</body> </body>

700
Plan/src/main/resources/player.html
View File

@ -7,313 +7,313 @@
<link rel="icon" href="https://puu.sh/tK0KL/6aa2ba141b.ico" type="image/x-icon"/> <link rel="icon" href="https://puu.sh/tK0KL/6aa2ba141b.ico" type="image/x-icon"/>
<script src="https://use.fontawesome.com/df48eb908b.js"></script> <script src="https://use.fontawesome.com/df48eb908b.js"></script>
<style> <style>
header { header {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 88px; height: 88px;
padding: 0px; padding: 0px;
background-color: #348e0f; background-color: #348e0f;
z-index: 1; z-index: 1;
} }
.header-content { .header-content {
padding: 5px 20px; padding: 5px 20px;
} }
body { body {
font-family: Verdana, sans-serif; font-family: Verdana, sans-serif;
background-color: #ddd; background-color: #ddd;
color: #fff; color: #fff;
} }
.sidenav { .sidenav {
height: 100%; height: 100%;
width: 15%; width: 15%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
background-color: #5cb239; background-color: #5cb239;
overflow-x: hidden; overflow-x: hidden;
transition: 0.5s; transition: 0.5s;
padding-top: 88px; padding-top: 88px;
text-align: left; text-align: left;
} }
.sidenav p { .sidenav p {
width: 100%; width: 100%;
padding: 8px 8px 8px 16px; padding: 8px 8px 8px 16px;
text-decoration: none; text-decoration: none;
background-color: #89c471; background-color: #89c471;
color: #fff; color: #fff;
margin: 10px 0px; margin: 10px 0px;
} }
.sidenav a { .sidenav a {
margin: 10px 0px; margin: 10px 0px;
width: 100%; width: 100%;
padding: 8px 8px 8px 16px; padding: 8px 8px 8px 16px;
text-decoration: none; text-decoration: none;
background-color: #89c471; background-color: #89c471;
font-size: 22px; font-size: 22px;
color: #fff; color: #fff;
display: block; display: block;
transition: 0.3s; transition: 0.3s;
z-index: 1; z-index: 1;
} }
.sidenav a.active { .sidenav a.active {
background-color: #5da341 background-color: #5da341
} }
.sidenav a:hover, .offcanvas a:focus{ .sidenav a:hover, .offcanvas a:focus{
background-color: #5da341; background-color: #5da341;
} }
.main-limiter { .main-limiter {
margin-left: 15%; margin-left: 15%;
width: 85%; width: 85%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.main-wrapper { .main-wrapper {
padding-top: 88px; padding-top: 88px;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
opacity: 0; opacity: 0;
transition: 1.5s; transition: 1.5s;
} }
.box { .box {
background-color: #fff; background-color: #fff;
padding: 5px; padding: 5px;
text-decoration: none; text-decoration: none;
color: #000; color: #000;
text-align: left; text-align: left;
margin: 5px; margin: 5px;
padding: 5px; padding: 5px;
} }
.box p { .box p {
color: #000; color: #000;
} }
.tab { .tab {
width: 20%; width: 20%;
height: 100%; height: 100%;
float: left; float: left;
display: flex; display: flex;
text-align: left; text-align: left;
align-content: flex-start; align-content: flex-start;
} }
.row { .row {
width: 50%; width: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.content { .content {
text-align: center; text-align: center;
padding: 5px; padding: 5px;
margin: 0px; margin: 0px;
} }
.columns { .columns {
display: flex; display: flex;
} }
.column { .column {
flex: 1; flex: 1;
} }
.box-area { .box-area {
width: 100%; width: 100%;
} }
.infobox { .infobox {
margin-left: 3px; margin-left: 3px;
color: white; color: white;
background-color: #348e0f; background-color: #348e0f;
padding: 8px 14px; padding: 8px 14px;
border-radius: 10px; border-radius: 10px;
float: right; float: right;
} }
.info-text { .info-text {
float: right; float: right;
width: 50%; width: 50%;
text-align: right; text-align: right;
} }
.info-number { .info-number {
font-size: x-large; font-size: x-large;
float: right; float: right;
} }
.info-label { .info-label {
float: right; float: right;
font-size: medium; font-size: medium;
} }
.info-icon { .info-icon {
font-size: xx-large; font-size: xx-large;
float: left; float: left;
} }
.headerbox { .headerbox {
color: #348e0f; color: #348e0f;
display: inline-block; display: inline-block;
border-style: solid; border-style: solid;
border-color: #348e0f; border-color: #348e0f;
padding: 8px 14px; padding: 8px 14px;
border-radius: 10px; border-radius: 10px;
width: 95%; width: 95%;
} }
.header-icon { .header-icon {
font-size: xx-large; font-size: xx-large;
float: left; float: left;
} }
.header-text { .header-text {
font-size: x-large; font-size: x-large;
} }
.header-label { .header-label {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
border: 0px; border: 0px;
} }
.button { .button {
padding: 8px 14px; padding: 8px 14px;
background-color: #348e0f; background-color: #348e0f;
border: none; border: none;
color: white; color: white;
outline: 0; outline: 0;
text-decoration:none!important; text-decoration:none!important;
} }
.button:hover { .button:hover {
background-color: #267F00; background-color: #267F00;
} }
.table { .table {
border-collapse: collapse; border-collapse: collapse;
table-layout: fixed; table-layout: fixed;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
padding: 8px 14px; padding: 8px 14px;
width: 100%; width: 100%;
} }
.buttons { .buttons {
line-height: 270%; line-height: 270%;
} }
.link { .link {
color: #348e0f; color: #348e0f;
text-decoration:none!important; text-decoration:none!important;
} }
.link:hover { .link:hover {
color: #267F00; color: #267F00;
} }
table.sortable thead { table.sortable thead {
background-color: #348e0f; background-color: #348e0f;
color:#fff; color:#fff;
font-weight: bold; font-weight: bold;
cursor: default; cursor: default;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
table.sortable tbody { table.sortable tbody {
color: #000; color: #000;
} }
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
content: " \25B4\25BE" content: " \25B4\25BE"
} }
.plugin-container { .plugin-container {
color: #000; color: #000;
height: 100%; height: 100%;
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
} }
.plugin-data { .plugin-data {
color: #000; color: #000;
} }
.black { .black {
color: #000000; color: #000000;
} }
.darkblue { .darkblue {
color: #0000AA; color: #0000AA;
} }
.darkgreen { .darkgreen {
color: #00AA00; color: #00AA00;
} }
.darkaqua { .darkaqua {
color: #00AAAA; color: #00AAAA;
} }
.darkred { .darkred {
color: #AA0000; color: #AA0000;
} }
.darkpurple { .darkpurple {
color: #AA00AA; color: #AA00AA;
} }
.gold { .gold {
color: #FFAA00; color: #FFAA00;
} }
.gray { .gray {
color: #AAAAAA; color: #AAAAAA;
} }
.darkgray { .darkgray {
color: #555555; color: #555555;
} }
.blue { .blue {
color: #5555FF; color: #5555FF;
} }
.green { .green {
color: #55FF55; color: #55FF55;
} }
.aqua { .aqua {
color: #55FFFF; color: #55FFFF;
} }
.red { .red {
color: #FF5555; color: #FF5555;
} }
.pink { .pink {
color: #FF55FF; color: #FF55FF;
} }
.yellow { .yellow {
color: #FFFF55; color: #FFFF55;
} }
.white { .white {
color: #FFFFFF; color: #FFFFFF;
} }
#navbutton { #navbutton {
display: none; display: none;
font-size: 40px; font-size: 40px;
cursor:pointer; cursor:pointer;
} }
@media only screen and (max-width: 850px) { @media only screen and (max-width: 850px) {
#navbutton { #navbutton {
display: inline; display: inline;
} }
.sidenav p { .sidenav p {
display: none; display: none;
} }
header { header {
margin: 0px; margin: 0px;
padding 0px; padding 0px;
} }
header h1 { header h1 {
margin: 0px; margin: 0px;
} }
header img { header img {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
margin-right: 0px; margin-right: 0px;
} }
header p { header p {
margin: 0px; margin: 0px;
margin-top: 5px; margin-top: 5px;
} }
.tab { .tab {
flex-direction: column; flex-direction: column;
} }
.columns { .columns {
flex-direction: column; flex-direction: column;
} }
.row { .row {
width: 100%; width: 100%;
} }
.sidenav { .sidenav {
width: 0%; width: 0%;
transition: 0s; transition: 0s;
} }
.main-limiter { .main-limiter {
margin-left: 0%; margin-left: 0%;
width: 100%; width: 100%;
} }
} }
</style> </style>
</head> </head>
@ -582,8 +582,8 @@
x.style.transform = "translate3d(0px,0px,0)"; x.style.transform = "translate3d(0px,0px,0)";
x.style.width = ""+navButtons.length*100+"%"; x.style.width = ""+navButtons.length*100+"%";
for (var i = 0; i < navButtons.length; i++) { for (i=0; i < navButtons.length; i++) {
navButtons[i].onclick = openFunc(i); navButtons[i].onclick = openFunc(i)
tabs[i].style.width = ""+100/navButtons.length+"%"; tabs[i].style.width = ""+100/navButtons.length+"%";
} }
x.style.opacity = "1"; x.style.opacity = "1";
@ -714,46 +714,46 @@
var ctxweek = document.getElementById("playerChartWeek"); var ctxweek = document.getElementById("playerChartWeek");
var dataweek = { var dataweek = {
datasets: [{ datasets: [{
label: "Online", label: "Online",
fill: true, fill: true,
lineTension: 0.1, lineTension: 0.1,
backgroundColor: "#%playersgraphfill%", backgroundColor: "#%playersgraphfill%",
borderColor: "#%playersgraphcolor%", borderColor: "#%playersgraphcolor%",
borderCapStyle: 'butt', borderCapStyle: 'butt',
borderDash: [], borderDash: [],
borderDashOffset: 0.0, borderDashOffset: 0.0,
borderJoinStyle: 'miter', borderJoinStyle: 'miter',
pointBorderColor: "#%playersgraphcolor%", pointBorderColor: "#%playersgraphcolor%",
pointBackgroundColor: "#fff", pointBackgroundColor: "#fff",
pointBorderWidth: 1, pointBorderWidth: 1,
pointHoverRadius: 5, pointHoverRadius: 5,
pointHoverBackgroundColor: "#%playersgraphcolor%", pointHoverBackgroundColor: "#%playersgraphcolor%",
pointHoverBorderColor: "#8fabc6", pointHoverBorderColor: "#8fabc6",
pointHoverBorderWidth: 2, pointHoverBorderWidth: 2,
pointRadius: 1, pointRadius: 1,
pointHitRadius: 10, pointHitRadius: 10,
spanGaps: false, spanGaps: false,
data: %dataweek% , data: %dataweek% ,
}]}; }]};
var playersChartWeek = new Chart(ctxweek, { var playersChartWeek = new Chart(ctxweek, {
type: 'scatter', type: 'scatter',
data: dataweek, data: dataweek,
options: { options: {
tooltips: { tooltips: {
callbacks: { callbacks: {
label: function(tooltipItems, data) { label: function(tooltipItems, data) {
var newDate = new Date(); var newDate = new Date();
newDate.setTime(tooltipItems.xLabel); newDate.setTime(tooltipItems.xLabel);
dateString = newDate.toUTCString(); dateString = newDate.toUTCString();
return dateString +': '+ tooltipItems.yLabel+ ' Players'; return dateString +': '+ tooltipItems.yLabel+ ' Players';
} }
} }
}, },
scales: { scales: {
yAxes: [{ yAxes: [{
display: true, display: true,
ticks: { ticks: {
callback: function(value, index, values) { callback: function(value, index, values) {
switch (value) { switch (value) {
case 0: case 0:
return '0'; return '0';
@ -763,17 +763,17 @@
return ''; return '';
}; };
}, },
suggestedMax: %graphmaxplayers%, suggestedMax: %graphmaxplayers%,
suggestedMin: 0 suggestedMin: 0
} }
}], }],
xAxes: [{ xAxes: [{
type: 'linear', type: 'linear',
display: false display: false
}] }]
} }
} }
}); });
var ctxpunch = document.getElementById("punchcard"); var ctxpunch = document.getElementById("punchcard");
var datapunch = { var datapunch = {
datasets: [ datasets: [