dashboard optimizations for many charts
Costa Tsaousis (ktsaou) committed
Jun 4, 2017 at 16:51 UTC
bba7f4b443ccbd719ddde08f38d2b22030cb20c6
2 files changed
+550
-592
web/dashboard.js
+536
-578
@@ -381,7 +381,7 @@ var NETDATA = window.NETDATA || {};
381
focus: false,
382
visibility: false,
383
chart_data_url: false,
384
- chart_errors: false, // FIXME: remember to set it to false before merging
384
+ chart_errors: true, // FIXME: remember to set it to false before merging
385
chart_timing: false,
386
chart_calls: false,
387
libraries: false,
@@ -936,6 +936,28 @@ var NETDATA = window.NETDATA || {};
936
}
937
};
938
939
+ // ----------------------------------------------------------------------------------------------------------------
940
+ // element data attributes
941
+
942
+ NETDATA.dataAttribute = function(element, attribute, def) {
943
+ if(element.hasAttribute('data-' + attribute) === true) {
944
+ var data = element.getAttribute('data-' + attribute);
945
+
946
+ if(data === 'true') return true;
947
+ if(data === 'false') return false;
948
+ if(data === 'null') return null;
949
+
950
+ // Only convert to a number if it doesn't change the string
951
+ if(data === +data + '') return +data;
952
+
953
+ if(/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/.test(data))
954
+ return JSON.parse(data);
955
+
956
+ return data;
957
+ }
958
+ else return def;
959
+ };
960
+
961
// ----------------------------------------------------------------------------------------------------------------
962
// commonMin & commonMax
963
@@ -944,14 +966,13 @@ var NETDATA = window.NETDATA || {};
966
latest: {},
967
968
get: function(state) {
947
- if(typeof state.__commonMin === 'undefined') {
969
+ if(typeof state.tmp.__commonMin === 'undefined') {
970
// get the commonMin setting
949
- var self = $(state.element);
950
- state.__commonMin = self.data('common-min') || null;
971
+ state.tmp.__commonMin = NETDATA.dataAttribute(state.element, 'common-min', null);
972
}
973
974
var min = state.data.min;
954
- var name = state.__commonMin;
975
+ var name = state.tmp.__commonMin;
976
977
if(name === null) {
978
// we don't need commonMin
@@ -969,11 +990,11 @@ var NETDATA = window.NETDATA || {};
990
var uuid = state.uuid;
991
if(typeof t[uuid] !== 'undefined') {
992
if(t[uuid] === min) {
972
- //state.log('commonMin ' + state.__commonMin + ' not changed: ' + this.latest[name]);
993
+ //state.log('commonMin ' + state.tmp.__commonMin + ' not changed: ' + this.latest[name]);
994
return this.latest[name];
995
}
996
else if(min < this.latest[name]) {
976
- //state.log('commonMin ' + state.__commonMin + ' increased: ' + min);
997
+ //state.log('commonMin ' + state.tmp.__commonMin + ' increased: ' + min);
998
t[uuid] = min;
999
this.latest[name] = min;
1000
return min;
@@ -988,7 +1009,7 @@ var NETDATA = window.NETDATA || {};
1009
for(var i in t)
1010
if(t.hasOwnProperty(i) && t[i] < m) m = t[i];
1011
991
- //state.log('commonMin ' + state.__commonMin + ' updated: ' + m);
1012
+ //state.log('commonMin ' + state.tmp.__commonMin + ' updated: ' + m);
1013
this.latest[name] = m;
1014
return m;
1015
}
@@ -999,14 +1020,13 @@ var NETDATA = window.NETDATA || {};
1020
latest: {},
1021
1022
get: function(state) {
1002
- if(typeof state.__commonMax === 'undefined') {
1023
+ if(typeof state.tmp.__commonMax === 'undefined') {
1024
// get the commonMax setting
1004
- var self = $(state.element);
1005
- state.__commonMax = self.data('common-max') || null;
1025
+ state.tmp.__commonMax = NETDATA.dataAttribute(state.element, 'common-max', null);
1026
}
1027
1028
var max = state.data.max;
1009
- var name = state.__commonMax;
1029
+ var name = state.tmp.__commonMax;
1030
1031
if(name === null) {
1032
// we don't need commonMax
@@ -1024,11 +1044,11 @@ var NETDATA = window.NETDATA || {};
1044
var uuid = state.uuid;
1045
if(typeof t[uuid] !== 'undefined') {
1046
if(t[uuid] === max) {
1027
- //state.log('commonMax ' + state.__commonMax + ' not changed: ' + this.latest[name]);
1047
+ //state.log('commonMax ' + state.tmp.__commonMax + ' not changed: ' + this.latest[name]);
1048
return this.latest[name];
1049
}
1050
else if(max > this.latest[name]) {
1031
- //state.log('commonMax ' + state.__commonMax + ' increased: ' + max);
1051
+ //state.log('commonMax ' + state.tmp.__commonMax + ' increased: ' + max);
1052
t[uuid] = max;
1053
this.latest[name] = max;
1054
return max;
@@ -1043,7 +1063,7 @@ var NETDATA = window.NETDATA || {};
1063
for(var i in t)
1064
if(t.hasOwnProperty(i) && t[i] > m) m = t[i];
1065
1046
- //state.log('commonMax ' + state.__commonMax + ' updated: ' + m);
1066
+ //state.log('commonMax ' + state.tmp.__commonMax + ' updated: ' + m);
1067
this.latest[name] = m;
1068
return m;
1069
}
@@ -1440,7 +1460,6 @@ var NETDATA = window.NETDATA || {};
1460
// Our state object, where all per-chart values are stored
1461
1462
var chartState = function(element) {
1443
- var self = $(element);
1463
this.element = element;
1464
1465
// IMPORTANT:
@@ -1464,18 +1483,27 @@ var NETDATA = window.NETDATA || {};
1483
}
1484
};
1485
1486
+ // console logging
1487
+ this.log = function(msg) {
1488
+ console.log(this.id + ' (' + this.library_name + ' ' + this.uuid + '): ' + msg);
1489
+ };
1490
+
1491
// GUID - a unique identifier for the chart
1492
this.uuid = NETDATA.guid();
1493
1494
// string - the name of chart
1471
- this.id = self.data('netdata');
1495
+ this.id = NETDATA.dataAttribute(this.element, 'netdata', null);
1496
+ if(this.id === null) {
1497
+ error("netdata elements need data-netdata");
1498
+ return;
1499
+ }
1500
1501
// string - the key for localStorage settings
1474
- this.settings_id = self.data('id') || null;
1502
+ this.settings_id = NETDATA.dataAttribute(this.element, 'id', null);
1503
1504
// the user given dimensions of the element
1477
- this.width = self.data('width') || NETDATA.chartDefaults.width;
1478
- this.height = self.data('height') || NETDATA.chartDefaults.height;
1505
+ this.width = NETDATA.dataAttribute(this.element, 'width', NETDATA.chartDefaults.width);
1506
+ this.height = NETDATA.dataAttribute(this.element, 'height', NETDATA.chartDefaults.height);
1507
this.height_original = this.height;
1508
1509
if(this.settings_id !== null) {
@@ -1489,7 +1517,7 @@ var NETDATA = window.NETDATA || {};
1517
}
1518
1519
// string - the netdata server URL, without any path
1492
- this.host = self.data('host') || NETDATA.chartDefaults.host;
1520
+ this.host = NETDATA.dataAttribute(this.element, 'host', NETDATA.chartDefaults.host);
1521
1522
// make sure the host does not end with /
1523
// all netdata API requests use absolute paths
@@ -1497,21 +1525,21 @@ var NETDATA = window.NETDATA || {};
1525
this.host = this.host.substring(0, this.host.length - 1);
1526
1527
// string - the grouping method requested by the user
1500
- this.method = self.data('method') || NETDATA.chartDefaults.method;
1528
+ this.method = NETDATA.dataAttribute(this.element, 'method', NETDATA.chartDefaults.method);
1529
1530
// the time-range requested by the user
1503
- this.after = self.data('after') || NETDATA.chartDefaults.after;
1504
- this.before = self.data('before') || NETDATA.chartDefaults.before;
1531
+ this.after = NETDATA.dataAttribute(this.element, 'after', NETDATA.chartDefaults.after);
1532
+ this.before = NETDATA.dataAttribute(this.element, 'before', NETDATA.chartDefaults.before);
1533
1534
// the pixels per point requested by the user
1507
- this.pixels_per_point = self.data('pixels-per-point') || 1;
1508
- this.points = self.data('points') || null;
1535
+ this.pixels_per_point = NETDATA.dataAttribute(this.element, 'pixels-per-point', 1);
1536
+ this.points = NETDATA.dataAttribute(this.element, 'points', null);
1537
1538
// the dimensions requested by the user
1511
- this.dimensions = self.data('dimensions') || null;
1539
+ this.dimensions = NETDATA.dataAttribute(this.element, 'dimensions', null);
1540
1541
// the chart library requested by the user
1514
- this.library_name = self.data('chart-library') || NETDATA.chartDefaults.library;
1542
+ this.library_name = NETDATA.dataAttribute(this.element, 'chart-library', NETDATA.chartDefaults.library);
1543
1544
// how many retries we have made to load chart data from the server
1545
this.retries_on_data_failures = 0;
@@ -1545,16 +1573,18 @@ var NETDATA = window.NETDATA || {};
1573
this.chart_url = null; // string - the url to download chart info
1574
this.chart = null; // object - the chart as downloaded from the server
1575
1548
- this.title = self.data('title') || null; // the title of the chart
1549
- this.units = self.data('units') || null; // the units of the chart dimensions
1550
- this.append_options = self.data('append-options') || null; // additional options to pass to netdata
1551
- this.override_options = self.data('override-options') || null; // override options to pass to netdata
1576
+ this.title = NETDATA.dataAttribute(this.element, 'title', null); // the title of the chart
1577
+ this.units = NETDATA.dataAttribute(this.element, 'units', null); // the units of the chart dimensions
1578
+ this.append_options = NETDATA.dataAttribute(this.element, 'append-options', null); // additional options to pass to netdata
1579
+ this.override_options = NETDATA.dataAttribute(this.element, 'override-options', null); // override options to pass to netdata
1580
1581
+ this.chart_created = false; // boolean - true when the chart has been created
1582
+ this.dom_created = false; // boolean - true when the DOM has been created
1583
this.running = false; // boolean - true when the chart is being refreshed now
1584
this.enabled = true; // boolean - is the chart enabled for refresh?
1585
this.paused = false; // boolean - is the chart paused for any reason?
1586
this.selected = false; // boolean - is the chart shown a selection?
1557
- this.debug = self.data('debug') === true; // boolean - console.log() debug info about this chart
1587
+ this.debug = NETDATA.dataAttribute(this.element, 'debug', false) === true; // boolean - console.log() debug info about this chart
1588
1589
this.netdata_first = 0; // milliseconds - the first timestamp in netdata
1590
this.netdata_last = 0; // milliseconds - the last timestamp in netdata
@@ -1564,11 +1594,14 @@ var NETDATA = window.NETDATA || {};
1594
this.view_after = 0;
1595
this.view_before = 0;
1596
1597
+ this.tmp = {}; // members that can be destroyed to save memory
1598
+
1599
this.value_decimal_detail = -1;
1568
- var d = self.data('decimal-digits');
1569
- if(typeof d === 'number') {
1600
+ var d = NETDATA.dataAttribute(this.element, 'decimal-digits', -1);
1601
+ if(typeof d === 'number')
1602
this.value_decimal_detail = d;
1571
- }
1603
+ else if(typeof d !== 'undefined')
1604
+ this.log('ignoring decimal-digits value: ' + d.toString());
1605
1606
this.auto = {
1607
name: 'auto',
@@ -1599,25 +1632,25 @@ var NETDATA = window.NETDATA || {};
1632
// check the requested library is available
1633
// we don't initialize it here - it will be initialized when
1634
// this chart will be first used
1602
- if(typeof NETDATA.chartLibraries[that.library_name] === 'undefined') {
1603
- NETDATA.error(402, that.library_name);
1604
- error('chart library "' + that.library_name + '" is not found');
1635
+ if(typeof NETDATA.chartLibraries[this.library_name] === 'undefined') {
1636
+ NETDATA.error(402, this.library_name);
1637
+ error('chart library "' + this.library_name + '" is not found');
1638
return;
1639
}
1607
- else if(NETDATA.chartLibraries[that.library_name].enabled === false) {
1608
- NETDATA.error(403, that.library_name);
1609
- error('chart library "' + that.library_name + '" is not enabled');
1640
+ else if(NETDATA.chartLibraries[this.library_name].enabled === false) {
1641
+ NETDATA.error(403, this.library_name);
1642
+ error('chart library "' + this.library_name + '" is not enabled');
1643
return;
1644
}
1645
else
1613
- that.library = NETDATA.chartLibraries[that.library_name];
1646
+ this.library = NETDATA.chartLibraries[this.library_name];
1647
1648
// milliseconds - the time the last refresh took
1649
this.refresh_dt_ms = 0;
1650
1651
// if we need to report the rendering speed
1652
// find the element that needs to be updated
1620
- var refresh_dt_element_name = self.data('dt-element-name') || null; // string - the element to print refresh_dt_ms
1653
+ var refresh_dt_element_name = NETDATA.dataAttribute(this.element, 'dt-element-name', null); // string - the element to print refresh_dt_ms
1654
1655
if(refresh_dt_element_name !== null) {
1656
this.refresh_dt_element = document.getElementById(refresh_dt_element_name) || null;
@@ -1632,43 +1665,32 @@ var NETDATA = window.NETDATA || {};
1665
// ============================================================================================================
1666
// PRIVATE FUNCTIONS
1667
1635
- var createDOM = function() {
1668
+ var destroyDOM = function() {
1669
if(that.enabled === false) return;
1670
1638
- if(that.element_message !== null) that.element_message.innerHTML = '';
1639
- if(that.element_legend !== null) that.element_legend.innerHTML = '';
1640
- if(that.element_chart !== null) that.element_chart.innerHTML = '';
1671
+ if(that.debug === true)
1672
+ that.log('destroyDOM()');
1673
1674
+ // that.element.className = 'netdata-message icon';
1675
+ // that.element.innerHTML = '<i class="fa fa-refresh"></i> netdata';
1676
that.element.innerHTML = '';
1677
+ that.element_message = null;
1678
+ that.element_legend = null;
1679
+ that.element_chart = null;
1680
+ that.element_legend_childs.series = null;
1681
1644
- that.element_message = document.createElement('div');
1645
- that.element_message.className = 'netdata-message icon hidden';
1646
- that.element.appendChild(that.element_message);
1647
-
1648
- that.element_chart = document.createElement('div');
1649
- that.element_chart.id = that.library_name + '-' + that.uuid + '-chart';
1650
- that.element.appendChild(that.element_chart);
1651
-
1652
- if(that.hasLegend() === true) {
1653
- that.element.className = "netdata-container-with-legend";
1654
- that.element_chart.className = 'netdata-chart-with-legend-right netdata-' + that.library_name + '-chart-with-legend-right';
1655
-
1656
- that.element_legend = document.createElement('div');
1657
- that.element_legend.className = 'netdata-chart-legend netdata-' + that.library_name + '-legend';
1658
- that.element.appendChild(that.element_legend);
1659
- }
1660
- else {
1661
- that.element.className = "netdata-container";
1662
- that.element_chart.className = ' netdata-chart netdata-' + that.library_name + '-chart';
1682
+ that.chart_created = false;
1683
+ that.dom_created = false;
1684
1664
- that.element_legend = null;
1665
- }
1666
- that.element_legend_childs.series = null;
1685
+ that.tm.last_resized = 0;
1686
+ that.tm.last_dom_created = 0;
1687
+ };
1688
1689
+ var resizeDOM = function() {
1690
if(typeof(that.width) === 'string')
1669
- $(that.element).css('width', that.width);
1691
+ that.element.style.width = that.width;
1692
else if(typeof(that.width) === 'number')
1671
- $(that.element).css('width', that.width + 'px');
1693
+ that.element.style.width = that.width.toString() + 'px';
1694
1695
if(typeof(that.library.aspect_ratio) === 'undefined') {
1696
if(typeof(that.height) === 'string')
@@ -1686,27 +1708,58 @@ var NETDATA = window.NETDATA || {};
1708
else
1709
that.element.style.height = (w * that.library.aspect_ratio / 100).toString() + 'px';
1710
}
1711
+ };
1712
1690
- if(NETDATA.chartDefaults.min_width !== null)
1691
- $(that.element).css('min-width', NETDATA.chartDefaults.min_width);
1713
+ var createDOM = function() {
1714
+ if(that.enabled === false) return;
1715
+
1716
+ destroyDOM();
1717
+
1718
+ if(that.debug === true)
1719
+ that.log('createDOM()');
1720
+
1721
+ if(that.hasLegend() === true)
1722
+ that.element.className = "netdata-container-with-legend";
1723
+ else
1724
+ that.element.className = "netdata-container";
1725
+
1726
+ that.element_message = document.createElement('div');
1727
+ that.element_message.className = 'netdata-message icon hidden';
1728
+ that.element.appendChild(that.element_message);
1729
1693
- that.tm.last_dom_created = Date.now();
1730
+ that.dom_created = true;
1731
+ that.chart_created = false;
1732
+
1733
+ that.tm.last_dom_created =
1734
+ that.tm.last_resized = Date.now();
1735
1736
+ resizeDOM();
1737
showLoading();
1738
};
1739
1740
+ var initDOM = function() {
1741
+ that.element.className = "netdata-container";
1742
+
1743
+ if(NETDATA.chartDefaults.min_width !== null)
1744
+ that.element.style.min_width = NETDATA.chartDefaults.min_width;
1745
+
1746
+ resizeDOM();
1747
+ };
1748
+
1749
/* init() private
1750
* initialize state variables
1751
* destroy all (possibly) created state elements
1752
* create the basic DOM for a chart
1753
*/
1703
- var init = function() {
1754
+ var init = function(force) {
1755
if(that.enabled === false) return;
1756
+ if(typeof(force) === 'undefined') force = false;
1757
1758
that.paused = false;
1759
that.selected = false;
1760
1761
that.chart_created = false; // boolean - is the library.create() been called?
1762
+ that.dom_created = false; // boolean - is the chart DOM been created?
1763
that.updates_counter = 0; // numeric - the number of refreshes made so far
1764
that.updates_since_last_unhide = 0; // numeric - the number of refreshes made since the last time the chart was unhidden
1765
that.updates_since_last_creation = 0; // numeric - the number of refreshes made since the last time the chart was created
@@ -1735,10 +1788,13 @@ var NETDATA = window.NETDATA || {};
1788
that.data_before = 0; // milliseconds - the last timestamp of the data
1789
that.data_update_every = 0; // milliseconds - the frequency to update the data
1790
1738
- that.tm.last_initialized = Date.now();
1739
- createDOM();
1791
+ that.tmp = {};
1792
1793
+ that.tm.last_initialized = Date.now();
1794
that.setMode('auto');
1795
+
1796
+ if(that.isVisible(true) || force === true)
1797
+ createDOM();
1798
};
1799
1800
var maxMessageFontSize = function() {
@@ -1779,12 +1835,12 @@ var NETDATA = window.NETDATA || {};
1835
that.element_message.innerHTML = icon;
1836
maxMessageFontSize();
1837
$(that.element_message).removeClass('hidden');
1782
- that.___messageHidden___ = undefined;
1838
+ that.tmp.___messageHidden___ = undefined;
1839
};
1840
1841
var hideMessage = function() {
1786
- if(typeof that.___messageHidden___ === 'undefined') {
1787
- that.___messageHidden___ = true;
1842
+ if(typeof that.tmp.___messageHidden___ === 'undefined') {
1843
+ that.tmp.___messageHidden___ = true;
1844
$(that.element_message).addClass('hidden');
1845
}
1846
};
@@ -1812,7 +1868,7 @@ var NETDATA = window.NETDATA || {};
1868
};
1869
1870
var isHidden = function() {
1815
- return (typeof that.___chartIsHidden___ !== 'undefined');
1871
+ return (typeof that.tmp.___chartIsHidden___ !== 'undefined');
1872
};
1873
1874
// hide the chart, when it is not visible - called from isVisible()
@@ -1823,7 +1879,7 @@ var NETDATA = window.NETDATA || {};
1879
if(that.chart_created === true) {
1880
if(NETDATA.options.current.destroy_on_hide === true) {
1881
// we should destroy it
1826
- init();
1882
+ init(true);
1883
}
1884
else {
1885
showRendering();
@@ -1842,20 +1898,20 @@ var NETDATA = window.NETDATA || {};
1898
}
1899
}
1900
1845
- that.___chartIsHidden___ = true;
1901
+ that.tmp.___chartIsHidden___ = true;
1902
};
1903
1904
// unhide the chart, when it is visible - called from isVisible()
1905
var unhideChart = function() {
1906
if(isHidden() === false) return;
1907
1852
- that.___chartIsHidden___ = undefined;
1908
+ that.tmp.___chartIsHidden___ = undefined;
1909
that.updates_since_last_unhide = 0;
1910
1911
if(that.chart_created === false) {
1912
// we need to re-initialize it, to show our background
1913
// logo in bootstrap tabs, until the chart loads
1858
- init();
1914
+ init(true);
1915
}
1916
else {
1917
that.tm.last_unhidden = Date.now();
@@ -1937,7 +1993,7 @@ var NETDATA = window.NETDATA || {};
1993
if(that.chart_created === false) return;
1994
1995
if(that.needsRecreation()) {
1940
- init();
1996
+ init(true);
1997
}
1998
else if(typeof that.library.resize === 'function') {
1999
that.library.resize(that);
@@ -2109,7 +2165,7 @@ var NETDATA = window.NETDATA || {};
2165
// that.data_update_every = 30 * 1000;
2166
//that.element_chart.style.display = 'none';
2167
//if(that.element_legend !== null) that.element_legend.style.display = 'none';
2112
- //that.___chartIsHidden___ = true;
2168
+ //that.tmp.___chartIsHidden___ = true;
2169
};
2170
2171
// ============================================================================================================
@@ -2313,11 +2369,6 @@ var NETDATA = window.NETDATA || {};
2369
2370
// ----------------------------------------------------------------------------------------------------------------
2371
2316
- // console logging
2317
- this.log = function(msg) {
2318
- console.log(this.id + ' (' + this.library_name + ' ' + this.uuid + '): ' + msg);
2319
- };
2320
-
2372
this.pauseChart = function() {
2373
if(this.paused === false) {
2374
if(this.debug === true)
@@ -2572,23 +2623,23 @@ var NETDATA = window.NETDATA || {};
2623
};
2624
2625
this.__legendSetDateString = function(date) {
2575
- if(date !== this.__last_shown_legend_date) {
2626
+ if(date !== this.tmp.__last_shown_legend_date) {
2627
this.element_legend_childs.title_date.innerText = date;
2577
- this.__last_shown_legend_date = date;
2628
+ this.tmp.__last_shown_legend_date = date;
2629
}
2630
};
2631
2632
this.__legendSetTimeString = function(time) {
2582
- if(time !== this.__last_shown_legend_time) {
2633
+ if(time !== this.tmp.__last_shown_legend_time) {
2634
this.element_legend_childs.title_time.innerText = time;
2584
- this.__last_shown_legend_time = time;
2635
+ this.tmp.__last_shown_legend_time = time;
2636
}
2637
};
2638
2639
this.__legendSetUnitsString = function(units) {
2589
- if(units !== this.__last_shown_legend_units) {
2640
+ if(units !== this.tmp.__last_shown_legend_units) {
2641
this.element_legend_childs.title_units.innerText = units;
2591
- this.__last_shown_legend_units = units;
2642
+ this.tmp.__last_shown_legend_units = units;
2643
}
2644
};
2645
@@ -2683,7 +2734,7 @@ var NETDATA = window.NETDATA || {};
2734
};
2735
2736
// this should be called just ONCE per dimension per chart
2686
- this._chartDimensionColor = function(label) {
2737
+ this.__chartDimensionColor = function(label) {
2738
this.chartPrepareColorPalette();
2739
2740
if(typeof this.colors_assigned[label] === 'undefined') {
@@ -2737,7 +2788,7 @@ var NETDATA = window.NETDATA || {};
2788
this.colors_available.unshift(NETDATA.themes.current.colors[len]);
2789
2790
// add the user supplied colors
2740
- var c = $(this.element).data('colors');
2791
+ var c = NETDATA.dataAttribute(this.element, 'colors', undefined);
2792
// this.log('read colors: ' + c);
2793
if(typeof c === 'string' && c.length > 0) {
2794
c = c.split(' ');
@@ -2842,7 +2893,7 @@ var NETDATA = window.NETDATA || {};
2893
keys = Object.keys(this.chart.dimensions);
2894
len = keys.length;
2895
for(i = 0; i < len ;i++)
2845
- this._chartDimensionColor(this.chart.dimensions[keys[i]].name);
2896
+ this.__chartDimensionColor(this.chart.dimensions[keys[i]].name);
2897
}
2898
}
2899
// we will re-generate the colors for the chart
@@ -2856,12 +2907,12 @@ var NETDATA = window.NETDATA || {};
2907
this.dimensions_visibility.invalidateAll();
2908
2909
var genLabel = function(state, parent, dim, name, count) {
2859
- var color = state._chartDimensionColor(name);
2910
+ var color = state.__chartDimensionColor(name);
2911
2912
var user_element = null;
2862
- var user_id = self.data('show-value-of-' + name.toLowerCase() + '-at') || null;
2913
+ var user_id = NETDATA.dataAttribute(state.element, 'show-value-of-' + name.toLowerCase() + '-at', null);
2914
if(user_id === null)
2864
- user_id = self.data('show-value-of-' + dim.toLowerCase() + '-at') || null;
2915
+ user_id = NETDATA.dataAttribute(state.element, 'show-value-of-' + dim.toLowerCase() + '-at', null);
2916
if(user_id !== null) {
2917
user_element = document.getElementById(user_id) || null;
2918
if (user_element === null)
@@ -2900,7 +2951,26 @@ var NETDATA = window.NETDATA || {};
2951
2952
var content = document.createElement('div');
2953
2903
- if(this.hasLegend()) {
2954
+ if(this.element_chart === null) {
2955
+ this.element_chart = document.createElement('div');
2956
+ this.element_chart.id = this.library_name + '-' + this.uuid + '-chart';
2957
+ this.element.appendChild(this.element_chart);
2958
+
2959
+ if(this.hasLegend() === true)
2960
+ this.element_chart.className = 'netdata-chart-with-legend-right netdata-' + this.library_name + '-chart-with-legend-right';
2961
+ else
2962
+ this.element_chart.className = ' netdata-chart netdata-' + this.library_name + '-chart';
2963
+ }
2964
+
2965
+ if(this.hasLegend() === true) {
2966
+ if(this.element_legend === null) {
2967
+ this.element_legend = document.createElement('div');
2968
+ this.element_legend.className = 'netdata-chart-legend netdata-' + this.library_name + '-legend';
2969
+ this.element.appendChild(this.element_legend);
2970
+ }
2971
+ else
2972
+ this.element_legend.innerHTML = '';
2973
+
2974
this.element_legend_childs = {
2975
content: content,
2976
resize_handler: document.createElement('div'),
@@ -2918,10 +2988,7 @@ var NETDATA = window.NETDATA || {};
2988
series: {}
2989
};
2990
2921
- this.element_legend.innerHTML = '';
2922
-
2991
if(this.library.toolboxPanAndZoom !== null) {
2924
-
2992
var get_pan_and_zoom_step = function(event) {
2993
if (event.ctrlKey)
2994
return NETDATA.options.current.pan_and_zoom_factor * NETDATA.options.current.pan_and_zoom_factor_multiplier_control;
@@ -3099,19 +3166,19 @@ var NETDATA = window.NETDATA || {};
3166
3167
this.element_legend_childs.title_date.className += " netdata-legend-title-date";
3168
this.element_legend.appendChild(this.element_legend_childs.title_date);
3102
- this.__last_shown_legend_date = undefined;
3169
+ this.tmp.__last_shown_legend_date = undefined;
3170
3171
this.element_legend.appendChild(document.createElement('br'));
3172
3173
this.element_legend_childs.title_time.className += " netdata-legend-title-time";
3174
this.element_legend.appendChild(this.element_legend_childs.title_time);
3108
- this.__last_shown_legend_time = undefined;
3175
+ this.tmp.__last_shown_legend_time = undefined;
3176
3177
this.element_legend.appendChild(document.createElement('br'));
3178
3179
this.element_legend_childs.title_units.className += " netdata-legend-title-units";
3180
this.element_legend.appendChild(this.element_legend_childs.title_units);
3114
- this.__last_shown_legend_units = undefined;
3181
+ this.tmp.__last_shown_legend_units = undefined;
3182
3183
this.element_legend.appendChild(document.createElement('br'));
3184
@@ -3205,16 +3272,16 @@ var NETDATA = window.NETDATA || {};
3272
};
3273
3274
this.hasLegend = function() {
3208
- if(typeof this.___hasLegendCache___ !== 'undefined')
3209
- return this.___hasLegendCache___;
3275
+ if(typeof this.tmp.___hasLegendCache___ !== 'undefined')
3276
+ return this.tmp.___hasLegendCache___;
3277
3278
var leg = false;
3279
if(this.library && this.library.legend(this) === 'right-side') {
3213
- var legend = $(this.element).data('legend') || 'yes';
3280
+ var legend = NETDATA.dataAttribute(this.element, 'legend', 'yes');
3281
if(legend === 'yes') leg = true;
3282
}
3283
3217
- this.___hasLegendCache___ = leg;
3284
+ this.tmp.___hasLegendCache___ = leg;
3285
return leg;
3286
};
3287
@@ -3248,12 +3315,17 @@ var NETDATA = window.NETDATA || {};
3315
};
3316
3317
this.needsRecreation = function() {
3251
- return (
3318
+ var ret = (
3319
this.chart_created === true
3320
&& this.library
3321
&& this.library.autoresize() === false
3322
&& this.tm.last_resized < NETDATA.options.last_page_resize
3323
);
3324
+
3325
+ if(this.debug === true)
3326
+ this.log('needsRecreation(): ' + ret.toString() + ', chart_created = ' + this.chart_created.toString());
3327
+
3328
+ return ret;
3329
};
3330
3331
this.chartURL = function() {
@@ -3404,7 +3476,7 @@ var NETDATA = window.NETDATA || {};
3476
if(this.debug === true)
3477
this.log('max updates of ' + this.updates_since_last_creation.toString() + ' reached. Forcing re-generation.');
3478
3407
- init();
3479
+ init(true);
3480
return;
3481
}
3482
@@ -3456,7 +3528,7 @@ var NETDATA = window.NETDATA || {};
3528
3529
this.updateChart = function(callback) {
3530
if(this.debug === true)
3459
- this.log('updateChart() called.');
3531
+ this.log('updateChart()');
3532
3533
if(this._updating === true) {
3534
if(this.debug === true)
@@ -3487,6 +3559,9 @@ var NETDATA = window.NETDATA || {};
3559
return;
3560
}
3561
3562
+ if(that.dom_created !== true)
3563
+ createDOM();
3564
+
3565
if(this.chart === null)
3566
return this.getChart(function() {
3567
return that.updateChart(callback);
@@ -3568,24 +3643,14 @@ var NETDATA = window.NETDATA || {};
3643
});
3644
};
3645
3571
- this.isVisible = function(nocache) {
3572
- if(typeof nocache === 'undefined')
3573
- nocache = false;
3574
-
3575
- // this.log('last_visible_check: ' + this.tm.last_visible_check + ', last_page_scroll: ' + NETDATA.options.last_page_scroll);
3576
-
3577
- // caching - we do not evaluate the charts visibility
3578
- // if the page has not been scrolled since the last check
3579
- if(nocache === false && this.tm.last_visible_check > NETDATA.options.last_page_scroll)
3580
- return this.___isVisible___;
3581
-
3646
+ var __isVisible = function() {
3647
// tolerance is the number of pixels a chart can be off-screen
3648
// to consider it as visible and refresh it as if was visible
3649
var tolerance = 0;
3650
3586
- this.tm.last_visible_check = Date.now();
3651
+ that.tm.last_visible_check = Date.now();
3652
3588
- var rect = this.element.getBoundingClientRect();
3653
+ var rect = that.element.getBoundingClientRect();
3654
3655
var screenTop = window.scrollY;
3656
var screenBottom = screenTop + window.innerHeight;
@@ -3593,30 +3658,23 @@ var NETDATA = window.NETDATA || {};
3658
var chartTop = rect.top + screenTop;
3659
var chartBottom = chartTop + rect.height;
3660
3596
- if(rect.width === 0 || rect.height === 0) {
3597
- hideChart();
3598
- this.___isVisible___ = false;
3599
- return this.___isVisible___;
3600
- }
3601
-
3602
- if(chartBottom + tolerance < screenTop || chartTop - tolerance > screenBottom) {
3603
- // the chart is too far
3604
-
3605
- // this.log('nocache: ' + nocache.toString() + ', screen top: ' + screenTop.toString() + ', bottom: ' + screenBottom.toString() + ', chart top: ' + chartTop.toString() + ', bottom: ' + chartBottom.toString() + ', OFF SCREEN');
3606
-
3607
- hideChart();
3608
- this.___isVisible___ = false;
3609
- return this.___isVisible___;
3610
- }
3611
- else {
3612
- // the chart is inside or very close
3661
+ return !(rect.width === 0 || rect.height === 0 || chartBottom + tolerance < screenTop || chartTop - tolerance > screenBottom);
3662
+ };
3663
3614
- // this.log('nocache: ' + nocache.toString() + ', screen top: ' + screenTop.toString() + ', bottom: ' + screenBottom.toString() + ', chart top: ' + chartTop.toString() + ', bottom: ' + chartBottom.toString() + ', VISIBLE');
3664
+ this.isVisible = function(nocache) {
3665
+ // this.log('last_visible_check: ' + this.tm.last_visible_check + ', last_page_scroll: ' + NETDATA.options.last_page_scroll);
3666
3616
- unhideChart();
3617
- this.___isVisible___ = true;
3618
- return this.___isVisible___;
3619
- }
3667
+ // caching - we do not evaluate the charts visibility
3668
+ // if the page has not been scrolled since the last check
3669
+ if((typeof nocache === 'undefined' || nocache === false)
3670
+ && typeof this.tmp.___isVisible___ !== 'undefined'
3671
+ && this.tm.last_visible_check > NETDATA.options.last_page_scroll)
3672
+ return this.tmp.___isVisible___;
3673
+
3674
+ this.tmp.___isVisible___ = __isVisible();
3675
+ if(this.tmp.___isVisible___ === true) unhideChart();
3676
+ else hideChart();
3677
+ return this.tmp.___isVisible___;
3678
};
3679
3680
this.isAutoRefreshable = function() {
@@ -3740,7 +3798,7 @@ var NETDATA = window.NETDATA || {};
3798
}
3799
};
3800
3743
- this._defaultsFromDownloadedChart = function(chart) {
3801
+ this.__defaultsFromDownloadedChart = function(chart) {
3802
this.chart = chart;
3803
this.chart_url = chart.url;
3804
this.data_update_every = chart.update_every * 1000;
@@ -3758,7 +3816,7 @@ var NETDATA = window.NETDATA || {};
3816
this.getChart = function(callback) {
3817
this.chart = NETDATA.chartRegistry.get(this.host, this.id);
3818
if(this.chart) {
3761
- this._defaultsFromDownloadedChart(this.chart);
3819
+ this.__defaultsFromDownloadedChart(this.chart);
3820
3821
if(typeof callback === 'function')
3822
return callback();
@@ -3777,7 +3835,7 @@ var NETDATA = window.NETDATA || {};
3835
})
3836
.done(function(chart) {
3837
chart.url = that.chart_url;
3780
- that._defaultsFromDownloadedChart(chart);
3838
+ that.__defaultsFromDownloadedChart(chart);
3839
NETDATA.chartRegistry.add(that.host, that.id, chart);
3840
})
3841
.fail(function() {
@@ -3794,6 +3852,7 @@ var NETDATA = window.NETDATA || {};
3852
// ============================================================================================================
3853
// INITIALIZATION
3854
3855
+ initDOM();
3856
init();
3857
};
3858
@@ -3823,12 +3882,7 @@ var NETDATA = window.NETDATA || {};
3882
3883
// get or create a chart state, given a DOM element
3884
NETDATA.chartState = function(element) {
3826
- var state = $(element).data('netdata-state-object') || null;
3827
- if(state === null) {
3828
- state = new chartState(element);
3829
- $(element).data('netdata-state-object', state);
3830
- }
3831
- return state;
3885
+ return new chartState(element);
3886
};
3887
3888
// ----------------------------------------------------------------------------------------------------------------
@@ -4196,10 +4250,9 @@ var NETDATA = window.NETDATA || {};
4250
state.peity_instance = document.createElement('div');
4251
state.element_chart.appendChild(state.peity_instance);
4252
4199
- var self = $(state.element);
4253
state.peity_options = {
4254
stroke: NETDATA.themes.current.foreground,
4202
- strokeWidth: self.data('peity-strokewidth') || 1,
4255
+ strokeWidth: NETDATA.dataAttribute(state.element, 'peity-strokewidth', 1),
4256
width: state.chartWidth(),
4257
height: state.chartHeight(),
4258
fill: NETDATA.themes.current.foreground
@@ -4248,52 +4301,51 @@ var NETDATA = window.NETDATA || {};
4301
};
4302
4303
NETDATA.sparklineChartCreate = function(state, data) {
4251
- var self = $(state.element);
4252
- var type = self.data('sparkline-type') || 'line';
4253
- var lineColor = self.data('sparkline-linecolor') || state.chartCustomColors()[0];
4254
- var fillColor = self.data('sparkline-fillcolor') || ((state.chart.chart_type === 'line')?NETDATA.themes.current.background:NETDATA.colorLuminance(lineColor, NETDATA.chartDefaults.fill_luminance));
4255
- var chartRangeMin = self.data('sparkline-chartrangemin') || undefined;
4256
- var chartRangeMax = self.data('sparkline-chartrangemax') || undefined;
4257
- var composite = self.data('sparkline-composite') || undefined;
4258
- var enableTagOptions = self.data('sparkline-enabletagoptions') || undefined;
4259
- var tagOptionPrefix = self.data('sparkline-tagoptionprefix') || undefined;
4260
- var tagValuesAttribute = self.data('sparkline-tagvaluesattribute') || undefined;
4261
- var disableHiddenCheck = self.data('sparkline-disablehiddencheck') || undefined;
4262
- var defaultPixelsPerValue = self.data('sparkline-defaultpixelspervalue') || undefined;
4263
- var spotColor = self.data('sparkline-spotcolor') || undefined;
4264
- var minSpotColor = self.data('sparkline-minspotcolor') || undefined;
4265
- var maxSpotColor = self.data('sparkline-maxspotcolor') || undefined;
4266
- var spotRadius = self.data('sparkline-spotradius') || undefined;
4267
- var valueSpots = self.data('sparkline-valuespots') || undefined;
4268
- var highlightSpotColor = self.data('sparkline-highlightspotcolor') || undefined;
4269
- var highlightLineColor = self.data('sparkline-highlightlinecolor') || undefined;
4270
- var lineWidth = self.data('sparkline-linewidth') || undefined;
4271
- var normalRangeMin = self.data('sparkline-normalrangemin') || undefined;
4272
- var normalRangeMax = self.data('sparkline-normalrangemax') || undefined;
4273
- var drawNormalOnTop = self.data('sparkline-drawnormalontop') || undefined;
4274
- var xvalues = self.data('sparkline-xvalues') || undefined;
4275
- var chartRangeClip = self.data('sparkline-chartrangeclip') || undefined;
4276
- var chartRangeMinX = self.data('sparkline-chartrangeminx') || undefined;
4277
- var chartRangeMaxX = self.data('sparkline-chartrangemaxx') || undefined;
4278
- var disableInteraction = self.data('sparkline-disableinteraction') || false;
4279
- var disableTooltips = self.data('sparkline-disabletooltips') || false;
4280
- var disableHighlight = self.data('sparkline-disablehighlight') || false;
4281
- var highlightLighten = self.data('sparkline-highlightlighten') || 1.4;
4282
- var highlightColor = self.data('sparkline-highlightcolor') || undefined;
4283
- var tooltipContainer = self.data('sparkline-tooltipcontainer') || undefined;
4284
- var tooltipClassname = self.data('sparkline-tooltipclassname') || undefined;
4285
- var tooltipFormat = self.data('sparkline-tooltipformat') || undefined;
4286
- var tooltipPrefix = self.data('sparkline-tooltipprefix') || undefined;
4287
- var tooltipSuffix = self.data('sparkline-tooltipsuffix') || ' ' + state.units;
4288
- var tooltipSkipNull = self.data('sparkline-tooltipskipnull') || true;
4289
- var tooltipValueLookups = self.data('sparkline-tooltipvaluelookups') || undefined;
4290
- var tooltipFormatFieldlist = self.data('sparkline-tooltipformatfieldlist') || undefined;
4291
- var tooltipFormatFieldlistKey = self.data('sparkline-tooltipformatfieldlistkey') || undefined;
4292
- var numberFormatter = self.data('sparkline-numberformatter') || function(n){ return n.toFixed(2); };
4293
- var numberDigitGroupSep = self.data('sparkline-numberdigitgroupsep') || undefined;
4294
- var numberDecimalMark = self.data('sparkline-numberdecimalmark') || undefined;
4295
- var numberDigitGroupCount = self.data('sparkline-numberdigitgroupcount') || undefined;
4296
- var animatedZooms = self.data('sparkline-animatedzooms') || false;
4304
+ var type = NETDATA.dataAttribute(state.element, 'sparkline-type', 'line');
4305
+ var lineColor = NETDATA.dataAttribute(state.element, 'sparkline-linecolor', state.chartCustomColors()[0]);
4306
+ var fillColor = NETDATA.dataAttribute(state.element, 'sparkline-fillcolor', ((state.chart.chart_type === 'line')?NETDATA.themes.current.background:NETDATA.colorLuminance(lineColor, NETDATA.chartDefaults.fill_luminance)));
4307
+ var chartRangeMin = NETDATA.dataAttribute(state.element, 'sparkline-chartrangemin', undefined);
4308
+ var chartRangeMax = NETDATA.dataAttribute(state.element, 'sparkline-chartrangemax', undefined);
4309
+ var composite = NETDATA.dataAttribute(state.element, 'sparkline-composite', undefined);
4310
+ var enableTagOptions = NETDATA.dataAttribute(state.element, 'sparkline-enabletagoptions', undefined);
4311
+ var tagOptionPrefix = NETDATA.dataAttribute(state.element, 'sparkline-tagoptionprefix', undefined);
4312
+ var tagValuesAttribute = NETDATA.dataAttribute(state.element, 'sparkline-tagvaluesattribute', undefined);
4313
+ var disableHiddenCheck = NETDATA.dataAttribute(state.element, 'sparkline-disablehiddencheck', undefined);
4314
+ var defaultPixelsPerValue = NETDATA.dataAttribute(state.element, 'sparkline-defaultpixelspervalue', undefined);
4315
+ var spotColor = NETDATA.dataAttribute(state.element, 'sparkline-spotcolor', undefined);
4316
+ var minSpotColor = NETDATA.dataAttribute(state.element, 'sparkline-minspotcolor', undefined);
4317
+ var maxSpotColor = NETDATA.dataAttribute(state.element, 'sparkline-maxspotcolor', undefined);
4318
+ var spotRadius = NETDATA.dataAttribute(state.element, 'sparkline-spotradius', undefined);
4319
+ var valueSpots = NETDATA.dataAttribute(state.element, 'sparkline-valuespots', undefined);
4320
+ var highlightSpotColor = NETDATA.dataAttribute(state.element, 'sparkline-highlightspotcolor', undefined);
4321
+ var highlightLineColor = NETDATA.dataAttribute(state.element, 'sparkline-highlightlinecolor', undefined);
4322
+ var lineWidth = NETDATA.dataAttribute(state.element, 'sparkline-linewidth', undefined);
4323
+ var normalRangeMin = NETDATA.dataAttribute(state.element, 'sparkline-normalrangemin', undefined);
4324
+ var normalRangeMax = NETDATA.dataAttribute(state.element, 'sparkline-normalrangemax', undefined);
4325
+ var drawNormalOnTop = NETDATA.dataAttribute(state.element, 'sparkline-drawnormalontop', undefined);
4326
+ var xvalues = NETDATA.dataAttribute(state.element, 'sparkline-xvalues', undefined);
4327
+ var chartRangeClip = NETDATA.dataAttribute(state.element, 'sparkline-chartrangeclip', undefined);
4328
+ var chartRangeMinX = NETDATA.dataAttribute(state.element, 'sparkline-chartrangeminx', undefined);
4329
+ var chartRangeMaxX = NETDATA.dataAttribute(state.element, 'sparkline-chartrangemaxx', undefined);
4330
+ var disableInteraction = NETDATA.dataAttribute(state.element, 'sparkline-disableinteraction', false);
4331
+ var disableTooltips = NETDATA.dataAttribute(state.element, 'sparkline-disabletooltips', false);
4332
+ var disableHighlight = NETDATA.dataAttribute(state.element, 'sparkline-disablehighlight', false);
4333
+ var highlightLighten = NETDATA.dataAttribute(state.element, 'sparkline-highlightlighten', 1.4);
4334
+ var highlightColor = NETDATA.dataAttribute(state.element, 'sparkline-highlightcolor', undefined);
4335
+ var tooltipContainer = NETDATA.dataAttribute(state.element, 'sparkline-tooltipcontainer', undefined);
4336
+ var tooltipClassname = NETDATA.dataAttribute(state.element, 'sparkline-tooltipclassname', undefined);
4337
+ var tooltipFormat = NETDATA.dataAttribute(state.element, 'sparkline-tooltipformat', undefined);
4338
+ var tooltipPrefix = NETDATA.dataAttribute(state.element, 'sparkline-tooltipprefix', undefined);
4339
+ var tooltipSuffix = NETDATA.dataAttribute(state.element, 'sparkline-tooltipsuffix', ' ' + state.units);
4340
+ var tooltipSkipNull = NETDATA.dataAttribute(state.element, 'sparkline-tooltipskipnull', true);
4341
+ var tooltipValueLookups = NETDATA.dataAttribute(state.element, 'sparkline-tooltipvaluelookups', undefined);
4342
+ var tooltipFormatFieldlist = NETDATA.dataAttribute(state.element, 'sparkline-tooltipformatfieldlist', undefined);
4343
+ var tooltipFormatFieldlistKey = NETDATA.dataAttribute(state.element, 'sparkline-tooltipformatfieldlistkey', undefined);
4344
+ var numberFormatter = NETDATA.dataAttribute(state.element, 'sparkline-numberformatter', function(n){ return n.toFixed(2); });
4345
+ var numberDigitGroupSep = NETDATA.dataAttribute(state.element, 'sparkline-numberdigitgroupsep', undefined);
4346
+ var numberDecimalMark = NETDATA.dataAttribute(state.element, 'sparkline-numberdecimalmark', undefined);
4347
+ var numberDigitGroupCount = NETDATA.dataAttribute(state.element, 'sparkline-numberdigitgroupcount', undefined);
4348
+ var animatedZooms = NETDATA.dataAttribute(state.element, 'sparkline-animatedzooms', false);
4349
4350
if(spotColor === 'disable') spotColor='';
4351
if(minSpotColor === 'disable') minSpotColor='';
@@ -4373,19 +4425,19 @@ var NETDATA = window.NETDATA || {};
4425
state.setMode('zoom');
4426
state.globalSelectionSyncStop();
4427
state.globalSelectionSyncDelay();
4376
- state.dygraph_user_action = true;
4377
- state.dygraph_force_zoom = true;
4428
+ state.tmp.dygraph_user_action = true;
4429
+ state.tmp.dygraph_force_zoom = true;
4430
state.updateChartPanOrZoom(after, before);
4431
NETDATA.globalPanAndZoom.setMaster(state, after, before);
4432
};
4433
4434
NETDATA.dygraphSetSelection = function(state, t) {
4383
- if(typeof state.dygraph_instance !== 'undefined') {
4435
+ if(typeof state.tmp.dygraph_instance !== 'undefined') {
4436
var r = state.calculateRowForTime(t);
4437
if(r !== -1)
4386
- state.dygraph_instance.setSelection(r);
4438
+ state.tmp.dygraph_instance.setSelection(r);
4439
else {
4388
- state.dygraph_instance.clearSelection();
4440
+ state.tmp.dygraph_instance.clearSelection();
4441
state.legendShowUndefined();
4442
}
4443
}
@@ -4394,8 +4446,8 @@ var NETDATA = window.NETDATA || {};
4446
};
4447
4448
NETDATA.dygraphClearSelection = function(state) {
4397
- if(typeof state.dygraph_instance !== 'undefined') {
4398
- state.dygraph_instance.clearSelection();
4449
+ if(typeof state.tmp.dygraph_instance !== 'undefined') {
4450
+ state.tmp.dygraph_instance.clearSelection();
4451
}
4452
return true;
4453
};
@@ -4450,7 +4502,7 @@ var NETDATA = window.NETDATA || {};
4502
};
4503
4504
NETDATA.dygraphChartUpdate = function(state, data) {
4453
- var dygraph = state.dygraph_instance;
4505
+ var dygraph = state.tmp.dygraph_instance;
4506
4507
if(typeof dygraph === 'undefined')
4508
return NETDATA.dygraphChartCreate(state, data);
@@ -4460,7 +4512,7 @@ var NETDATA = window.NETDATA || {};
4512
// its element size as 0x0.
4513
// this will make it re-appear properly
4514
4463
- if(state.tm.last_unhidden > state.dygraph_last_rendered)
4515
+ if(state.tm.last_unhidden > state.tmp.dygraph_last_rendered)
4516
dygraph.resize();
4517
4518
var options = {
@@ -4471,13 +4523,13 @@ var NETDATA = window.NETDATA || {};
4523
visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names)
4524
};
4525
4474
- if(state.dygraph_force_zoom === true) {
4526
+ if(state.tmp.dygraph_force_zoom === true) {
4527
if(NETDATA.options.debug.dygraph === true || state.debug === true)
4528
state.log('dygraphChartUpdate() forced zoom update');
4529
4530
options.dateWindow = (state.requested_padding !== null)?[ state.view_after, state.view_before ]:null;
4531
options.isZoomedIgnoreProgrammaticZoom = true;
4480
- state.dygraph_force_zoom = false;
4532
+ state.tmp.dygraph_force_zoom = false;
4533
}
4534
else if(state.current.name !== 'auto') {
4535
if(NETDATA.options.debug.dygraph === true || state.debug === true)
@@ -4491,21 +4543,21 @@ var NETDATA = window.NETDATA || {};
4543
options.isZoomedIgnoreProgrammaticZoom = true;
4544
}
4545
4494
- options.valueRange = state.dygraph_options.valueRange;
4546
+ options.valueRange = state.tmp.dygraph_options.valueRange;
4547
4548
var oldMax = null, oldMin = null;
4497
- if (state.__commonMin !== null) {
4498
- state.data.min = state.dygraph_instance.axes_[0].extremeRange[0];
4549
+ if (state.tmp.__commonMin !== null) {
4550
+ state.data.min = state.tmp.dygraph_instance.axes_[0].extremeRange[0];
4551
oldMin = options.valueRange[0] = NETDATA.commonMin.get(state);
4552
}
4501
- if (state.__commonMax !== null) {
4502
- state.data.max = state.dygraph_instance.axes_[0].extremeRange[1];
4553
+ if (state.tmp.__commonMax !== null) {
4554
+ state.data.max = state.tmp.dygraph_instance.axes_[0].extremeRange[1];
4555
oldMax = options.valueRange[1] = NETDATA.commonMax.get(state);
4556
}
4557
4506
- if(state.dygraph_smooth_eligible === true) {
4507
- if((NETDATA.options.current.smooth_plot === true && state.dygraph_options.plotter !== smoothPlotter)
4508
- || (NETDATA.options.current.smooth_plot === false && state.dygraph_options.plotter === smoothPlotter)) {
4558
+ if(state.tmp.dygraph_smooth_eligible === true) {
4559
+ if((NETDATA.options.current.smooth_plot === true && state.tmp.dygraph_options.plotter !== smoothPlotter)
4560
+ || (NETDATA.options.current.smooth_plot === false && state.tmp.dygraph_options.plotter === smoothPlotter)) {
4561
NETDATA.dygraphChartCreate(state, data);
4562
return;
4563
}
@@ -4514,13 +4566,13 @@ var NETDATA = window.NETDATA || {};
4566
dygraph.updateOptions(options);
4567
4568
var redraw = false;
4517
- if(oldMin !== null && oldMin > state.dygraph_instance.axes_[0].extremeRange[0]) {
4518
- state.data.min = state.dygraph_instance.axes_[0].extremeRange[0];
4569
+ if(oldMin !== null && oldMin > state.tmp.dygraph_instance.axes_[0].extremeRange[0]) {
4570
+ state.data.min = state.tmp.dygraph_instance.axes_[0].extremeRange[0];
4571
options.valueRange[0] = NETDATA.commonMin.get(state);
4572
redraw = true;
4573
}
4522
- if(oldMax !== null && oldMax < state.dygraph_instance.axes_[0].extremeRange[1]) {
4523
- state.data.max = state.dygraph_instance.axes_[0].extremeRange[1];
4574
+ if(oldMax !== null && oldMax < state.tmp.dygraph_instance.axes_[0].extremeRange[1]) {
4575
+ state.data.max = state.tmp.dygraph_instance.axes_[0].extremeRange[1];
4576
options.valueRange[1] = NETDATA.commonMax.get(state);
4577
redraw = true;
4578
}
@@ -4530,7 +4582,7 @@ var NETDATA = window.NETDATA || {};
4582
dygraph.updateOptions(options);
4583
}
4584
4533
- state.dygraph_last_rendered = Date.now();
4585
+ state.tmp.dygraph_last_rendered = Date.now();
4586
return true;
4587
};
4588
@@ -4538,185 +4590,93 @@ var NETDATA = window.NETDATA || {};
4590
if(NETDATA.options.debug.dygraph === true || state.debug === true)
4591
state.log('dygraphChartCreate()');
4592
4541
- var self = $(state.element);
4542
-
4543
- var chart_type = self.data('dygraph-type') || state.chart.chart_type;
4593
+ var chart_type = NETDATA.dataAttribute(state.element, 'dygraph-type', state.chart.chart_type);
4594
if(chart_type === 'stacked' && data.dimensions === 1) chart_type = 'area';
4595
4596
var highlightCircleSize = (NETDATA.chartLibraries.dygraph.isSparkline(state) === true)?3:4;
4597
4598
var smooth = (NETDATA.dygraph.smooth === true)
4549
- ?(self.data('dygraph-smooth') || (chart_type === 'line' && NETDATA.chartLibraries.dygraph.isSparkline(state) === false))
4599
+ ?(NETDATA.dataAttribute(state.element, 'dygraph-smooth', (chart_type === 'line' && NETDATA.chartLibraries.dygraph.isSparkline(state) === false)))
4600
:false;
4601
4552
- state.dygraph_options = {
4553
- colors: self.data('dygraph-colors') || state.chartColors(),
4602
+ state.tmp.dygraph_options = {
4603
+ colors: NETDATA.dataAttribute(state.element, 'dygraph-colors', state.chartColors()),
4604
4605
// leave a few pixels empty on the right of the chart
4556
- rightGap: self.data('dygraph-rightgap')
4557
- || 5,
4558
-
4559
- showRangeSelector: self.data('dygraph-showrangeselector')
4560
- || false,
4561
-
4562
- showRoller: self.data('dygraph-showroller')
4563
- || false,
4564
-
4565
- title: self.data('dygraph-title')
4566
- || state.title,
4567
-
4568
- titleHeight: self.data('dygraph-titleheight')
4569
- || 19,
4570
-
4571
- legend: self.data('dygraph-legend')
4572
- || 'always', // we need this to get selection events
4573
-
4606
+ rightGap: NETDATA.dataAttribute(state.element, 'dygraph-rightgap', 5),
4607
+ showRangeSelector: NETDATA.dataAttribute(state.element, 'dygraph-showrangeselector', false),
4608
+ showRoller: NETDATA.dataAttribute(state.element, 'dygraph-showroller', false),
4609
+ title: NETDATA.dataAttribute(state.element, 'dygraph-title', state.title),
4610
+ titleHeight: NETDATA.dataAttribute(state.element, 'dygraph-titleheight', 19),
4611
+ legend: NETDATA.dataAttribute(state.element, 'dygraph-legend', 'always'), // we need this to get selection events
4612
labels: data.result.labels,
4575
-
4576
- labelsDiv: self.data('dygraph-labelsdiv')
4577
- || state.element_legend_childs.hidden,
4578
-
4579
- labelsDivStyles: self.data('dygraph-labelsdivstyles')
4580
- || { 'fontSize':'1px' },
4581
-
4582
- labelsDivWidth: self.data('dygraph-labelsdivwidth')
4583
- || state.chartWidth() - 70,
4584
-
4585
- labelsSeparateLines: self.data('dygraph-labelsseparatelines')
4586
- || true,
4587
-
4588
- labelsShowZeroValues: self.data('dygraph-labelsshowzerovalues')
4589
- || true,
4590
-
4613
+ labelsDiv: NETDATA.dataAttribute(state.element, 'dygraph-labelsdiv', state.element_legend_childs.hidden),
4614
+ labelsDivStyles: NETDATA.dataAttribute(state.element, 'dygraph-labelsdivstyles', { 'fontSize':'1px' }),
4615
+ labelsDivWidth: NETDATA.dataAttribute(state.element, 'dygraph-labelsdivwidth', state.chartWidth() - 70),
4616
+ labelsSeparateLines: NETDATA.dataAttribute(state.element, 'dygraph-labelsseparatelines', true),
4617
+ labelsShowZeroValues: NETDATA.dataAttribute(state.element, 'dygraph-labelsshowzerovalues', true),
4618
labelsKMB: false,
4619
labelsKMG2: false,
4593
-
4594
- showLabelsOnHighlight: self.data('dygraph-showlabelsonhighlight')
4595
- || true,
4596
-
4597
- hideOverlayOnMouseOut: self.data('dygraph-hideoverlayonmouseout')
4598
- || true,
4599
-
4600
- includeZero: self.data('dygraph-includezero')
4601
- || (chart_type === 'stacked'),
4602
-
4603
- xRangePad: self.data('dygraph-xrangepad')
4604
- || 0,
4605
-
4606
- yRangePad: self.data('dygraph-yrangepad')
4607
- || 1,
4608
-
4609
- valueRange: self.data('dygraph-valuerange')
4610
- || [ null, null ],
4611
-
4620
+ showLabelsOnHighlight: NETDATA.dataAttribute(state.element, 'dygraph-showlabelsonhighlight', true),
4621
+ hideOverlayOnMouseOut: NETDATA.dataAttribute(state.element, 'dygraph-hideoverlayonmouseout', true),
4622
+ includeZero: NETDATA.dataAttribute(state.element, 'dygraph-includezero', (chart_type === 'stacked')),
4623
+ xRangePad: NETDATA.dataAttribute(state.element, 'dygraph-xrangepad', 0),
4624
+ yRangePad: NETDATA.dataAttribute(state.element, 'dygraph-yrangepad', 1),
4625
+ valueRange: NETDATA.dataAttribute(state.element, 'dygraph-valuerange', [ null, null ]),
4626
ylabel: state.units,
4613
-
4614
- yLabelWidth: self.data('dygraph-ylabelwidth')
4615
- || 12,
4627
+ yLabelWidth: NETDATA.dataAttribute(state.element, 'dygraph-ylabelwidth', 12),
4628
4629
// the function to plot the chart
4630
plotter: null,
4631
4632
// The width of the lines connecting data points.
4633
// This can be used to increase the contrast or some graphs.
4622
- strokeWidth: self.data('dygraph-strokewidth')
4623
- || ((chart_type === 'stacked')?0.1:((smooth === true)?1.5:0.7)),
4624
-
4625
- strokePattern: self.data('dygraph-strokepattern')
4626
- || undefined,
4634
+ strokeWidth: NETDATA.dataAttribute(state.element, 'dygraph-strokewidth', ((chart_type === 'stacked')?0.1:((smooth === true)?1.5:0.7))),
4635
+ strokePattern: NETDATA.dataAttribute(state.element, 'dygraph-strokepattern', undefined),
4636
4637
// The size of the dot to draw on each point in pixels (see drawPoints).
4638
// A dot is always drawn when a point is "isolated",
4639
// i.e. there is a missing point on either side of it.
4640
// This also controls the size of those dots.
4632
- drawPoints: self.data('dygraph-drawpoints')
4633
- || false,
4641
+ drawPoints: NETDATA.dataAttribute(state.element, 'dygraph-drawpoints', false),
4642
4643
// Draw points at the edges of gaps in the data.
4644
// This improves visibility of small data segments or other data irregularities.
4637
- drawGapEdgePoints: self.data('dygraph-drawgapedgepoints')
4638
- || true,
4639
-
4640
- connectSeparatedPoints: self.data('dygraph-connectseparatedpoints')
4641
- || false,
4642
-
4643
- pointSize: self.data('dygraph-pointsize')
4644
- || 1,
4645
+ drawGapEdgePoints: NETDATA.dataAttribute(state.element, 'dygraph-drawgapedgepoints', true),
4646
+ connectSeparatedPoints: NETDATA.dataAttribute(state.element, 'dygraph-connectseparatedpoints', false),
4647
+ pointSize: NETDATA.dataAttribute(state.element, 'dygraph-pointsize', 1),
4648
4649
// enabling this makes the chart with little square lines
4647
- stepPlot: self.data('dygraph-stepplot')
4648
- || false,
4650
+ stepPlot: NETDATA.dataAttribute(state.element, 'dygraph-stepplot', false),
4651
4652
// Draw a border around graph lines to make crossing lines more easily
4653
// distinguishable. Useful for graphs with many lines.
4652
- strokeBorderColor: self.data('dygraph-strokebordercolor')
4653
- || NETDATA.themes.current.background,
4654
-
4655
- strokeBorderWidth: self.data('dygraph-strokeborderwidth')
4656
- || (chart_type === 'stacked')?0.0:0.0,
4657
-
4658
- fillGraph: self.data('dygraph-fillgraph')
4659
- || (chart_type === 'area' || chart_type === 'stacked'),
4660
-
4661
- fillAlpha: self.data('dygraph-fillalpha')
4662
- || ((chart_type === 'stacked')
4654
+ strokeBorderColor: NETDATA.dataAttribute(state.element, 'dygraph-strokebordercolor', NETDATA.themes.current.background),
4655
+ strokeBorderWidth: NETDATA.dataAttribute(state.element, 'dygraph-strokeborderwidth', (chart_type === 'stacked')?0.0:0.0),
4656
+ fillGraph: NETDATA.dataAttribute(state.element, 'dygraph-fillgraph', (chart_type === 'area' || chart_type === 'stacked')),
4657
+ fillAlpha: NETDATA.dataAttribute(state.element, 'dygraph-fillalpha',
4658
+ ((chart_type === 'stacked')
4659
?NETDATA.options.current.color_fill_opacity_stacked
4664
- :NETDATA.options.current.color_fill_opacity_area),
4665
-
4666
- stackedGraph: self.data('dygraph-stackedgraph')
4667
- || (chart_type === 'stacked'),
4668
-
4669
- stackedGraphNaNFill: self.data('dygraph-stackedgraphnanfill')
4670
- || 'none',
4671
-
4672
- drawAxis: self.data('dygraph-drawaxis')
4673
- || true,
4674
-
4675
- axisLabelFontSize: self.data('dygraph-axislabelfontsize')
4676
- || 10,
4677
-
4678
- axisLineColor: self.data('dygraph-axislinecolor')
4679
- || NETDATA.themes.current.axis,
4680
-
4681
- axisLineWidth: self.data('dygraph-axislinewidth')
4682
- || 1.0,
4683
-
4684
- drawGrid: self.data('dygraph-drawgrid')
4685
- || true,
4686
-
4687
- gridLinePattern: self.data('dygraph-gridlinepattern')
4688
- || null,
4689
-
4690
- gridLineWidth: self.data('dygraph-gridlinewidth')
4691
- || 1.0,
4692
-
4693
- gridLineColor: self.data('dygraph-gridlinecolor')
4694
- || NETDATA.themes.current.grid,
4695
-
4696
- maxNumberWidth: self.data('dygraph-maxnumberwidth')
4697
- || 8,
4698
-
4699
- sigFigs: self.data('dygraph-sigfigs')
4700
- || null,
4701
-
4702
- digitsAfterDecimal: self.data('dygraph-digitsafterdecimal')
4703
- || 2,
4704
-
4705
- valueFormatter: self.data('dygraph-valueformatter')
4706
- || undefined,
4707
-
4708
- highlightCircleSize: self.data('dygraph-highlightcirclesize')
4709
- || highlightCircleSize,
4710
-
4711
- highlightSeriesOpts: self.data('dygraph-highlightseriesopts')
4712
- || null, // TOO SLOW: { strokeWidth: 1.5 },
4713
-
4714
- highlightSeriesBackgroundAlpha: self.data('dygraph-highlightseriesbackgroundalpha')
4715
- || null, // TOO SLOW: (chart_type === 'stacked')?0.7:0.5,
4716
-
4717
- pointClickCallback: self.data('dygraph-pointclickcallback')
4718
- || undefined,
4719
-
4660
+ :NETDATA.options.current.color_fill_opacity_area)
4661
+ ),
4662
+ stackedGraph: NETDATA.dataAttribute(state.element, 'dygraph-stackedgraph', (chart_type === 'stacked')),
4663
+ stackedGraphNaNFill: NETDATA.dataAttribute(state.element, 'dygraph-stackedgraphnanfill', 'none'),
4664
+ drawAxis: NETDATA.dataAttribute(state.element, 'dygraph-drawaxis', true),
4665
+ axisLabelFontSize: NETDATA.dataAttribute(state.element, 'dygraph-axislabelfontsize', 10),
4666
+ axisLineColor: NETDATA.dataAttribute(state.element, 'dygraph-axislinecolor', NETDATA.themes.current.axis),
4667
+ axisLineWidth: NETDATA.dataAttribute(state.element, 'dygraph-axislinewidth', 1.0),
4668
+ drawGrid: NETDATA.dataAttribute(state.element, 'dygraph-drawgrid', true),
4669
+ gridLinePattern: NETDATA.dataAttribute(state.element, 'dygraph-gridlinepattern', null),
4670
+ gridLineWidth: NETDATA.dataAttribute(state.element, 'dygraph-gridlinewidth', 1.0),
4671
+ gridLineColor: NETDATA.dataAttribute(state.element, 'dygraph-gridlinecolor', NETDATA.themes.current.grid),
4672
+ maxNumberWidth: NETDATA.dataAttribute(state.element, 'dygraph-maxnumberwidth', 8),
4673
+ sigFigs: NETDATA.dataAttribute(state.element, 'dygraph-sigfigs', null),
4674
+ digitsAfterDecimal: NETDATA.dataAttribute(state.element, 'dygraph-digitsafterdecimal', 2),
4675
+ valueFormatter: NETDATA.dataAttribute(state.element, 'dygraph-valueformatter', undefined),
4676
+ highlightCircleSize: NETDATA.dataAttribute(state.element, 'dygraph-highlightcirclesize', highlightCircleSize),
4677
+ highlightSeriesOpts: NETDATA.dataAttribute(state.element, 'dygraph-highlightseriesopts', null), // TOO SLOW: { strokeWidth: 1.5 },
4678
+ highlightSeriesBackgroundAlpha: NETDATA.dataAttribute(state.element, 'dygraph-highlightseriesbackgroundalpha', null), // TOO SLOW: (chart_type === 'stacked')?0.7:0.5,
4679
+ pointClickCallback: NETDATA.dataAttribute(state.element, 'dygraph-pointclickcallback', undefined),
4680
visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names),
4681
4682
axes: {
@@ -4764,8 +4724,8 @@ var NETDATA = window.NETDATA || {};
4724
return '';
4725
},
4726
drawCallback: function(dygraph, is_initial) {
4767
- if(state.current.name !== 'auto' && state.dygraph_user_action === true) {
4768
- state.dygraph_user_action = false;
4727
+ if(state.current.name !== 'auto' && state.tmp.dygraph_user_action === true) {
4728
+ state.tmp.dygraph_user_action = false;
4729
4730
var x_range = dygraph.xAxisRange();
4731
var after = Math.round(x_range[0]);
@@ -4789,8 +4749,8 @@ var NETDATA = window.NETDATA || {};
4749
state.setMode('zoom');
4750
4751
// refresh it to the greatest possible zoom level
4792
- state.dygraph_user_action = true;
4793
- state.dygraph_force_zoom = true;
4752
+ state.tmp.dygraph_user_action = true;
4753
+ state.tmp.dygraph_force_zoom = true;
4754
state.updateChartPanOrZoom(minDate, maxDate);
4755
},
4756
highlightCallback: function(event, x, points, row, seriesName) {
@@ -4812,7 +4772,7 @@ var NETDATA = window.NETDATA || {};
4772
4773
// fix legend zIndex using the internal structures of dygraph legend module
4774
// this works, but it is a hack!
4815
- // state.dygraph_instance.plugins_[0].plugin.legend_div_.style.zIndex = 10000;
4775
+ // state.tmp.dygraph_instance.plugins_[0].plugin.legend_div_.style.zIndex = 10000;
4776
},
4777
unhighlightCallback: function(event) {
4778
void(event);
@@ -4828,7 +4788,7 @@ var NETDATA = window.NETDATA || {};
4788
if(NETDATA.options.debug.dygraph === true || state.debug === true)
4789
state.log('interactionModel.mousedown()');
4790
4831
- state.dygraph_user_action = true;
4791
+ state.tmp.dygraph_user_action = true;
4792
state.globalSelectionSyncStop();
4793
4794
if(NETDATA.options.debug.dygraph === true)
@@ -4869,7 +4829,7 @@ var NETDATA = window.NETDATA || {};
4829
state.log('interactionModel.mousemove()');
4830
4831
if(context.isPanning) {
4872
- state.dygraph_user_action = true;
4832
+ state.tmp.dygraph_user_action = true;
4833
state.globalSelectionSyncStop();
4834
state.globalSelectionSyncDelay();
4835
state.setMode('pan');
@@ -4877,7 +4837,7 @@ var NETDATA = window.NETDATA || {};
4837
Dygraph.movePan(event, dygraph, context);
4838
}
4839
else if(context.isZooming) {
4880
- state.dygraph_user_action = true;
4840
+ state.tmp.dygraph_user_action = true;
4841
state.globalSelectionSyncStop();
4842
state.globalSelectionSyncDelay();
4843
state.setMode('zoom');
@@ -4889,12 +4849,12 @@ var NETDATA = window.NETDATA || {};
4849
state.log('interactionModel.mouseup()');
4850
4851
if (context.isPanning) {
4892
- state.dygraph_user_action = true;
4852
+ state.tmp.dygraph_user_action = true;
4853
state.globalSelectionSyncDelay();
4854
Dygraph.endPan(event, dygraph, context);
4855
}
4856
else if (context.isZooming) {
4897
- state.dygraph_user_action = true;
4857
+ state.tmp.dygraph_user_action = true;
4858
state.globalSelectionSyncDelay();
4859
Dygraph.endZoom(event, dygraph, context);
4860
}
@@ -4983,7 +4943,7 @@ var NETDATA = window.NETDATA || {};
4943
}
4944
4945
if(event.altKey || event.shiftKey) {
4986
- state.dygraph_user_action = true;
4946
+ state.tmp.dygraph_user_action = true;
4947
4948
state.globalSelectionSyncStop();
4949
state.globalSelectionSyncDelay();
@@ -5035,7 +4995,7 @@ var NETDATA = window.NETDATA || {};
4995
if(NETDATA.options.debug.dygraph === true || state.debug === true)
4996
state.log('interactionModel.touchstart()');
4997
5038
- state.dygraph_user_action = true;
4998
+ state.tmp.dygraph_user_action = true;
4999
state.setMode('zoom');
5000
state.pauseChart();
5001
@@ -5057,7 +5017,7 @@ var NETDATA = window.NETDATA || {};
5017
if(NETDATA.options.debug.dygraph === true || state.debug === true)
5018
state.log('interactionModel.touchmove()');
5019
5060
- state.dygraph_user_action = true;
5020
+ state.tmp.dygraph_user_action = true;
5021
Dygraph.defaultInteractionModel.touchmove(event, dygraph, context);
5022
5023
state.dygraph_last_touch_move = Date.now();
@@ -5066,7 +5026,7 @@ var NETDATA = window.NETDATA || {};
5026
if(NETDATA.options.debug.dygraph === true || state.debug === true)
5027
state.log('interactionModel.touchend()');
5028
5069
- state.dygraph_user_action = true;
5029
+ state.tmp.dygraph_user_action = true;
5030
Dygraph.defaultInteractionModel.touchend(event, dygraph, context);
5031
5032
// if it didn't move, it is a selection
@@ -5095,48 +5055,48 @@ var NETDATA = window.NETDATA || {};
5055
};
5056
5057
if(NETDATA.chartLibraries.dygraph.isSparkline(state)) {
5098
- state.dygraph_options.drawGrid = false;
5099
- state.dygraph_options.drawAxis = false;
5100
- state.dygraph_options.title = undefined;
5101
- state.dygraph_options.ylabel = undefined;
5102
- state.dygraph_options.yLabelWidth = 0;
5103
- state.dygraph_options.labelsDivWidth = 120;
5104
- state.dygraph_options.labelsDivStyles.width = '120px';
5105
- state.dygraph_options.labelsSeparateLines = true;
5106
- state.dygraph_options.rightGap = 0;
5107
- state.dygraph_options.yRangePad = 1;
5058
+ state.tmp.dygraph_options.drawGrid = false;
5059
+ state.tmp.dygraph_options.drawAxis = false;
5060
+ state.tmp.dygraph_options.title = undefined;
5061
+ state.tmp.dygraph_options.ylabel = undefined;
5062
+ state.tmp.dygraph_options.yLabelWidth = 0;
5063
+ state.tmp.dygraph_options.labelsDivWidth = 120;
5064
+ state.tmp.dygraph_options.labelsDivStyles.width = '120px';
5065
+ state.tmp.dygraph_options.labelsSeparateLines = true;
5066
+ state.tmp.dygraph_options.rightGap = 0;
5067
+ state.tmp.dygraph_options.yRangePad = 1;
5068
}
5069
5070
if(smooth === true) {
5111
- state.dygraph_smooth_eligible = true;
5071
+ state.tmp.dygraph_smooth_eligible = true;
5072
5073
if(NETDATA.options.current.smooth_plot === true)
5114
- state.dygraph_options.plotter = smoothPlotter;
5074
+ state.tmp.dygraph_options.plotter = smoothPlotter;
5075
}
5116
- else state.dygraph_smooth_eligible = false;
5076
+ else state.tmp.dygraph_smooth_eligible = false;
5077
5118
- state.dygraph_instance = new Dygraph(state.element_chart,
5119
- data.result.data, state.dygraph_options);
5078
+ state.tmp.dygraph_instance = new Dygraph(state.element_chart,
5079
+ data.result.data, state.tmp.dygraph_options);
5080
5121
- state.dygraph_force_zoom = false;
5122
- state.dygraph_user_action = false;
5123
- state.dygraph_last_rendered = Date.now();
5081
+ state.tmp.dygraph_force_zoom = false;
5082
+ state.tmp.dygraph_user_action = false;
5083
+ state.tmp.dygraph_last_rendered = Date.now();
5084
5125
- if(state.dygraph_options.valueRange[0] === null && state.dygraph_options.valueRange[1] === null) {
5126
- if (typeof state.dygraph_instance.axes_[0].extremeRange !== 'undefined') {
5127
- state.__commonMin = self.data('common-min') || null;
5128
- state.__commonMax = self.data('common-max') || null;
5085
+ if(state.tmp.dygraph_options.valueRange[0] === null && state.tmp.dygraph_options.valueRange[1] === null) {
5086
+ if (typeof state.tmp.dygraph_instance.axes_[0].extremeRange !== 'undefined') {
5087
+ state.tmp.__commonMin = NETDATA.dataAttribute(state.element, 'common-min', null);
5088
+ state.tmp.__commonMax = NETDATA.dataAttribute(state.element, 'common-max', null);
5089
}
5090
else {
5091
state.log('incompatible version of Dygraph detected');
5132
- state.__commonMin = null;
5133
- state.__commonMax = null;
5092
+ state.tmp.__commonMin = null;
5093
+ state.tmp.__commonMax = null;
5094
}
5095
}
5096
else {
5097
// if the user gave a valueRange, respect it
5138
- state.__commonMin = null;
5139
- state.__commonMax = null;
5098
+ state.tmp.__commonMin = null;
5099
+ state.tmp.__commonMax = null;
5100
}
5101
5102
return true;
@@ -5623,22 +5583,22 @@ var NETDATA = window.NETDATA || {};
5583
};
5584
5585
NETDATA.easypiechartClearSelection = function(state) {
5626
- if(typeof state.easyPieChartEvent !== 'undefined') {
5627
- if(state.easyPieChartEvent.timer !== undefined) {
5628
- clearTimeout(state.easyPieChartEvent.timer);
5586
+ if(typeof state.tmp.easyPieChartEvent !== 'undefined') {
5587
+ if(state.tmp.easyPieChartEvent.timer !== undefined) {
5588
+ clearTimeout(state.tmp.easyPieChartEvent.timer);
5589
}
5590
5631
- state.easyPieChartEvent.timer = undefined;
5591
+ state.tmp.easyPieChartEvent.timer = undefined;
5592
}
5593
5594
if(state.isAutoRefreshable() === true && state.data !== null) {
5595
NETDATA.easypiechartChartUpdate(state, state.data);
5596
}
5597
else {
5638
- state.easyPieChartLabel.innerText = state.legendFormatValue(null);
5639
- state.easyPieChart_instance.update(0);
5598
+ state.tmp.easyPieChartLabel.innerText = state.legendFormatValue(null);
5599
+ state.tmp.easyPieChart_instance.update(0);
5600
}
5641
- state.easyPieChart_instance.enableAnimation();
5601
+ state.tmp.easyPieChart_instance.enableAnimation();
5602
5603
return true;
5604
};
@@ -5651,8 +5611,8 @@ var NETDATA = window.NETDATA || {};
5611
if(slot < 0 || slot >= state.data.result.length)
5612
return NETDATA.easypiechartClearSelection(state);
5613
5654
- if(typeof state.easyPieChartEvent === 'undefined') {
5655
- state.easyPieChartEvent = {
5614
+ if(typeof state.tmp.easyPieChartEvent === 'undefined') {
5615
+ state.tmp.easyPieChartEvent = {
5616
timer: undefined,
5617
value: 0,
5618
pcent: 0
@@ -5660,20 +5620,20 @@ var NETDATA = window.NETDATA || {};
5620
}
5621
5622
var value = state.data.result[state.data.result.length - 1 - slot];
5663
- var min = (state.easyPieChartMin === null)?NETDATA.commonMin.get(state):state.easyPieChartMin;
5664
- var max = (state.easyPieChartMax === null)?NETDATA.commonMax.get(state):state.easyPieChartMax;
5623
+ var min = (state.tmp.easyPieChartMin === null)?NETDATA.commonMin.get(state):state.tmp.easyPieChartMin;
5624
+ var max = (state.tmp.easyPieChartMax === null)?NETDATA.commonMax.get(state):state.tmp.easyPieChartMax;
5625
var pcent = NETDATA.easypiechartPercentFromValueMinMax(value, min, max);
5626
5667
- state.easyPieChartEvent.value = value;
5668
- state.easyPieChartEvent.pcent = pcent;
5669
- state.easyPieChartLabel.innerText = state.legendFormatValue(value);
5627
+ state.tmp.easyPieChartEvent.value = value;
5628
+ state.tmp.easyPieChartEvent.pcent = pcent;
5629
+ state.tmp.easyPieChartLabel.innerText = state.legendFormatValue(value);
5630
5671
- if(state.easyPieChartEvent.timer === undefined) {
5672
- state.easyPieChart_instance.disableAnimation();
5631
+ if(state.tmp.easyPieChartEvent.timer === undefined) {
5632
+ state.tmp.easyPieChart_instance.disableAnimation();
5633
5674
- state.easyPieChartEvent.timer = setTimeout(function() {
5675
- state.easyPieChartEvent.timer = undefined;
5676
- state.easyPieChart_instance.update(state.easyPieChartEvent.pcent);
5634
+ state.tmp.easyPieChartEvent.timer = setTimeout(function() {
5635
+ state.tmp.easyPieChartEvent.timer = undefined;
5636
+ state.tmp.easyPieChart_instance.update(state.tmp.easyPieChartEvent.pcent);
5637
}, NETDATA.options.current.charts_selection_animation_delay);
5638
}
5639
@@ -5689,38 +5649,37 @@ var NETDATA = window.NETDATA || {};
5649
}
5650
else {
5651
value = data.result[0];
5692
- min = (state.easyPieChartMin === null)?NETDATA.commonMin.get(state):state.easyPieChartMin;
5693
- max = (state.easyPieChartMax === null)?NETDATA.commonMax.get(state):state.easyPieChartMax;
5652
+ min = (state.tmp.easyPieChartMin === null)?NETDATA.commonMin.get(state):state.tmp.easyPieChartMin;
5653
+ max = (state.tmp.easyPieChartMax === null)?NETDATA.commonMax.get(state):state.tmp.easyPieChartMax;
5654
pcent = NETDATA.easypiechartPercentFromValueMinMax(value, min, max);
5655
}
5656
5697
- state.easyPieChartLabel.innerText = state.legendFormatValue(value);
5698
- state.easyPieChart_instance.update(pcent);
5657
+ state.tmp.easyPieChartLabel.innerText = state.legendFormatValue(value);
5658
+ state.tmp.easyPieChart_instance.update(pcent);
5659
return true;
5660
};
5661
5662
NETDATA.easypiechartChartCreate = function(state, data) {
5703
- var self = $(state.element);
5663
var chart = $(state.element_chart);
5664
5665
var value = data.result[0];
5707
- var min = self.data('easypiechart-min-value') || null;
5708
- var max = self.data('easypiechart-max-value') || null;
5709
- var adjust = self.data('easypiechart-adjust') || null;
5666
+ var min = NETDATA.dataAttribute(state.element, 'easypiechart-min-value', null);
5667
+ var max = NETDATA.dataAttribute(state.element, 'easypiechart-max-value', null);
5668
+ var adjust = NETDATA.dataAttribute(state.element, 'easypiechart-adjust', null);
5669
5670
if(min === null) {
5671
min = NETDATA.commonMin.get(state);
5713
- state.easyPieChartMin = null;
5672
+ state.tmp.easyPieChartMin = null;
5673
}
5674
else
5716
- state.easyPieChartMin = min;
5675
+ state.tmp.easyPieChartMin = min;
5676
5677
if(max === null) {
5678
max = NETDATA.commonMax.get(state);
5720
- state.easyPieChartMax = null;
5679
+ state.tmp.easyPieChartMax = null;
5680
}
5681
else
5723
- state.easyPieChartMax = max;
5682
+ state.tmp.easyPieChartMax = max;
5683
5684
var pcent = NETDATA.easypiechartPercentFromValueMinMax(value, min, max);
5685
@@ -5742,33 +5701,33 @@ var NETDATA = window.NETDATA || {};
5701
5702
var valuefontsize = Math.floor((size * 2 / 3) / 5);
5703
var valuetop = Math.round((size - valuefontsize - (size / 40)) / 2);
5745
- state.easyPieChartLabel = document.createElement('span');
5746
- state.easyPieChartLabel.className = 'easyPieChartLabel';
5747
- state.easyPieChartLabel.innerText = state.legendFormatValue(value);
5748
- state.easyPieChartLabel.style.fontSize = valuefontsize + 'px';
5749
- state.easyPieChartLabel.style.top = valuetop.toString() + 'px';
5750
- state.element_chart.appendChild(state.easyPieChartLabel);
5704
+ state.tmp.easyPieChartLabel = document.createElement('span');
5705
+ state.tmp.easyPieChartLabel.className = 'easyPieChartLabel';
5706
+ state.tmp.easyPieChartLabel.innerText = state.legendFormatValue(value);
5707
+ state.tmp.easyPieChartLabel.style.fontSize = valuefontsize + 'px';
5708
+ state.tmp.easyPieChartLabel.style.top = valuetop.toString() + 'px';
5709
+ state.element_chart.appendChild(state.tmp.easyPieChartLabel);
5710
5711
var titlefontsize = Math.round(valuefontsize * 1.6 / 3);
5712
var titletop = Math.round(valuetop - (titlefontsize * 2) - (size / 40));
5754
- state.easyPieChartTitle = document.createElement('span');
5755
- state.easyPieChartTitle.className = 'easyPieChartTitle';
5756
- state.easyPieChartTitle.innerText = state.title;
5757
- state.easyPieChartTitle.style.fontSize = titlefontsize + 'px';
5758
- state.easyPieChartTitle.style.lineHeight = titlefontsize + 'px';
5759
- state.easyPieChartTitle.style.top = titletop.toString() + 'px';
5760
- state.element_chart.appendChild(state.easyPieChartTitle);
5713
+ state.tmp.easyPieChartTitle = document.createElement('span');
5714
+ state.tmp.easyPieChartTitle.className = 'easyPieChartTitle';
5715
+ state.tmp.easyPieChartTitle.innerText = state.title;
5716
+ state.tmp.easyPieChartTitle.style.fontSize = titlefontsize + 'px';
5717
+ state.tmp.easyPieChartTitle.style.lineHeight = titlefontsize + 'px';
5718
+ state.tmp.easyPieChartTitle.style.top = titletop.toString() + 'px';
5719
+ state.element_chart.appendChild(state.tmp.easyPieChartTitle);
5720
5721
var unitfontsize = Math.round(titlefontsize * 0.9);
5722
var unittop = Math.round(valuetop + (valuefontsize + unitfontsize) + (size / 40));
5764
- state.easyPieChartUnits = document.createElement('span');
5765
- state.easyPieChartUnits.className = 'easyPieChartUnits';
5766
- state.easyPieChartUnits.innerText = state.units;
5767
- state.easyPieChartUnits.style.fontSize = unitfontsize + 'px';
5768
- state.easyPieChartUnits.style.top = unittop.toString() + 'px';
5769
- state.element_chart.appendChild(state.easyPieChartUnits);
5770
-
5771
- var barColor = self.data('easypiechart-barcolor');
5723
+ state.tmp.easyPieChartUnits = document.createElement('span');
5724
+ state.tmp.easyPieChartUnits.className = 'easyPieChartUnits';
5725
+ state.tmp.easyPieChartUnits.innerText = state.units;
5726
+ state.tmp.easyPieChartUnits.style.fontSize = unitfontsize + 'px';
5727
+ state.tmp.easyPieChartUnits.style.top = unittop.toString() + 'px';
5728
+ state.element_chart.appendChild(state.tmp.easyPieChartUnits);
5729
+
5730
+ var barColor = NETDATA.dataAttribute(state.element, 'easypiechart-barcolor', undefined);
5731
if(typeof barColor === 'undefined' || barColor === null)
5732
barColor = state.chartCustomColors()[0];
5733
else {
@@ -5780,28 +5739,28 @@ var NETDATA = window.NETDATA || {};
5739
5740
chart.easyPieChart({
5741
barColor: barColor,
5783
- trackColor: self.data('easypiechart-trackcolor') || NETDATA.themes.current.easypiechart_track,
5784
- scaleColor: self.data('easypiechart-scalecolor') || NETDATA.themes.current.easypiechart_scale,
5785
- scaleLength: self.data('easypiechart-scalelength') || 5,
5786
- lineCap: self.data('easypiechart-linecap') || 'round',
5787
- lineWidth: self.data('easypiechart-linewidth') || stroke,
5788
- trackWidth: self.data('easypiechart-trackwidth') || undefined,
5789
- size: self.data('easypiechart-size') || size,
5790
- rotate: self.data('easypiechart-rotate') || 0,
5791
- animate: self.data('easypiechart-animate') || {duration: 500, enabled: true},
5792
- easing: self.data('easypiechart-easing') || undefined
5742
+ trackColor: NETDATA.dataAttribute(state.element, 'easypiechart-trackcolor', NETDATA.themes.current.easypiechart_track),
5743
+ scaleColor: NETDATA.dataAttribute(state.element, 'easypiechart-scalecolor', NETDATA.themes.current.easypiechart_scale),
5744
+ scaleLength: NETDATA.dataAttribute(state.element, 'easypiechart-scalelength', 5),
5745
+ lineCap: NETDATA.dataAttribute(state.element, 'easypiechart-linecap', 'round'),
5746
+ lineWidth: NETDATA.dataAttribute(state.element, 'easypiechart-linewidth', stroke),
5747
+ trackWidth: NETDATA.dataAttribute(state.element, 'easypiechart-trackwidth', undefined),
5748
+ size: NETDATA.dataAttribute(state.element, 'easypiechart-size', size),
5749
+ rotate: NETDATA.dataAttribute(state.element, 'easypiechart-rotate', 0),
5750
+ animate: NETDATA.dataAttribute(state.element, 'easypiechart-animate', {duration: 500, enabled: true}),
5751
+ easing: NETDATA.dataAttribute(state.element, 'easypiechart-easing', undefined)
5752
});
5753
5754
// when we just re-create the chart
5755
// do not animate the first update
5756
var animate = true;
5798
- if(typeof state.easyPieChart_instance !== 'undefined')
5757
+ if(typeof state.tmp.easyPieChart_instance !== 'undefined')
5758
animate = false;
5759
5801
- state.easyPieChart_instance = chart.data('easyPieChart');
5802
- if(animate === false) state.easyPieChart_instance.disableAnimation();
5803
- state.easyPieChart_instance.update(pcent);
5804
- if(animate === false) state.easyPieChart_instance.enableAnimation();
5760
+ state.tmp.easyPieChart_instance = chart.data('easyPieChart');
5761
+ if(animate === false) state.tmp.easyPieChart_instance.disableAnimation();
5762
+ state.tmp.easyPieChart_instance.update(pcent);
5763
+ if(animate === false) state.tmp.easyPieChart_instance.enableAnimation();
5764
return true;
5765
};
5766
@@ -5844,8 +5803,8 @@ var NETDATA = window.NETDATA || {};
5803
speed = status;
5804
5805
// console.log('gauge speed ' + speed);
5847
- state.gauge_instance.animationSpeed = speed;
5848
- state.___gaugeOld__.speed = speed;
5806
+ state.tmp.gauge_instance.animationSpeed = speed;
5807
+ state.tmp.___gaugeOld__.speed = speed;
5808
};
5809
5810
NETDATA.gaugeSet = function(state, value, min, max) {
@@ -5877,36 +5836,36 @@ var NETDATA = window.NETDATA || {};
5836
if(pcent < 0.001) pcent = 0.001;
5837
if(pcent > 99.999) pcent = 99.999;
5838
5880
- state.gauge_instance.set(pcent);
5839
+ state.tmp.gauge_instance.set(pcent);
5840
// console.log('gauge set ' + pcent + ', value ' + value + ', min ' + min + ', max ' + max);
5841
5883
- state.___gaugeOld__.value = value;
5884
- state.___gaugeOld__.min = min;
5885
- state.___gaugeOld__.max = max;
5842
+ state.tmp.___gaugeOld__.value = value;
5843
+ state.tmp.___gaugeOld__.min = min;
5844
+ state.tmp.___gaugeOld__.max = max;
5845
};
5846
5847
NETDATA.gaugeSetLabels = function(state, value, min, max) {
5889
- if(state.___gaugeOld__.valueLabel !== value) {
5890
- state.___gaugeOld__.valueLabel = value;
5891
- state.gaugeChartLabel.innerText = state.legendFormatValue(value);
5848
+ if(state.tmp.___gaugeOld__.valueLabel !== value) {
5849
+ state.tmp.___gaugeOld__.valueLabel = value;
5850
+ state.tmp.gaugeChartLabel.innerText = state.legendFormatValue(value);
5851
}
5893
- if(state.___gaugeOld__.minLabel !== min) {
5894
- state.___gaugeOld__.minLabel = min;
5895
- state.gaugeChartMin.innerText = state.legendFormatValue(min);
5852
+ if(state.tmp.___gaugeOld__.minLabel !== min) {
5853
+ state.tmp.___gaugeOld__.minLabel = min;
5854
+ state.tmp.gaugeChartMin.innerText = state.legendFormatValue(min);
5855
}
5897
- if(state.___gaugeOld__.maxLabel !== max) {
5898
- state.___gaugeOld__.maxLabel = max;
5899
- state.gaugeChartMax.innerText = state.legendFormatValue(max);
5856
+ if(state.tmp.___gaugeOld__.maxLabel !== max) {
5857
+ state.tmp.___gaugeOld__.maxLabel = max;
5858
+ state.tmp.gaugeChartMax.innerText = state.legendFormatValue(max);
5859
}
5860
};
5861
5862
NETDATA.gaugeClearSelection = function(state) {
5904
- if(typeof state.gaugeEvent !== 'undefined') {
5905
- if(state.gaugeEvent.timer !== undefined) {
5906
- clearTimeout(state.gaugeEvent.timer);
5863
+ if(typeof state.tmp.gaugeEvent !== 'undefined') {
5864
+ if(state.tmp.gaugeEvent.timer !== undefined) {
5865
+ clearTimeout(state.tmp.gaugeEvent.timer);
5866
}
5867
5909
- state.gaugeEvent.timer = undefined;
5868
+ state.tmp.gaugeEvent.timer = undefined;
5869
}
5870
5871
if(state.isAutoRefreshable() === true && state.data !== null) {
@@ -5930,8 +5889,8 @@ var NETDATA = window.NETDATA || {};
5889
if(slot < 0 || slot >= state.data.result.length)
5890
return NETDATA.gaugeClearSelection(state);
5891
5933
- if(typeof state.gaugeEvent === 'undefined') {
5934
- state.gaugeEvent = {
5892
+ if(typeof state.tmp.gaugeEvent === 'undefined') {
5893
+ state.tmp.gaugeEvent = {
5894
timer: undefined,
5895
value: 0,
5896
min: 0,
@@ -5940,24 +5899,24 @@ var NETDATA = window.NETDATA || {};
5899
}
5900
5901
var value = state.data.result[state.data.result.length - 1 - slot];
5943
- var min = (state.gaugeMin === null)?NETDATA.commonMin.get(state):state.gaugeMin;
5944
- var max = (state.gaugeMax === null)?NETDATA.commonMax.get(state):state.gaugeMax;
5902
+ var min = (state.tmp.gaugeMin === null)?NETDATA.commonMin.get(state):state.tmp.gaugeMin;
5903
+ var max = (state.tmp.gaugeMax === null)?NETDATA.commonMax.get(state):state.tmp.gaugeMax;
5904
5905
// make sure it is zero based
5906
if(min > 0) min = 0;
5907
if(max < 0) max = 0;
5908
5950
- state.gaugeEvent.value = value;
5951
- state.gaugeEvent.min = min;
5952
- state.gaugeEvent.max = max;
5909
+ state.tmp.gaugeEvent.value = value;
5910
+ state.tmp.gaugeEvent.min = min;
5911
+ state.tmp.gaugeEvent.max = max;
5912
NETDATA.gaugeSetLabels(state, value, min, max);
5913
5955
- if(state.gaugeEvent.timer === undefined) {
5914
+ if(state.tmp.gaugeEvent.timer === undefined) {
5915
NETDATA.gaugeAnimation(state, false);
5916
5958
- state.gaugeEvent.timer = setTimeout(function() {
5959
- state.gaugeEvent.timer = undefined;
5960
- NETDATA.gaugeSet(state, state.gaugeEvent.value, state.gaugeEvent.min, state.gaugeEvent.max);
5917
+ state.tmp.gaugeEvent.timer = setTimeout(function() {
5918
+ state.tmp.gaugeEvent.timer = undefined;
5919
+ NETDATA.gaugeSet(state, state.tmp.gaugeEvent.value, state.tmp.gaugeEvent.min, state.tmp.gaugeEvent.max);
5920
}, NETDATA.options.current.charts_selection_animation_delay);
5921
}
5922
@@ -5975,8 +5934,8 @@ var NETDATA = window.NETDATA || {};
5934
}
5935
else {
5936
value = data.result[0];
5978
- min = (state.gaugeMin === null)?NETDATA.commonMin.get(state):state.gaugeMin;
5979
- max = (state.gaugeMax === null)?NETDATA.commonMax.get(state):state.gaugeMax;
5937
+ min = (state.tmp.gaugeMin === null)?NETDATA.commonMin.get(state):state.tmp.gaugeMin;
5938
+ max = (state.tmp.gaugeMax === null)?NETDATA.commonMax.get(state):state.tmp.gaugeMax;
5939
if(value < min) min = value;
5940
if(value > max) max = value;
5941
@@ -5992,32 +5951,31 @@ var NETDATA = window.NETDATA || {};
5951
};
5952
5953
NETDATA.gaugeChartCreate = function(state, data) {
5995
- var self = $(state.element);
5954
// var chart = $(state.element_chart);
5955
5956
var value = data.result[0];
5999
- var min = self.data('gauge-min-value') || null;
6000
- var max = self.data('gauge-max-value') || null;
6001
- var adjust = self.data('gauge-adjust') || null;
6002
- var pointerColor = self.data('gauge-pointer-color') || NETDATA.themes.current.gauge_pointer;
6003
- var strokeColor = self.data('gauge-stroke-color') || NETDATA.themes.current.gauge_stroke;
6004
- var startColor = self.data('gauge-start-color') || state.chartCustomColors()[0];
6005
- var stopColor = self.data('gauge-stop-color') || void 0;
6006
- var generateGradient = self.data('gauge-generate-gradient') || false;
5957
+ var min = NETDATA.dataAttribute(state.element, 'gauge-min-value', null);
5958
+ var max = NETDATA.dataAttribute(state.element, 'gauge-max-value', null);
5959
+ var adjust = NETDATA.dataAttribute(state.element, 'gauge-adjust', null);
5960
+ var pointerColor = NETDATA.dataAttribute(state.element, 'gauge-pointer-color', NETDATA.themes.current.gauge_pointer);
5961
+ var strokeColor = NETDATA.dataAttribute(state.element, 'gauge-stroke-color', NETDATA.themes.current.gauge_stroke);
5962
+ var startColor = NETDATA.dataAttribute(state.element, 'gauge-start-color', state.chartCustomColors()[0]);
5963
+ var stopColor = NETDATA.dataAttribute(state.element, 'gauge-stop-color', void 0);
5964
+ var generateGradient = NETDATA.dataAttribute(state.element, 'gauge-generate-gradient', false);
5965
5966
if(min === null) {
5967
min = NETDATA.commonMin.get(state);
6010
- state.gaugeMin = null;
5968
+ state.tmp.gaugeMin = null;
5969
}
5970
else
6013
- state.gaugeMin = min;
5971
+ state.tmp.gaugeMin = min;
5972
5973
if(max === null) {
5974
max = NETDATA.commonMax.get(state);
6017
- state.gaugeMax = null;
5975
+ state.tmp.gaugeMax = null;
5976
}
5977
else
6020
- state.gaugeMax = max;
5978
+ state.tmp.gaugeMax = max;
5979
5980
// make sure it is zero based
5981
if(min > 0) min = 0;
@@ -6065,7 +6023,7 @@ var NETDATA = window.NETDATA || {};
6023
var len = generateGradient.length;
6024
while(len--) {
6025
var pcent = generateGradient[len];
6068
- var color = self.attr('data-gauge-gradient-percent-color-' + pcent.toString()) || false;
6026
+ var color = NETDATA.dataAttribute(state.element, 'gauge-gradient-percent-color-' + pcent.toString(), false);
6027
if(color !== false) {
6028
var a = [];
6029
a[0] = pcent / 100;
@@ -6092,57 +6050,57 @@ var NETDATA = window.NETDATA || {};
6050
[1.0, NETDATA.colorLuminance(startColor, 0.0)]];
6051
}
6052
6095
- state.gauge_canvas = document.createElement('canvas');
6096
- state.gauge_canvas.id = 'gauge-' + state.uuid + '-canvas';
6097
- state.gauge_canvas.className = 'gaugeChart';
6098
- state.gauge_canvas.width = width;
6099
- state.gauge_canvas.height = height;
6100
- state.element_chart.appendChild(state.gauge_canvas);
6053
+ state.tmp.gauge_canvas = document.createElement('canvas');
6054
+ state.tmp.gauge_canvas.id = 'gauge-' + state.uuid + '-canvas';
6055
+ state.tmp.gauge_canvas.className = 'gaugeChart';
6056
+ state.tmp.gauge_canvas.width = width;
6057
+ state.tmp.gauge_canvas.height = height;
6058
+ state.element_chart.appendChild(state.tmp.gauge_canvas);
6059
6060
var valuefontsize = Math.floor(height / 6);
6061
var valuetop = Math.round((height - valuefontsize - (height / 6)) / 2);
6104
- state.gaugeChartLabel = document.createElement('span');
6105
- state.gaugeChartLabel.className = 'gaugeChartLabel';
6106
- state.gaugeChartLabel.style.fontSize = valuefontsize + 'px';
6107
- state.gaugeChartLabel.style.top = valuetop.toString() + 'px';
6108
- state.element_chart.appendChild(state.gaugeChartLabel);
6062
+ state.tmp.gaugeChartLabel = document.createElement('span');
6063
+ state.tmp.gaugeChartLabel.className = 'gaugeChartLabel';
6064
+ state.tmp.gaugeChartLabel.style.fontSize = valuefontsize + 'px';
6065
+ state.tmp.gaugeChartLabel.style.top = valuetop.toString() + 'px';
6066
+ state.element_chart.appendChild(state.tmp.gaugeChartLabel);
6067
6068
var titlefontsize = Math.round(valuefontsize / 2);
6069
var titletop = 0;
6112
- state.gaugeChartTitle = document.createElement('span');
6113
- state.gaugeChartTitle.className = 'gaugeChartTitle';
6114
- state.gaugeChartTitle.innerText = state.title;
6115
- state.gaugeChartTitle.style.fontSize = titlefontsize + 'px';
6116
- state.gaugeChartTitle.style.lineHeight = titlefontsize + 'px';
6117
- state.gaugeChartTitle.style.top = titletop.toString() + 'px';
6118
- state.element_chart.appendChild(state.gaugeChartTitle);
6070
+ state.tmp.gaugeChartTitle = document.createElement('span');
6071
+ state.tmp.gaugeChartTitle.className = 'gaugeChartTitle';
6072
+ state.tmp.gaugeChartTitle.innerText = state.title;
6073
+ state.tmp.gaugeChartTitle.style.fontSize = titlefontsize + 'px';
6074
+ state.tmp.gaugeChartTitle.style.lineHeight = titlefontsize + 'px';
6075
+ state.tmp.gaugeChartTitle.style.top = titletop.toString() + 'px';
6076
+ state.element_chart.appendChild(state.tmp.gaugeChartTitle);
6077
6078
var unitfontsize = Math.round(titlefontsize * 0.9);
6121
- state.gaugeChartUnits = document.createElement('span');
6122
- state.gaugeChartUnits.className = 'gaugeChartUnits';
6123
- state.gaugeChartUnits.innerText = state.units;
6124
- state.gaugeChartUnits.style.fontSize = unitfontsize + 'px';
6125
- state.element_chart.appendChild(state.gaugeChartUnits);
6126
-
6127
- state.gaugeChartMin = document.createElement('span');
6128
- state.gaugeChartMin.className = 'gaugeChartMin';
6129
- state.gaugeChartMin.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px';
6130
- state.element_chart.appendChild(state.gaugeChartMin);
6131
-
6132
- state.gaugeChartMax = document.createElement('span');
6133
- state.gaugeChartMax.className = 'gaugeChartMax';
6134
- state.gaugeChartMax.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px';
6135
- state.element_chart.appendChild(state.gaugeChartMax);
6079
+ state.tmp.gaugeChartUnits = document.createElement('span');
6080
+ state.tmp.gaugeChartUnits.className = 'gaugeChartUnits';
6081
+ state.tmp.gaugeChartUnits.innerText = state.units;
6082
+ state.tmp.gaugeChartUnits.style.fontSize = unitfontsize + 'px';
6083
+ state.element_chart.appendChild(state.tmp.gaugeChartUnits);
6084
+
6085
+ state.tmp.gaugeChartMin = document.createElement('span');
6086
+ state.tmp.gaugeChartMin.className = 'gaugeChartMin';
6087
+ state.tmp.gaugeChartMin.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px';
6088
+ state.element_chart.appendChild(state.tmp.gaugeChartMin);
6089
+
6090
+ state.tmp.gaugeChartMax = document.createElement('span');
6091
+ state.tmp.gaugeChartMax.className = 'gaugeChartMax';
6092
+ state.tmp.gaugeChartMax.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px';
6093
+ state.element_chart.appendChild(state.tmp.gaugeChartMax);
6094
6095
// when we just re-create the chart
6096
// do not animate the first update
6097
var animate = true;
6140
- if(typeof state.gauge_instance !== 'undefined')
6098
+ if(typeof state.tmp.gauge_instance !== 'undefined')
6099
animate = false;
6100
6143
- state.gauge_instance = new Gauge(state.gauge_canvas).setOptions(options); // create sexy gauge!
6101
+ state.tmp.gauge_instance = new Gauge(state.tmp.gauge_canvas).setOptions(options); // create sexy gauge!
6102
6145
- state.___gaugeOld__ = {
6103
+ state.tmp.___gaugeOld__ = {
6104
value: value,
6105
min: min,
6106
max: max,
@@ -6152,8 +6110,8 @@ var NETDATA = window.NETDATA || {};
6110
};
6111
6112
// we will always feed a percentage
6155
- state.gauge_instance.minValue = 0;
6156
- state.gauge_instance.maxValue = 100;
6113
+ state.tmp.gauge_instance.minValue = 0;
6114
+ state.tmp.gauge_instance.maxValue = 100;
6115
6116
NETDATA.gaugeAnimation(state, animate);
6117
NETDATA.gaugeSet(state, value, min, max);
@@ -6171,8 +6129,8 @@ var NETDATA = window.NETDATA || {};
6129
create: NETDATA.dygraphChartCreate,
6130
update: NETDATA.dygraphChartUpdate,
6131
resize: function(state) {
6174
- if(typeof state.dygraph_instance.resize === 'function')
6175
- state.dygraph_instance.resize();
6132
+ if(typeof state.tmp.dygraph_instance.resize === 'function')
6133
+ state.tmp.dygraph_instance.resize();
6134
},
6135
setSelection: NETDATA.dygraphSetSelection,
6136
clearSelection: NETDATA.dygraphClearSelection,
@@ -6191,11 +6149,11 @@ var NETDATA = window.NETDATA || {};
6149
return (this.isSparkline(state) === false)?3:2;
6150
},
6151
isSparkline: function(state) {
6194
- if(typeof state.dygraph_sparkline === 'undefined') {
6195
- var t = $(state.element).data('dygraph-theme');
6196
- state.dygraph_sparkline = (t === 'sparkline');
6152
+ if(typeof state.tmp.dygraph_sparkline === 'undefined') {
6153
+ var t = NETDATA.dataAttribute(state.element, 'dygraph-theme', undefined);
6154
+ state.tmp.dygraph_sparkline = (t === 'sparkline');
6155
}
6198
- return state.dygraph_sparkline;
6156
+ return state.tmp.dygraph_sparkline;
6157
}
6158
},
6159
"sparkline": {
web/index.html
+14
-14
@@ -1037,7 +1037,7 @@
1037
1038
key = key + '.' + this.sparklines_registry[key].count;
1039
1040
- return prefix + '<div data-netdata="' + chart + '" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dimensions="' + dimension + '" data-show-value-of-' + dimension + '-at="' + key + '"></div> (<span id="' + key + '" style="display: inline-block; min-width: 50px; text-align: right;">X</span>' + units + ')' + suffix;
1040
+ return prefix + '<div class="netdata-container" data-netdata="' + chart + '" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dimensions="' + dimension + '" data-show-value-of-' + dimension + '-at="' + key + '"></div> (<span id="' + key + '" style="display: inline-block; min-width: 50px; text-align: right;">X</span>' + units + ')' + suffix;
1041
},
1042
1043
gaugeChart: function(title, width, dimensions, colors) {
@@ -1047,7 +1047,7 @@
1047
if(typeof dimensions === 'undefined')
1048
dimensions = '';
1049
1050
- return '<div data-netdata="CHART_UNIQUE_ID"'
1050
+ return '<div class="netdata-container" data-netdata="CHART_UNIQUE_ID"'
1051
+ ' data-dimensions="' + dimensions + '"'
1052
+ ' data-chart-library="gauge"'
1053
+ ' data-gauge-adjust="width"'
@@ -1263,7 +1263,7 @@
1263
var head = '';
1264
1265
if(typeof charts['system.swap'] !== 'undefined')
1266
- head += '<div style="margin-right: 10px;" data-netdata="system.swap"'
1266
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.swap"'
1267
+ ' data-dimensions="used"'
1268
+ ' data-append-options="percentage"'
1269
+ ' data-chart-library="easypiechart"'
@@ -1278,7 +1278,7 @@
1278
+ ' role="application"></div>';
1279
1280
if(typeof charts['system.io'] !== 'undefined') {
1281
- head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1281
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.io"'
1282
+ ' data-dimensions="in"'
1283
+ ' data-chart-library="easypiechart"'
1284
+ ' data-title="Disk Read"'
@@ -1288,7 +1288,7 @@
1288
+ ' data-points="' + duration.toString() + '"'
1289
+ ' role="application"></div>';
1290
1291
- head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1291
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.io"'
1292
+ ' data-dimensions="out"'
1293
+ ' data-chart-library="easypiechart"'
1294
+ ' data-title="Disk Write"'
@@ -1300,7 +1300,7 @@
1300
}
1301
1302
if(typeof charts['system.cpu'] !== 'undefined')
1303
- head += '<div data-netdata="system.cpu"'
1303
+ head += '<div class="netdata-container" data-netdata="system.cpu"'
1304
+ ' data-chart-library="gauge"'
1305
+ ' data-title="CPU"'
1306
+ ' data-units="%"'
@@ -1312,7 +1312,7 @@
1312
+ ' role="application"></div>';
1313
1314
if(typeof charts['system.ipv4'] !== 'undefined') {
1315
- head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1315
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.ipv4"'
1316
+ ' data-dimensions="received"'
1317
+ ' data-chart-library="easypiechart"'
1318
+ ' data-title="IPv4 Inbound"'
@@ -1322,7 +1322,7 @@
1322
+ ' data-points="' + duration.toString() + '"'
1323
+ ' role="application"></div>';
1324
1325
- head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1325
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.ipv4"'
1326
+ ' data-dimensions="sent"'
1327
+ ' data-chart-library="easypiechart"'
1328
+ ' data-title="IPv4 Outbound"'
@@ -1333,7 +1333,7 @@
1333
+ ' role="application"></div>';
1334
}
1335
else if(typeof charts['system.ipv6'] !== 'undefined') {
1336
- head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
1336
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.ipv6"'
1337
+ ' data-dimensions="received"'
1338
+ ' data-chart-library="easypiechart"'
1339
+ ' data-title="IPv6 Inbound"'
@@ -1344,7 +1344,7 @@
1344
+ ' data-points="' + duration.toString() + '"'
1345
+ ' role="application"></div>';
1346
1347
- head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
1347
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.ipv6"'
1348
+ ' data-dimensions="sent"'
1349
+ ' data-chart-library="easypiechart"'
1350
+ ' data-title="IPv6 Outbound"'
@@ -1357,7 +1357,7 @@
1357
}
1358
1359
if(typeof charts['system.ram'] !== 'undefined')
1360
- head += '<div style="margin-right: 10px;" data-netdata="system.ram"'
1360
+ head += '<div class="netdata-container" style="margin-right: 10px;" data-netdata="system.ram"'
1361
+ ' data-dimensions="used|buffers|active|wired"' // active and wired are FreeBSD stats
1362
+ ' data-append-options="percentage"'
1363
+ ' data-chart-library="easypiechart"'
@@ -1466,7 +1466,7 @@
1466
}
1467
1468
// generate the chart
1469
- chtml += netdataDashboard.contextInfo(chart.context) + '<div id="chart_' + NETDATA.name2id(chart.id) + '" data-netdata="' + chart.id + '"'
1469
+ chtml += netdataDashboard.contextInfo(chart.context) + '<div class="netdata-container" id="chart_' + NETDATA.name2id(chart.id) + '" data-netdata="' + chart.id + '"'
1470
+ ' data-width="' + pcent_width.toString() + '%"'
1471
+ ' data-height="' + netdataDashboard.contextHeight(chart.context, options.chartsHeight).toString() + 'px"'
1472
+ ' data-dygraph-valuerange="' + netdataDashboard.contextValueRange(chart.context) + '"'
@@ -3015,7 +3015,7 @@
3015
<b>Hover</b> on them too!
3016
</div>
3017
<div class="col-md-6">
3018
- <div data-netdata="system.intr" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dygraph-type="line" data-dygraph-strokewidth="3" data-dygraph-smooth="true" data-dygraph-highlightcirclesize="6" data-after="-90" data-height="60px" data-colors="#C66"></div>
3018
+ <div class="netdata-container" data-netdata="system.intr" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dygraph-type="line" data-dygraph-strokewidth="3" data-dygraph-smooth="true" data-dygraph-highlightcirclesize="6" data-after="-90" data-height="60px" data-colors="#C66"></div>
3019
</div>
3020
</div>
3021
</div>
@@ -3545,4 +3545,4 @@
3545
</div>
3546
</body>
3547
</html>
3548
-<script type="text/javascript" src="dashboard.js?v20170514-1"></script>
3548
+<script type="text/javascript" src="dashboard.js?v20170604-1"></script>