torjus/oubliette
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: handle SVG group elements in world map for multi-path countries

Browse Source 
The SVG world map uses <g> group elements for countries with complex
shapes (US, CN, RU, GB, etc.), but the JS only queried <path> elements,
causing 36 countries to be missing from the map. Also removes the SVG
<title> element that was overriding the custom tooltip.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Torjus Håkestad
2026-02-17 15:20:23 +01:00
parent faf6e2abd7
commit 2bc83a17dd
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
internal/web/static/dashboard.js
View File

@@ -158,9 +158,14 @@
var svg = container.querySelector('svg'); var svg = container.querySelector('svg');
if (!svg) return; if (!svg) return;
var paths = svg.querySelectorAll('path[id]'); // Remove SVG title to prevent browser native tooltip
paths.forEach(function(path) { var svgTitle = svg.querySelector('title');
var id = path.id.toLowerCase(); if (svgTitle) svgTitle.remove();
// Select both <path id="xx"> and <g id="xx"> country elements
var elements = svg.querySelectorAll('path[id], g[id]');
elements.forEach(function(el) {
var id = el.id.toLowerCase();
if (id.charAt(0) === '_') return; // skip non-country paths if (id.charAt(0) === '_') return; // skip non-country paths
var count = lookup[id]; var count = lookup[id];
@@ -169,26 +174,34 @@
var r = Math.round(30 + intensity * 69); // 30 -> 99 var r = Math.round(30 + intensity * 69); // 30 -> 99
var g = Math.round(30 + intensity * 72); // 30 -> 102 var g = Math.round(30 + intensity * 72); // 30 -> 102
var b = Math.round(62 + intensity * 179); // 62 -> 241 var b = Math.round(62 + intensity * 179); // 62 -> 241
path.style.fill = 'rgb(' + r + ',' + g + ',' + b + ')'; var color = 'rgb(' + r + ',' + g + ',' + b + ')';
// For <g> elements, color child paths; for <path>, color directly
if (el.tagName.toLowerCase() === 'g') {
el.querySelectorAll('path').forEach(function(p) {
p.style.fill = color;
});
} else {
el.style.fill = color;
}
} }
path.addEventListener('mouseenter', function(e) { el.addEventListener('mouseenter', function(e) {
var cc = id.toUpperCase(); var cc = id.toUpperCase();
var n = lookup[id] || 0; var n = lookup[id] || 0;
tooltip.textContent = cc + ': ' + n.toLocaleString() + ' attempts'; tooltip.textContent = cc + ': ' + n.toLocaleString() + ' attempts';
tooltip.style.display = 'block'; tooltip.style.display = 'block';
}); });
path.addEventListener('mousemove', function(e) { el.addEventListener('mousemove', function(e) {
tooltip.style.left = (e.clientX + 12) + 'px'; tooltip.style.left = (e.clientX + 12) + 'px';
tooltip.style.top = (e.clientY - 10) + 'px'; tooltip.style.top = (e.clientY - 10) + 'px';
}); });
path.addEventListener('mouseleave', function() { el.addEventListener('mouseleave', function() {
tooltip.style.display = 'none'; tooltip.style.display = 'none';
}); });
path.addEventListener('click', function() { el.addEventListener('click', function() {
var input = document.querySelector('#filter-form input[name="country"]'); var input = document.querySelector('#filter-form input[name="country"]');
if (input) { if (input) {
input.value = id.toUpperCase(); input.value = id.toUpperCase();
@@ -196,7 +209,7 @@
} }
}); });
path.style.cursor = 'pointer'; el.style.cursor = 'pointer';
}); });
} }