Create index.html
Browse files- index.html +91 -0
index.html
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
p<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<title>PVT Dstat</title>
|
| 6 |
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
|
| 7 |
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" rel="stylesheet">
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<div class="container">
|
| 11 |
+
<div class="row">
|
| 12 |
+
<div class="col-12">
|
| 13 |
+
<div class="card" style="border-radius: 50px;">
|
| 14 |
+
<div class="card-body">
|
| 15 |
+
<canvas id="canvas"></canvas>
|
| 16 |
+
</div>
|
| 17 |
+
</div>
|
| 18 |
+
</div>
|
| 19 |
+
</div>
|
| 20 |
+
</div>
|
| 21 |
+
<!--suppress JSUnresolvedLibraryURL -->
|
| 22 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
|
| 23 |
+
<!--suppress JSUnresolvedLibraryURL -->
|
| 24 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
| 25 |
+
<!--suppress JSUnresolvedLibraryURL -->
|
| 26 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
|
| 27 |
+
<script>
|
| 28 |
+
$(document).ready(function () {
|
| 29 |
+
const config = {
|
| 30 |
+
type: 'line',
|
| 31 |
+
data: {
|
| 32 |
+
labels: [],
|
| 33 |
+
datasets: [{
|
| 34 |
+
label: "requests",
|
| 35 |
+
backgroundColor: 'rgb(255, 99, 132)',
|
| 36 |
+
borderColor: 'rgb(255, 99, 132)',
|
| 37 |
+
data: [],
|
| 38 |
+
fill: false,
|
| 39 |
+
}],
|
| 40 |
+
},
|
| 41 |
+
options: {
|
| 42 |
+
responsive: true,
|
| 43 |
+
title: {
|
| 44 |
+
display: true,
|
| 45 |
+
text: 'custom rule /attack'
|
| 46 |
+
},
|
| 47 |
+
tooltips: {
|
| 48 |
+
mode: 'index',
|
| 49 |
+
intersect: false,
|
| 50 |
+
},
|
| 51 |
+
hover: {
|
| 52 |
+
mode: 'nearest',
|
| 53 |
+
intersect: true
|
| 54 |
+
},
|
| 55 |
+
scales: {
|
| 56 |
+
xAxes: [{
|
| 57 |
+
display: true,
|
| 58 |
+
scaleLabel: {
|
| 59 |
+
display: true
|
| 60 |
+
}
|
| 61 |
+
}],
|
| 62 |
+
yAxes: [{
|
| 63 |
+
display: true,
|
| 64 |
+
scaleLabel: {
|
| 65 |
+
display: true
|
| 66 |
+
}
|
| 67 |
+
}]
|
| 68 |
+
}
|
| 69 |
+
}
|
| 70 |
+
};
|
| 71 |
+
|
| 72 |
+
const context = document.getElementById('canvas').getContext('2d');
|
| 73 |
+
|
| 74 |
+
const lineChart = new Chart(context, config);
|
| 75 |
+
|
| 76 |
+
const source = new EventSource("/chart-data");
|
| 77 |
+
|
| 78 |
+
source.onmessage = function (event) {
|
| 79 |
+
const data = JSON.parse(event.data);
|
| 80 |
+
if (config.data.labels.length === 20) {
|
| 81 |
+
config.data.labels.shift();
|
| 82 |
+
config.data.datasets[0].data.shift();
|
| 83 |
+
}
|
| 84 |
+
config.data.labels.push(data.time);
|
| 85 |
+
config.data.datasets[0].data.push(data.value);
|
| 86 |
+
lineChart.update();
|
| 87 |
+
}
|
| 88 |
+
});
|
| 89 |
+
</script>
|
| 90 |
+
</body>
|
| 91 |
+
</html>
|