Format history chart axes by sensor unit and wording.
This commit is contained in:
@@ -72,7 +72,7 @@ const duration = 36000;
|
||||
const historyStatus = document.getElementById('history-status');
|
||||
const canvases = keys.map(key => document.getElementById(key + '-chart'));
|
||||
const units = ['ppm', '°C', '%'];
|
||||
const axisFormat = new Intl.NumberFormat('de-DE', {maximumFractionDigits:2});
|
||||
|
||||
let history = null;
|
||||
let historyFailed = false;
|
||||
let nextHistory = 0;
|
||||
@@ -80,7 +80,7 @@ let nextHistory = 0;
|
||||
function drawHistory() {
|
||||
const elapsed = history ? Math.max(0, (performance.now() - history.loadedAt) / 1000) : 0;
|
||||
if (history) {
|
||||
const last = 'Letzte Ladung: ' + history.loadedLabel;
|
||||
const last = 'Zuletzt aktualisiert: ' + history.loadedLabel;
|
||||
historyStatus.textContent = historyFailed || elapsed > 90
|
||||
? 'Verlauf derzeit nicht aktuell / nicht verfügbar · ' + last + ' · zwischengespeicherte Daten'
|
||||
: last + ' · ' + (history.samples.length ? 'Zeitfenster: −10 h bis Jetzt' : 'Noch keine Messdaten seit Gerätestart');
|
||||
@@ -110,7 +110,7 @@ function drawHistory() {
|
||||
low -= padding;
|
||||
high += padding;
|
||||
const ticks = Array.from({length:5}, (_, n) => high - (high - low) * n / 4);
|
||||
const left = Math.max(48, ...ticks.map(v => ctx.measureText(axisFormat.format(v)).width + 12));
|
||||
const left = Math.max(48, ...ticks.map(v => ctx.measureText(formats[index].format(v)).width + 12));
|
||||
const right = width - 20, top = 20, bottom = height - 34;
|
||||
const x = age => left + (1 - (age + elapsed) / duration) * (right - left);
|
||||
const y = value => bottom - (value - low) / (high - low) * (bottom - top);
|
||||
@@ -121,7 +121,7 @@ function drawHistory() {
|
||||
ctx.strokeStyle = grid;
|
||||
ctx.beginPath(); ctx.moveTo(left, y(value)); ctx.lineTo(right, y(value)); ctx.stroke();
|
||||
ctx.fillStyle = ink;
|
||||
ctx.fillText(axisFormat.format(value), left - 8, y(value));
|
||||
ctx.fillText(formats[index].format(value), left - 8, y(value));
|
||||
});
|
||||
ctx.textBaseline = 'top';
|
||||
for (let hour = 0; hour <= 10; hour += 2) {
|
||||
|
||||
Reference in New Issue
Block a user