Add data_visualization/js/charts.js

data_visualization/js/charts.js

@@ -0,0 +1,171 @@
+/* eslint-disable no-undef */
+/**
+ * charts.js
+ * Logik zur Erstellung und Aktualisierung von Chart.js-Diagrammen
+ * für Temperatur, Feuchtigkeit und Lichtintensität.
+ */
+
+/**
+ * @typedef {Object} SensorData
+ * @property {string} timestamp - ISO Zeitstempel der Messung.
+ * @property {number} temperature - Temperatur in °C.
+ * @property {number} humidity - Relative Luftfeuchte in %.
+ * @property {number} light - Lichtintensität in Lux.
+ */
+
+/**
+ * Hilfsfunktion, um Datum auf eine lesbare Kurzform zu formatieren.
+ * @param {string} timestamp
+ * @returns {string}
+ */
+const formatTimestamp = (timestamp) => {
+  const date = new Date(timestamp);
+  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+};
+
+/**
+ * Erstellt ein Linien-Diagramm für Temperaturdaten mit Zeitverlauf.
+ * @param {SensorData[]} data
+ * @param {HTMLCanvasElement} canvas
+ * @returns {Chart}
+ */
+export function renderTemperatureChart(data, canvas) {
+  const ctx = canvas.getContext('2d');
+  const timestamps = data.map(d => formatTimestamp(d.timestamp));
+  const temps = data.map(d => d.temperature);
+
+  if (canvas.chartInstance) {
+    canvas.chartInstance.destroy();
+  }
+
+  canvas.chartInstance = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: timestamps,
+      datasets: [{
+        label: 'Temperatur (°C)',
+        data: temps,
+        borderColor: 'rgba(255, 99, 132, 0.8)',
+        backgroundColor: 'rgba(255, 99, 132, 0.2)',
+        fill: true,
+        tension: 0.3,
+        pointRadius: 3
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          title: { display: true, text: 'Zeit' }
+        },
+        y: {
+          title: { display: true, text: 'Temperatur (°C)' }
+        }
+      },
+      plugins: {
+        tooltip: { mode: 'index', intersect: false }
+      }
+    }
+  });
+
+  return canvas.chartInstance;
+}
+
+/**
+ * Erstellt ein Linien-Diagramm für Feuchtigkeitsverläufe.
+ * @param {SensorData[]} data
+ * @param {HTMLCanvasElement} canvas
+ * @returns {Chart}
+ */
+export function renderHumidityChart(data, canvas) {
+  const ctx = canvas.getContext('2d');
+  const timestamps = data.map(d => formatTimestamp(d.timestamp));
+  const humidities = data.map(d => d.humidity);
+
+  if (canvas.chartInstance) {
+    canvas.chartInstance.destroy();
+  }
+
+  canvas.chartInstance = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: timestamps,
+      datasets: [{
+        label: 'Feuchtigkeit (%)',
+        data: humidities,
+        borderColor: 'rgba(54, 162, 235, 0.8)',
+        backgroundColor: 'rgba(54, 162, 235, 0.2)',
+        fill: true,
+        tension: 0.3,
+        pointRadius: 3
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          title: { display: true, text: 'Zeit' }
+        },
+        y: {
+          title: { display: true, text: 'Feuchtigkeit (%)' }
+        }
+      },
+      plugins: {
+        tooltip: { mode: 'index', intersect: false }
+      }
+    }
+  });
+
+  return canvas.chartInstance;
+}
+
+/**
+ * Visualisiert Lichtstärke über Zeit, inkl. Lux-Werte.
+ * @param {SensorData[]} data
+ * @param {HTMLCanvasElement} canvas
+ * @returns {Chart}
+ */
+export function renderLightChart(data, canvas) {
+  const ctx = canvas.getContext('2d');
+  const timestamps = data.map(d => formatTimestamp(d.timestamp));
+  const lights = data.map(d => d.light);
+
+  if (canvas.chartInstance) {
+    canvas.chartInstance.destroy();
+  }
+
+  canvas.chartInstance = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: timestamps,
+      datasets: [{
+        label: 'Lichtintensität (Lux)',
+        data: lights,
+        borderColor: 'rgba(255, 206, 86, 0.8)',
+        backgroundColor: 'rgba(255, 206, 86, 0.2)',
+        fill: true,
+        tension: 0.3,
+        pointRadius: 3
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          title: { display: true, text: 'Zeit' }
+        },
+        y: {
+          title: { display: true, text: 'Licht (Lux)' }
+        }
+      },
+      plugins: {
+        tooltip: { mode: 'index', intersect: false }
+      }
+    }
+  });
+
+  return canvas.chartInstance;
+}