diff --git a/meshview/templates/api-stats.html b/meshview/templates/api-stats.html new file mode 100644 index 0000000..bc884b0 --- /dev/null +++ b/meshview/templates/api-stats.html @@ -0,0 +1,210 @@ + + + + + API Documentation - Packet Stats + + + + +
+ + + + + diff --git a/meshview/templates/stats.html b/meshview/templates/stats.html index 55aa050..9c283b4 100644 --- a/meshview/templates/stats.html +++ b/meshview/templates/stats.html @@ -50,30 +50,49 @@ {% block body %}
-

Mesh Statistics

+

Mesh Statistics - Hourly Packet Counts (Last 24 Hours)

- +
-

Packets per Hour (Last 24 Hours)

-
+

Packets per Hour - All Ports

+
- +
-

Packets per Hour for Text Messages (Last 24 Hours)

+

Packets per Hour - Text Messages (Port 1)

-
-

Packets per Day (Last 14 Days)

-
+

Packets per Hour - Position (Port 3)

+
-
-

Packets per Day for Text Messages (Last 14 Days)

-
+

Packets per Hour - Node Info (Port 4)

+
+
+ +
+

Packets per Hour - Telemetry (Port 67)

+
+
+ +
+

Packets per Hour - Traceroute (Port 70)

+
+
+ +
+

Packets per Hour - Neighbor Info (Port 71)

+
+
+ + +
+

Packets per Day - All Ports (Last 14 Days)

+
@@ -86,7 +105,7 @@ } const res = await fetch(url); if (!res.ok) { - console.error(`Failed to fetch ${period_type} stats:`, res.status, res.statusText); + console.error(`Failed to fetch ${period_type} stats portnum ${portnum}:`, res.status, res.statusText); return []; } const json = await res.json(); @@ -97,20 +116,31 @@ } } - let chartHourly = null; + // Chart references + let chartHourlyAll = null; let chartPortnum1 = null; - let chartDaily = null; - let chartDailyPortnum1 = null; + let chartPortnum3 = null; + let chartPortnum4 = null; + let chartPortnum67 = null; + let chartPortnum70 = null; + let chartPortnum71 = null; + let chartDailyAll = null; function renderChart(domId, data, type, color, isHourly) { const el = document.getElementById(domId); if (!el) return; const chart = echarts.init(el); - if (domId === 'chart_hourly') chartHourly = chart; - else if (domId === 'chart_portnum_1') chartPortnum1 = chart; - else if (domId === 'chart_daily') chartDaily = chart; - else if (domId === 'chart_daily_portnum_1') chartDailyPortnum1 = chart; + switch(domId) { + case 'chart_hourly_all': chartHourlyAll = chart; break; + case 'chart_portnum_1': chartPortnum1 = chart; break; + case 'chart_portnum_3': chartPortnum3 = chart; break; + case 'chart_portnum_4': chartPortnum4 = chart; break; + case 'chart_portnum_67': chartPortnum67 = chart; break; + case 'chart_portnum_70': chartPortnum70 = chart; break; + case 'chart_portnum_71': chartPortnum71 = chart; break; + case 'chart_daily_all': chartDailyAll = chart; break; + } const periods = data.map(d => { const p = (d && (d.period || d.period === 0)) ? d.period.toString() : ''; @@ -151,24 +181,42 @@ } async function init() { - const hourlyData = await fetchStats('hour', 24); - renderChart('chart_hourly', hourlyData, 'bar', '#03dac6', true); + // Overall hourly packets + const hourlyAllData = await fetchStats('hour', 24); + renderChart('chart_hourly_all', hourlyAllData, 'bar', '#03dac6', true); - const portnum1Data = await fetchStats('hour', 24, 1); - renderChart('chart_portnum_1', portnum1Data, 'bar', '#ff5722', true); + // Hourly packets by portnum in parallel + const portnums = [1, 3, 4, 67, 70, 71]; + const colors = ['#ff5722', '#2196f3', '#9c27b0', '#ffeb3b', '#795548', '#4caf50']; + const domIds = [ + 'chart_portnum_1', + 'chart_portnum_3', + 'chart_portnum_4', + 'chart_portnum_67', + 'chart_portnum_70', + 'chart_portnum_71' + ]; - const dailyData = await fetchStats('day', 14); - renderChart('chart_daily', dailyData, 'line', '#ffeb3b', false); + const allData = await Promise.all(portnums.map(pn => fetchStats('hour', 24, pn))); - const dailyPortnum1Data = await fetchStats('day', 14, 1); - renderChart('chart_daily_portnum_1', dailyPortnum1Data, 'bar', '#ff7043', false); + for (let i = 0; i < portnums.length; i++) { + renderChart(domIds[i], allData[i], 'bar', colors[i], true); + } + + // Daily packets (all ports, last 14 days) + const dailyAllData = await fetchStats('day', 14); + renderChart('chart_daily_all', dailyAllData, 'line', '#66bb6a', false); } window.addEventListener('resize', () => { - if (chartHourly) chartHourly.resize(); + if (chartHourlyAll) chartHourlyAll.resize(); if (chartPortnum1) chartPortnum1.resize(); - if (chartDaily) chartDaily.resize(); - if (chartDailyPortnum1) chartDailyPortnum1.resize(); + if (chartPortnum3) chartPortnum3.resize(); + if (chartPortnum4) chartPortnum4.resize(); + if (chartPortnum67) chartPortnum67.resize(); + if (chartPortnum70) chartPortnum70.resize(); + if (chartPortnum71) chartPortnum71.resize(); + if (chartDailyAll) chartDailyAll.resize(); }); init();