From b1f1e7c6da07a7a213775f2d4f4b19df5dcbe6aa Mon Sep 17 00:00:00 2001
From: Pablo Revilla <pablorevilla@gmail.com>
Date: Thu, 22 May 2025 15:56:33 -0700
Subject: [PATCH] Added self updating firehose.html and chat.html

---
 meshview/templates/node_graphs.html | 201 ----------------------------
 1 file changed, 201 deletions(-)
 delete mode 100644 meshview/templates/node_graphs.html

diff --git a/meshview/templates/node_graphs.html b/meshview/templates/node_graphs.html
deleted file mode 100644
index 669cc32..0000000
--- a/meshview/templates/node_graphs.html
+++ /dev/null
@@ -1,201 +0,0 @@
-<!-- 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>