New version with grafana

static/script.js

@@ -12,6 +12,8 @@ const tooltip      = document.getElementById('tooltip');
 let socket;
 // Keep track of open chat windows: character_name -> DOM element
 const chatWindows = {};
+// Keep track of open stats windows: character_name -> DOM element
+const statsWindows = {};
 
 /* ---------- constants ------------------------------------------- */
 const MAX_Z       = 10;
@@ -25,7 +27,8 @@ const MAP_BOUNDS  = {
 };
 
 // Base path for tracker API endpoints; prefix API calls with '/api' when served behind a proxy
-const API_BASE = '/api';
+// If serving APIs at root, leave empty
+const API_BASE = '';
 // Maximum number of lines to retain in each chat window scrollback
 const MAX_CHAT_LINES = 1000;
 // Map numeric chat color codes to CSS hex colors
@@ -134,6 +137,59 @@ function worldToPx(ew, ns) {
   return { x, y };
 }
 
+// Show or create a stats window for a character
+function showStatsWindow(name) {
+  if (statsWindows[name]) {
+    const existing = statsWindows[name];
+    existing.style.display = 'flex';
+    return;
+  }
+  const win = document.createElement('div');
+  win.className = 'stats-window';
+  win.dataset.character = name;
+  // Header (reuses chat-header styling)
+  const header = document.createElement('div');
+  header.className = 'chat-header';
+  const title = document.createElement('span');
+  title.textContent = `Stats: ${name}`;
+  const closeBtn = document.createElement('button');
+  closeBtn.className = 'chat-close-btn';
+  closeBtn.textContent = '×';
+  closeBtn.addEventListener('click', () => { win.style.display = 'none'; });
+  header.appendChild(title);
+  header.appendChild(closeBtn);
+  win.appendChild(header);
+  // Content container
+  const content = document.createElement('div');
+  content.className = 'chat-messages';
+  content.textContent = 'Loading stats...';
+  win.appendChild(content);
+  document.body.appendChild(win);
+  statsWindows[name] = win;
+  // Embed a 2×2 grid of Grafana solo-panel iframes for this character
+  content.innerHTML = '';
+  const panels = [
+    { title: 'Kills per Hour', id: 1 },
+    { title: 'Memory (MB)',    id: 2 },
+    { title: 'CPU (%)',        id: 3 },
+    { title: 'Mem Handles',    id: 4 }
+  ];
+  panels.forEach(p => {
+    const iframe = document.createElement('iframe');
+    iframe.src =
+      `/grafana/d-solo/dereth-tracker/dereth-tracker-dashboard` +
+      `?panelId=${p.id}` +
+      `&var-character=${encodeURIComponent(name)}` +
+      `&theme=light`;
+    iframe.setAttribute('title', p.title);
+    iframe.width = '350';
+    iframe.height = '200';
+    iframe.frameBorder = '0';
+    iframe.allowFullscreen = true;
+    content.appendChild(iframe);
+  });
+}
+
 const applyTransform = () =>
   group.style.transform = `translate(${offX}px,${offY}px) scale(${scale})`;
 
@@ -280,6 +336,15 @@ function render(players) {
       showChatWindow(p.character_name);
     });
     li.appendChild(chatBtn);
+    // Stats button
+    const statsBtn = document.createElement('button');
+    statsBtn.className = 'stats-btn';
+    statsBtn.textContent = 'Stats';
+    statsBtn.addEventListener('click', e => {
+      e.stopPropagation();
+      showStatsWindow(p.character_name);
+    });
+    li.appendChild(statsBtn);
     list.appendChild(li);
   });
 }