mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-09 04:56:53 +03:00
53ff190860
* enhance data pages * add checkbox to show relative values * remove static entries, they get overwritten by dynamic oes --------- Co-authored-by: CaCO3 <caco@ruinelli.ch>
182 lines
6.5 KiB
HTML
182 lines
6.5 KiB
HTML
<html>
|
|
<head>
|
|
<script type="text/javascript" src='plotly-2.14.0.min.js?v=$COMMIT_HASH'></script>
|
|
|
|
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>
|
|
<script type="text/javascript" src="readconfigcommon.js?v=$COMMIT_HASH"></script>
|
|
<script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function run() {
|
|
datefile = document.getElementById("datafiles").value;
|
|
numbername = document.getElementById("numbers").value;
|
|
showRrelativeValues = document.getElementById("showRrelativeValues").checked;
|
|
//alert("Auslesen: " + datefile + " " + numbername);
|
|
|
|
_domainname = getDomainname();
|
|
fetch(_domainname + '/fileserver/log/data/' + datefile)
|
|
.then(response => {
|
|
// handle the response
|
|
if (response.status == 404) {
|
|
firework.launch("No log data available for " + dateString, 'warning', 10000);
|
|
}
|
|
response.text()
|
|
.then( result => {
|
|
var lines = result.split("\n");
|
|
var traceValue = { x: [], y: [], type: 'scatter', line: {width: 6}, name: 'Value'};
|
|
var tracePreValue = { x: [], y: [], type: 'scatter', line: {width: 2}, name: 'Previous Value', visible: 'legendonly'};
|
|
var traceChangeRate = { x: [], y: [], type: 'bar', yaxis: 'y2', opacity: 0.2, name: 'Change Rate'};
|
|
var traceChangeAbsolute = { x: [], y: [], type: 'bar', yaxis: 'y2', opacity: 0.2, name: 'Change Absolute', visible: 'legendonly'};
|
|
|
|
var timex = 1;
|
|
for (let line of lines) {
|
|
{
|
|
//console.log(line);
|
|
if (line.split(",")[1] == numbername)
|
|
{
|
|
var value = line.split(",")[3];
|
|
var preValue = line.split(",")[4];
|
|
var changeRate = line.split(",")[5];
|
|
var changeAbsolute = line.split(",")[6];
|
|
var time = line.split(",")[0];
|
|
//console.log("> "+time+" "+value+"\n");
|
|
|
|
traceValue.x.push(time);
|
|
|
|
traceValue.y.push(value);
|
|
tracePreValue.y.push(preValue);
|
|
traceChangeRate.y.push(changeRate);
|
|
traceChangeAbsolute.y.push(changeAbsolute);
|
|
}
|
|
}
|
|
}
|
|
//console.log(trace);
|
|
|
|
// Copy time to all traces
|
|
tracePreValue.x = traceValue.x;
|
|
traceChangeRate.x = traceValue.x;
|
|
traceChangeAbsolute.x = traceValue.x;
|
|
|
|
//console.log(traceValue.y);
|
|
|
|
var offsetValue = traceValue.y[0];
|
|
var offsetPreValue = tracePreValue.y[0];
|
|
|
|
if (showRrelativeValues) {
|
|
traceValue.y.forEach(function(part, index, arr) {
|
|
arr[index] = arr[index] - offsetValue;
|
|
});
|
|
|
|
tracePreValue.y.forEach(function(part, index, arr) {
|
|
arr[index] = arr[index] - offsetPreValue;
|
|
});
|
|
}
|
|
|
|
// console.log(traceValue.x)
|
|
|
|
var data = [traceValue, tracePreValue, traceChangeRate, traceChangeAbsolute];
|
|
|
|
var layout = {
|
|
showlegend: true,
|
|
colorway: ['green', 'black', 'blue', 'black'],
|
|
|
|
yaxis: {title: 'Value'},
|
|
yaxis2: {
|
|
title: 'Change',
|
|
overlaying: 'y',
|
|
side: 'right'
|
|
},
|
|
|
|
margin: {
|
|
l: 50,
|
|
r: 50,
|
|
b: 50,
|
|
t: 50,
|
|
pad: 4
|
|
},
|
|
|
|
legend: {
|
|
x: 0.2,
|
|
y: 0.9,
|
|
xanchor: 'right'
|
|
}
|
|
};
|
|
|
|
document.getElementById("chart").innerHTML = "";
|
|
Plotly.newPlot('chart', data, layout, {displayModeBar: true});
|
|
});
|
|
}).catch((error) => {
|
|
// handle the error
|
|
console.log(error);
|
|
});
|
|
}
|
|
</script>
|
|
<link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
|
|
<script type="text/javascript" src="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script>
|
|
<script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script>
|
|
</head>
|
|
<body>
|
|
<h3>Data Graph</h3>
|
|
<div id='chart'><p>Loading...<br></p></div>
|
|
<select id="datafiles" onchange="run();"></select>
|
|
<select id="numbers" onchange="run();"></select>
|
|
<input type="checkbox" id="showRrelativeValues" onclick = 'run();' unchecked ><label for="showRrelativeValues">Show relative values</label>
|
|
<button onclick="run();">Refresh</button>
|
|
|
|
|
<button onClick="window.location.href = 'data.html?v=$COMMIT_HASH'">Show data</button>
|
|
<button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show data files</button>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function WriteModelFiles()
|
|
{
|
|
list_data = getDATAList();
|
|
|
|
var _indexDig = document.getElementById("datafiles");
|
|
while (_indexDig.length)
|
|
_indexDig.remove(0);
|
|
|
|
for (var i = list_data.length - 1; i >= 0; --i)
|
|
{
|
|
var optionDig = document.createElement("option");
|
|
|
|
var text = list_data[i];
|
|
optionDig.text = text;
|
|
optionDig.value = list_data[i];
|
|
_indexDig.add(optionDig);
|
|
}
|
|
}
|
|
|
|
function WriteNumbers()
|
|
{
|
|
list_data = getNUMBERSList();
|
|
|
|
var _indexDig = document.getElementById("numbers");
|
|
while (_indexDig.length)
|
|
_indexDig.remove(0);
|
|
|
|
for (var i = 0; i < list_data.length; ++i)
|
|
{
|
|
var optionDig = document.createElement("option");
|
|
|
|
var text = list_data[i];
|
|
optionDig.text = text;
|
|
optionDig.value = list_data[i];
|
|
_indexDig.add(optionDig);
|
|
}
|
|
}
|
|
|
|
WriteModelFiles();
|
|
WriteNumbers();
|
|
|
|
run();
|
|
</script>
|
|
</body>
|
|
</html>
|