amki/ISPChk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make chart display tabbed

Browse Source
This commit is contained in:
amki 2021-02-06 02:32:06 +01:00
parent b888dafa66
commit a8033771da
3 changed files with 60 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ISPChk/ispchk.db
View File

Binary file not shown.

56
ISPChk/wwwroot/index.html
View File

@ -12,32 +12,6 @@
<div class="row">
<div class="col-sm">
<button id="btnDebug">DEBUG</button>
</div>
<div class="col-sm">
Hosts
<table id="tblHosts" class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Hostname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm">
Testlel
</div>
</div>
<div class="row">
<div class="col-sm">
<form id="frmHostAdd">
<div>
<label for="inpNameAdd" class="form-label">Name</label>
@ -60,7 +34,22 @@
</form>
</div>
<div class="col-sm">
Testlel
<table id="tblHosts" class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Hostname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm">
<form id="frmHistory">
@ -72,7 +61,18 @@
</form>
</div>
</div>
<div id="charts" class="row">
<div class="row">
<div class="col-sm">
</div>
<div class="col-sm">
<div id="chartContainerButtons">
</div>
</div>
<div class="col-sm">
</div>
</div>
<div id="chartContainer" class="row">
</div>
</div>
<script src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>

36
ISPChk/wwwroot/ispchk.js
View File

@ -57,6 +57,32 @@ async function transformChartData(pings) {
return res;
}
async function activateChart(id) {
var chartDiv = $("#chartContainer");
var chartId = "chart_" + id;
var charts = chartDiv.children("canvas");
for (let chart of charts) {
var thisId = $(chart).attr('id');
if (thisId == chartId) {
$(chart).show();
} else {
$(chart).hide();
}
console.log(chart);
}
}
async function prepareChart(host) {
var buttonDiv = $("#chartContainerButtons");
var chartDiv = $("#chartContainer");
var chartId = "chart_" + host.hostId;
var canvas = $("<canvas>", { id: chartId, width: 400, height: 200 }).appendTo(chartDiv).hide();
$("<button>").appendTo(buttonDiv).text(host.name).click(async () => {
await activateChart(host.hostId);
});
return canvas[0];
}
async function updateGraphs() {
var chartDiv = $("#charts");
chartDiv.empty();
@ -66,9 +92,10 @@ async function updateGraphs() {
var end = Date.now();
for (let host of hosts) {
console.log("Appending ", host);
var chartElement = await prepareChart(host);
console.log("chartElement: ", chartElement);
var val = await transformChartData(await fetchPings(host.hostId, start, end));
$("<canvas>", { id: "chart_" + host.hostId, width: 200, height: 200 }).appendTo(chartDiv);
var ctx = document.getElementById('chart_' + host.hostId).getContext('2d');
var ctx = chartElement.getContext('2d');
charts[host.hostId] = new Chart(ctx, {
type: 'line',
data: {
@ -115,8 +142,8 @@ async function updateGraphs() {
id: "y-latency",
position: "left",
ticks: {
suggestedMin: 10,
suggestedMax: 40
suggestedMin: 0,
suggestedMax: 100
}
},/*
{
@ -140,6 +167,7 @@ async function updateGraphs() {
}
});
}
activateChart(1);
}
$('#btnDebug').click(async () => {