From fb38e0770e14978000cacbf3cd708be38643f83e Mon Sep 17 00:00:00 2001
From: Commander1024 <commander@commander1024.de>
Date: Mon, 9 Nov 2026 11:48:20 +0100
Subject: [PATCH] Format history chart axes by sensor unit and wording.

---
 esphome/components/air_quality_web/page.h | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/esphome/components/air_quality_web/page.h b/esphome/components/air_quality_web/page.h
index 1be8433..f76950d 100644
--- a/esphome/components/air_quality_web/page.h
+++ b/esphome/components/air_quality_web/page.h
@@ -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) {