d5dcbe7f by Rafal Wilinski

:joystick: Update charts in loop

1 parent a681773a
Showing 1 changed file with 29 additions and 44 deletions
...@@ -117,15 +117,14 @@ ...@@ -117,15 +117,14 @@
117 Chart.defaults.global.elements.line.borderWidth = 2; 117 Chart.defaults.global.elements.line.borderWidth = 2;
118 118
119 var socket = io('http://localhost:41338'); 119 var socket = io('http://localhost:41338');
120 var labels = [];
121 var defaultSpan = 0; 120 var defaultSpan = 0;
122 121
123 var defaultDataset = [{ 122 var defaultDataset = {
124 label: '', 123 label: '',
125 data: [], 124 data: [],
126 lineTension: 0.2, 125 lineTension: 0.2,
127 pointRadius: 0 126 pointRadius: 0
128 }]; 127 };
129 128
130 var defaultOptions = { 129 var defaultOptions = {
131 scales: { 130 scales: {
...@@ -157,14 +156,18 @@ ...@@ -157,14 +156,18 @@
157 datasets: dataset 156 datasets: dataset
158 }, 157 },
159 options: defaultOptions 158 options: defaultOptions
160 }) 159 });
160 };
161
162 var addTimestamp = function(point) {
163 return point.timestamp;
161 }; 164 };
162 165
163 var cpuDataset = Object.create(defaultDataset); 166 var cpuDataset = [Object.create(defaultDataset)];
164 var memDataset = Object.create(defaultDataset); 167 var memDataset = [Object.create(defaultDataset)];
165 var loadDataset = Object.create(defaultDataset); 168 var loadDataset = [Object.create(defaultDataset)];
166 var responseTimeDataset = Object.create(defaultDataset); 169 var responseTimeDataset = [Object.create(defaultDataset)];
167 var rpsDataset = Object.create(defaultDataset); 170 var rpsDataset = [Object.create(defaultDataset)];
168 171
169 var cpuStat = document.getElementById('cpuStat'); 172 var cpuStat = document.getElementById('cpuStat');
170 var memStat = document.getElementById('memStat'); 173 var memStat = document.getElementById('memStat');
...@@ -184,6 +187,8 @@ ...@@ -184,6 +187,8 @@
184 var responseTimeChart = createChart(responseTimeChartCtx, responseTimeDataset); 187 var responseTimeChart = createChart(responseTimeChartCtx, responseTimeDataset);
185 var rpsChart = createChart(rpsChartCtx, rpsDataset); 188 var rpsChart = createChart(rpsChartCtx, rpsDataset);
186 189
190 var charts = [cpuChart, memChart, loadChart, responseTimeChart, rpsChart];
191
187 var onSpanChange = function (e) { 192 var onSpanChange = function (e) {
188 e.target.classList.add('active'); 193 e.target.classList.add('active');
189 defaultSpan = Integer.parseInt(e.target.id); 194 defaultSpan = Integer.parseInt(e.target.id);
...@@ -204,37 +209,25 @@ ...@@ -204,37 +209,25 @@
204 cpuChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) { 209 cpuChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
205 return point.cpu; 210 return point.cpu;
206 }); 211 });
207 cpuChart.data.labels = data[defaultSpan].os.map(function (point) { 212 cpuChart.data.labels = data[defaultSpan].os.map(addTimestamp);
208 return point.timestamp;
209 });
210 cpuChart.update();
211 213
212 memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB'; 214 memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
213 memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) { 215 memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
214 return point.memory; 216 return point.memory;
215 }); 217 });
216 memChart.data.labels = data[defaultSpan].os.map(function (point) { 218 memChart.data.labels = data[defaultSpan].os.map(addTimestamp);
217 return point.timestamp;
218 });
219 memChart.update();
220 219
221 loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2); 220 loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
222 loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) { 221 loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
223 return point.load[defaultSpan]; 222 return point.load[defaultSpan];
224 }); 223 });
225 loadChart.data.labels = data[defaultSpan].os.map(function (point) { 224 loadChart.data.labels = data[defaultSpan].os.map(addTimestamp);
226 return point.timestamp;
227 });
228 loadChart.update();
229 225
230 responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms'; 226 responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
231 responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) { 227 responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) {
232 return point.mean; 228 return point.mean;
233 }); 229 });
234 responseTimeChart.data.labels = data[defaultSpan].responses.map(function (point) { 230 responseTimeChart.data.labels = data[defaultSpan].responses.map(addTimestamp);
235 return point.timestamp;
236 });
237 responseTimeChart.update();
238 231
239 if (data[defaultSpan].responses.length >= 2) { 232 if (data[defaultSpan].responses.length >= 2) {
240 var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp; 233 var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp;
...@@ -242,12 +235,13 @@ ...@@ -242,12 +235,13 @@
242 rpsChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) { 235 rpsChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) {
243 return point.count / deltaTime * 1000; 236 return point.count / deltaTime * 1000;
244 }); 237 });
245 rpsChart.data.labels = data[defaultSpan].responses.map(function (point) { 238 rpsChart.data.labels = data[defaultSpan].responses.map(addTimestamp);
246 return point.timestamp;
247 });
248 rpsChart.update();
249 } 239 }
250 240
241 charts.forEach(function(chart) {
242 chart.update();
243 });
244
251 var spanControls = document.getElementById('span-controls'); 245 var spanControls = document.getElementById('span-controls');
252 data.forEach(function (span, index) { 246 data.forEach(function (span, index) {
253 var spanNode = document.createElement('span'); 247 var spanNode = document.createElement('span');
...@@ -263,38 +257,29 @@ ...@@ -263,38 +257,29 @@
263 cpuStat.textContent = data.os.cpu.toFixed(1) + '%'; 257 cpuStat.textContent = data.os.cpu.toFixed(1) + '%';
264 cpuChart.data.datasets[0].data.push(data.os.cpu); 258 cpuChart.data.datasets[0].data.push(data.os.cpu);
265 cpuChart.data.labels.push(data.os.timestamp); 259 cpuChart.data.labels.push(data.os.timestamp);
266 cpuChart.data.datasets[0].data.shift();
267 cpuChart.data.labels.shift();
268 cpuChart.update();
269 260
270 memStat.textContent = data.os.memory.toFixed(1) + 'MB'; 261 memStat.textContent = data.os.memory.toFixed(1) + 'MB';
271 memChart.data.datasets[0].data.push(data.os.memory); 262 memChart.data.datasets[0].data.push(data.os.memory);
272 memChart.data.labels.push(data.os.timestamp); 263 memChart.data.labels.push(data.os.timestamp);
273 memChart.data.datasets[0].data.shift();
274 memChart.data.labels.shift();
275 memChart.update();
276 264
277 loadStat.textContent = data.os.load[0].toFixed(2); 265 loadStat.textContent = data.os.load[0].toFixed(2);
278 loadChart.data.datasets[0].data.push(data.os.load[0]); 266 loadChart.data.datasets[0].data.push(data.os.load[0]);
279 loadChart.data.labels.push(data.os.timestamp); 267 loadChart.data.labels.push(data.os.timestamp);
280 loadChart.data.datasets[0].data.shift();
281 loadChart.data.labels.shift();
282 loadChart.update();
283 268
284 responseTimeStat.textContent = data.responses.mean.toFixed(2) + 'ms'; 269 responseTimeStat.textContent = data.responses.mean.toFixed(2) + 'ms';
285 responseTimeChart.data.datasets[0].data.push(data.responses.mean); 270 responseTimeChart.data.datasets[0].data.push(data.responses.mean);
286 responseTimeChart.data.labels.push(data.responses.timestamp); 271 responseTimeChart.data.labels.push(data.responses.timestamp);
287 responseTimeChart.data.datasets[0].data.shift();
288 responseTimeChart.data.labels.shift();
289 responseTimeChart.update();
290 272
291 var deltaTime = data.responses.timestamp - rpsChart.data.labels[rpsChart.data.labels.length - 1]; 273 var deltaTime = data.responses.timestamp - rpsChart.data.labels[rpsChart.data.labels.length - 1];
292 rpsStat.textContent = (data.responses.count / deltaTime * 1000).toFixed(2); 274 rpsStat.textContent = (data.responses.count / deltaTime * 1000).toFixed(2);
293 rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000); 275 rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000);
294 rpsChart.data.labels.push(data.responses.timestamp); 276 rpsChart.data.labels.push(data.responses.timestamp);
295 rpsChart.data.datasets[0].data.shift(); 277
296 rpsChart.data.labels.shift(); 278 charts.forEach(function(chart) {
297 rpsChart.update(); 279 chart.data.datasets[0].data.shift();
280 chart.data.labels.shift();
281 chart.update();
282 });
298 }); 283 });
299 </script> 284 </script>
300 </body> 285 </body>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!