dashboard now supports destroying not visible charts
Costa Tsaousis (ktsaou) committed
Dec 14, 2015 at 14:28 UTC
f385680a6429197970b2374d71ef143ae0590e5f
1 file changed
+79
-2
web/dashboard.js
+79
-2
@@ -189,6 +189,8 @@
189
190
parallel_refresher: true, // enable parallel refresh of charts
191
192
+ destroy_on_hide: false, // destroy charts when they are not visible
193
+
194
color_fill_opacity: {
195
line: 1.0,
196
area: 0.2,
@@ -481,8 +483,10 @@
483
// Used with NETDATA.globalPanAndZoom.seq
484
485
last_resized: 0, // the last time the chart was resized
486
+ last_hidden: 0,
487
+ last_unhidden: 0,
488
485
- mode: null, // auto, pan, zoom
489
+ current: null, // auto, pan, zoom
490
// this is a pointer to one of the sub-classes below
491
492
auto: {
@@ -1423,6 +1427,66 @@
1427
});
1428
}
1429
1430
+ chartState.prototype.destroyChart = function() {
1431
+ this.current.last_autorefreshed = new Date().getTime();
1432
+
1433
+ if(this.element_message !== null) {
1434
+ this.element_message.innerHTML = '';
1435
+ this.element_message = null;
1436
+ }
1437
+
1438
+ if(this.element_loading !== null) {
1439
+ this.element_loading.innerHTML = '';
1440
+ this.element_loading = null;
1441
+ }
1442
+
1443
+ if(this.element_legend !== null) {
1444
+ this.element_legend.innerHTML = '';
1445
+ this.element_legend = null;
1446
+ }
1447
+
1448
+ if(this.element_chart !== null) {
1449
+ this.element_chart.innerHTML = '';
1450
+ this.element_chart = null;
1451
+ }
1452
+
1453
+ this.element_legend_childs = {
1454
+ hidden: null,
1455
+ title_date: null,
1456
+ title_time: null,
1457
+ title_units: null,
1458
+ series: null
1459
+ };
1460
+
1461
+ this.element.innerHTML = '';
1462
+ this.refresh_dt_element = null;
1463
+
1464
+ this.created_ms = 0;
1465
+ this.paused = false;
1466
+ this.selected = false;
1467
+ this.updates_counter = 0;
1468
+ this.updates_since_last_creation = 0;
1469
+ this.follows_global = 0;
1470
+ this.last_resized = 0;
1471
+
1472
+ if(this.current !== null) {
1473
+ this.current.last_autorefreshed = 0;
1474
+ this.current.view_update_every = 0;
1475
+ this.current.after_ms = 0;
1476
+ this.current.before_ms = 0;
1477
+ this.current.points = 0;
1478
+ this.current.data = null;
1479
+ this.current.force_update_at = 0;
1480
+ this.current.force_after_ms = null;
1481
+ this.current.force_before_ms = null;
1482
+ this.current.requested_after_ms = null;
1483
+ this.current.requested_before_ms = null;
1484
+ this.current.first_entry_ms = null;
1485
+ this.current.last_entry_ms = null;
1486
+ }
1487
+ this.init();
1488
+ }
1489
+
1490
chartState.prototype.unhideChart = function() {
1491
if(typeof this.___isHidden___ !== 'undefined') {
1492
this.element_message.style.display = 'none';
@@ -1431,17 +1495,22 @@
1495
if(this.element_loading !== null) this.element_loading.style.display = 'none';
1496
this.___isHidden___ = undefined;
1497
this.element_message.innerHTML = 'chart ' + this.id + ' is visible now';
1498
+ this.last_unhidden = new Date().getTime();
1499
}
1500
}
1501
1502
chartState.prototype.hideChart = function() {
1503
if(typeof this.___isHidden___ === 'undefined') {
1504
+ if(NETDATA.options.current.destroy_on_hide === true)
1505
+ this.destroyChart();
1506
+
1507
this.element_message.style.display = 'inline-block';
1508
if(this.element_chart !== null) this.element_chart.style.display = 'none';
1509
if(this.element_legend !== null) this.element_legend.style.display = 'none';
1510
if(this.element_loading !== null) this.element_loading.style.display = 'none';
1511
this.___isHidden___ = true;
1512
this.element_message.innerHTML = 'chart ' + this.id + ' is hidden to speed up the browser';
1513
+ this.last_hidden = new Date().getTime();
1514
}
1515
}
1516
@@ -1453,6 +1522,7 @@
1522
if(this.element_loading !== null) this.element_loading.style.display = 'none';
1523
this.___showsLoading___ = undefined;
1524
this.element_loading.innerHTML = 'chart ' + this.id + ' finished loading!';
1525
+ this.last_unhidden = new Date().getTime();
1526
}
1527
}
1528
@@ -1464,6 +1534,7 @@
1534
if(this.element_loading !== null) this.element_loading.style.display = 'inline-block';
1535
this.___showsLoading___ = true;
1536
this.element_loading.innerHTML = 'chart ' + this.id + ' is loading...';
1537
+ this.last_hidden = new Date().getTime();
1538
}
1539
}
1540
@@ -2228,7 +2299,11 @@
2299
// if there is a window resize, dygraph detects
2300
// its element size as 0x0.
2301
// this will make it re-appear properly
2231
- dygraph.resize();
2302
+
2303
+ if(state.last_unhidden > state.dygraph_last_rendered)
2304
+ dygraph.resize();
2305
+
2306
+ state.dygraph_last_rendered = new Date().getTime();
2307
2308
if(state.current.name === 'pan') {
2309
if(NETDATA.options.debug.dygraph || state.debug) state.log('dygraphChartUpdate() loose update');
@@ -2253,6 +2328,8 @@
2328
NETDATA.dygraphChartCreate = function(state, data) {
2329
if(NETDATA.options.debug.dygraph || state.debug) state.log('dygraphChartCreate()');
2330
2331
+ state.dygraph_last_rendered = new Date().getTime();
2332
+
2333
var self = $(state.element);
2334
2335
state.dygraph_options = {