stromlinien_passau_magnetfeld/data_visualization_web_ui/js/charts.js

/*
 * charts.js — chart_logic for data_visualization_web_ui
 * Verantwortlich für das Zeichnen und Aktualisieren der Magnetometer-Zeitreihen
 * und Analyse-Zusammenfassung.
 */

/**
 * Erstellt und rendert Zeitreihen-Diagramme (Bx, By, Bz) basierend auf Messdaten.
 * @param {Array<{timestamp: string, sensor: string, Bx: number, By: number, Bz: number}>} data - Messwerte
 * @param {HTMLCanvasElement} canvas - Canvas-Element zur Darstellung
 * @returns {Chart|null} ChartJS-Instanz oder null, wenn keine Daten vorhanden
 */
export function renderDataCharts(data, canvas) {
  if (!Array.isArray(data) || data.length === 0 || !canvas) return null;

  const ctx = canvas.getContext('2d');
  const timestamps = data.map(d => new Date(d.timestamp).toLocaleTimeString());
  const bx = data.map(d => d.Bx);
  const by = data.map(d => d.By);
  const bz = data.map(d => d.Bz);

  // Falls vorheriger Chart vorhanden: zerstören
  if (canvas._chartInstance) {
    canvas._chartInstance.destroy();
  }

  const chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: timestamps,
      datasets: [
        {
          label: 'Bx',
          data: bx,
          borderColor: '#1e88e5',
          fill: false,
          tension: 0.1
        },
        {
          label: 'By',
          data: by,
          borderColor: '#43a047',
          fill: false,
          tension: 0.1
        },
        {
          label: 'Bz',
          data: bz,
          borderColor: '#f4511e',
          fill: false,
          tension: 0.1
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        mode: 'index',
        intersect: false
      },
      scales: {
        x: {
          title: {
            display: true,
            text: 'Zeit'
          }
        },
        y: {
          title: {
            display: true,
            text: 'Feldstärke (nT)'
          }
        }
      },
      plugins: {
        legend: {
          position: 'top'
        },
        tooltip: {
          mode: 'nearest'
        }
      }
    }
  });

  canvas._chartInstance = chart;
  return chart;
}

/**
 * Zeigt Analyseergebnisse im DOM an (z. B. Durchschnittswerte, Peaks, Noise, Drift).
 * @param {{mean?: number, peaks?: number[], noise?: number, drift?: number}} analysis - Analyseobjekt
 * @returns {void}
 */
export function renderAnalysisSummary(analysis) {
  const panel = document.querySelector('#analysis-panel');
  if (!panel) return;

  panel.innerHTML = '';

  const summaryList = document.createElement('ul');
  summaryList.className = 'analysis__list';

  const addItem = (label, value) => {
    const li = document.createElement('li');
    li.className = 'analysis__item';
    li.textContent = `${label}: ${value ?? 'n/a'}`;
    summaryList.appendChild(li);
  };

  addItem('Durchschnitt', analysis.mean !== undefined ? analysis.mean.toFixed(2) : 'n/a');

  if (Array.isArray(analysis.peaks)) {
    addItem('Peaks', analysis.peaks.join(', '));
  }

  addItem('Noise', analysis.noise !== undefined ? analysis.noise.toFixed(2) : 'n/a');
  addItem('Drift', analysis.drift !== undefined ? analysis.drift.toFixed(4) : 'n/a');

  panel.appendChild(summaryList);

  // Kleinvisualisierung: Balkendiagramm für Peaks, falls vorhanden
  if (Array.isArray(analysis.peaks) && analysis.peaks.length > 0) {
    const canvas = document.createElement('canvas');
    canvas.className = 'analysis__peaks-chart';
    panel.appendChild(canvas);

    const ctx = canvas.getContext('2d');
    if (canvas._chartInstance) {
      canvas._chartInstance.destroy();
    }

    canvas._chartInstance = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: analysis.peaks.map((_, i) => `Peak ${i + 1}`),
        datasets: [
          {
            label: 'Peakw e rte',
            data: analysis.peaks,
            backgroundColor: '#1e88e5'
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false }
        },
        scales: {
          x: { title: { display: true, text: 'Index' } },
          y: { title: { display: true, text: 'Wert' } }
        }
      }
    });
  }
}

// © 2026 Donau2Space.de