Added Suggestion #96 - Web pages now mobile friendly
This commit is contained in:
Rsl1122
parent
333d6c44fc
commit
6e3d75621c
|
|
@ -4,6 +4,7 @@
|
|||
<title>Plan | Server Analysis</title>
|
||||
<meta name="description" content="Player Analysis window">
|
||||
<meta name="author" content="Rsl1122">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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://cdn.plot.ly/plotly-latest.min.js"></script>
|
||||
|
|
@ -13,7 +14,7 @@ header {
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
height: 88px;
|
||||
padding: 0px;
|
||||
background-color: #348e0f;
|
||||
z-index: 1;
|
||||
|
|
@ -35,7 +36,7 @@ body {
|
|||
background-color: #5cb239;
|
||||
overflow-x: hidden;
|
||||
transition: 0.5s;
|
||||
padding-top: 5.4%;
|
||||
padding-top: 88px;
|
||||
text-align: left;
|
||||
}
|
||||
.sidenav p {
|
||||
|
|
@ -76,7 +77,7 @@ body {
|
|||
}
|
||||
|
||||
.main-wrapper {
|
||||
margin-top: 5.5%;
|
||||
margin-top: 88px;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 0;
|
||||
transition: 1.5s;
|
||||
|
|
@ -87,22 +88,31 @@ body {
|
|||
padding: 5px;
|
||||
text-decoration: none;!important;
|
||||
color: #000
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.box p {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.content {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
.row {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.columns {
|
||||
display: flex;
|
||||
|
|
@ -110,22 +120,9 @@ body {
|
|||
.column {
|
||||
flex: 1;
|
||||
}
|
||||
.column-one {
|
||||
order: 1;
|
||||
}
|
||||
.column-two {
|
||||
order: 2;
|
||||
}
|
||||
.column-three {
|
||||
order: 3;
|
||||
}
|
||||
.about {
|
||||
text-align: left;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
.box-area {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.infobox {
|
||||
margin-left: 3px;
|
||||
|
|
@ -225,19 +222,71 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
.plugin-data {
|
||||
color: #000;
|
||||
}
|
||||
header img {
|
||||
float: right;
|
||||
padding: 5px;
|
||||
display: inline;
|
||||
}
|
||||
header p {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
#navbutton {
|
||||
display: none;
|
||||
font-size: 40px;
|
||||
cursor:pointer;
|
||||
}
|
||||
@media only screen and (max-width: 850px) {
|
||||
#navbutton {
|
||||
display: inline;
|
||||
}
|
||||
.sidenav p {
|
||||
display: none;
|
||||
}
|
||||
header {
|
||||
margin: 0px;
|
||||
padding 0px;
|
||||
}
|
||||
header h1 {
|
||||
margin: 0px;
|
||||
}
|
||||
header img {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
header p {
|
||||
margin: 0px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tab {
|
||||
flex-direction: column;
|
||||
}
|
||||
.row {
|
||||
width: 100%;
|
||||
}
|
||||
.sidenav {
|
||||
width: 0%;
|
||||
transition: 0s;
|
||||
}
|
||||
.main-limiter {
|
||||
margin-left: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-content">
|
||||
<img style="float: right; padding: 5px" src="http://puu.sh/tJZUb/c2e0ab220f.png" alt="Player Analytics | Analysis">
|
||||
<p style="float: right; text-align: right;">Player Analytics v.%version%</p>
|
||||
<h1>Plan | Server Analysis</h1>
|
||||
<img src="http://puu.sh/tJZUb/c2e0ab220f.png" alt="Player Analytics | Analysis">
|
||||
<p>Player Analytics v.%version%</p>
|
||||
<h1><span id="navbutton" onclick="openNav()">☰ </span>Plan | Server Analysis</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div id="content" class="content">
|
||||
|
||||
<div class="sidenav">
|
||||
<div id="sidenav" class="sidenav">
|
||||
<p>Last Refresh: <br>%refresh% ago</p>
|
||||
<a href="javascript:void(0)" class="nav-button">
|
||||
<i class="fa fa-info-circle" aria-hidden="true"></i> Information
|
||||
|
|
@ -245,6 +294,9 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
<a href="javascript:void(0)" class="nav-button">
|
||||
<i class="fa fa-bar-chart" aria-hidden="true"></i> Online Activity
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="nav-button">
|
||||
<i class="fa fa-calendar" aria-hidden="true"></i> Sessions
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="nav-button">
|
||||
<i class="fa fa-list-alt" aria-hidden="true"></i> Playerlist
|
||||
</a>
|
||||
|
|
@ -258,11 +310,11 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
<i class="fa fa-cubes" aria-hidden="true"></i> Plugins
|
||||
</a>
|
||||
</div>
|
||||
<div class="main-limiter">
|
||||
<div id="limiter" class="main-limiter">
|
||||
<div id="main" class="main-wrapper">
|
||||
<div class="tab">
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<div class="row">
|
||||
<div class="box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="header-text"> Player Activity - Last 24h</span></div>
|
||||
|
|
@ -281,8 +333,17 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="playerChartDay" width="1000" height="350" style="width: 95%;"></canvas><br/>
|
||||
</div>
|
||||
<div class="about box column">
|
||||
<div class=" box column" style="order: 5;">
|
||||
<p class="header-label" style="color: #267F00; "><i class="fa fa-calendar-check-o" aria-hidden="true"></i><span class="header-text"> Recent Logins</span></p>
|
||||
<div class="buttons">
|
||||
%recentlogins%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class=" box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-info-circle" aria-hidden="true"></i><span class="header-text"> Information</span></div>
|
||||
|
|
@ -301,17 +362,12 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<canvas id="playerChartDay" width="1000" height="350" style="width: 95%;"></canvas><br/>
|
||||
</div>
|
||||
<div class="about box column">
|
||||
<p><i class="fa fa-clock-o" aria-hidden="true"></i> Total Playtime: %totalplaytime% | <i class="fa fa-clock-o" aria-hidden="true"></i> Player Average: %avgplaytime%<br/>
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i> Average Session Length: %sessionaverage%<br/>
|
||||
<i class="fa fa-calendar-plus-o" aria-hidden="true"></i> Total Login times: %totallogins%<br/>
|
||||
<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-meh-o" aria-hidden="true"></i> Deaths: %deaths%</p>
|
||||
</div>
|
||||
<div class=" box column">
|
||||
<p class="header-label" style="color: #267F00; "><i class="fa fa-pie-chart" aria-hidden="true"></i><span class="header-text"> Gamemode Usage</span></p><br/>
|
||||
<div class="box-area">
|
||||
<div class="infobox" style="background-color: #%gm0col%; width: 20%;">
|
||||
|
|
@ -367,23 +423,13 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<p class="header-label" style="color: #267F00; "><i class="fa fa-calendar-check-o" aria-hidden="true"></i><span class="header-text"> Recent Logins</span></p>
|
||||
<div class="buttons">
|
||||
%recentlogins%
|
||||
</div>
|
||||
</div>
|
||||
<div class="about box column">
|
||||
<canvas id="gmPie" width="1000" height="600" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<div class="row">
|
||||
<div class=" box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="header-text"> Player Activity - Last 24h</span></div>
|
||||
|
|
@ -403,6 +449,8 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
<canvas id="playerChartDay2" width="1000" height="350" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
<div class=" box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="header-text"> Player Activity - Last 7d</span></div>
|
||||
|
|
@ -422,6 +470,8 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
<canvas id="playerChartWeek" width="1000" height="350" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
<div class=" box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="header-text"> Player Activity - Last 30d</span></div>
|
||||
|
|
@ -442,7 +492,9 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
<canvas id="playerChartMonth" width="1000" height="350" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
<div class="about box column">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-pie-chart" aria-hidden="true"></i><span class="header-text"> Playerbase Composition</span></div>
|
||||
|
|
@ -516,6 +568,8 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div><br><br>
|
||||
<canvas id="activityPie" width="1000" height="600" style="width: 95%;"></canvas><br>
|
||||
</div>
|
||||
<div class=" box column">
|
||||
<p class="header-label" style="color: #267F00; "><i class="fa fa-calendar-check-o" aria-hidden="true"></i><span class="header-text"> Recent Logins</span></p>
|
||||
<div class="buttons">
|
||||
%recentlogins%
|
||||
|
|
@ -523,9 +577,83 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div class="row">
|
||||
<div class=" box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon" style="width: 50%">
|
||||
<div class="header-label"><i class="fa fa-braille" aria-hidden="true"></i><span class="header-text"> PunchCard</span></div>
|
||||
</div>
|
||||
<div class="infobox" >
|
||||
<div class="info-icon">
|
||||
<i class="fa fa-calendar-plus-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="info-text" style="width: 70%;">
|
||||
<div class="info-number">
|
||||
%totallogins%
|
||||
</div>
|
||||
<div class="info-label">
|
||||
Login Times
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="punchcard" width="1000" height="600" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class=" box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="header-text"> Length Distribution</span></div>
|
||||
</div>
|
||||
<div class="infobox">
|
||||
<div class="info-icon">
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="info-text" style="width: 70%;">
|
||||
<div class="info-number">
|
||||
%sessionaverage%
|
||||
</div>
|
||||
<div class="info-label">
|
||||
Average Length
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="sessiondistribution" width="1000" height="600" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="columns">
|
||||
<div class=" box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon" style="width: 50%">
|
||||
<div class="header-label"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="header-text"> Playtime Distribution</span></div>
|
||||
</div>
|
||||
<div class="infobox" >
|
||||
<div class="info-icon">
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="info-text" style="width: 70%;">
|
||||
<div class="info-number">
|
||||
%totalplaytime%
|
||||
</div>
|
||||
<div class="info-label">
|
||||
Total Playtime
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="playdistribution" width="1000" height="600" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
<div class=" box column">
|
||||
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<div class="row" style="width: 100%;">
|
||||
<div class="box column">
|
||||
<div class="headerbox" style="width: 97%;">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-list-alt" aria-hidden="true"></i><span class="header-text"> Playerlist</span></div>
|
||||
|
|
@ -544,10 +672,6 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<table class="sortable table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -568,8 +692,8 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<div class="row" style="width: 100%;">
|
||||
<div class=" box column">
|
||||
<div class="headerbox" style="width: 97%;">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-terminal" aria-hidden="true"></i><span class="header-text"> Command usage</span></div>
|
||||
|
|
@ -588,10 +712,6 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<table class="sortable table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -607,8 +727,8 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<div class="row">
|
||||
<div class=" box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-globe" aria-hidden="true"></i><span class="header-text"> Geolocations</span></div>
|
||||
|
|
@ -627,8 +747,11 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about box column">
|
||||
<div style="width:100%;"><div id="cloropleth"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class=" box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-male" aria-hidden="true"></i><i class="fa fa-female" aria-hidden="true"></i><span class="header-text"> Gender Distribution</span></div>
|
||||
|
|
@ -660,23 +783,26 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<div style="width:100%;"><div id="cloropleth"></div></div>
|
||||
</div>
|
||||
<div class="about box column">
|
||||
<canvas id="genderPie" width="1000" height="600" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div class="tab" style="display: block;">
|
||||
%plugins%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openNav() {
|
||||
document.getElementById("sidenav").style.width = "100%";
|
||||
document.getElementById("limiter").style.display = "none";
|
||||
document.getElementById("navbutton").onclick = function () { closeNav(); };
|
||||
}
|
||||
function closeNav() {
|
||||
document.getElementById("sidenav").style.width = "0%";
|
||||
document.getElementById("limiter").style.display = "block";
|
||||
document.getElementById("navbutton").onclick = function () { openNav(); };
|
||||
}
|
||||
var navButtons = document.getElementsByClassName("nav-button");
|
||||
var tabs = document.getElementsByClassName("tab");
|
||||
var slideIndex = 0;
|
||||
|
|
@ -694,6 +820,9 @@ openFunc(0);
|
|||
|
||||
function openFunc(i) {
|
||||
return function() {
|
||||
if (window.getComputedStyle(document.getElementById("navbutton")).getPropertyValue('display') == "inline") {
|
||||
closeNav();
|
||||
}
|
||||
var max = navButtons.length;
|
||||
var perc = -100 / navButtons.length;
|
||||
slideIndex = i;
|
||||
|
|
@ -710,6 +839,40 @@ function openFunc(i) {
|
|||
<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.js"></script>
|
||||
<script>
|
||||
function hour(i) {
|
||||
switch (i) {
|
||||
case 25:
|
||||
case -1:
|
||||
case -2:
|
||||
case -3:
|
||||
case -4:
|
||||
case -5:
|
||||
return '';
|
||||
default:
|
||||
return i+':00';
|
||||
}
|
||||
}
|
||||
function day(i) {
|
||||
switch (i) {
|
||||
case 0:
|
||||
return 'Monday';
|
||||
case 1:
|
||||
return 'Tuesday';
|
||||
case 2:
|
||||
return 'Wednesday';
|
||||
case 3:
|
||||
return 'Thursday';
|
||||
case 4:
|
||||
return 'Friday';
|
||||
case 5:
|
||||
return 'Saturday';
|
||||
case 6:
|
||||
return 'Sunday';
|
||||
default:
|
||||
break;
|
||||
return '';
|
||||
}
|
||||
}
|
||||
// Script for All charts using Chart.js
|
||||
var ctxday = document.getElementById("playerChartDay");
|
||||
var ctxday2 = document.getElementById("playerChartDay2");
|
||||
|
|
@ -907,6 +1070,182 @@ function openFunc(i) {
|
|||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
function day(i) {
|
||||
switch (i) {
|
||||
case 0:
|
||||
return 'Monday';
|
||||
case 1:
|
||||
return 'Tuesday';
|
||||
case 2:
|
||||
return 'Wednesday';
|
||||
case 3:
|
||||
return 'Thursday';
|
||||
case 4:
|
||||
return 'Friday';
|
||||
case 5:
|
||||
return 'Saturday';
|
||||
case 6:
|
||||
return 'Sunday';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
function hour(i) {
|
||||
switch (i) {
|
||||
case 25:
|
||||
case -1:
|
||||
case -2:
|
||||
case -3:
|
||||
case -4:
|
||||
case -5:
|
||||
return '';
|
||||
default:
|
||||
return i+':00';
|
||||
}
|
||||
}
|
||||
var ctxpunch = document.getElementById("punchcard");
|
||||
var datapunch = {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Player Join Punchcard',
|
||||
data: %datapunchcard%,
|
||||
backgroundColor: "#222",
|
||||
hoverBackgroundColor: "#333",
|
||||
}]
|
||||
};
|
||||
var punchcardChart = new Chart(ctxpunch, {
|
||||
type: 'bubble',
|
||||
data: datapunch,
|
||||
options: {
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
|
||||
return day(tooltipItems.yLabel)+': '+hour(tooltipItems.xLabel);
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
showXLabels: 1,
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
return hour(value);
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
return day(value);
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var ctxDistribution = document.getElementById("sessiondistribution");
|
||||
var dataDistr = {
|
||||
labels: %labelssessiondistribution%,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Session Length Distribution',
|
||||
data: %datasessiondistribution%,
|
||||
backgroundColor: "#89c471",
|
||||
fill: true,
|
||||
borderColor: "#348e0f",
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: "#348e0f",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "#348e0f",
|
||||
pointHoverBorderColor: "#348e0f",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 1,
|
||||
pointHitRadius: 10,
|
||||
spanGaps: false,
|
||||
}]
|
||||
};
|
||||
var sessionDistributions = new Chart(ctxDistribution, {
|
||||
type: 'bar',
|
||||
data: dataDistr,
|
||||
options: {
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
return tooltipItems.xLabel+'utes: '+tooltipItems.yLabel+'%';
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
return value+'%';
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!--<script>
|
||||
var ctxPlayDistribution = document.getElementById("playdistribution");
|
||||
var dataPlayDistr = {
|
||||
labels: %labelsplaydistribution%,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Player Total Playtime Distribution',
|
||||
data: %dataplaydistribution%,
|
||||
backgroundColor: "#%playersgraphfill%",
|
||||
fill: true,
|
||||
borderColor: "#%playersgraphcolor%",
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: "#%playersgraphcolor%",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "#%playersgraphcolor%",
|
||||
pointHoverBorderColor: "#%playersgraphcolor%",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 1,
|
||||
pointHitRadius: 10,
|
||||
spanGaps: false,
|
||||
}]
|
||||
};
|
||||
var playtimeDistributions = new Chart(ctxPlayDistribution, {
|
||||
type: 'bar',
|
||||
data: dataPlayDistr,
|
||||
options: {
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
return tooltipItems.xLabel+'utes: '+tooltipItems.yLabel+'%';
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
return value+'%';
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>-->
|
||||
<script>
|
||||
CLOROPLETH = document.getElementById('cloropleth');
|
||||
var data = [{
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ header {
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
height: 88px;
|
||||
padding: 0px;
|
||||
background-color: #348e0f;
|
||||
z-index: 1;
|
||||
|
|
@ -34,7 +34,7 @@ body {
|
|||
background-color: #5cb239;
|
||||
overflow-x: hidden;
|
||||
transition: 0.5s;
|
||||
padding-top: 5.4%;
|
||||
padding-top: 88px;
|
||||
text-align: left;
|
||||
}
|
||||
.sidenav p {
|
||||
|
|
@ -75,7 +75,7 @@ body {
|
|||
}
|
||||
|
||||
.main-wrapper {
|
||||
margin-top: 5.5%;
|
||||
padding-top: 88px;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 0;
|
||||
transition: 1.5s;
|
||||
|
|
@ -86,7 +86,9 @@ body {
|
|||
padding: 5px;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.box p {
|
||||
|
|
@ -97,6 +99,14 @@ body {
|
|||
width: 20%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.row {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
text-align: center;
|
||||
|
|
@ -109,20 +119,6 @@ body {
|
|||
.column {
|
||||
flex: 1;
|
||||
}
|
||||
.column-one {
|
||||
order: 1;
|
||||
}
|
||||
.column-two {
|
||||
order: 2;
|
||||
}
|
||||
.column-three {
|
||||
order: 3;
|
||||
}
|
||||
.about {
|
||||
text-align: left;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
.box-area {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -272,6 +268,49 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
.white {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#navbutton {
|
||||
display: none;
|
||||
font-size: 40px;
|
||||
cursor:pointer;
|
||||
}
|
||||
@media only screen and (max-width: 850px) {
|
||||
#navbutton {
|
||||
display: inline;
|
||||
}
|
||||
.sidenav p {
|
||||
display: none;
|
||||
}
|
||||
header {
|
||||
margin: 0px;
|
||||
padding 0px;
|
||||
}
|
||||
header h1 {
|
||||
margin: 0px;
|
||||
}
|
||||
header img {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
header p {
|
||||
margin: 0px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tab {
|
||||
flex-direction: column;
|
||||
}
|
||||
.row {
|
||||
width: 100%;
|
||||
}
|
||||
.sidenav {
|
||||
width: 0%;
|
||||
transition: 0s;
|
||||
}
|
||||
.main-limiter {
|
||||
margin-left: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -279,23 +318,26 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
<div class="header-content">
|
||||
<img style="float: right; padding: 5px" src="http://puu.sh/tJZUb/c2e0ab220f.png" alt="Player Analytics | Analysis">
|
||||
<p style="float: right; text-align: right;">Player Analytics v.%version%</p>
|
||||
<h1>Plan | Inspect Player %name%%op%</h1>
|
||||
<h1><span id="navbutton" onclick="openNav()">☰ </span>Plan | Inspect Player %name%%op%</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div id="content" class="content">
|
||||
<div class="sidenav">
|
||||
<div id="sidenav" class="sidenav">
|
||||
<p>Has Connected from ips:<br>%ips%</p>
|
||||
<a href="javascript:void(0)" class="nav-button">
|
||||
<i class="fa fa-info-circle" aria-hidden="true"></i> Information
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="nav-button">
|
||||
<i class="fa fa-calendar" aria-hidden="true"></i> Sessions
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="nav-button">
|
||||
<i class="fa fa-cubes" aria-hidden="true"></i> Plugins
|
||||
</a>
|
||||
</div>
|
||||
<div class="main-limiter">
|
||||
<div id="limiter" class="main-limiter">
|
||||
<div id="main" class="main-wrapper">
|
||||
<div class="tab">
|
||||
<div class="columns">
|
||||
<div class="row">
|
||||
<div class="about box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
|
|
@ -315,30 +357,6 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="header-text"> Player Activity: 7d</span></div>
|
||||
</div>
|
||||
<div class="infobox" style="float: right;">
|
||||
<div class="info-icon">
|
||||
<i class="fa fa-calendar-check-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="info-text" style="width: 70%;">
|
||||
<div class="info-number">
|
||||
%lastseen%
|
||||
</div>
|
||||
<div class="info-label">
|
||||
Last seen
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<img style="float: right; padding: 5px" alt="%name%" src="http://cravatar.eu/head/%name%/128.png">
|
||||
<p><i class="fa fa-user" aria-hidden="true"></i> %active% %isonline%%banned%<br/>
|
||||
<i class="fa fa-address-card-o" aria-hidden="true"></i> Nicknames: %nicknames%<br/>
|
||||
|
|
@ -351,11 +369,6 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
<i class="fa fa-play" aria-hidden="true"></i> Age: %age% | <i class="fa fa-male" aria-hidden="true"></i><i class="fa fa-female" aria-hidden="true"></i> Gender: %gender%<br/>
|
||||
<i class="fa fa-tag" aria-hidden="true"></i> UUID: %uuid%</p>
|
||||
</div>
|
||||
<div class="about box column">
|
||||
<canvas id="playerChartWeek" width="1000" height="350" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon" style="width: 50%">
|
||||
|
|
@ -375,30 +388,6 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-list" aria-hidden="true"></i><span class="header-text"> Last 10 Sessions</span></div>
|
||||
</div>
|
||||
<div class="infobox">
|
||||
<div class="info-icon">
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="info-text" style="width: 70%;">
|
||||
<div class="info-number">
|
||||
%sessionaverage%
|
||||
</div>
|
||||
<div class="info-label">
|
||||
Average Length
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="about box column">
|
||||
<div class="box-area">
|
||||
<div class="infobox" style="float: left; background-color: #%gm0col%; width: 45%;">
|
||||
<div class="info-icon">
|
||||
|
|
@ -455,8 +444,30 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
<canvas id="gmPie" width="1000" height="600" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="about box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="header-text"> Player Activity: 7d</span></div>
|
||||
</div>
|
||||
<div class="infobox" style="float: right;">
|
||||
<div class="info-icon">
|
||||
<i class="fa fa-calendar-check-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="info-text" style="width: 70%;">
|
||||
<div class="info-number">
|
||||
%lastseen%
|
||||
</div>
|
||||
<div class="info-label">
|
||||
Last seen
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="playerChartWeek" width="1000" height="350" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
<div class="about box column">
|
||||
%sessionstable%<br>
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-crosshairs" aria-hidden="true"></i><span class="header-text"> Last 10 Kills</span></div>
|
||||
|
|
@ -474,17 +485,75 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><br/>
|
||||
</div>
|
||||
%killstable%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div class="row">
|
||||
<div class="about box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon" style="width: 50%">
|
||||
<div class="header-label"><i class="fa fa-braille" aria-hidden="true"></i><span class="header-text"> PunchCard</span></div>
|
||||
</div>
|
||||
<div class="infobox" >
|
||||
<div class="info-icon">
|
||||
<i class="fa fa-calendar-plus-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="info-text" style="width: 70%;">
|
||||
<div class="info-number">
|
||||
%logintimes%
|
||||
</div>
|
||||
<div class="info-label">
|
||||
Login Times
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="punchcard" width="1000" height="600" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="about box column">
|
||||
<div class="headerbox">
|
||||
<div class="header-icon">
|
||||
<div class="header-label"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="header-text"> Length Distribution</span></div>
|
||||
</div>
|
||||
<div class="infobox">
|
||||
<div class="info-icon">
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="info-text" style="width: 70%;">
|
||||
<div class="info-number">
|
||||
%sessionaverage%
|
||||
</div>
|
||||
<div class="info-label">
|
||||
Average Length
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="sessiondistribution" width="1000" height="600" style="width: 95%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab" style="display: block;">
|
||||
%plugins%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openNav() {
|
||||
document.getElementById("sidenav").style.width = "100%";
|
||||
document.getElementById("limiter").style.display = "none";
|
||||
document.getElementById("navbutton").onclick = function () { closeNav(); };
|
||||
}
|
||||
function closeNav() {
|
||||
document.getElementById("sidenav").style.width = "0%";
|
||||
document.getElementById("limiter").style.display = "block";
|
||||
document.getElementById("navbutton").onclick = function () { openNav(); };
|
||||
}
|
||||
var navButtons = document.getElementsByClassName("nav-button");
|
||||
var tabs = document.getElementsByClassName("tab");
|
||||
var slideIndex = 0;
|
||||
|
|
@ -502,6 +571,9 @@ openFunc(0);
|
|||
|
||||
function openFunc(i) {
|
||||
return function() {
|
||||
if (window.getComputedStyle(document.getElementById("navbutton")).getPropertyValue('display') == "inline") {
|
||||
closeNav();
|
||||
}
|
||||
var max = navButtons.length;
|
||||
var perc = -100 / navButtons.length;
|
||||
slideIndex = i;
|
||||
|
|
@ -518,67 +590,218 @@ function openFunc(i) {
|
|||
<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.js"></script>
|
||||
<script>
|
||||
function hour(i) {
|
||||
switch (i) {
|
||||
case 25:
|
||||
case -1:
|
||||
case -2:
|
||||
case -3:
|
||||
case -4:
|
||||
case -5:
|
||||
return '';
|
||||
default:
|
||||
return i+':00';
|
||||
}
|
||||
}
|
||||
function day(i) {
|
||||
switch (i) {
|
||||
case 0:
|
||||
return 'Monday';
|
||||
case 1:
|
||||
return 'Tuesday';
|
||||
case 2:
|
||||
return 'Wednesday';
|
||||
case 3:
|
||||
return 'Thursday';
|
||||
case 4:
|
||||
return 'Friday';
|
||||
case 5:
|
||||
return 'Saturday';
|
||||
case 6:
|
||||
return 'Sunday';
|
||||
default:
|
||||
break;
|
||||
return '';
|
||||
}
|
||||
}
|
||||
// Script for All charts using Chart.js
|
||||
var ctxgmpie = document.getElementById("gmPie");
|
||||
var dataGmPie = {
|
||||
labels: %gmlabels% ,
|
||||
datasets: [
|
||||
{
|
||||
datasets: [{
|
||||
data: %gmdata% ,
|
||||
backgroundColor: [ %gmcolors% ],
|
||||
hoverBackgroundColor: [ %gmcolors% ]
|
||||
}
|
||||
]
|
||||
backgroundColor: [ %gmcolors% ],
|
||||
hoverBackgroundColor: [ %gmcolors% ]
|
||||
}]
|
||||
}
|
||||
var GMPie = new Chart(ctxgmpie, {
|
||||
type: 'doughnut',
|
||||
data: dataGmPie,
|
||||
options: {
|
||||
data: dataGmPie,
|
||||
options: {
|
||||
legend: {
|
||||
position: 'right',
|
||||
labels: {
|
||||
position: 'right',
|
||||
labels: {
|
||||
padding: 7
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
var ctxweek = document.getElementById("playerChartWeek");
|
||||
var dataweek = {
|
||||
labels: %labelsweek% ,
|
||||
datasets: [
|
||||
{
|
||||
label: "Players Online",
|
||||
fill: true,
|
||||
lineTension: 0.1,
|
||||
backgroundColor: "#%playersgraphfill%",
|
||||
borderColor: "#%playersgraphcolor%",
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: "#%playersgraphcolor%",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "#%playersgraphcolor%",
|
||||
pointHoverBorderColor: "#8fabc6",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 1,
|
||||
pointHitRadius: 10,
|
||||
spanGaps: false,
|
||||
data: %dataweek% ,
|
||||
datasets: [{
|
||||
label: "Online",
|
||||
fill: true,
|
||||
lineTension: 0.1,
|
||||
backgroundColor: "#%playersgraphfill%",
|
||||
borderColor: "#%playersgraphcolor%",
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: "#%playersgraphcolor%",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "#%playersgraphcolor%",
|
||||
pointHoverBorderColor: "#8fabc6",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 1,
|
||||
pointHitRadius: 10,
|
||||
spanGaps: false,
|
||||
data: %dataweek% ,
|
||||
}]};
|
||||
var playersChartWeek = new Chart(ctxweek, {
|
||||
type: 'line',
|
||||
data: dataweek,
|
||||
options: {
|
||||
type: 'line',
|
||||
data: dataweek,
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
xAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
var ctxpunch = document.getElementById("punchcard");
|
||||
var datapunch = {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Player Join Punchcard',
|
||||
data: %datapunchcard%,
|
||||
backgroundColor: "#222",
|
||||
hoverBackgroundColor: "#333",
|
||||
}]
|
||||
};
|
||||
var punchcardChart = new Chart(ctxpunch, {
|
||||
type: 'bubble',
|
||||
data: datapunch,
|
||||
options: {
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
function day(i) {
|
||||
switch (i) {
|
||||
case 0:
|
||||
return 'Monday';
|
||||
case 1:
|
||||
return 'Tuesday';
|
||||
case 2:
|
||||
return 'Wednesday';
|
||||
case 3:
|
||||
return 'Thursday';
|
||||
case 4:
|
||||
return 'Friday';
|
||||
case 5:
|
||||
return 'Saturday';
|
||||
case 6:
|
||||
return 'Sunday';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
function hour(i) {
|
||||
switch (i) {
|
||||
case 25:
|
||||
case -1:
|
||||
case -2:
|
||||
case -3:
|
||||
case -4:
|
||||
case -5:
|
||||
return '';
|
||||
default:
|
||||
return i+':00';
|
||||
}
|
||||
}
|
||||
return day(tooltipItems.yLabel)+': '+hour(tooltipItems.xLabel);
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
return hour(value);
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
return day(value);
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
var ctxDistribution = document.getElementById("sessiondistribution");
|
||||
var dataDistr = {
|
||||
labels: %labelssessiondistribution%,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Session Length Distribution',
|
||||
data: %datasessiondistribution%,
|
||||
backgroundColor: "#89c471",
|
||||
fill: true,
|
||||
borderColor: "#348e0f",
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: "#348e0f",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "#348e0f",
|
||||
pointHoverBorderColor: "#348e0f",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 1,
|
||||
pointHitRadius: 10,
|
||||
spanGaps: false,
|
||||
}]
|
||||
};
|
||||
var sessionDistributions = new Chart(ctxDistribution, {
|
||||
type: 'bar',
|
||||
data: dataDistr,
|
||||
options: {
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
return tooltipItems.xLabel+'utes: '+tooltipItems.yLabel+'%';
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
callback: function(value, index, values) {
|
||||
return value+'%';
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue