mirror of
https://github.com/UtilitechAS/amsreader-firmware.git
synced 2026-01-13 15:37:03 +00:00
Some adjustments and debugging for realtime plot
This commit is contained in:
Gunnar Skjold
parent
bd11dee1e5
commit
86663f53f6
2
lib/SvelteUi/app/dist/index.css
vendored
2
lib/SvelteUi/app/dist/index.css
vendored
File diff suppressed because one or more lines are too long
18
lib/SvelteUi/app/dist/index.js
vendored
18
lib/SvelteUi/app/dist/index.js
vendored
File diff suppressed because one or more lines are too long
@ -25,7 +25,7 @@ async function eatQueue() {
|
||||
try {
|
||||
let response = await fetchWithTimeoutReal(item.resource, item.options);
|
||||
for(let i in item.callbacks) {
|
||||
item.callbacks[i](response);
|
||||
item.callbacks[i](response.clone());
|
||||
}
|
||||
} catch(e) {
|
||||
console.error("Error calling " + item.resource, e);
|
||||
@ -295,4 +295,8 @@ export async function getRealtime() {
|
||||
}
|
||||
}
|
||||
|
||||
export function isRealtimeFullyLoaded() {
|
||||
return realtimeOffset == -1;
|
||||
}
|
||||
|
||||
export const realtimeStore = writable(realtime);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { dataStore, realtimeStore, getRealtime } from './DataStores.js';
|
||||
import { dataStore, realtimeStore, getRealtime, isRealtimeFullyLoaded } from './DataStores.js';
|
||||
|
||||
export let title;
|
||||
|
||||
@ -8,25 +8,27 @@
|
||||
let lastUp = 0;
|
||||
let lastValue = 0;
|
||||
let lastUpdate = 0;
|
||||
let updateCount = 0;
|
||||
|
||||
let realtimeRequested = false;
|
||||
let realtime = null;
|
||||
let realtimeTimeout;
|
||||
realtimeStore.subscribe(update => {
|
||||
realtime = update;
|
||||
lastUpdate = lastUp;
|
||||
if(realtimeTimeout) clearTimeout(realtimeTimeout);
|
||||
realtimeTimeout = setTimeout(getRealtime, 600000);
|
||||
updateCount = 0;
|
||||
});
|
||||
|
||||
let visible = false;
|
||||
|
||||
function addValue() {
|
||||
if(lastUpdate > lastUp || lastUpdate - lastUp > 300) {
|
||||
if(updateCount == 60 || lastUpdate > lastUp || lastUpdate - lastUp > 300) {
|
||||
getRealtime();
|
||||
} else {
|
||||
while(lastUp > lastUpdate) {
|
||||
realtime.data.unshift(lastValue);
|
||||
realtime.data = realtime.data.slice(0,realtime.size);
|
||||
lastUpdate += 10;
|
||||
updateCount++;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -39,7 +41,7 @@
|
||||
realtimeRequested = true;
|
||||
return;
|
||||
}
|
||||
if(!realtime?.data?.length) return;
|
||||
if(!isRealtimeFullyLoaded()) return;
|
||||
addValue();
|
||||
});
|
||||
|
||||
@ -67,7 +69,12 @@
|
||||
min = 0;
|
||||
max = 0;
|
||||
|
||||
if(realtime.data) {
|
||||
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;
|
||||
for(let p in realtime.data) {
|
||||
let val = realtime.data[p];
|
||||
if(isNaN(val)) val = 0;
|
||||
@ -83,6 +90,7 @@
|
||||
value: i,
|
||||
label: max > 2500 ? (i / 1000).toFixed(1) : i
|
||||
});
|
||||
if(yTicks.length > 6) break;
|
||||
}
|
||||
|
||||
xTicks = [];
|
||||
@ -91,6 +99,7 @@
|
||||
value: i,
|
||||
label: '-'+Math.round((realtime.size - i) / 6)+' min'
|
||||
});
|
||||
if(xTicks.length > 12) break;
|
||||
}
|
||||
|
||||
yScale = function(val) {
|
||||
@ -110,46 +119,52 @@
|
||||
if(isNaN(val)) val = 0;
|
||||
points = xScale(i--)+","+yScale(val)+" "+points;
|
||||
}
|
||||
} else {
|
||||
visible = false;
|
||||
}
|
||||
console.log("Min: %d\nMax: %d\nShow: %s", min, max, visible);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
|
||||
<strong class="text-sm">{title} ({unit})</strong>
|
||||
{#if yTicks}
|
||||
<svg viewBox="0 0 {widthAvailable} {heightAvailable}" height="100%">
|
||||
{#if visible}
|
||||
<strong class="text-sm">{title} ({unit})</strong>
|
||||
{#if yTicks}
|
||||
<svg viewBox="0 0 {widthAvailable} {heightAvailable}" height="100%">
|
||||
|
||||
<!-- 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)})">
|
||||
<line x2="100%"></line>
|
||||
<text y="-4">{tick.label}</text>
|
||||
</g>
|
||||
<!-- 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)})">
|
||||
<line x2="100%"></line>
|
||||
<text y="-4">{tick.label}</text>
|
||||
</g>
|
||||
{/if}
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<!-- x axis -->
|
||||
<g class="axis x-axis">
|
||||
{#each xTicks as point, i}
|
||||
{#if !isNaN(xScale(point.value))}
|
||||
<g class="tick" transform="translate({xScale(point.value)},{heightAvailable})">
|
||||
<text x="{barWidth/2}" y="-4">{point.label}</text>
|
||||
</g>
|
||||
{/if}
|
||||
{/each}
|
||||
</g>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<!-- x axis -->
|
||||
<g class="axis x-axis">
|
||||
{#each xTicks as point, i}
|
||||
{#if !isNaN(xScale(point.value))}
|
||||
<g class="tick" transform="translate({xScale(point.value)},{heightAvailable})">
|
||||
<text x="{barWidth/2}" y="-4">{point.label}</text>
|
||||
</g>
|
||||
{/if}
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<!-- Line -->
|
||||
<polyline
|
||||
opacity="0.9"
|
||||
fill={dark ? '#5c2da5' : '#7c3aed'}
|
||||
stroke={dark ? '#5c2da5' : '#7c3aed'}
|
||||
stroke-width="1"
|
||||
points={points}/>
|
||||
</svg>
|
||||
{/if}
|
||||
<!-- Line -->
|
||||
<polyline
|
||||
opacity="0.9"
|
||||
fill={dark ? '#5c2da5' : '#7c3aed'}
|
||||
stroke={dark ? '#5c2da5' : '#7c3aed'}
|
||||
stroke-width="1"
|
||||
points={points}/>
|
||||
</svg>
|
||||
{/if}
|
||||
{:else}
|
||||
<strong class="text-sm">{title} not available</strong>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user