city_breathing_measurements/data_visualization/js/charts.js

/* 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;
}