adminandClaude Opus 5
6b8556567b
Zusammenlegung
- Die sechs Endpunkte getConsData_/getProdData_{month,year,decade}.php sind
ajax/energyHistory.php?series=&range= gewichen, der gemeinsame Aufbau der
Chart-Daten steht in ajax/chartData.php. Die erzeugte SQL wurde gegen alle
sechs Originale abgeglichen.
- Die 13 Raeume der Home-Ansicht stehen nur noch in restricted/rooms.php.
home.php rendert die SVG-Kacheln daraus, homeMQTT.js bekommt dieselbe
Tabelle als JSON (346 -> 222 bzw. 428 -> 197 Zeilen).
- Gemeinsame JS-Helfer in js/solar/common.js; geteilte Bausteine fuer
Wetterkacheln, Chart-Skripte und das Formular der Ladesteuerung.
- Seitenvorlagen sind jetzt .php und werden eingebunden, statt per
file_get_contents zusammengesetzt zu werden.
Fehlerbehebungen
- ?action=weather fuehrte auf eine leere Seite, es gibt jetzt weather.php.
- homeMQTT.js griff auf ein #meteogram zu, das home.php nie hatte, und brach
damit den readystatechange-Handler ab.
- Die Heizungsseite abonnierte weatherStation/#, zeigte die Werte aber nie an.
Ladelast
- Chart.js, MQTT und Meteogramm werden nur noch auf den Seiten geladen, die
sie brauchen; die Seitentabelle dafuer steht in index.php.
- mqtt.js durch die minifizierte Fassung ersetzt (859 -> 359 KB). MQTT.js
5.14.1, byte-identisch mit dem signierten npm-Tarball.
- Rund 3,1 MB ungenutzte Vendor-Reste und AdminLTE-Demobilder entfernt.
- Solar 1796 -> 1240 KB, Home 1796 -> 873 KB, Historie 1796 -> 843 KB.
Speicher im Browser
- Chart.defaults.devicePixelRatio auf 1.5 gedeckelt. Die Zeichenpuffer der
Diagramme waren mit 20-45 MB der groesste Posten der Seite.
- Das Meteogramm-iframe laedt erst beim Hinscrollen.
Realtime-SVG
- Filterbereiche auf das noetige Mass verkleinert und den wirkungslosen
feOffset-Durchgang entfernt: 60 % weniger gerasterte Filterflaeche bei
pixelgleichem Ergebnis.
- Die Fluss-Animation laeuft ueber transform statt stroke-dashoffset, mit
Punkten statt Strichmuster; sie ruht, wo kein Fluss anliegt.
- Der Wertupdate schreibt nur noch bei echter Aenderung und benutzt
textContent statt innerHTML: 9 statt 86 Elemente pro Update, davon keines
mit Filter. describeArc rundet auf volle Grad.
- waterInfo auf scale(0.90) wie die uebrigen Info-Gruppen.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
65 lines
2.3 KiB
HTML
65 lines
2.3 KiB
HTML
<!-- Chart.js samt Zubehör - nur auf Seiten mit Diagrammen. -->
|
|
<script src="js/chart.min.js"></script>
|
|
<script src="js/chartjs-plugin-annotation.min.js"></script>
|
|
<script src="js/luxon.min.js"></script>
|
|
<script src="js/hammer.js"></script>
|
|
<script src="js/chartjs-scale-timestack.min.js"></script>
|
|
<script src="js/siprefix.min.js"></script>
|
|
<script>
|
|
Chart.register('chartjs-plugin-annotation');
|
|
|
|
const arraySum = (arr) => {
|
|
return arr.reduce((total, current) => {
|
|
return total + parseFloat(current);
|
|
}, 0);
|
|
}
|
|
|
|
function tooltipLabel(context) {
|
|
let label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.dataset.yAxisID == "y1") {
|
|
label += Math.round(context.parsed.y * 10) / 10 + " " + "%";
|
|
} else {
|
|
if (context.parsed.y !== null) {
|
|
ret = scale(Math.round(context.parsed.y), false);
|
|
label += ret[0] + " " + ret[1] + "W";
|
|
}
|
|
}
|
|
return label;
|
|
};
|
|
|
|
function tooltipFooter(tooltipItems) {
|
|
let sum = 0;
|
|
tooltipItems.forEach(function (tooltipItem) {
|
|
if (tooltipItem.dataset.yAxisID != "y1") {
|
|
sum += tooltipItem.parsed.y;
|
|
}
|
|
});
|
|
ret = scale(Math.round(sum), false);
|
|
sum = ret[0] + " " + ret[1] + "W";
|
|
return 'Sum: ' + sum;
|
|
}
|
|
|
|
// Zeichenpuffer eines Canvas belegt Breite x Hoehe x DPR^2 x 4 Byte - auf
|
|
// hochaufloesenden Schirmen ist das der groesste Speicherposten der Seite.
|
|
// Deckel bei 1.5 kostet kaum Schaerfe und spart bei DPR 2 rund 44 %,
|
|
// bei DPR 3 rund 75 %.
|
|
Chart.defaults.devicePixelRatio = Math.min(1.5, window.devicePixelRatio || 1);
|
|
|
|
Chart.defaults.font.size = 10;
|
|
Chart.defaults.animations = false;
|
|
Chart.defaults.animation = false;
|
|
Chart.defaults.plugins.legend.position = "bottom";
|
|
Chart.defaults.plugins.legend.labels.pointStyleWidth = 10;
|
|
Chart.defaults.plugins.legend.labels.usePointStyle = true;
|
|
Chart.defaults.plugins.legend.labels.pointStyle = "line";
|
|
Chart.defaults.plugins.tooltip.position = "nearest";
|
|
Chart.defaults.plugins.tooltip.pointStyle = "circle";
|
|
Chart.defaults.plugins.tooltip.usePointStyle = true;
|
|
Chart.defaults.plugins.tooltip.boxWidth = 4;
|
|
Chart.defaults.plugins.tooltip.callbacks.footer = tooltipFooter;
|
|
Chart.defaults.plugins.tooltip.callbacks.label = tooltipLabel;
|
|
</script>
|