diff options
| author | Jesusaves <cpntb1@ymail.com> | 2021-02-14 16:52:51 -0300 |
|---|---|---|
| committer | Jesusaves <cpntb1@ymail.com> | 2021-02-14 16:52:51 -0300 |
| commit | 5a4a653e11a3f4b815d9e09bcb15d81fd92abd10 (patch) | |
| tree | 30f78fb45da5076f2863bec2cc201f3ab6b8fa36 | |
| parent | 59385f464bb740aad35811d6bee5f6cf111c3783 (diff) | |
| download | docs-5a4a653e11a3f4b815d9e09bcb15d81fd92abd10.tar.gz docs-5a4a653e11a3f4b815d9e09bcb15d81fd92abd10.tar.bz2 docs-5a4a653e11a3f4b815d9e09bcb15d81fd92abd10.tar.xz docs-5a4a653e11a3f4b815d9e09bcb15d81fd92abd10.zip | |
Publish the HTML render for Online History (license unknown - authored by LawnCable)
| -rw-r--r-- | onlineHistory/onlineHistory.html | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/onlineHistory/onlineHistory.html b/onlineHistory/onlineHistory.html new file mode 100644 index 0000000..d1488b4 --- /dev/null +++ b/onlineHistory/onlineHistory.html @@ -0,0 +1,100 @@ +<html> + +<head> + <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js" integrity="sha256-o8aByMEvaNTcBsw94EfRLbBrJBI+c3mjna/j4LrfyJ8=" crossorigin="anonymous"></script> + <title>Moubootaur Legends - Recent Online Activity</title> +</head> + +<body> + <div style="width:90vw;height:30vh"> + <canvas id="myChart" ></canvas> + </div> + <script> + var myChart + + function requestData(filter) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', 'http://localhost/onlineHistory.csv', true); + xhr.responseType = 'text'; + + xhr.onload = function (e) { + if (this.status == 200) { + const d = parseCSV(this.responseText) + myChart.data.datasets[0].data = filter?filterData(d):d; + console.log(myChart.data.datasets[0].data) + myChart.update() + } + }; + + xhr.send(); + } + + function parseCSV(csv_string) { + const rows = csv_string.split(/\n|\r\n/g).map(r => r.split(', ')) + rows.pop() //remove empty line at end of file + return rows.map(row => ({ x: row[0], y: row[1] })) + } + + function filterData(data){ + return data.filter((elem, index) => { + if(index === 0 || index === data.length - 1) return true; + var before = data[index-1].y + var current = elem.y + var after = data[index+1].y + return !(before === current && current === after) + }) + } + + function initChart() { + + var ctx = document.getElementById('myChart').getContext('2d'); + + var data = { + datasets: [{ + backgroundColor: 'rgba(50,205,50,0.4)', + borderColor: 'rgba(50,205,50,1)', + borderWidth: 1, + lineTension: 0, + label: 'Players online', + data: [] + }] + } + + const options = { + responsive: true, + title: { + display: true, + text: "Players online over time" + }, + scales: { + xAxes: [{ + type: 'time', + display: true, + scaleLabel: { + display: true, + labelString: 'Date' + }, + distribution: 'linear', + time:{ + min: new Date("2019-04-25 23:33:01.121967") + } + }], + yAxes: [{ + ticks: { + beginAtZero: true + } + }], + } + } + + myChart = new Chart(ctx, { type: 'line', data, options }); + } + initChart(); + requestData(true); + </script> + <button onclick="requestData(false)">refresh & show raw Data</button> + <button onclick="requestData(true)">refresh & show filtered Data</button> +</body> + +</html> |