feat: Uhrzeit in Chart-Tooltips hinzugefügt

- Tooltip-Format geändert auf `dd.MM.yyyy HH:mm`, um Datum und Uhrzeit anzuzeigen
- X-Achse zeigt weiterhin nur das Datum (`dd.MM.yyyy`), aber Tooltips enthalten auch die Uhrzeit
- Tooltip `callbacks.label` angepasst, um Uhrzeit (`HH:mm`) bei Mouse-Hover zusätzlich anzuzeigen
- Sicherstellung, dass alle Linien (i, a, m, g) die korrekte Uhrzeit im Tooltip anzeigen
This commit is contained in:
ISA
2025-02-21 11:56:39 +01:00
parent c304e9c012
commit 94b40c9b67
5 changed files with 20 additions and 11 deletions

View File

@@ -113,8 +113,8 @@ const LoopMeasurementChart = () => {
type: "time",
time: {
unit: "day",
tooltipFormat: "dd.MM.yyyy",
displayFormats: { day: "dd.MM.yyyy" },
tooltipFormat: "dd.MM.yyyy HH:mm", // Ändert das Format für Tooltips (inkl. Uhrzeit)
displayFormats: { day: "dd.MM.yyyy" }, // Achse bleibt nur Datum
},
title: { display: true, text: "Zeit (Datum)" },
min: new Date(vonDatum).getTime(),
@@ -129,10 +129,19 @@ const LoopMeasurementChart = () => {
plugins: {
tooltip: {
callbacks: {
label: (tooltipItem) =>
`${tooltipItem.dataset.label}: ${tooltipItem.raw.y.toFixed(
2
)} kOhm`,
label: (tooltipItem) => {
const date = new Date(tooltipItem.raw.x);
const timeString = `${date
.getHours()
.toString()
.padStart(2, "0")}:${date
.getMinutes()
.toString()
.padStart(2, "0")}`;
return `${
tooltipItem.dataset.label
}: ${tooltipItem.raw.y.toFixed(2)} kOhm `;
},
},
},
zoom: {