From 10dbde48d0ab7d6dddfec51b9ac3cb01d8727f49 Mon Sep 17 00:00:00 2001 From: Roslund Date: Wed, 9 Apr 2025 18:06:02 +0000 Subject: [PATCH] deploy: ff763e3cf25b243f592604bc6853aadb759b91da --- js/status/portnum-distribution-chart.js | 141 ++++++++++++++++++++++-- sitemap.xml | 2 +- status/index.html | 7 +- 3 files changed, 135 insertions(+), 15 deletions(-) diff --git a/js/status/portnum-distribution-chart.js b/js/status/portnum-distribution-chart.js index 27a3499..0114d91 100644 --- a/js/status/portnum-distribution-chart.js +++ b/js/status/portnum-distribution-chart.js @@ -1,31 +1,150 @@ -async function portnumDistributionChart() { +let allNodes = []; +let highlightedIndex = -1; +let chartInstance; + + +async function fetchNodes() { + const res = await fetch('https://map.sthlm-mesh.se/api/v1/nodes/'); + const data = await res.json(); + + const threshold = new Date(); + threshold.setDate(threshold.getDate() - 1); + allNodes = data.nodes.filter(node => new Date(node.updated_at) >= threshold); +} + +function filterSuggestions(query) { + const lowerQuery = query.toLowerCase(); + return allNodes?.filter(node => node.long_name?.toLowerCase().includes(lowerQuery)) || []; +} + +function showSuggestions(matches) { + const ul = document.getElementById('suggestions'); + ul.innerHTML = ''; + + if (matches.length === 0) { + ul.innerHTML = '
  • No matching nodes
    • '; + ul.style.display = 'block'; + return; + } + + matches.forEach(node => { + const li = document.createElement('li'); + const a = document.createElement('a'); + a.className = 'dropdown-item'; + a.href = '#'; + a.textContent = node.long_name; + a.addEventListener('click', (e) => { + e.preventDefault(); + document.getElementById('nodeSearch').value = node.long_name; + ul.style.display = 'none'; + portnumDistributionChart(node.node_id); + }); + li.appendChild(a); + ul.appendChild(li); + }); + + ul.style.display = 'block'; +} + +function updateHighlight(suggestions) { + suggestions.forEach((el, i) => { + if (i === highlightedIndex) { + el.classList.add('active'); + } else { + el.classList.remove('active'); + } + }); +} + +document.getElementById('nodeSearch').addEventListener('keydown', (e) => { + const suggestions = document.querySelectorAll('#suggestions .dropdown-item'); + + if (suggestions.length === 0) return; + + switch (e.key) { + case 'ArrowDown': + e.preventDefault(); + highlightedIndex = (highlightedIndex + 1) % suggestions.length; + updateHighlight(suggestions); + break; + + case 'ArrowUp': + e.preventDefault(); + highlightedIndex = (highlightedIndex - 1 + suggestions.length) % suggestions.length; + updateHighlight(suggestions); + break; + + case 'Enter': + e.preventDefault(); + if (highlightedIndex >= 0) { + suggestions[highlightedIndex].click(); + } + break; + + case 'Escape': + document.getElementById('nodeSearch').value = ''; + document.getElementById('suggestions').style.display = 'none'; + portnumDistributionChart(); // Reload full chart + highlightedIndex = -1; + break; + } +}); + +document.getElementById('nodeSearch').addEventListener('input', (e) => { + highlightedIndex = -1; + const matches = filterSuggestions(e.target.value); + showSuggestions(matches); +}); + +document.getElementById('clearFilterBtn').addEventListener('click', () => { + highlightedIndex = -1; + document.getElementById('nodeSearch').value = ''; + document.getElementById('suggestions').style.display = 'none'; + portnumDistributionChart(); // Reload full chart +}); + +// Main chart function +async function portnumDistributionChart(nodeId = null) { const canvas = document.getElementById('portnumDistribution'); const ctx = canvas.getContext('2d'); - // Loading message + ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.font = '16px Arial'; ctx.fillStyle = 'gray'; ctx.textAlign = 'center'; ctx.fillText('Loading data...', canvas.width / 2, canvas.height / 2); try { - const response = await fetch('https://map.sthlm-mesh.se/api/v1/stats/portnum-counts'); + const url = nodeId + ? `https://map.sthlm-mesh.se/api/v1/stats/portnum-counts?nodeId=${nodeId}` + : 'https://map.sthlm-mesh.se/api/v1/stats/portnum-counts'; + + const response = await fetch(url); const data = await response.json(); const labels = data.map(entry => entry.label.replace(/_APP$/, '')); const counts = data.map(entry => entry.count); - // Optional: dynamically size the container + const backgroundColors = counts.map(count => { + if (nodeId) { + // Filtered chart: use tighter thresholds + if (count < 50) return '#7EB26D'; // Green + if (count < 100) return '#EAB839'; // Yellow + return '#BF1B00'; // Red + } else { + // Global chart: use broader thresholds + if (count < 500) return '#7EB26D'; // Green + if (count < 2000) return '#EAB839'; // Yellow + return '#BF1B00'; // Red + } + }); + const chartContainer = document.getElementById('portnumDistributionContainer'); chartContainer.style.height = `${labels.length * 35}px`; - const backgroundColors = counts.map(count => { - if (count < 500) return '#7EB26D'; // Green - if (count < 2000) return '#EAB839'; // Yellow - return '#BF1B00'; // Red - }); + if (chartInstance) chartInstance.destroy(); - new Chart(ctx, { + chartInstance = new Chart(ctx, { type: 'bar', data: { labels: labels, @@ -59,4 +178,4 @@ async function portnumDistributionChart() { } } -portnumDistributionChart(); +fetchNodes().then(() => portnumDistributionChart()); diff --git a/sitemap.xml b/sitemap.xml index 9fb773e..2e2ada6 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1 +1 @@ -https://sthlm-mesh.se/docs/settings/2025-02-26T18:39:36+01:00https://sthlm-mesh.se/docs/device_role/2025-02-26T18:42:15+01:00https://sthlm-mesh.se/docs/position/2025-02-22T09:11:26+01:00https://sthlm-mesh.se/docs/mqtt/2025-03-31T19:16:34+02:00https://sthlm-mesh.se/docs/neighbor_info/2025-02-23T20:48:06+01:00https://sthlm-mesh.se/docs/kartor/2025-03-08T20:11:28+01:00https://sthlm-mesh.se/docs/solar_nodes/2025-02-25T20:03:55+01:00https://sthlm-mesh.se/docs/communities/2025-02-23T20:48:06+01:00https://sthlm-mesh.se/categories/https://sthlm-mesh.se/docs/2025-03-03T22:48:04+01:00https://sthlm-mesh.se/messages/2025-03-28T17:26:53+01:00https://sthlm-mesh.se/meetups/2025-03-03T22:48:04+01:00https://sthlm-mesh.se/about/2025-02-23T18:02:23+01:00https://sthlm-mesh.se/status/2025-04-09T18:39:27+02:00https://sthlm-mesh.se/2025-03-29T13:59:58+01:00https://sthlm-mesh.se/tags/ \ No newline at end of file +https://sthlm-mesh.se/docs/settings/2025-02-26T18:39:36+01:00https://sthlm-mesh.se/docs/device_role/2025-02-26T18:42:15+01:00https://sthlm-mesh.se/docs/position/2025-02-22T09:11:26+01:00https://sthlm-mesh.se/docs/mqtt/2025-03-31T19:16:34+02:00https://sthlm-mesh.se/docs/neighbor_info/2025-02-23T20:48:06+01:00https://sthlm-mesh.se/docs/kartor/2025-03-08T20:11:28+01:00https://sthlm-mesh.se/docs/solar_nodes/2025-02-25T20:03:55+01:00https://sthlm-mesh.se/docs/communities/2025-02-23T20:48:06+01:00https://sthlm-mesh.se/categories/https://sthlm-mesh.se/docs/2025-03-03T22:48:04+01:00https://sthlm-mesh.se/messages/2025-03-28T17:26:53+01:00https://sthlm-mesh.se/meetups/2025-03-03T22:48:04+01:00https://sthlm-mesh.se/about/2025-02-23T18:02:23+01:00https://sthlm-mesh.se/status/2025-04-09T20:05:18+02:00https://sthlm-mesh.se/2025-03-29T13:59:58+01:00https://sthlm-mesh.se/tags/ \ No newline at end of file diff --git a/status/index.html b/status/index.html index 77f176c..02eca17 100644 --- a/status/index.html +++ b/status/index.html @@ -6,11 +6,11 @@ Skapade paket per nod Grafen nedan visar vilka noder som har skickat flest paket – Senaste 7 dagarna – Senaste 30 dagarna Text Meddelanden Antalet meddelanden per timme senaste 7 dygnen. Grafen visar meddelanden som skickats på LongFast kanalen, men även okrypterade meddelanden mellan noder. De meddelanden som skickas går att se här. -Skapade paket per nod Grafen nedan visar vilka noder som har skickat flest paket under det senaste dygnet. Graferna bygger på MQTT-data från ett begränsat antal noder.">

    Antalet enheter av respektive Enhetsroll som synts i meshet de senaste 30 dagarna. I större mesh så som Stockholm bör i princip all noder vara Client eller Client Mute. Enbart ett fåtal Router eller Repeater behövs. Dessa måste vara placerade extremt strategiskt, till exempel högst upp i en skidbacke. Router Client är en avvecklad roll som inte finns längre, men i meshen lever det kvar några noder som inte blivit uppdaterade. För med info see vår dokumentation.

    Position Precision

    Grafen visar position precision, eller noggrannhet, på de noder som rapporterat sin position de senaste 7 dagarna. Vi ser gärna att man använder en noggrannhet på ±182m eller noggrannare. Detta är dock inte möjligt att ställa in i iPhone Appen. -För mer info se vår dokumentation.

    Packet typer

    Fördelningen av olika pakettyper i nätverket under de senaste dygnet. Diagrammet visar hur nätverket används, inklusive meddelanden, positionstelemetri och andra systempaket.

    Hårdvarumodeller

    Antalet enheter av respektive hårdvarutyp som synts i meshet de senaste 30 dagarna.

    OM

    Graferna baseras på data från map.sthlm-mesh.se, där data samlas in från ett par noder i Stockholmsområdet. Data hämtas från API’t, som vi dessutom har utökat med fler funktioner för att möjliggöra mer analys. Visualisering sker genom biblioteket chartjs.org.

    +För mer info se vår dokumentation.

    Packet typer

    Fördelningen av olika pakettyper i nätverket under de senaste dygnet. Diagrammet visar hur nätverket används, inklusive meddelanden, positionstelemetri och andra systempaket. Sökrutan till höger kan användas för att visa antalet paket av respektive typ för en given nod.

    +

    Hårdvarumodeller

    Antalet enheter av respektive hårdvarutyp som synts i meshet de senaste 30 dagarna.

    OM

    Graferna baseras på data från map.sthlm-mesh.se, där data samlas in från ett par noder i Stockholmsområdet. Data hämtas från API’t, som vi dessutom har utökat med fler funktioner för att möjliggöra mer analys. Visualisering sker genom biblioteket chartjs.org.