mirror of
https://github.com/Roslund/sthlm-mesh.git
synced 2026-08-06 17:02:56 +02:00
deploy: ff763e3cf2
This commit is contained in:
Roslund
@@ -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 = '<li class="dropdown-item text-muted disabled">No matching nodes</li>';
|
||||
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());
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://sthlm-mesh.se/docs/settings/</loc><lastmod>2025-02-26T18:39:36+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/device_role/</loc><lastmod>2025-02-26T18:42:15+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/position/</loc><lastmod>2025-02-22T09:11:26+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/mqtt/</loc><lastmod>2025-03-31T19:16:34+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/neighbor_info/</loc><lastmod>2025-02-23T20:48:06+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/kartor/</loc><lastmod>2025-03-08T20:11:28+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/solar_nodes/</loc><lastmod>2025-02-25T20:03:55+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/communities/</loc><lastmod>2025-02-23T20:48:06+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/categories/</loc></url><url><loc>https://sthlm-mesh.se/docs/</loc><lastmod>2025-03-03T22:48:04+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/messages/</loc><lastmod>2025-03-28T17:26:53+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/meetups/</loc><lastmod>2025-03-03T22:48:04+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/about/</loc><lastmod>2025-02-23T18:02:23+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/status/</loc><lastmod>2025-04-09T18:39:27+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/</loc><lastmod>2025-03-29T13:59:58+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/tags/</loc></url></urlset>
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://sthlm-mesh.se/docs/settings/</loc><lastmod>2025-02-26T18:39:36+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/device_role/</loc><lastmod>2025-02-26T18:42:15+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/position/</loc><lastmod>2025-02-22T09:11:26+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/mqtt/</loc><lastmod>2025-03-31T19:16:34+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/neighbor_info/</loc><lastmod>2025-02-23T20:48:06+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/kartor/</loc><lastmod>2025-03-08T20:11:28+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/solar_nodes/</loc><lastmod>2025-02-25T20:03:55+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/communities/</loc><lastmod>2025-02-23T20:48:06+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/categories/</loc></url><url><loc>https://sthlm-mesh.se/docs/</loc><lastmod>2025-03-03T22:48:04+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/messages/</loc><lastmod>2025-03-28T17:26:53+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/meetups/</loc><lastmod>2025-03-03T22:48:04+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/about/</loc><lastmod>2025-02-23T18:02:23+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/status/</loc><lastmod>2025-04-09T20:05:18+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/</loc><lastmod>2025-03-29T13:59:58+01:00</lastmod></url><url><loc>https://sthlm-mesh.se/tags/</loc></url></urlset>
|
||||
+4
-3
@@ -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."><meta property="og:type" content="article"><meta property="og:url" content="https://sthlm-mesh.se/status/"><meta property="article:section" content><meta property="article:modified_time" content="2025-04-09T18:39:27+02:00"><meta itemprop=name content="Mesh Status"><meta itemprop=description content="Antal Enheter – Hörts idag
|
||||
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."><meta property="og:type" content="article"><meta property="og:url" content="https://sthlm-mesh.se/status/"><meta property="article:section" content><meta property="article:modified_time" content="2025-04-09T20:05:18+02:00"><meta itemprop=name content="Mesh Status"><meta itemprop=description content="Antal Enheter – Hörts idag
|
||||
– 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."><meta itemprop=dateModified content="2025-04-09T18:39:27+02:00"><meta itemprop=wordCount content="295"><meta itemprop=keywords content><meta name=twitter:card content="summary"><meta name=twitter:title content="Mesh Status"><meta name=twitter:description content="Antal Enheter – Hörts idag
|
||||
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."><meta itemprop=dateModified content="2025-04-09T20:05:18+02:00"><meta itemprop=wordCount content="313"><meta itemprop=keywords content><meta name=twitter:card content="summary"><meta name=twitter:title content="Mesh Status"><meta name=twitter:description content="Antal Enheter – Hörts idag
|
||||
– 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.
|
||||
@@ -20,7 +20,8 @@ Skapade paket per nod Grafen nedan visar vilka noder som har skickat flest paket
|
||||
Graferna bygger på MQTT-data från ett begränsat antal noder.
|
||||
Eftersom vi har begränsad bandbredd är det viktigt att hålla nere trafiken. En sändningsvolym på max 100 paket per dygn är önskvärd.</p><div id=mostActiveNodesContainer style=min-height:300px;width:100%;max-width:1000px><canvas id=mostActiveNodes></canvas></div><h2 id=enhetsroll>Enhetsroll<a class=td-heading-self-link href=#enhetsroll aria-label="Heading self-link"></a></h2><p>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 <code>Client</code> eller <code>Client Mute</code>. Enbart ett fåtal <code>Router</code> eller <code>Repeater</code> behövs. Dessa måste vara placerade extremt strategiskt, till exempel högst upp i en skidbacke. <code>Router Client</code> ä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 <a href=https://sthlm-mesh.se/docs/device_role/>dokumentation</a>.</p><div id=deviceRolesContainer style=min-height:200px;width:100%;max-width:1000px><canvas id=deviceRoles></canvas></div><h2 id=position-precision>Position Precision<a class=td-heading-self-link href=#position-precision aria-label="Heading self-link"></a></h2><p>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 <a href=https://sthlm-mesh.se/docs/position/#position-precision>dokumentation</a>.</p><div id=positionPrecisionContainer style=min-height:200px;width:100%;max-width:1000px><canvas id=positionPrecisionChart></canvas></div><h2 id=packet-typer>Packet typer<a class=td-heading-self-link href=#packet-typer aria-label="Heading self-link"></a></h2><p>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.</p><div id=portnumDistributionContainer style=width:100%;max-width:1000px><canvas id=portnumDistribution></canvas></div><h2 id=hårdvarumodeller>Hårdvarumodeller<a class=td-heading-self-link href=#h%c3%a5rdvarumodeller aria-label="Heading self-link"></a></h2><p>Antalet enheter av respektive hårdvarutyp som synts i meshet de senaste 30 dagarna.</p><div id=hardwareChartContainer style=width:100%;max-width:1000px><canvas id=hardwareChart></canvas></div></div></div></section><div><a id=td-block-1 class=td-offset-anchor></a></div><section class="row td-box td-box--info td-box--height-auto"><div class=col><div class=container><h2 id=om>OM<a class=td-heading-self-link href=#om aria-label="Heading self-link"></a></h2><p>Graferna baseras på data från <a href=https://map.sthlm-mesh.se>map.sthlm-mesh.se</a>, 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 <a href=https://www.chartjs.org/>chartjs.org</a>.</p></div></div></section><script src=https://cdn.jsdelivr.net/npm/chart.js></script>
|
||||
För mer info se vår <a href=https://sthlm-mesh.se/docs/position/#position-precision>dokumentation</a>.</p><div id=positionPrecisionContainer style=min-height:200px;width:100%;max-width:1000px><canvas id=positionPrecisionChart></canvas></div><h2 id=packet-typer>Packet typer<a class=td-heading-self-link href=#packet-typer aria-label="Heading self-link"></a></h2><p>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.</p><div class="d-flex justify-content-end m-0 p-0" style=max-width:1000px><div class=dropdown style=width:33%><div class="input-group pe-3"><input id=nodeSearch type=text class=form-control placeholder="Node Name" autocomplete=off>
|
||||
<button id=clearFilterBtn class="btn btn-outline-info" type=button>✕</button></div><ul id=suggestions class="dropdown-menu w-100" style=display:none;max-height:300px;overflow-y:auto;position:absolute;z-index:1000></ul></div></div><div id=portnumDistributionContainer style=width:100%;max-width:1000px><canvas id=portnumDistribution></canvas></div><h2 id=hårdvarumodeller>Hårdvarumodeller<a class=td-heading-self-link href=#h%c3%a5rdvarumodeller aria-label="Heading self-link"></a></h2><p>Antalet enheter av respektive hårdvarutyp som synts i meshet de senaste 30 dagarna.</p><div id=hardwareChartContainer style=width:100%;max-width:1000px><canvas id=hardwareChart></canvas></div></div></div></section><div><a id=td-block-1 class=td-offset-anchor></a></div><section class="row td-box td-box--info td-box--height-auto"><div class=col><div class=container><h2 id=om>OM<a class=td-heading-self-link href=#om aria-label="Heading self-link"></a></h2><p>Graferna baseras på data från <a href=https://map.sthlm-mesh.se>map.sthlm-mesh.se</a>, 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 <a href=https://www.chartjs.org/>chartjs.org</a>.</p></div></div></section><script src=https://cdn.jsdelivr.net/npm/chart.js></script>
|
||||
<script src=/js/status/messagesChart.js></script>
|
||||
<script src=/js/status/most-active-nodes.js></script>
|
||||
<script src=/js/status/hardwareChart.js></script>
|
||||
|
||||
Reference in New Issue
Block a user