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>