Make realtime plot work for production

This commit is contained in:
Gunnar Skjold
2024-04-06 12:53:17 +02:00
parent 86663f53f6
commit 05b340738e
3 changed files with 27 additions and 30 deletions

View File

@@ -741,7 +741,7 @@ void AmsConfiguration::clearUiConfig(UiConfig& config) {
config.showDayPlot = 1;
config.showMonthPlot = 1;
config.showTemperaturePlot = 2;
config.showRealtimePlot = 1;
config.showRealtimePlot = 2;
config.showPerPhasePower = 2;
config.showPowerFactor = 2;
config.darkMode = 2;

File diff suppressed because one or more lines are too long

View File

@@ -14,8 +14,6 @@
let realtime = null;
realtimeStore.subscribe(update => {
realtime = update;
lastUpdate = lastUp;
updateCount = 0;
});
let visible = false;
@@ -23,6 +21,7 @@
function addValue() {
if(updateCount == 60 || lastUpdate > lastUp || lastUpdate - lastUp > 300) {
getRealtime();
updateCount = 0;
} else {
while(lastUp > lastUpdate) {
realtime.data.unshift(lastValue);
@@ -39,6 +38,7 @@
if(!realtimeRequested) {
getRealtime();
realtimeRequested = true;
lastUpdate = lastUp;
return;
}
if(!isRealtimeFullyLoaded()) return;
@@ -53,8 +53,13 @@
let heightAvailable;
let widthAvailable;
let points;
let yScale;
let xScale;
let yScale = function(val, min, max) {
return Math.ceil(heightAvailable - (((val-min)/(max - min)) * heightAvailable) ) - 25;
};
let xScale = function(val) {
return 30 + Math.ceil((val/realtime.size) * (widthAvailable-35));
};
let yTicks;
let xTicks;
@@ -69,9 +74,11 @@
min = 0;
max = 0;
/*
console.log("\n--Realtime plot debug--")
console.log("Data length: %d\nSize: %d", realtime?.data?.length, realtime?.size);
console.log("Height: %d\nWidth: %d\nBar width: %s", heightAvailable, widthAvailable, barWidth);
*/
if(realtime.data && heightAvailable > 10 && widthAvailable > 100 && barWidth > 0.1) {
visible = true;
@@ -79,13 +86,14 @@
let val = realtime.data[p];
if(isNaN(val)) val = 0;
max = Math.max(Math.ceil(val/1000.0)*1000, max);
min = Math.min(Math.ceil(val/1000.0)*1000, min);
min = Math.min(Math.floor(val/1000.0)*1000, min);
}
let range = max - min;
unit = max > 2500 ? 'kW' : 'W';
yTicks = [];
for(let i = min; i < max; i+= max/5) {
for(let i = min; i < max; i+= range/5) {
yTicks.push({
value: i,
label: max > 2500 ? (i / 1000).toFixed(1) : i
@@ -102,27 +110,22 @@
if(xTicks.length > 12) break;
}
yScale = function(val) {
return Math.ceil(heightAvailable - ((val/max)* heightAvailable) ) - 25;
};
xScale = function(val) {
return 30 + Math.ceil((val/realtime.size) * (widthAvailable-35));
};
let i = realtime.size;
points = xScale(realtime.size)+","+yScale(0)+" "+xScale(1)+","+yScale(0);
points = xScale(realtime.size)+","+yScale(0, min, max)+" "+xScale(1)+","+yScale(0, min, max);
for(let p in realtime.data) {
if(i < 0) {
break;
}
let val = realtime.data[p];
if(isNaN(val)) val = 0;
points = xScale(i--)+","+yScale(val)+" "+points;
points = xScale(i--)+","+yScale(val, min, max)+" "+points;
}
} else {
visible = false;
}
/*
console.log("Min: %d\nMax: %d\nShow: %s", min, max, visible);
*/
}
</script>
@@ -135,8 +138,8 @@
<!-- y axis -->
<g class="axis y-axis">
{#each yTicks as tick}
{#if !isNaN(yScale(tick.value))}
<g class="tick tick-{tick.value}" transform="translate(0, {yScale(tick.value)})">
{#if !isNaN(yScale(tick.value, min, max))}
<g class="tick tick-{tick.value}" transform="translate(0, {yScale(tick.value, min, max)})">
<line x2="100%"></line>
<text y="-4">{tick.label}</text>
</g>