charts can be resized on touch interfaces; code cleanups
Costa Tsaousis (ktsaou) committed
Dec 24, 2015 at 01:44 UTC
270e9b1bfcf3f1b1af86b7984120768d9d55c85b
2 files changed
+164
-133
web/dashboard.js
+153
-122
@@ -177,11 +177,11 @@
177
idle_lost_focus: 500, // ms - when the window does not have focus, check
178
// if focus has been regained, every this time
179
180
- global_pan_sync_time: 1500, // ms - when you pan or zoon a chart, the background
180
+ global_pan_sync_time: 1000, // ms - when you pan or zoon a chart, the background
181
// autorefreshing of charts is paused for this amount
182
// of time
183
184
- sync_selection_delay: 2500, // ms - when you pan or zoom a chart, wait this amount
184
+ sync_selection_delay: 1500, // ms - when you pan or zoom a chart, wait this amount
185
// of time before setting up synchronized selections
186
// on hover.
187
@@ -201,9 +201,10 @@
201
202
eliminate_zero_dimensions: true, // do not show dimensions with just zeros
203
204
- stop_updates_when_focus_is_lost: true,
204
+ stop_updates_when_focus_is_lost: true, // boolean - shall we stop auto-refreshes when document does not have user focus
205
+ stop_updates_while_resizing: 1000, // ms - time to stop auto-refreshes while resizing the charts
206
206
- double_click_speed: 500,
207
+ double_click_speed: 500, // ms - time between clicks / taps to detect double click/tap
208
209
smooth_plot: true, // enable smooth plot, where possible
210
@@ -211,7 +212,7 @@
212
color_fill_opacity_area: 0.2,
213
color_fill_opacity_stacked: 0.8,
214
214
- set_option_callback: function() { ; }
215
+ setOptionCallback: function() { ; }
216
},
217
218
debug: {
@@ -311,7 +312,7 @@
312
}
313
314
if(ret === true)
314
- NETDATA.options.current.set_option_callback();
315
+ NETDATA.options.current.setOptionCallback();
316
317
return ret;
318
}
@@ -323,7 +324,7 @@
324
NETDATA.resetOptions = function() {
325
// console.log('will reset all');
326
for(var i in NETDATA.options.defaults) {
326
- if(i.toString() === 'set_option_callback') continue;
327
+ if(i.toString() === 'setOptionCallback') continue;
328
329
if(NETDATA.options.current[i] !== NETDATA.options.defaults[i]) {
330
// console.log('reseting ' + i.toString() + ' to ' + NETDATA.options.defaults[i].toString());
@@ -630,59 +631,44 @@
631
last_autorefreshed: 0 // the time the chart was last refreshed
632
},
633
634
+ data: null, // the last data as downloaded from the netdata server
635
+ data_url: 'invalid://', // string - the last url used to update the chart
636
+ data_points: 0, // number - the number of points returned from netdata
637
+ data_after: 0, // milliseconds - the first timestamp of the data
638
+ data_before: 0, // milliseconds - the last timestamp of the data
639
+ data_update_every: 0, // milliseconds - the frequency to update the data
640
+ netdata_first: 0, // milliseconds - the first timestamp in netdata
641
+ netdata_last: 0, // milliseconds - the last timestamp in netdata
642
+
643
current: null, // auto, pan, zoom
644
// this is a pointer to one of the sub-classes below
645
646
auto: {
647
name: 'auto',
648
autorefresh: true,
639
- url: 'invalid://', // string - the last url used to update the chart
640
- view_update_every: 0, // milliseconds - the minimum acceptable refresh duration
641
- after_ms: 0, // milliseconds - the first timestamp of the data
642
- before_ms: 0, // milliseconds - the last timestamp of the data
643
- points: 0, // number - the number of points in the data
644
- data: null, // the last downloaded data
649
force_update_at: 0, // the timestamp to force the update at
650
force_before_ms: null,
651
force_after_ms: null,
652
requested_before_ms: null,
653
requested_after_ms: null,
650
- first_entry_ms: null,
651
- last_entry_ms: null
654
},
655
pan: {
656
name: 'pan',
657
autorefresh: false,
656
- url: 'invalid://', // string - the last url used to update the chart
657
- view_update_every: 0, // milliseconds - the minimum acceptable refresh duration
658
- after_ms: 0, // milliseconds - the first timestamp of the data
659
- before_ms: 0, // milliseconds - the last timestamp of the data
660
- points: 0, // number - the number of points in the data
661
- data: null, // the last downloaded data
658
force_update_at: 0, // the timestamp to force the update at
659
force_before_ms: null,
660
force_after_ms: null,
661
requested_before_ms: null,
662
requested_after_ms: null,
667
- first_entry_ms: null,
668
- last_entry_ms: null
663
},
664
zoom: {
665
name: 'zoom',
666
autorefresh: false,
673
- url: 'invalid://', // string - the last url used to update the chart
674
- view_update_every: 0, // milliseconds - the minimum acceptable refresh duration
675
- after_ms: 0, // milliseconds - the first timestamp of the data
676
- before_ms: 0, // milliseconds - the last timestamp of the data
677
- points: 0, // number - the number of points in the data
678
- data: null, // the last downloaded data
667
force_update_at: 0, // the timestamp to force the update at
668
force_before_ms: null,
669
force_after_ms: null,
670
requested_before_ms: null,
671
requested_after_ms: null,
684
- first_entry_ms: null,
685
- last_entry_ms: null
672
},
673
674
refresh_dt_ms: 0, // milliseconds - the time the last refresh took
@@ -708,17 +694,33 @@
694
last: 0
695
};
696
711
- this.event_resize.mouse_start_x = e.clientX;
712
- this.event_resize.mouse_start_y = e.clientY;
697
+ if(e.type === 'touchstart') {
698
+ this.event_resize.mouse_start_x = e.touches.item(0).pageX;
699
+ this.event_resize.mouse_start_y = e.touches.item(0).pageY;
700
+ }
701
+ else {
702
+ this.event_resize.mouse_start_x = e.clientX;
703
+ this.event_resize.mouse_start_y = e.clientY;
704
+ }
705
+
706
this.event_resize.chart_start_w = this.element.clientWidth;
707
this.event_resize.chart_start_h = this.element.clientHeight;
708
this.event_resize.chart_last_w = this.element.clientWidth;
709
this.event_resize.chart_last_h = this.element.clientHeight;
710
711
+ // this is actual chart resize algorithm
712
+ // it will:
713
+ // - resize the entire container
714
+ // - update the internal states
715
+ // - resize the chart as the div changes height
716
+ // - update the scrollbar of the legend
717
var resize_height_and_update_chart = function(state, h) {
718
state.element.style.height = h.toString() + 'px';
719
721
- NETDATA.options.last_page_scroll = new Date().getTime();
720
+ var now = new Date().getTime();
721
+ NETDATA.options.last_page_scroll = now;
722
+ NETDATA.options.last_resized = now;
723
+ NETDATA.options.auto_refresher_stop_until = now + NETDATA.options.current.stop_updates_while_resizing;
724
725
if(typeof state.library.resize === 'function')
726
state.library.resize(state);
@@ -729,44 +731,70 @@
731
732
var now = new Date().getTime();
733
if(now - this.event_resize.last <= NETDATA.options.current.double_click_speed) {
732
- // double click event
734
+ // double click / double tap event
735
736
+ // the optimal height of the chart
737
+ // showing the entire legend
738
var optimal = this.event_resize.chart_last_h
739
+ this.element_legend_childs.content.scrollHeight
740
- this.element_legend_childs.content.clientHeight;
741
742
+ // if we are not optimal, be optimal
743
if(this.event_resize.chart_last_h != optimal)
744
resize_height_and_update_chart(this, optimal);
745
746
+ // else if we do not have the original height
747
+ // reset to the original height
748
else if(this.event_resize.chart_last_h != this.event_resize.chart_original_h)
749
resize_height_and_update_chart(this, this.event_resize.chart_original_h);
750
}
751
else {
752
this.event_resize.last = now;
746
-
753
var self = this;
754
755
+ // process movement event
756
document.onmousemove =
750
- this.element_legend_childs.resize_handler.onmousemove =
751
- this.element_legend_childs.resize_handler.onmouseout =
757
+ document.ontouchmove =
758
+ this.element_legend_childs.resize_handler.onmousemove =
759
+ this.element_legend_childs.resize_handler.ontouchmove =
760
function(e) {
753
- var newH = self.event_resize.chart_start_h + e.clientY - self.event_resize.mouse_start_y;
761
+ var y = null;
762
+
763
+ switch(e.type) {
764
+ case 'mousemove': y = e.clientY; break;
765
+ case 'touchmove': y = e.touches.item(e.touches - 1).pageY; break;
766
+ }
767
755
- if(newH >= 70 && newH !== self.event_resize.chart_last_h) {
756
- resize_height_and_update_chart(self, newH);
757
- self.event_resize.chart_last_h = newH;
768
+ if(y !== null) {
769
+ var newH = self.event_resize.chart_start_h + y - self.event_resize.mouse_start_y;
770
+
771
+ if(newH >= 70 && newH !== self.event_resize.chart_last_h) {
772
+ resize_height_and_update_chart(self, newH);
773
+ self.event_resize.chart_last_h = newH;
774
+ }
775
}
776
};
777
778
+ // process end event
779
document.onmouseup =
762
- this.element_legend_childs.resize_handler.onmouseup =
780
+ document.ontouchend =
781
+ this.element_legend_childs.resize_handler.onmouseup =
782
+ this.element_legend_childs.resize_handler.ontouchend =
783
function(e) {
784
+ // remove all the hooks
785
document.onmouseup =
765
- document.onmousemove =
766
- self.element_legend_childs.resize_handler.onmousemove =
767
- self.element_legend_childs.resize_handler.onmouseout =
768
- self.element_legend_childs.resize_handler.onmouseup =
786
+ document.onmousemove =
787
+ document.ontouchmove =
788
+ document.ontouchend =
789
+ self.element_legend_childs.resize_handler.onmousemove =
790
+ self.element_legend_childs.resize_handler.ontouchmove =
791
+ self.element_legend_childs.resize_handler.onmouseout =
792
+ self.element_legend_childs.resize_handler.onmouseup =
793
+ self.element_legend_childs.resize_handler.ontouchend =
794
null;
795
+
796
+ // allow auto-refreshes
797
+ NETDATA.options.auto_refresher_stop_until = 0;
798
};
799
}
800
}
@@ -965,14 +993,14 @@
993
994
// find if a timestamp (ms) is shown in the current chart
995
chartState.prototype.timeIsVisible = function(t) {
968
- if(t >= this.current.after_ms && t <= this.current.before_ms)
996
+ if(t >= this.data_after && t <= this.data_before)
997
return true;
998
return false;
999
},
1000
1001
chartState.prototype.calculateRowForTime = function(t) {
1002
if(this.timeIsVisible(t) === false) return -1;
975
- return Math.floor((t - this.current.after_ms) / this.current.view_update_every);
1003
+ return Math.floor((t - this.data_after) / this.data_update_every);
1004
}
1005
1006
// ----------------------------------------------------------------------------------------------------------------
@@ -1030,16 +1058,8 @@
1058
if(this.current) {
1059
if(this.current.name === m) return;
1060
1033
- this[m].url = this.current.url;
1034
- this[m].view_update_every = this.current.view_update_every;
1035
- this[m].after_ms = this.current.after_ms;
1036
- this[m].before_ms = this.current.before_ms;
1037
- this[m].points = this.current.points;
1038
- this[m].data = this.current.data;
1061
this[m].requested_before_ms = this.current.requested_before_ms;
1062
this[m].requested_after_ms = this.current.requested_after_ms;
1041
- this[m].first_entry_ms = this.current.first_entry_ms;
1042
- this[m].last_entry_ms = this.current.last_entry_ms;
1063
}
1064
1065
if(m === 'auto')
@@ -1069,10 +1089,10 @@
1089
1090
if((before - after) < min_duration) return false;
1091
1072
- var current_duration = this.current.before_ms - this.current.after_ms;
1092
+ var current_duration = this.data_before - this.data_after;
1093
var wanted_duration = before - after;
1074
- var tolerance = this.current.view_update_every * 2;
1075
- var movement = Math.abs(before - this.current.before_ms);
1094
+ var tolerance = this.data_update_every * 2;
1095
+ var movement = Math.abs(before - this.data_before);
1096
1097
if(this.debug === true)
1098
this.log('current duration: ' + current_duration / 1000 + ', wanted duration: ' + wanted_duration / 1000 + ', movement: ' + movement / 1000 + ', tolerance: ' + tolerance / 1000);
@@ -1151,8 +1171,8 @@
1171
if(this.element_legend_childs.title_units)
1172
this.element_legend_childs.title_units.innerHTML = ' ';
1173
1154
- if(this.current.data && this.element_legend_childs.series !== null) {
1155
- var labels = this.current.data.dimension_names;
1174
+ if(this.data && this.element_legend_childs.series !== null) {
1175
+ var labels = this.data.dimension_names;
1176
var i = labels.length;
1177
while(i--) {
1178
var label = labels[i];
@@ -1168,21 +1188,21 @@
1188
if(this.chart === null) return;
1189
if(this.selected) return;
1190
1171
- if(this.current.data === null || this.element_legend_childs.series === null) {
1191
+ if(this.data === null || this.element_legend_childs.series === null) {
1192
this.legendShowUndefined();
1193
return;
1194
}
1195
1196
var show_undefined = true;
1177
- if(Math.abs(this.current.data.last_entry - this.current.data.before) <= this.current.data.view_update_every)
1197
+ if(Math.abs(this.data.last_entry - this.data.before) <= this.data.view_update_every)
1198
show_undefined = false;
1199
1200
if(show_undefined)
1201
this.legendShowUndefined();
1202
else
1183
- this.legendSetDate(this.current.data.before * 1000);
1203
+ this.legendSetDate(this.data.before * 1000);
1204
1185
- var labels = this.current.data.dimension_names;
1205
+ var labels = this.data.dimension_names;
1206
var i = labels.length;
1207
while(i--) {
1208
var label = labels[i];
@@ -1193,7 +1213,7 @@
1213
if(show_undefined)
1214
this.legendSetLabelValue(label, null);
1215
else
1196
- this.legendSetLabelValue(label, this.current.data.view_latest_values[i]);
1216
+ this.legendSetLabelValue(label, this.data.view_latest_values[i]);
1217
}
1218
}
1219
@@ -1259,7 +1279,7 @@
1279
// this.log('the legend does not have any series - requesting legend update');
1280
needed = true;
1281
}
1262
- else if(this.current.data === null) {
1282
+ else if(this.data === null) {
1283
// this.log('the chart does not have any data - requesting legend update');
1284
needed = true;
1285
}
@@ -1267,7 +1287,7 @@
1287
needed = true;
1288
}
1289
else {
1270
- var labels = this.current.data.dimension_names.toString();
1290
+ var labels = this.data.dimension_names.toString();
1291
if(labels !== this.element_legend_childs.series.labels_key) {
1292
needed = true;
1293
@@ -1282,14 +1302,14 @@
1302
1303
// do we have to update the current values?
1304
// we do this, only when the visible chart is current
1285
- if(Math.abs(this.current.data.last_entry - this.current.data.before) <= this.current.data.view_update_every) {
1305
+ if(Math.abs(this.data.last_entry - this.data.before) <= this.data.view_update_every) {
1306
if(this.debug === true)
1307
this.log('chart in running... updating values on legend...');
1308
1289
- var labels = this.current.data.dimension_names;
1309
+ var labels = this.data.dimension_names;
1310
var i = labels.length;
1311
while(i--)
1292
- this.legendSetLabelValue(labels[i], this.current.data.latest_values[i]);
1312
+ this.legendSetLabelValue(labels[i], this.data.latest_values[i]);
1313
}
1314
return;
1315
}
@@ -1381,9 +1401,17 @@
1401
this.element_legend_childs.resize_handler.innerHTML = '<i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i>';
1402
this.element.appendChild(this.element_legend_childs.resize_handler);
1403
var self2 = this;
1384
- this.element_legend_childs.resize_handler.onmousedown = function(e) {
1404
+
1405
+ // mousedown event
1406
+ this.element_legend_childs.resize_handler.onmousedown =
1407
+ function(e) {
1408
+ self2.resizeHandler(e);
1409
+ };
1410
+
1411
+ // touchstart event
1412
+ this.element_legend_childs.resize_handler.addEventListener('touchstart', function(e) {
1413
self2.resizeHandler(e);
1386
- };
1414
+ }, false);
1415
1416
this.element_legend_childs.title_date.className += " netdata-legend-title-date";
1417
this.element_legend.appendChild(this.element_legend_childs.title_date);
@@ -1419,13 +1447,13 @@
1447
};
1448
}
1449
1422
- if(this.current.data) {
1423
- this.element_legend_childs.series.labels_key = this.current.data.dimension_names.toString();
1450
+ if(this.data) {
1451
+ this.element_legend_childs.series.labels_key = this.data.dimension_names.toString();
1452
if(this.debug === true)
1453
this.log('labels from data: "' + this.element_legend_childs.series.labels_key + '"');
1454
1427
- for(var i = 0, len = this.current.data.dimension_names.length; i < len ;i++) {
1428
- genLabel(this, content, this.current.data.dimension_names[i], i);
1455
+ for(var i = 0, len = this.data.dimension_names.length; i < len ;i++) {
1456
+ genLabel(this, content, this.data.dimension_names[i], i);
1457
}
1458
}
1459
else {
@@ -1568,37 +1596,37 @@
1596
this.current.requested_after_ms = after * 1000;
1597
this.current.requested_before_ms = before * 1000;
1598
1571
- this.current.points = this.points || Math.round(this.chartWidth() / this.chartPixelsPerPoint());
1599
+ this.data_points = this.points || Math.round(this.chartWidth() / this.chartPixelsPerPoint());
1600
1601
// build the data URL
1574
- this.current.url = this.chart.data_url;
1575
- this.current.url += "&format=" + this.library.format();
1576
- this.current.url += "&points=" + this.current.points.toString();
1577
- this.current.url += "&group=" + this.method;
1578
- this.current.url += "&options=" + this.library.options();
1579
- this.current.url += '|jsonwrap';
1602
+ this.data_url = this.chart.data_url;
1603
+ this.data_url += "&format=" + this.library.format();
1604
+ this.data_url += "&points=" + this.data_points.toString();
1605
+ this.data_url += "&group=" + this.method;
1606
+ this.data_url += "&options=" + this.library.options();
1607
+ this.data_url += '|jsonwrap';
1608
1609
if(NETDATA.options.current.eliminate_zero_dimensions === true)
1582
- this.current.url += '|nonzero';
1610
+ this.data_url += '|nonzero';
1611
1612
if(after)
1585
- this.current.url += "&after=" + after.toString();
1613
+ this.data_url += "&after=" + after.toString();
1614
1615
if(before)
1588
- this.current.url += "&before=" + before.toString();
1616
+ this.data_url += "&before=" + before.toString();
1617
1618
if(this.dimensions)
1591
- this.current.url += "&dimensions=" + this.dimensions;
1619
+ this.data_url += "&dimensions=" + this.dimensions;
1620
1621
if(NETDATA.options.debug.chart_data_url === true || this.debug === true)
1594
- this.log('chartURL(): ' + this.current.url + ' WxH:' + this.chartWidth() + 'x' + this.chartHeight() + ' points: ' + this.current.points + ' library: ' + this.library_name);
1622
+ this.log('chartURL(): ' + this.data_url + ' WxH:' + this.chartWidth() + 'x' + this.chartHeight() + ' points: ' + this.data_points + ' library: ' + this.library_name);
1623
}
1624
1625
chartState.prototype.updateChartWithData = function(data) {
1626
if(this.debug === true)
1627
this.log('got data from netdata server');
1628
1601
- this.current.data = data;
1629
+ this.data = data;
1630
this.updates_counter++;
1631
1632
var started = new Date().getTime();
@@ -1607,22 +1635,22 @@
1635
// if the result is JSON, find the latest update-every
1636
if(typeof data === 'object') {
1637
if(typeof data.view_update_every !== 'undefined')
1610
- this.current.view_update_every = data.view_update_every * 1000;
1638
+ this.data_update_every = data.view_update_every * 1000;
1639
1640
if(typeof data.after !== 'undefined')
1613
- this.current.after_ms = data.after * 1000;
1641
+ this.data_after = data.after * 1000;
1642
1643
if(typeof data.before !== 'undefined')
1616
- this.current.before_ms = data.before * 1000;
1644
+ this.data_before = data.before * 1000;
1645
1646
if(typeof data.first_entry !== 'undefined')
1619
- this.current.first_entry_ms = data.first_entry * 1000;
1647
+ this.netdata_first = data.first_entry * 1000;
1648
1649
if(typeof data.last_entry !== 'undefined')
1622
- this.current.last_entry_ms = data.last_entry * 1000;
1650
+ this.netdata_last = data.last_entry * 1000;
1651
1652
if(typeof data.points !== 'undefined')
1625
- this.current.points = data.points;
1653
+ this.data_points = data.points;
1654
1655
data.state = this;
1656
}
@@ -1636,11 +1664,11 @@
1664
this.log('STATUS: forced: unset');
1665
1666
this.log('STATUS: requested: ' + (this.current.requested_after_ms / 1000).toString() + ' - ' + (this.current.requested_before_ms / 1000).toString());
1639
- this.log('STATUS: rendered : ' + (this.current.after_ms / 1000).toString() + ' - ' + (this.current.before_ms / 1000).toString());
1640
- this.log('STATUS: points : ' + (this.current.points).toString());
1667
+ this.log('STATUS: rendered : ' + (this.data_after / 1000).toString() + ' - ' + (this.data_before / 1000).toString());
1668
+ this.log('STATUS: points : ' + (this.data_points).toString());
1669
}
1670
1643
- if(data.points === 0) {
1671
+ if(this.data_points === 0) {
1672
this.noData();
1673
return;
1674
}
@@ -1710,7 +1738,7 @@
1738
this.tm.last_autorefreshed = 0;
1739
else {
1740
if(NETDATA.options.current.parallel_refresher === true && NETDATA.options.current.concurrent_refreshes)
1713
- this.tm.last_autorefreshed = Math.round(now / this.current.view_update_every) * this.current.view_update_every;
1741
+ this.tm.last_autorefreshed = Math.round(now / this.data_update_every) * this.data_update_every;
1742
else
1743
this.tm.last_autorefreshed = now;
1744
}
@@ -1757,11 +1785,11 @@
1785
this.showLoading();
1786
1787
if(this.debug === true)
1760
- this.log('updating from ' + this.current.url);
1788
+ this.log('updating from ' + this.data_url);
1789
1790
var self = this;
1791
this.xhr = $.ajax( {
1764
- url: this.current.url,
1792
+ url: this.data_url,
1793
crossDomain: NETDATA.options.crossDomainAjax,
1794
cache: false,
1795
async: true
@@ -1776,7 +1804,7 @@
1804
})
1805
.fail(function() {
1806
self.hideLoading();
1779
- self.error('data download failed for url: ' + self.current.url);
1807
+ self.error('data download failed for url: ' + self.data_url);
1808
})
1809
.always(function() {
1810
self.hideLoading();
@@ -1834,19 +1862,19 @@
1862
this.tm.last_unhidden = 0;
1863
this.tm.last_autorefreshed = 0;
1864
1865
+ this.data = null;
1866
+ this.data_points = 0;
1867
+ this.data_after = 0;
1868
+ this.data_before = 0;
1869
+ this.data_update_every = 0;
1870
+ this.netdata_first = 0;
1871
+ this.netdata_last = 0;
1872
if(this.current !== null) {
1838
- this.current.view_update_every = 0;
1839
- this.current.after_ms = 0;
1840
- this.current.before_ms = 0;
1841
- this.current.points = 0;
1842
- this.current.data = null;
1873
this.current.force_update_at = 0;
1874
this.current.force_after_ms = null;
1875
this.current.force_before_ms = null;
1876
this.current.requested_after_ms = null;
1877
this.current.requested_before_ms = null;
1848
- this.current.first_entry_ms = null;
1849
- this.current.last_entry_ms = null;
1878
}
1879
this.init();
1880
}
@@ -1923,6 +1951,9 @@
1951
1952
chartState.prototype.isVisible = function() {
1953
// this.log('last_visible_check: ' + this.tm.last_visible_check + ', last_page_scroll: ' + NETDATA.options.last_page_scroll);
1954
+
1955
+ // caching - we do not evaluate the charts visibility
1956
+ // if the page has not been scrolled since the last check
1957
if(this.tm.last_visible_check > NETDATA.options.last_page_scroll) {
1958
if(this.debug === true)
1959
this.log('isVisible: ' + this.___isVisible___);
@@ -2052,7 +2083,7 @@
2083
return false;
2084
}
2085
2055
- if(now - this.tm.last_autorefreshed >= this.current.view_update_every) {
2086
+ if(now - this.tm.last_autorefreshed >= this.data_update_every) {
2087
if(this.debug === true)
2088
this.log('canBeAutoRefreshed(): It is time to update me.');
2089
@@ -2077,8 +2108,8 @@
2108
chartState.prototype._defaultsFromDownloadedChart = function(chart) {
2109
this.chart = chart;
2110
this.chart_url = chart.url;
2080
- this.current.view_update_every = chart.update_every * 1000;
2081
- this.current.points = Math.round(this.chartWidth() / this.chartPixelsPerPoint());
2111
+ this.data_update_every = chart.update_every * 1000;
2112
+ this.data_points = Math.round(this.chartWidth() / this.chartPixelsPerPoint());
2113
this.tm.last_info_downloaded = new Date().getTime();
2114
}
2115
@@ -2142,7 +2173,7 @@
2173
this.createChartDOM();
2174
2175
this.tm.last_autorefreshed = new Date().getTime();
2145
- this.current.view_update_every = 30 * 1000;
2176
+ this.data_update_every = 30 * 1000;
2177
}
2178
2179
// show a message in the chart
@@ -3002,8 +3033,8 @@
3033
if(NETDATA.options.debug.dygraph === true)
3034
state.log('dygraphDrawCallback()');
3035
3005
- var first = state.current.data.first_entry * 1000;
3006
- var last = state.current.data.last_entry * 1000;
3036
+ var first = state.data.first_entry * 1000;
3037
+ var last = state.data.last_entry * 1000;
3038
3039
var x_range = dygraph.xAxisRange();
3040
var after = Math.round(x_range[0]);
@@ -3038,8 +3069,8 @@
3069
// the time it thinks is selected is wrong
3070
// here we calculate the time t based on the row number selected
3071
// which is ok
3041
- var t = state.current.after_ms + row * state.current.view_update_every;
3042
- // console.log('row = ' + row + ', x = ' + x + ', t = ' + t + ' ' + ((t === x)?'SAME':'DIFFERENT') + ', rows in db: ' + state.current.data.points + ' visible(x) = ' + state.timeIsVisible(x) + ' visible(t) = ' + state.timeIsVisible(t) + ' r(x) = ' + state.calculateRowForTime(x) + ' r(t) = ' + state.calculateRowForTime(t) + ' range: ' + state.current.after_ms + ' - ' + state.current.before_ms + ' real: ' + state.current.data.after + ' - ' + state.current.data.before + ' every: ' + state.current.view_update_every);
3072
+ var t = state.data_after + row * state.data_update_every;
3073
+ // console.log('row = ' + row + ', x = ' + x + ', t = ' + t + ' ' + ((t === x)?'SAME':'DIFFERENT') + ', rows in db: ' + state.data_points + ' visible(x) = ' + state.timeIsVisible(x) + ' visible(t) = ' + state.timeIsVisible(t) + ' r(x) = ' + state.calculateRowForTime(x) + ' r(t) = ' + state.calculateRowForTime(t) + ' range: ' + state.data_after + ' - ' + state.data_before + ' real: ' + state.data.after + ' - ' + state.data.before + ' every: ' + state.data_update_every);
3074
3075
state.globalSelectionSync(t);
3076
@@ -3223,8 +3254,8 @@
3254
var after = new_x_range[0];
3255
var before = new_x_range[1];
3256
3226
- var first = (state.current.data.first_entry + state.current.data.view_update_every) * 1000;
3227
- var last = (state.current.data.last_entry + state.current.data.view_update_every) * 1000;
3257
+ var first = (state.data.first_entry + state.data.view_update_every) * 1000;
3258
+ var last = (state.data.last_entry + state.data.view_update_every) * 1000;
3259
3260
if(before > last) {
3261
after -= (before - last);
@@ -3280,7 +3311,7 @@
3311
if(state.dygraph_last_touch_move === 0 && state.dygraph_last_touch_page_x !== 0) {
3312
// internal api of dygraphs
3313
var pct = (state.dygraph_last_touch_page_x - (dygraph.plotter_.area.x + state.element.getBoundingClientRect().left)) / dygraph.plotter_.area.w;
3283
- var t = Math.round(state.current.after_ms + (state.current.before_ms - state.current.after_ms) * pct);
3314
+ var t = Math.round(state.data_after + (state.data_before - state.data_after) * pct);
3315
if(NETDATA.dygraphSetSelection(state, t) === true)
3316
state.globalSelectionSync(t);
3317
}
web/index.html
+11
-11
@@ -253,7 +253,7 @@
253
<!-- <script> netdataServer = "http://box:19999"; </script> -->
254
255
<!-- load the dashboard manager - it will do the rest -->
256
- <script type="text/javascript" src="dashboard.js?v5"></script>
256
+ <script type="text/javascript" src="dashboard.js?v6"></script>
257
</head>
258
259
<body data-spy="scroll" data-target="#sidebar">
@@ -1020,8 +1020,8 @@ function prepareScreen(data) {
1020
document.getElementById('footer').style.display = 'block';
1021
1022
1023
- var update_options_visibility = function() {
1024
- // console.log('update_options_visibility');
1023
+ var update_options_modal = function() {
1024
+ // console.log('update_options_modal');
1025
1026
var sync_option = function(option) {
1027
var self = $('#' + option);
@@ -1048,17 +1048,17 @@ function prepareScreen(data) {
1048
$('#concurrent_refreshes_row').show();
1049
}
1050
};
1051
- NETDATA.setOption('set_option_callback', update_options_visibility);
1051
+ NETDATA.setOption('setOptionCallback', update_options_modal);
1052
1053
// handle options changes
1054
- $('#eliminate_zero_dimensions').change(function() { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
1055
- $('#destroy_on_hide').change(function() { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
1056
- $('#parallel_refresher').change(function() { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
1057
- $('#concurrent_refreshes').change(function() { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
1058
- $('#sync_selection').change(function() { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
1059
- $('#sync_pan_and_zoom').change(function() { NETDATA.setOption('sync_pan_and_zoom', $(this).prop('checked')); });
1054
+ $('#eliminate_zero_dimensions').change(function() { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
1055
+ $('#destroy_on_hide').change(function() { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
1056
+ $('#parallel_refresher').change(function() { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
1057
+ $('#concurrent_refreshes').change(function() { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
1058
+ $('#sync_selection').change(function() { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
1059
+ $('#sync_pan_and_zoom').change(function() { NETDATA.setOption('sync_pan_and_zoom', $(this).prop('checked')); });
1060
$('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
1061
- $('#smooth_plot').change(function() { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
1061
+ $('#smooth_plot').change(function() { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
1062
1063
if(document.location.hostname === demo_hostname)
1064
setTimeout(function() {