This commit is contained in:
Roslund
2025-09-21 20:50:19 +00:00
parent 39435cb508
commit 8a26835a95
3 changed files with 145 additions and 5 deletions
File diff suppressed because one or more lines are too long
+140
View File
@@ -0,0 +1,140 @@
async function transitionStatusGauge() {
try {
await fetchNodes();
createTransitionGauge();
} catch (err) {
console.error('Error creating transition status gauge:', err);
showTransitionGaugeError();
}
}
async function createTransitionGauge() {
const canvas = document.getElementById('transitionGauge');
if (!canvas) {
console.warn('Canvas transitionGauge not found');
return;
}
const ctx = canvas.getContext('2d');
// Show loading
ctx.font = '16px Arial';
ctx.fillStyle = 'gray';
ctx.textAlign = 'center';
ctx.fillText('Loading...', canvas.width/2, canvas.height/2);
// Filter nodes heard today (last 24 hours)
const now = new Date();
const twentyFourHoursAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
const nodesHeardToday = nodes.filter(node =>
node.updated_at &&
new Date(node.updated_at) >= twentyFourHoursAgo
);
if (nodesHeardToday.length === 0) {
showNoDataMessage(ctx, canvas, 'No nodes heard today');
return;
}
// Count nodes with MediumFast channel_id
const mediumFastNodes = nodesHeardToday.filter(node =>
node.channel_id === 'MediumFast'
);
const totalNodes = nodesHeardToday.length;
const mediumFastCount = mediumFastNodes.length;
const transitionPercentage = totalNodes > 0 ? (mediumFastCount / totalNodes) * 100 : 0;
// Create gauge chart using doughnut chart
const data = [mediumFastCount, totalNodes - mediumFastCount];
const maxValue = totalNodes;
new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: data,
backgroundColor: [
getTransitionColor(transitionPercentage),
'rgba(220, 220, 220, 0.3)'
],
borderWidth: 0,
cutout: '70%'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
rotation: -90, // Start from top
circumference: 180, // Half circle
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
}
},
plugins: [{
afterDraw: function(chart) {
// Add center text showing the counts and percentage
const centerX = chart.width / 2;
const centerY = chart.height / 2 + 20; // Adjust for half circle
ctx.save();
ctx.font = 'bold 24px Arial';
ctx.fillStyle = '#333';
ctx.textAlign = 'center';
ctx.fillText(`${mediumFastCount}/${totalNodes}`, centerX, centerY);
ctx.font = 'bold 18px Arial';
ctx.fillStyle = getTransitionColor(transitionPercentage);
ctx.fillText(`${transitionPercentage.toFixed(1)}%`, centerX, centerY + 25);
ctx.font = '12px Arial';
ctx.fillStyle = '#666';
ctx.fillText('Använder MediumFast', centerX, centerY + 45);
ctx.restore();
}
}]
});
}
function getTransitionColor(percentage) {
if (percentage >= 75) {
return 'rgba(1, 163, 23, 0.8)'; // Green - excellent progress
} else if (percentage >= 50) {
return 'rgba(234, 184, 57, 0.8)'; // Yellow - good progress
} else if (percentage >= 25) {
return 'rgba(255, 140, 0, 0.8)'; // Orange - some progress
} else {
return 'rgba(255, 69, 0, 0.8)'; // Red - limited progress
}
}
function showTransitionGaugeError() {
const canvas = document.getElementById('transitionGauge');
if (!canvas) return;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = '16px Arial';
ctx.fillStyle = 'red';
ctx.textAlign = 'center';
ctx.fillText('Error loading data', canvas.width/2, canvas.height/2);
}
function showNoDataMessage(ctx, canvas, message) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = '16px Arial';
ctx.fillStyle = 'gray';
ctx.textAlign = 'center';
ctx.fillText(message, canvas.width/2, canvas.height/2);
}
// Initialize the transition gauge when the page loads
transitionStatusGauge();
+1 -1
View File
@@ -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-09-21T21:23:50+02: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/blog/2025/meetup-1-oktober-sundbyberg/</loc><lastmod>2025-09-21T21:20:34+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2025/%C3%B6verg%C3%A5ng-till-mediumfast-den-27-september/</loc><lastmod>2025-09-20T10:37:42+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2025/meshtastic-p%C3%A5-sec-t/</loc><lastmod>2025-09-21T20:27:22+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2025/meetup-19-augusti-telefonplan/</loc><lastmod>2025-09-21T20:27:22+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2025/meetup-8-april-sundbyberg/</loc><lastmod>2025-09-21T20:27:22+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2024/meetup-4-september-sundbyberg/</loc><lastmod>2025-09-21T20:27:22+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2024/meetup-15-maj-urban-deli/</loc><lastmod>2025-09-21T20:27:22+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/</loc><lastmod>2025-08-24T19:47:51+02: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/blog/meetups/</loc><lastmod>2025-09-21T20:27:22+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/blog/past-meetups/</loc><lastmod>2025-09-21T20:27:22+02: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/hardware/</loc><lastmod>2025-04-21T12:00:04+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/solar_nodes/</loc><lastmod>2025-04-21T01:54:22+02: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-07-13T10:01:31+02: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-09-20T10:52:39+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/</loc><lastmod>2025-09-21T21:23:50+02: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-09-21T21:23:50+02: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/blog/2025/meetup-1-oktober-sundbyberg/</loc><lastmod>2025-09-21T21:20:34+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2025/%C3%B6verg%C3%A5ng-till-mediumfast-den-27-september/</loc><lastmod>2025-09-21T22:33:53+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2025/meshtastic-p%C3%A5-sec-t/</loc><lastmod>2025-09-21T20:27:22+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2025/meetup-19-augusti-telefonplan/</loc><lastmod>2025-09-21T20:27:22+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2025/meetup-8-april-sundbyberg/</loc><lastmod>2025-09-21T20:27:22+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2024/meetup-4-september-sundbyberg/</loc><lastmod>2025-09-21T20:27:22+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/2024/meetup-15-maj-urban-deli/</loc><lastmod>2025-09-21T20:27:22+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/blog/</loc><lastmod>2025-08-24T19:47:51+02: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/blog/meetups/</loc><lastmod>2025-09-21T20:27:22+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/blog/past-meetups/</loc><lastmod>2025-09-21T20:27:22+02: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/hardware/</loc><lastmod>2025-04-21T12:00:04+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/docs/solar_nodes/</loc><lastmod>2025-04-21T01:54:22+02: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-07-13T10:01:31+02: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-09-20T10:52:39+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/</loc><lastmod>2025-09-21T21:23:50+02:00</lastmod></url><url><loc>https://sthlm-mesh.se/tags/</loc></url></urlset>