From 2d7dbdff49d82cb6256783a95e25ae2b70bfedc4 Mon Sep 17 00:00:00 2001
From: Pablo Revilla <pablorevilla@gmail.com>
Date: Thu, 22 May 2025 18:24:08 -0700
Subject: [PATCH] Readded node_graphs

---
 meshview/templates/node_graphs.html | 201 ++++++++++++++++++++++++++++
 1 file changed, 201 insertions(+)
 create mode 100644 meshview/templates/node_graphs.html

diff --git a/meshview/templates/node_graphs.html b/meshview/templates/node_graphs.html
new file mode 100644
index 0000000..f6cfd8e
--- /dev/null
+++ b/meshview/templates/node_graphs.html
@@ -0,0 +1,201 @@
+<!-- Macro -->
+{% macro graph(name) %}
+<div id="{{name}}Chart" style="width: 100%; height: 100%;"></div>
+{% endmacro %}
+
+<!-- Buttons for Download CSV and Expand Modal -->
+<div class="d-flex justify-content-end mb-2">
+  <button class="btn btn-sm btn-outline-light me-2" id="downloadCsvBtn">Download CSV</button>
+  <button class="btn btn-sm btn-outline-light" data-bs-toggle="modal" data-bs-target="#fullChartModal">Expand</button>
+</div>
+
+<!-- Tabs -->
+<ul class="nav nav-tabs" role="tablist">
+  {% for name in [
+      "power", "utilization", "temperature", "humidity", "pressure",
+      "iaq", "wind_speed", "wind_direction", "power_metrics", "neighbors"
+  ] %}
+  <li class="nav-item" role="presentation">
+    <button class="nav-link {% if loop.first %}active{% endif %}" data-bs-toggle="tab" data-bs-target="#{{name}}Tab" type="button" role="tab">{{ name | capitalize }}</button>
+  </li>
+  {% endfor %}
+</ul>
+
+<!-- Tab content -->
+<div class="tab-content mt-3" style="height: 40vh;">
+  {% for name in [
+      "power", "utilization", "temperature", "humidity", "pressure",
+      "iaq", "wind_speed", "wind_direction", "power_metrics", "neighbors"
+  ] %}
+  <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="{{name}}Tab" role="tabpanel" style="height: 100%;">
+    {{ graph(name) | safe }}
+  </div>
+  {% endfor %}
+</div>
+
+<!-- Fullscreen Modal for graphs -->
+<div class="modal fade" id="fullChartModal" tabindex="-1" aria-labelledby="fullChartModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen">
+    <div class="modal-content bg-dark text-white">
+      <div class="modal-header">
+        <h5 class="modal-title" id="fullChartModalLabel">Full Graph</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body" style="height: 100vh;">
+        <div id="fullChartContainer" style="width: 100%; height: 100%;"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ECharts Library -->
+<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  let currentChart = null;
+  let currentChartName = null;
+  let currentChartData = null;
+  let fullChart = null;
+
+  async function loadChart(name, targetDiv) {
+    currentChartName = name;
+    const chartDiv = document.getElementById(targetDiv);
+    if (!chartDiv) return;
+
+    try {
+      const resp = await fetch(`/graph/${name}_json/{{ node_id }}`);
+      if (!resp.ok) throw new Error(`Failed to load data for ${name}`);
+      const data = await resp.json();
+
+      // Reverse to go left-to-right
+      data.timestamps.reverse();
+      data.series.forEach(s => s.data.reverse());
+
+      // Format timestamps as MM-DD-YY
+      const formattedDates = data.timestamps.map(t => {
+        const d = new Date(t);
+        return `${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}-${d.getFullYear().toString().slice(-2)}`;
+      });
+
+      currentChartData = {
+        ...data,
+        timestamps: formattedDates
+      };
+
+      const chart = echarts.init(chartDiv);
+      chart.setOption({
+        tooltip: { trigger: 'axis' },
+        xAxis: {
+          type: 'category',
+          data: formattedDates,
+          axisLabel: { color: '#fff', rotate: 45 },
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: { color: '#fff' },
+        },
+        series: data.series.map(s => ({
+          name: s.name,
+          type: 'line',
+          data: s.data,
+          smooth: true,
+          connectNulls: true,
+          showSymbol: false,
+        })),
+        legend: { textStyle: { color: '#fff' } }
+      });
+
+      return chart;
+    } catch (err) {
+      console.error(err);
+      currentChartData = null;
+      currentChartName = null;
+      return null;
+    }
+  }
+
+  // Load the first chart
+  const firstTabBtn = document.querySelector('.nav-tabs button.nav-link.active');
+  if (firstTabBtn) {
+    const name = firstTabBtn.textContent.toLowerCase();
+    const chartId = `${name}Chart`;
+    loadChart(name, chartId).then(chart => currentChart = chart);
+  }
+
+  // Tab change event
+  document.querySelectorAll('.nav-tabs button.nav-link').forEach(button => {
+    button.addEventListener('shown.bs.tab', event => {
+      const name = event.target.textContent.toLowerCase();
+      const chartId = `${name}Chart`;
+      loadChart(name, chartId).then(chart => currentChart = chart);
+    });
+  });
+
+  // Download CSV button
+  document.getElementById('downloadCsvBtn').addEventListener('click', () => {
+    if (!currentChartData || !currentChartName) {
+      alert("Chart data not loaded yet.");
+      return;
+    }
+
+    const { timestamps, series } = currentChartData;
+    let csv = 'Date,' + series.map(s => s.name).join(',') + '\n';
+
+    for (let i = 0; i < timestamps.length; i++) {
+      const row = [timestamps[i]];
+      for (const s of series) {
+        row.push(s.data[i] != null ? s.data[i] : '');
+      }
+      csv += row.join(',') + '\n';
+    }
+
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${currentChartName}_{{ node_id }}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  });
+
+  // Expand chart modal
+  document.getElementById('fullChartModal').addEventListener('shown.bs.modal', () => {
+    if (!currentChartData || !currentChartName) return;
+
+    if (!fullChart) {
+      fullChart = echarts.init(document.getElementById('fullChartContainer'));
+    }
+
+    fullChart.setOption({
+      title: { text: currentChartName.charAt(0).toUpperCase() + currentChartName.slice(1), textStyle: { color: '#fff' } },
+      tooltip: { trigger: 'axis' },
+      xAxis: {
+        type: 'category',
+        data: currentChartData.timestamps,
+        axisLabel: { color: '#fff', rotate: 45 },
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: { color: '#fff' },
+      },
+      series: currentChartData.series.map(s => ({
+        name: s.name,
+        type: 'line',
+        data: s.data,
+        smooth: true,
+        connectNulls: true,
+        showSymbol: false,
+      })),
+      legend: { textStyle: { color: '#fff' } }
+    });
+
+    fullChart.resize();
+  });
+
+  window.addEventListener('resize', () => {
+    if (fullChart) fullChart.resize();
+    if (currentChart) currentChart.resize();
+  });
+});
+</script>
\ No newline at end of file