Push data only from current span to chart
Showing
1 changed file
with
40 additions
and
28 deletions
... | @@ -133,6 +133,7 @@ | ... | @@ -133,6 +133,7 @@ |
133 | 133 | ||
134 | var socket = io('http://localhost:41338'); | 134 | var socket = io('http://localhost:41338'); |
135 | var defaultSpan = 0; | 135 | var defaultSpan = 0; |
136 | var spans = []; | ||
136 | 137 | ||
137 | var defaultDataset = { | 138 | var defaultDataset = { |
138 | label: '', | 139 | label: '', |
... | @@ -162,7 +163,8 @@ | ... | @@ -162,7 +163,8 @@ |
162 | enabled: false | 163 | enabled: false |
163 | }, | 164 | }, |
164 | responsive: true, | 165 | responsive: true, |
165 | maintainAspectRatio: false | 166 | maintainAspectRatio: false, |
167 | animation: false | ||
166 | }; | 168 | }; |
167 | 169 | ||
168 | var createChart = function (ctx, dataset) { | 170 | var createChart = function (ctx, dataset) { |
... | @@ -208,11 +210,11 @@ | ... | @@ -208,11 +210,11 @@ |
208 | 210 | ||
209 | var onSpanChange = function (e) { | 211 | var onSpanChange = function (e) { |
210 | e.target.classList.add('active'); | 212 | e.target.classList.add('active'); |
211 | defaultSpan = Integer.parseInt(e.target.id); | 213 | defaultSpan = parseInt(e.target.id); |
212 | 214 | ||
213 | var otherSpans = document.getElementsByTagName('span'); | 215 | var otherSpans = document.getElementsByTagName('span'); |
214 | for (var i = 0; i < otherSpans.length; i++) { | 216 | for (var i = 0; i < otherSpans.length; i++) { |
215 | if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('remove'); | 217 | if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('active'); |
216 | } | 218 | } |
217 | }; | 219 | }; |
218 | 220 | ||
... | @@ -261,6 +263,11 @@ | ... | @@ -261,6 +263,11 @@ |
261 | 263 | ||
262 | var spanControls = document.getElementById('span-controls'); | 264 | var spanControls = document.getElementById('span-controls'); |
263 | data.forEach(function (span, index) { | 265 | data.forEach(function (span, index) { |
266 | spans.push({ | ||
267 | retention: span.retention, | ||
268 | interval: span.interval | ||
269 | }); | ||
270 | |||
264 | var spanNode = document.createElement('span'); | 271 | var spanNode = document.createElement('span'); |
265 | var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M"); | 272 | var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M"); |
266 | spanNode.appendChild(textNode); | 273 | spanNode.appendChild(textNode); |
... | @@ -271,32 +278,37 @@ | ... | @@ -271,32 +278,37 @@ |
271 | }); | 278 | }); |
272 | 279 | ||
273 | socket.on('stats', function (data) { | 280 | socket.on('stats', function (data) { |
274 | cpuStat.textContent = data.os.cpu.toFixed(1) + '%'; | 281 | if (data.retention === spans[defaultSpan].retention && data.interval === spans[defaultSpan].interval) { |
275 | cpuChart.data.datasets[0].data.push(data.os.cpu); | 282 | cpuStat.textContent = data.os.cpu.toFixed(1) + '%'; |
276 | cpuChart.data.labels.push(data.os.timestamp); | 283 | cpuChart.data.datasets[0].data.push(data.os.cpu); |
277 | 284 | cpuChart.data.labels.push(data.os.timestamp); | |
278 | memStat.textContent = data.os.memory.toFixed(1) + 'MB'; | 285 | |
279 | memChart.data.datasets[0].data.push(data.os.memory); | 286 | memStat.textContent = data.os.memory.toFixed(1) + 'MB'; |
280 | memChart.data.labels.push(data.os.timestamp); | 287 | memChart.data.datasets[0].data.push(data.os.memory); |
281 | 288 | memChart.data.labels.push(data.os.timestamp); | |
282 | loadStat.textContent = data.os.load[0].toFixed(2); | 289 | |
283 | loadChart.data.datasets[0].data.push(data.os.load[0]); | 290 | loadStat.textContent = data.os.load[0].toFixed(2); |
284 | loadChart.data.labels.push(data.os.timestamp); | 291 | loadChart.data.datasets[0].data.push(data.os.load[0]); |
285 | 292 | loadChart.data.labels.push(data.os.timestamp); | |
286 | responseTimeStat.textContent = data.responses.mean.toFixed(2) + 'ms'; | 293 | |
287 | responseTimeChart.data.datasets[0].data.push(data.responses.mean); | 294 | responseTimeStat.textContent = data.responses.mean.toFixed(2) + 'ms'; |
288 | responseTimeChart.data.labels.push(data.responses.timestamp); | 295 | responseTimeChart.data.datasets[0].data.push(data.responses.mean); |
289 | 296 | responseTimeChart.data.labels.push(data.responses.timestamp); | |
290 | var deltaTime = data.responses.timestamp - rpsChart.data.labels[rpsChart.data.labels.length - 1]; | 297 | |
291 | rpsStat.textContent = (data.responses.count / deltaTime * 1000).toFixed(2); | 298 | var deltaTime = data.responses.timestamp - rpsChart.data.labels[rpsChart.data.labels.length - 1]; |
292 | rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000); | 299 | rpsStat.textContent = (data.responses.count / deltaTime * 1000).toFixed(2); |
293 | rpsChart.data.labels.push(data.responses.timestamp); | 300 | rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000); |
301 | rpsChart.data.labels.push(data.responses.timestamp); | ||
302 | |||
303 | charts.forEach(function (chart) { | ||
304 | if (spans[defaultSpan].retention < chart.data.labels.length) { | ||
305 | chart.data.datasets[0].data.shift(); | ||
306 | chart.data.labels.shift(); | ||
307 | } | ||
294 | 308 | ||
295 | charts.forEach(function(chart) { | 309 | chart.update(); |
296 | chart.data.datasets[0].data.shift(); | 310 | }); |
297 | chart.data.labels.shift(); | 311 | } |
298 | chart.update(); | ||
299 | }); | ||
300 | }); | 312 | }); |
301 | </script> | 313 | </script> |
302 | </body> | 314 | </body> | ... | ... |
-
Please register or sign in to post a comment