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

added bounding box to the chart

Browse Source
This commit is contained in:
UpstreamData
2022-03-02 12:15:46 -07:00
parent 7801ca5819
commit 9e598ebd8c
2 changed files with 125 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tools/web_monitor/app.py
View File

@@ -64,9 +64,11 @@ async def miner_websocket(websocket: WebSocket, miner_ip):
except asyncio.exceptions.TimeoutError:
data = {"error": "The miner is not responding."}
await websocket.send_json(data)
await asyncio.sleep(.5)
except KeyError:
data = {"error": "The miner returned incorrect data."}
await websocket.send_json(data)
await asyncio.sleep(.5)
except WebSocketDisconnect:
print("Websocket disconnected.")
pass

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

@@ -15,8 +15,22 @@
</div>
<div class="row">
<div class="col-10">
<canvas id="line-chart" class="grad-border mt-3" width="600" height="360"></canvas>
</div>
<div class="col-2 mt-2">
<div class="d-flex justify-content-center">Fan 1</div>
<canvas class="mb-2" id="fan-chart-1" width="100" height="100"></canvas>
<div class="d-flex justify-content-center">Fan 2</div>
<canvas class="mb-2" id="fan-chart-2" width="100" height="100"></canvas>
<div class="d-flex justify-content-center">Fan 3</div>
<canvas class="mb-2" id="fan-chart-3" width="100" height="100"></canvas>
<div class="d-flex justify-content-center">Fan 4</div>
<canvas class="mb-2" id="fan-chart-4" width="100" height="100"></canvas>
</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>
@@ -40,8 +54,8 @@ ws.onmessage = function(event) {
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();
if (minerDataChart.data.labels.length > 50) minerDataChart.data.labels.shift();
if (minerDataChart.data.datasets[0].data.length > 50) 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();
@@ -49,11 +63,23 @@ ws.onmessage = function(event) {
};
var ctx = document.getElementById("line-chart").getContext("2d");
var width = window.innerWidth || document.body.clientWidth;
var width = document.getElementById("line-chart").width;
var chartGradient = ctx.createLinearGradient(0, 0, width, 0)
chartGradient.addColorStop(0, '#D0368A');
chartGradient.addColorStop(1, '#708AD4');
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const {ctx, chartArea: {left, top, width, height}} = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
var minerDataChart = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
@@ -71,15 +97,20 @@ var minerDataChart = new Chart(document.getElementById("line-chart"), {
}
]
},
plugins: [chartAreaBorder],
options: {
animation: {
easing: 'easeInSine',
duration: 250
},
plugins: {
legend: {
display: false
}
chartAreaBorder: {
borderColor: chartGradient,
borderWidth: 1
},
legend: {
display: false
}
},
scales: {
y: {
@@ -89,12 +120,96 @@ var minerDataChart = new Chart(document.getElementById("line-chart"), {
},
x: {
ticks: {
maxTicksLimit: 8,
maxTicksLimit: 6,
maxRotation: 0
}
}
}
}
});
var options_fans = {
animation: {
duration: 0,
},
aspectRatio: 1.5,
events: [],
responsive: true,
plugins: {
legend: {
display: false,
}
}
};
var fan1Chart = new Chart(document.getElementById("fan-chart-1"), {
type: "doughnut",
data: {
labels: ["Fan 1"],
datasets: [
{
data: [100, 200],
// add colors
backgroundColor: [
"rgba(103, 0, 221, 1)",
"rgba(199, 199, 199, 1)"
]
},
]
},
options: options_fans
});
var fan2Chart = new Chart(document.getElementById("fan-chart-2"), {
type: "doughnut",
data: {
labels: ["Fan 2"],
datasets: [
{
data: [100, 200],
// add colors
backgroundColor: [
"rgba(103, 0, 221, 1)",
"rgba(199, 199, 199, 1)"
]
},
]
},
options: options_fans
});
var fan3Chart = new Chart(document.getElementById("fan-chart-3"), {
type: "doughnut",
data: {
labels: ["Fan 3"],
datasets: [
{
data: [100, 200],
// add colors
backgroundColor: [
"rgba(103, 0, 221, 1)",
"rgba(199, 199, 199, 1)"
]
},
]
},
options: options_fans
});
var fan4Chart = new Chart(document.getElementById("fan-chart-4"), {
type: "doughnut",
data: {
labels: ["Fan 4"],
datasets: [
{
data: [100, 200],
// add colors
backgroundColor: [
"rgba(103, 0, 221, 1)",
"rgba(199, 199, 199, 1)"
]
},
]
},
options: options_fans
});
</script>
{% endblock content %}