Commander1024/homeassistant-config
1
0
Fork 0
Code Pull Requests Projects Releases Activity

Format history chart axes by sensor unit and wording.

Browse Source
This commit is contained in:
Commander1024
2026-11-09 11:48:20 +01:00
parent 7cfa2102ed
commit fb38e0770e
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
esphome/components/air_quality_web/page.h
+4 -4
View File
@@ -72,7 +72,7 @@ const duration = 36000;
const historyStatus = document.getElementById('history-status'); const historyStatus = document.getElementById('history-status');
const canvases = keys.map(key => document.getElementById(key + '-chart')); const canvases = keys.map(key => document.getElementById(key + '-chart'));
const units = ['ppm', '°C', '%']; const units = ['ppm', '°C', '%'];
const axisFormat = new Intl.NumberFormat('de-DE', {maximumFractionDigits:2});
let history = null; let history = null;
let historyFailed = false; let historyFailed = false;
let nextHistory = 0; let nextHistory = 0;
@@ -80,7 +80,7 @@ let nextHistory = 0;
function drawHistory() { function drawHistory() {
const elapsed = history ? Math.max(0, (performance.now() - history.loadedAt) / 1000) : 0; const elapsed = history ? Math.max(0, (performance.now() - history.loadedAt) / 1000) : 0;
if (history) { if (history) {
const last = 'Letzte Ladung: ' + history.loadedLabel; const last = 'Zuletzt aktualisiert: ' + history.loadedLabel;
historyStatus.textContent = historyFailed || elapsed > 90 historyStatus.textContent = historyFailed || elapsed > 90
? 'Verlauf derzeit nicht aktuell / nicht verfügbar · ' + last + ' · zwischengespeicherte Daten' ? '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'); : last + ' · ' + (history.samples.length ? 'Zeitfenster: −10 h bis Jetzt' : 'Noch keine Messdaten seit Gerätestart');
@@ -110,7 +110,7 @@ function drawHistory() {
low -= padding; low -= padding;
high += padding; high += padding;
const ticks = Array.from({length:5}, (_, n) => high - (high - low) * n / 4); 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 right = width - 20, top = 20, bottom = height - 34;
const x = age => left + (1 - (age + elapsed) / duration) * (right - left); const x = age => left + (1 - (age + elapsed) / duration) * (right - left);
const y = value => bottom - (value - low) / (high - low) * (bottom - top); const y = value => bottom - (value - low) / (high - low) * (bottom - top);
@@ -121,7 +121,7 @@ function drawHistory() {
ctx.strokeStyle = grid; ctx.strokeStyle = grid;
ctx.beginPath(); ctx.moveTo(left, y(value)); ctx.lineTo(right, y(value)); ctx.stroke(); ctx.beginPath(); ctx.moveTo(left, y(value)); ctx.lineTo(right, y(value)); ctx.stroke();
ctx.fillStyle = ink; 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'; ctx.textBaseline = 'top';
for (let hour = 0; hour <= 10; hour += 2) { for (let hour = 0; hour <= 10; hour += 2) {