diff --git a/js/pages/serverInfo.js b/js/pages/serverInfo.js index 7c71557..97a2614 100644 --- a/js/pages/serverInfo.js +++ b/js/pages/serverInfo.js @@ -50,7 +50,6 @@ function ServerInfoPage(params, container) { var perfChart = nv.models.multiChart() .margin({ top: 30, right: 75, bottom: 40, left: 75 }) .color(['darkred', 'yellowgreen']) - .useInteractiveGuideline(true) .duration(0); perfChart.yAxis1.axisLabel('Framerate').tickFormat(d3.format(',d')); perfChart.yAxis2.axisLabel('Entities').tickFormat(d3.format(',d')); @@ -69,7 +68,6 @@ function ServerInfoPage(params, container) { nv.addGraph(function () { var netChart = nv.models.stackedAreaChart() .margin({ top: 0, right: 75, bottom: 40, left: 75 }) - .useInteractiveGuideline(true) .duration(0); netChart.yAxis.axisLabel('Network').tickFormat(function (bytes) { var fmt = d3.format('.0f'); @@ -87,6 +85,22 @@ function ServerInfoPage(params, container) { window._netChart = netChart; }); + netChart.yAxis.axisLabel('Network').tickFormat(function (bytes) { + var fmt = d3.format('.0f'); + if (bytes < 1024) return fmt(bytes) + 'B'; + if (bytes < 1048576) return fmt(bytes / 1024) + 'kB'; + if (bytes < 1073741824) return fmt(bytes / 1048576) + 'MB'; + return fmt(bytes / 1073741824) + 'GB'; + }); + netChart.xAxis.axisLabel('Time').tickFormat(function (d) { return d3.time.format('%H:%M:%S')(new Date(d)); }); + + d3.select('#chart-network').datum([ + { key: 'IN', values: [] }, + { key: 'OUT', values: [] } + ]).call(netChart); + + window._netChart = netChart; + }); nv.addGraph(function () { var playersChart = nv.models.pieChart() @@ -115,6 +129,10 @@ function ServerInfoPage(params, container) { } function updateData(data) { + // Guard: element may be gone if navigated away + var fieldsEl = document.getElementById('si-fields'); + if (!fieldsEl) return; + // Update text fields var fieldsHtml = ''; for (var key in data) { @@ -124,8 +142,11 @@ function ServerInfoPage(params, container) { fieldsHtml += '

' + key + ': ' + val + '

'; } } - document.getElementById('si-fields').innerHTML = fieldsHtml; - if (data.Hostname) document.getElementById('si-hostname').textContent = data.Hostname; + fieldsEl.innerHTML = fieldsHtml; + if (data.Hostname) { + var hn = document.getElementById('si-hostname'); + if (hn) hn.textContent = data.Hostname; + } // Collect chart data recordedData.push({ ts: Date.now(), data: data }); @@ -136,14 +157,18 @@ function ServerInfoPage(params, container) { } function updateCharts(data) { + // Guard: SVG elements may be gone if navigated away // Players pie chart if (window._playersChart) { - d3.select('#chart-players').datum([ + var pc = d3.select('#chart-players'); + if (!pc.empty()) { + pc.datum([ { key: 'Queued', y: data.Queued || 0 }, { key: 'Joining', y: data.Joining || 0 }, { key: 'Players', y: data.Players || 0 }, { key: 'Free', y: (data.MaxPlayers || 0) - ((data.Joining || 0) + (data.Players || 0)) } ]).call(window._playersChart); + } } // Performance chart