CAT_TOM/pyasic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved chart functionality in the web monitor and added handlers for errors such as no response from the miner

Browse Source
This commit is contained in:
UpstreamData
2022-03-02 11:11:34 -07:00
parent 3fcd2edf6f
commit dea6ff2a96
2 changed files with 64 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
tools/web_monitor/templates/miner.html
View File

@@ -2,8 +2,25 @@
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<h2 class="mt-2 ms-4">{{miner}}</h2>
<div class="row mt-2">
<div class="col">
<h2 class="ms-4">{{miner}}</h2>
</div>
<div class="col">
<div class="d-flex flex-row-reverse">
<a class="btn btn-outline-danger mx-1" href="#" role="button">Remove</a>
<a class="btn btn-primary mx-1" target="_blank" href="http://{{miner}}" role="button">Web Interface</a>
</div>
</div>
</div>
<canvas id="line-chart" width="600" height="360" class="mt-3"></canvas>
<div id="errorContainer" class="d-flex align-items-center mt-4 ms-4 alert alert-danger invisible">
<strong id="errorCode"></strong>
<div class="spinner-border ms-auto"></div>
</div>
<script>
var ws = new WebSocket("ws://localhost:80/miner/{{miner}}/ws");
@@ -11,12 +28,24 @@ let all_data = []
let all_labels = []
ws.onmessage = function(event) {
var new_data = JSON.parse(event.data)
datetime = luxon.DateTime.fromISO(new_data["datetime"]).toLocal();
if (minerDataChart.data.labels.length > 49) minerDataChart.data.labels.shift();
if (minerDataChart.data.datasets[0].data.length > 49) minerDataChart.data.datasets[0].data.shift();
minerDataChart.data.labels.push(datetime.toLocaleString(luxon.DateTime.TIME_WITH_SECONDS));
minerDataChart.data.datasets[0].data.push(new_data["hashrate"]);
minerDataChart.update();
if (new_data.hasOwnProperty("error")) {
var err_container = document.getElementById("errorContainer")
var err_code = document.getElementById("errorCode")
err_code.innerHTML = new_data['error']
err_container.classList.remove("invisible")
} else {
var chart = document.getElementById("line-chart")
var err_container = document.getElementById("errorContainer")
if (!err_container.classList.hasOwnProperty("invisible")) {
err_container.classList.add("invisible")
}
datetime = luxon.DateTime.fromISO(new_data["datetime"]).toLocal();
if (minerDataChart.data.labels.length > 49) minerDataChart.data.labels.shift();
if (minerDataChart.data.datasets[0].data.length > 49) minerDataChart.data.datasets[0].data.shift();
minerDataChart.data.labels.push(datetime.toLocaleString(luxon.DateTime.TIME_WITH_SECONDS));
minerDataChart.data.datasets[0].data.push(new_data["hashrate"]);
minerDataChart.update();
};
};
var ctx = document.getElementById("line-chart").getContext("2d");
@@ -43,6 +72,10 @@ var minerDataChart = new Chart(document.getElementById("line-chart"), {
]
},
options: {
animation: {
easing: 'easeInSine',
duration: 250
},
plugins: {
legend: {
display: false
@@ -51,9 +84,9 @@ var minerDataChart = new Chart(document.getElementById("line-chart"), {
scales: {
y: {
min: 0, // minimum value
suggestedMax: 10,
stepSize: 1
},
x: {
ticks: {
maxTicksLimit: 8,