@cryptotaxi247 / netdata-1 / commits / fe5646ce7

Split js 2 (#4581)

* Mild cleanup of dashboard.js (#4461) * Balancing of else clauses * More cleanup, fixed nasty bug introduced by previous commit * More cleanup * More refactoring * Wip * More refactoring * Wip * Cleanup, wip * Refactor for-loop * Remove .hasOwnProperties, wip * Split dashboard.js into multiple files, wip #4479 * Fixed a bug in common min/max * Extracted more files from dashboard.js * Extracted more code, wip * Extract units-conversion.js and sparkline.js * Do not include morris.js, c3.js and raphael.js in dashbaord.js They are extracted as separate files but not included in dashboards.js * Removed refs to obsolete charting libraries #4492 * Extracted google-charts #4479 * Extracted google-charts * Extracted more charting libraries, cleanup * Organize charting libs in subfolder * Apply WebStorm formatter (mostly adds missing braces) * Additional formatting with WebStorm #4461 * Extracted d3pie, peity, localstorage * Extracted options.js, fixed some issues with dependencies, wip * Extracted boot.js * Fixes in for loops #4461 * Removed extrtacted d3pie from main file * Extracted registry.js * Extracted alarms.js * Extracted error-handling.js * Extracted fast formatting to utils.js * Extracted chart libraries registration code * Extracted some js/css loading code into boot.js * Added some info on generating dashboard.js * Fixed issues reported by LGTM * added slitted dashboard.js to makefiles * Minor * Please keep build-dashboard-js It's useful during development, I will clean this up in the mid-term * Moved server-detection to utils * Extracted themes.js * Extracted common.js * Extracted dependencies.js * Extracted server-detection.js * Extracted timeout.js * Extracted chart-registry.js * Remove excessive requestAnimationFrame compat checks, fixes #4501 * Remove that == this #4514 * Wip, #4514 * Wip, #4514 * More that -> this conversions * Configure LGTM to ignore web/gui/src #4515 * (x === false) -> (!x) #4461 * Cleaned up commented === false clauses * Properly configure LGTM to ignore web/gui/src #4515 * Snake-case to camel-case #4509 * wip #4509 * Minor * Updated Makefile.am * Case changes, wip #4509 * Removed double underscores * Wip #4509 * Wip #4509 * merged dashboard.js * deleted build-dashboard-js.sh

George Moschovitis committed Nov 8, 2018 at 11:37 UTC fe5646ce76168e26f27834434df0e38e2b559e31
13 files changed +1722 -1727
.lgtm.yml
+1
@@ -18,6 +18,7 @@ path_classifiers:
18 - collectors/node.d.plugin/node_modules/net-snmp.js
19 - collectors/node.d.plugin/node_modules/pixl-xml.js
20 - web/gui/lib/
21 + - web/gui/src/
22 - web/gui/css/
23 test:
24 - tests/
web/gui/Makefile.am
+6
@@ -11,6 +11,8 @@ CLEANFILES = \
11 DASHBOARD_JS_FILES = \
12 src/dashboard.js/prologue.js.inc \
13 src/dashboard.js/utils.js \
14 + src/dashboard.js/server-detection.js \
15 + src/dashboard.js/dependencies.js \
16 src/dashboard.js/error-handling.js \
17 src/dashboard.js/compatibility.js \
18 src/dashboard.js/xss.js \
@@ -18,6 +20,8 @@ DASHBOARD_JS_FILES = \
20 src/dashboard.js/units-conversion.js \
21 src/dashboard.js/options.js \
22 src/dashboard.js/localstorage.js \
23 + src/dashboard.js/timeout.js \
24 + src/dashboard.js/themes.js \
25 src/dashboard.js/charting/dygraph.js \
26 src/dashboard.js/charting/sparkline.js \
27 src/dashboard.js/charting/google-charts.js \
@@ -27,6 +31,8 @@ DASHBOARD_JS_FILES = \
31 src/dashboard.js/charting/d3.js \
32 src/dashboard.js/charting/peity.js \
33 src/dashboard.js/charting.js \
34 + src/dashboard.js/chart-registry.js \
35 + src/dashboard.js/common.js \
36 src/dashboard.js/main.js \
37 src/dashboard.js/alarms.js \
38 src/dashboard.js/registry.js \
web/gui/dashboard.js
+764 -770
@@ -128,7 +128,7 @@ NETDATA.zeropad = function (x) {
128 };
129
130 NETDATA.seconds4human = function (seconds, options) {
131 - let default_options = {
131 + let defaultOptions = {
132 now: 'now',
133 space: ' ',
134 negative_suffix: 'ago',
@@ -144,11 +144,11 @@ NETDATA.seconds4human = function (seconds, options) {
144 };
145
146 if (typeof options !== 'object') {
147 - options = default_options;
147 + options = defaultOptions;
148 } else {
149 - for (const x in default_options) {
149 + for (const x in defaultOptions) {
150 if (typeof options[x] !== 'string') {
151 - options[x] = default_options[x];
151 + options[x] = defaultOptions[x];
152 }
153 }
154 }
@@ -276,15 +276,15 @@ NETDATA.dataAttributeBoolean = function (element, attribute, def) {
276 // fast numbers formatting
277
278 NETDATA.fastNumberFormat = {
279 - formatters_fixed: [],
280 - formatters_zero_based: [],
279 + formattersFixed: [],
280 + formattersZeroBased: [],
281
282 // this is the fastest and the preferred
283 getIntlNumberFormat: function (min, max) {
284 let key = max;
285 if (min === max) {
286 - if (typeof this.formatters_fixed[key] === 'undefined') {
287 - this.formatters_fixed[key] = new Intl.NumberFormat(undefined, {
286 + if (typeof this.formattersFixed[key] === 'undefined') {
287 + this.formattersFixed[key] = new Intl.NumberFormat(undefined, {
288 // style: 'decimal',
289 // minimumIntegerDigits: 1,
290 // minimumSignificantDigits: 1,
@@ -295,10 +295,10 @@ NETDATA.fastNumberFormat = {
295 });
296 }
297
298 - return this.formatters_fixed[key];
298 + return this.formattersFixed[key];
299 } else if (min === 0) {
300 - if (typeof this.formatters_zero_based[key] === 'undefined') {
301 - this.formatters_zero_based[key] = new Intl.NumberFormat(undefined, {
300 + if (typeof this.formattersZeroBased[key] === 'undefined') {
301 + this.formattersZeroBased[key] = new Intl.NumberFormat(undefined, {
302 // style: 'decimal',
303 // minimumIntegerDigits: 1,
304 // minimumSignificantDigits: 1,
@@ -309,7 +309,7 @@ NETDATA.fastNumberFormat = {
309 });
310 }
311
312 - return this.formatters_zero_based[key];
312 + return this.formattersZeroBased[key];
313 } else {
314 // this is never used
315 // it is added just for completeness
@@ -329,8 +329,8 @@ NETDATA.fastNumberFormat = {
329 getLocaleString: function (min, max) {
330 let key = max;
331 if (min === max) {
332 - if (typeof this.formatters_fixed[key] === 'undefined') {
333 - this.formatters_fixed[key] = {
332 + if (typeof this.formattersFixed[key] === 'undefined') {
333 + this.formattersFixed[key] = {
334 format: function (value) {
335 return value.toLocaleString(undefined, {
336 // style: 'decimal',
@@ -345,10 +345,10 @@ NETDATA.fastNumberFormat = {
345 };
346 }
347
348 - return this.formatters_fixed[key];
348 + return this.formattersFixed[key];
349 } else if (min === 0) {
350 - if (typeof this.formatters_zero_based[key] === 'undefined') {
351 - this.formatters_zero_based[key] = {
350 + if (typeof this.formattersZeroBased[key] === 'undefined') {
351 + this.formattersZeroBased[key] = {
352 format: function (value) {
353 return value.toLocaleString(undefined, {
354 // style: 'decimal',
@@ -363,7 +363,7 @@ NETDATA.fastNumberFormat = {
363 };
364 }
365
366 - return this.formatters_zero_based[key];
366 + return this.formattersZeroBased[key];
367 } else {
368 return {
369 format: function (value) {
@@ -385,8 +385,8 @@ NETDATA.fastNumberFormat = {
385 getFixed: function (min, max) {
386 let key = max;
387 if (min === max) {
388 - if (typeof this.formatters_fixed[key] === 'undefined') {
389 - this.formatters_fixed[key] = {
388 + if (typeof this.formattersFixed[key] === 'undefined') {
389 + this.formattersFixed[key] = {
390 format: function (value) {
391 if (value === 0) {
392 return "0";
@@ -396,10 +396,10 @@ NETDATA.fastNumberFormat = {
396 };
397 }
398
399 - return this.formatters_fixed[key];
399 + return this.formattersFixed[key];
400 } else if (min === 0) {
401 - if (typeof this.formatters_zero_based[key] === 'undefined') {
402 - this.formatters_zero_based[key] = {
401 + if (typeof this.formattersZeroBased[key] === 'undefined') {
402 + this.formattersZeroBased[key] = {
403 format: function (value) {
404 if (value === 0) {
405 return "0";
@@ -409,7 +409,7 @@ NETDATA.fastNumberFormat = {
409 };
410 }
411
412 - return this.formatters_zero_based[key];
412 + return this.formattersZeroBased[key];
413 } else {
414 return {
415 format: function (value) {
@@ -477,6 +477,80 @@ NETDATA.fastNumberFormat = {
477 return this.get(min, max);
478 }
479 };
480 +
481 +// ----------------------------------------------------------------------------------------------------------------
482 +// Detect the netdata server
483 +
484 +// http://stackoverflow.com/questions/984510/what-is-my-script-src-url
485 +// http://stackoverflow.com/questions/6941533/get-protocol-domain-and-port-from-url
486 +NETDATA._scriptSource = function () {
487 + let script = null;
488 +
489 + if (typeof document.currentScript !== 'undefined') {
490 + script = document.currentScript;
491 + } else {
492 + const all_scripts = document.getElementsByTagName('script');
493 + script = all_scripts[all_scripts.length - 1];
494 + }
495 +
496 + if (typeof script.getAttribute.length !== 'undefined') {
497 + script = script.src;
498 + } else {
499 + script = script.getAttribute('src', -1);
500 + }
501 +
502 + return script;
503 +};
504 +
505 +// *** src/dashboard.js/server-detection.js
506 +
507 +if (typeof netdataServer !== 'undefined') {
508 + NETDATA.serverDefault = netdataServer;
509 +} else {
510 + let s = NETDATA._scriptSource();
511 + if (s) {
512 + NETDATA.serverDefault = s.replace(/\/dashboard.js(\?.*)?$/g, "");
513 + } else {
514 + console.log('WARNING: Cannot detect the URL of the netdata server.');
515 + NETDATA.serverDefault = null;
516 + }
517 +}
518 +
519 +if (NETDATA.serverDefault === null) {
520 + NETDATA.serverDefault = '';
521 +} else if (NETDATA.serverDefault.slice(-1) !== '/') {
522 + NETDATA.serverDefault += '/';
523 +}
524 +
525 +if (typeof netdataServerStatic !== 'undefined' && netdataServerStatic !== null && netdataServerStatic !== '') {
526 + NETDATA.serverStatic = netdataServerStatic;
527 + if (NETDATA.serverStatic.slice(-1) !== '/') {
528 + NETDATA.serverStatic += '/';
529 + }
530 +} else {
531 + NETDATA.serverStatic = NETDATA.serverDefault;
532 +}
533 +
534 +// *** src/dashboard.js/dependencies.js
535 +
536 +// default URLs for all the external files we need
537 +// make them RELATIVE so that the whole thing can also be
538 +// installed under a web server
539 +NETDATA.jQuery = NETDATA.serverStatic + 'lib/jquery-2.2.4.min.js';
540 +NETDATA.peity_js = NETDATA.serverStatic + 'lib/jquery.peity-3.2.0.min.js';
541 +NETDATA.sparkline_js = NETDATA.serverStatic + 'lib/jquery.sparkline-2.1.2.min.js';
542 +NETDATA.easypiechart_js = NETDATA.serverStatic + 'lib/jquery.easypiechart-97b5824.min.js';
543 +NETDATA.gauge_js = NETDATA.serverStatic + 'lib/gauge-1.3.2.min.js';
544 +NETDATA.dygraph_js = NETDATA.serverStatic + 'lib/dygraph-c91c859.min.js';
545 +NETDATA.dygraph_smooth_js = NETDATA.serverStatic + 'lib/dygraph-smooth-plotter-c91c859.js';
546 +// NETDATA.raphael_js = NETDATA.serverStatic + 'lib/raphael-2.2.4-min.js';
547 +// NETDATA.c3_js = NETDATA.serverStatic + 'lib/c3-0.4.18.min.js';
548 +// NETDATA.c3_css = NETDATA.serverStatic + 'css/c3-0.4.18.min.css';
549 +NETDATA.d3pie_js = NETDATA.serverStatic + 'lib/d3pie-0.2.1-netdata-3.js';
550 +NETDATA.d3_js = NETDATA.serverStatic + 'lib/d3-4.12.2.min.js';
551 +// NETDATA.morris_js = NETDATA.serverStatic + 'lib/morris-0.5.1.min.js';
552 +// NETDATA.morris_css = NETDATA.serverStatic + 'css/morris-0.5.1.css';
553 +NETDATA.google_js = 'https://www.google.com/jsapi';
554 // Error Handling
555
556 NETDATA.errorCodes = {
@@ -1486,6 +1560,196 @@ NETDATA.resetOptions = function () {
1560
1561 NETDATA.dateTime.init(NETDATA.options.current.timezone);
1562 };
1563 +
1564 +// *** src/dashboard.js/timeout.js
1565 +
1566 +// TODO: Better name needed
1567 +
1568 +NETDATA.timeout = {
1569 + // by default, these are just wrappers to setTimeout() / clearTimeout()
1570 +
1571 + step: function (callback) {
1572 + return window.setTimeout(callback, 1000 / 60);
1573 + },
1574 +
1575 + set: function (callback, delay) {
1576 + return window.setTimeout(callback, delay);
1577 + },
1578 +
1579 + clear: function (id) {
1580 + return window.clearTimeout(id);
1581 + },
1582 +
1583 + init: function () {
1584 + let custom = true;
1585 +
1586 + if (window.requestAnimationFrame) {
1587 + this.step = function (callback) {
1588 + return window.requestAnimationFrame(callback);
1589 + };
1590 +
1591 + this.clear = function (handle) {
1592 + return window.cancelAnimationFrame(handle.value);
1593 + };
1594 + // } else if (window.webkitRequestAnimationFrame) {
1595 + // this.step = function (callback) {
1596 + // return window.webkitRequestAnimationFrame(callback);
1597 + // };
1598 +
1599 + // if (window.webkitCancelAnimationFrame) {
1600 + // this.clear = function (handle) {
1601 + // return window.webkitCancelAnimationFrame(handle.value);
1602 + // };
1603 + // } else if (window.webkitCancelRequestAnimationFrame) {
1604 + // this.clear = function (handle) {
1605 + // return window.webkitCancelRequestAnimationFrame(handle.value);
1606 + // };
1607 + // }
1608 + // } else if (window.mozRequestAnimationFrame) {
1609 + // this.step = function (callback) {
1610 + // return window.mozRequestAnimationFrame(callback);
1611 + // };
1612 +
1613 + // this.clear = function (handle) {
1614 + // return window.mozCancelRequestAnimationFrame(handle.value);
1615 + // };
1616 + // } else if (window.oRequestAnimationFrame) {
1617 + // this.step = function (callback) {
1618 + // return window.oRequestAnimationFrame(callback);
1619 + // };
1620 +
1621 + // this.clear = function (handle) {
1622 + // return window.oCancelRequestAnimationFrame(handle.value);
1623 + // };
1624 + // } else if (window.msRequestAnimationFrame) {
1625 + // this.step = function (callback) {
1626 + // return window.msRequestAnimationFrame(callback);
1627 + // };
1628 +
1629 + // this.clear = function (handle) {
1630 + // return window.msCancelRequestAnimationFrame(handle.value);
1631 + // };
1632 + } else {
1633 + custom = false;
1634 + }
1635 +
1636 + if (custom) {
1637 + // we have installed custom .step() / .clear() functions
1638 + // overwrite the .set() too
1639 +
1640 + this.set = function (callback, delay) {
1641 + let start = Date.now(),
1642 + handle = new Object();
1643 +
1644 + const loop = () => {
1645 + let current = Date.now(),
1646 + delta = current - start;
1647 +
1648 + if (delta >= delay) {
1649 + callback.call();
1650 + } else {
1651 + handle.value = this.step(loop);
1652 + }
1653 + }
1654 +
1655 + handle.value = this.step(loop);
1656 + return handle;
1657 + };
1658 + }
1659 + }
1660 +};
1661 +
1662 +NETDATA.timeout.init();
1663 +
1664 +NETDATA.themes = {
1665 + white: {
1666 + bootstrap_css: NETDATA.serverStatic + 'css/bootstrap-3.3.7.css',
1667 + dashboard_css: NETDATA.serverStatic + 'dashboard.css?v20180210-1',
1668 + background: '#FFFFFF',
1669 + foreground: '#000000',
1670 + grid: '#F0F0F0',
1671 + axis: '#F0F0F0',
1672 + highlight: '#F5F5F5',
1673 + colors: ['#3366CC', '#DC3912', '#109618', '#FF9900', '#990099', '#DD4477',
1674 + '#3B3EAC', '#66AA00', '#0099C6', '#B82E2E', '#AAAA11', '#5574A6',
1675 + '#994499', '#22AA99', '#6633CC', '#E67300', '#316395', '#8B0707',
1676 + '#329262', '#3B3EAC'],
1677 + easypiechart_track: '#f0f0f0',
1678 + easypiechart_scale: '#dfe0e0',
1679 + gauge_pointer: '#C0C0C0',
1680 + gauge_stroke: '#F0F0F0',
1681 + gauge_gradient: false,
1682 + d3pie: {
1683 + title: '#333333',
1684 + subtitle: '#666666',
1685 + footer: '#888888',
1686 + other: '#aaaaaa',
1687 + mainlabel: '#333333',
1688 + percentage: '#dddddd',
1689 + value: '#aaaa22',
1690 + tooltip_bg: '#000000',
1691 + tooltip_fg: '#efefef',
1692 + segment_stroke: "#ffffff",
1693 + gradient_color: '#000000'
1694 + }
1695 + },
1696 + slate: {
1697 + bootstrap_css: NETDATA.serverStatic + 'css/bootstrap-slate-flat-3.3.7.css?v20161229-1',
1698 + dashboard_css: NETDATA.serverStatic + 'dashboard.slate.css?v20180210-1',
1699 + background: '#272b30',
1700 + foreground: '#C8C8C8',
1701 + grid: '#283236',
1702 + axis: '#283236',
1703 + highlight: '#383838',
1704 + /* colors: [ '#55bb33', '#ff2222', '#0099C6', '#faa11b', '#adbce0', '#DDDD00',
1705 + '#4178ba', '#f58122', '#a5cc39', '#f58667', '#f5ef89', '#cf93c0',
1706 + '#a5d18a', '#b8539d', '#3954a3', '#c8a9cf', '#c7de8a', '#fad20a',
1707 + '#a6a479', '#a66da8' ],
1708 + */
1709 + colors: ['#66AA00', '#FE3912', '#3366CC', '#D66300', '#0099C6', '#DDDD00',
1710 + '#5054e6', '#EE9911', '#BB44CC', '#e45757', '#ef0aef', '#CC7700',
1711 + '#22AA99', '#109618', '#905bfd', '#f54882', '#4381bf', '#ff3737',
1712 + '#329262', '#3B3EFF'],
1713 + easypiechart_track: '#373b40',
1714 + easypiechart_scale: '#373b40',
1715 + gauge_pointer: '#474b50',
1716 + gauge_stroke: '#373b40',
1717 + gauge_gradient: false,
1718 + d3pie: {
1719 + title: '#C8C8C8',
1720 + subtitle: '#283236',
1721 + footer: '#283236',
1722 + other: '#283236',
1723 + mainlabel: '#C8C8C8',
1724 + percentage: '#dddddd',
1725 + value: '#cccc44',
1726 + tooltip_bg: '#272b30',
1727 + tooltip_fg: '#C8C8C8',
1728 + segment_stroke: "#283236",
1729 + gradient_color: '#000000'
1730 + }
1731 + }
1732 +};
1733 +
1734 +if (typeof netdataTheme !== 'undefined' && typeof NETDATA.themes[netdataTheme] !== 'undefined') {
1735 + NETDATA.themes.current = NETDATA.themes[netdataTheme];
1736 +} else {
1737 + NETDATA.themes.current = NETDATA.themes.white;
1738 +}
1739 +
1740 +NETDATA.colors = NETDATA.themes.current.colors;
1741 +
1742 +// these are the colors Google Charts are using
1743 +// we have them here to attempt emulate their look and feel on the other chart libraries
1744 +// http://there4.io/2012/05/02/google-chart-color-list/
1745 +//NETDATA.colors = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6',
1746 +// '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11',
1747 +// '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC' ];
1748 +
1749 +// an alternative set
1750 +// http://www.mulinblog.com/a-color-palette-optimized-for-data-visualization/
1751 +// (blue) (red) (orange) (green) (pink) (brown) (purple) (yellow) (gray)
1752 +//NETDATA.colors = [ '#5DA5DA', '#F15854', '#FAA43A', '#60BD68', '#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#4D4D4D' ];
1753 // dygraph
1754
1755 NETDATA.dygraph = {
@@ -2363,7 +2627,7 @@ NETDATA.dygraphChartCreate = function (state, data) {
2627
2628 // if it didn't move, it is a selection
2629 if (state.dygraph_last_touch_move === 0 && state.dygraph_last_touch_page_x !== 0) {
2366 - NETDATA.globalSelectionSync.dont_sync_before = 0;
2630 + NETDATA.globalSelectionSync.dontSyncBefore = 0;
2631 NETDATA.globalSelectionSync.setMaster(state);
2632
2633 // internal api of dygraph
@@ -4326,389 +4590,104 @@ NETDATA.registerChartLibrary = function (library, url) {
4590 NETDATA.chartLibraries[library].initialized = true;
4591 NETDATA.chartLibraries[library].enabled = true;
4592 };
4329 -// ----------------------------------------------------------------------------------------------------------------
4330 -// Detect the netdata server
4593
4332 -// http://stackoverflow.com/questions/984510/what-is-my-script-src-url
4333 -// http://stackoverflow.com/questions/6941533/get-protocol-domain-and-port-from-url
4334 -NETDATA._scriptSource = function () {
4335 - let script = null;
4594 +// *** src/dashboard.js/chart-registry.js
4595
4337 - if (typeof document.currentScript !== 'undefined') {
4338 - script = document.currentScript;
4339 - } else {
4340 - const all_scripts = document.getElementsByTagName('script');
4341 - script = all_scripts[all_scripts.length - 1];
4342 - }
4596 +// Chart Registry
4597
4344 - if (typeof script.getAttribute.length !== 'undefined') {
4345 - script = script.src;
4346 - } else {
4347 - script = script.getAttribute('src', -1);
4598 +// When multiple charts need the same chart, we avoid downloading it
4599 +// multiple times (and having it in browser memory multiple time)
4600 +// by using this registry.
4601 +
4602 +// Every time we download a chart definition, we save it here with .add()
4603 +// Then we try to get it back with .get(). If that fails, we download it.
4604 +
4605 +NETDATA.fixHost = function (host) {
4606 + while (host.slice(-1) === '/') {
4607 + host = host.substring(0, host.length - 1);
4608 }
4609
4350 - return script;
4610 + return host;
4611 };
4612
4353 -if (typeof netdataServer !== 'undefined') {
4354 - NETDATA.serverDefault = netdataServer;
4355 -} else {
4356 - let s = NETDATA._scriptSource();
4357 - if (s) {
4358 - NETDATA.serverDefault = s.replace(/\/dashboard.js(\?.*)?$/g, "");
4359 - } else {
4360 - console.log('WARNING: Cannot detect the URL of the netdata server.');
4361 - NETDATA.serverDefault = null;
4362 - }
4363 -}
4364 -
4365 -if (NETDATA.serverDefault === null) {
4366 - NETDATA.serverDefault = '';
4367 -} else if (NETDATA.serverDefault.slice(-1) !== '/') {
4368 - NETDATA.serverDefault += '/';
4369 -}
4370 -
4371 -if (typeof netdataServerStatic !== 'undefined' && netdataServerStatic !== null && netdataServerStatic !== '') {
4372 - NETDATA.serverStatic = netdataServerStatic;
4373 - if (NETDATA.serverStatic.slice(-1) !== '/') {
4374 - NETDATA.serverStatic += '/';
4375 - }
4376 -} else {
4377 - NETDATA.serverStatic = NETDATA.serverDefault;
4378 -}
4379 -
4380 -// default URLs for all the external files we need
4381 -// make them RELATIVE so that the whole thing can also be
4382 -// installed under a web server
4383 -NETDATA.jQuery = NETDATA.serverStatic + 'lib/jquery-2.2.4.min.js';
4384 -NETDATA.peity_js = NETDATA.serverStatic + 'lib/jquery.peity-3.2.0.min.js';
4385 -NETDATA.sparkline_js = NETDATA.serverStatic + 'lib/jquery.sparkline-2.1.2.min.js';
4386 -NETDATA.easypiechart_js = NETDATA.serverStatic + 'lib/jquery.easypiechart-97b5824.min.js';
4387 -NETDATA.gauge_js = NETDATA.serverStatic + 'lib/gauge-1.3.2.min.js';
4388 -NETDATA.dygraph_js = NETDATA.serverStatic + 'lib/dygraph-c91c859.min.js';
4389 -NETDATA.dygraph_smooth_js = NETDATA.serverStatic + 'lib/dygraph-smooth-plotter-c91c859.js';
4390 -// NETDATA.raphael_js = NETDATA.serverStatic + 'lib/raphael-2.2.4-min.js';
4391 -// NETDATA.c3_js = NETDATA.serverStatic + 'lib/c3-0.4.18.min.js';
4392 -// NETDATA.c3_css = NETDATA.serverStatic + 'css/c3-0.4.18.min.css';
4393 -NETDATA.d3pie_js = NETDATA.serverStatic + 'lib/d3pie-0.2.1-netdata-3.js';
4394 -NETDATA.d3_js = NETDATA.serverStatic + 'lib/d3-4.12.2.min.js';
4395 -// NETDATA.morris_js = NETDATA.serverStatic + 'lib/morris-0.5.1.min.js';
4396 -// NETDATA.morris_css = NETDATA.serverStatic + 'css/morris-0.5.1.css';
4397 -NETDATA.google_js = 'https://www.google.com/jsapi';
4398 -
4399 -NETDATA.themes = {
4400 - white: {
4401 - bootstrap_css: NETDATA.serverStatic + 'css/bootstrap-3.3.7.css',
4402 - dashboard_css: NETDATA.serverStatic + 'dashboard.css?v20180210-1',
4403 - background: '#FFFFFF',
4404 - foreground: '#000000',
4405 - grid: '#F0F0F0',
4406 - axis: '#F0F0F0',
4407 - highlight: '#F5F5F5',
4408 - colors: ['#3366CC', '#DC3912', '#109618', '#FF9900', '#990099', '#DD4477',
4409 - '#3B3EAC', '#66AA00', '#0099C6', '#B82E2E', '#AAAA11', '#5574A6',
4410 - '#994499', '#22AA99', '#6633CC', '#E67300', '#316395', '#8B0707',
4411 - '#329262', '#3B3EAC'],
4412 - easypiechart_track: '#f0f0f0',
4413 - easypiechart_scale: '#dfe0e0',
4414 - gauge_pointer: '#C0C0C0',
4415 - gauge_stroke: '#F0F0F0',
4416 - gauge_gradient: false,
4417 - d3pie: {
4418 - title: '#333333',
4419 - subtitle: '#666666',
4420 - footer: '#888888',
4421 - other: '#aaaaaa',
4422 - mainlabel: '#333333',
4423 - percentage: '#dddddd',
4424 - value: '#aaaa22',
4425 - tooltip_bg: '#000000',
4426 - tooltip_fg: '#efefef',
4427 - segment_stroke: "#ffffff",
4428 - gradient_color: '#000000'
4429 - }
4430 - },
4431 - slate: {
4432 - bootstrap_css: NETDATA.serverStatic + 'css/bootstrap-slate-flat-3.3.7.css?v20161229-1',
4433 - dashboard_css: NETDATA.serverStatic + 'dashboard.slate.css?v20180210-1',
4434 - background: '#272b30',
4435 - foreground: '#C8C8C8',
4436 - grid: '#283236',
4437 - axis: '#283236',
4438 - highlight: '#383838',
4439 - /* colors: [ '#55bb33', '#ff2222', '#0099C6', '#faa11b', '#adbce0', '#DDDD00',
4440 - '#4178ba', '#f58122', '#a5cc39', '#f58667', '#f5ef89', '#cf93c0',
4441 - '#a5d18a', '#b8539d', '#3954a3', '#c8a9cf', '#c7de8a', '#fad20a',
4442 - '#a6a479', '#a66da8' ],
4443 - */
4444 - colors: ['#66AA00', '#FE3912', '#3366CC', '#D66300', '#0099C6', '#DDDD00',
4445 - '#5054e6', '#EE9911', '#BB44CC', '#e45757', '#ef0aef', '#CC7700',
4446 - '#22AA99', '#109618', '#905bfd', '#f54882', '#4381bf', '#ff3737',
4447 - '#329262', '#3B3EFF'],
4448 - easypiechart_track: '#373b40',
4449 - easypiechart_scale: '#373b40',
4450 - gauge_pointer: '#474b50',
4451 - gauge_stroke: '#373b40',
4452 - gauge_gradient: false,
4453 - d3pie: {
4454 - title: '#C8C8C8',
4455 - subtitle: '#283236',
4456 - footer: '#283236',
4457 - other: '#283236',
4458 - mainlabel: '#C8C8C8',
4459 - percentage: '#dddddd',
4460 - value: '#cccc44',
4461 - tooltip_bg: '#272b30',
4462 - tooltip_fg: '#C8C8C8',
4463 - segment_stroke: "#283236",
4464 - gradient_color: '#000000'
4465 - }
4466 - }
4467 -};
4468 -
4469 -if (typeof netdataTheme !== 'undefined' && typeof NETDATA.themes[netdataTheme] !== 'undefined') {
4470 - NETDATA.themes.current = NETDATA.themes[netdataTheme];
4471 -} else {
4472 - NETDATA.themes.current = NETDATA.themes.white;
4473 -}
4474 -
4475 -NETDATA.colors = NETDATA.themes.current.colors;
4476 -
4477 -// these are the colors Google Charts are using
4478 -// we have them here to attempt emulate their look and feel on the other chart libraries
4479 -// http://there4.io/2012/05/02/google-chart-color-list/
4480 -//NETDATA.colors = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6',
4481 -// '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11',
4482 -// '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC' ];
4483 -
4484 -// an alternative set
4485 -// http://www.mulinblog.com/a-color-palette-optimized-for-data-visualization/
4486 -// (blue) (red) (orange) (green) (pink) (brown) (purple) (yellow) (gray)
4487 -//NETDATA.colors = [ '#5DA5DA', '#F15854', '#FAA43A', '#60BD68', '#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#4D4D4D' ];
4488 -
4489 -// ----------------------------------------------------------------------------------------------------------------
4490 -
4491 -NETDATA.timeout = {
4492 - // by default, these are just wrappers to setTimeout() / clearTimeout()
4493 -
4494 - step: function (callback) {
4495 - return window.setTimeout(callback, 1000 / 60);
4496 - },
4497 -
4498 - set: function (callback, delay) {
4499 - return window.setTimeout(callback, delay);
4500 - },
4613 +NETDATA.chartRegistry = {
4614 + charts: {},
4615
4502 - clear: function (id) {
4503 - return window.clearTimeout(id);
4616 + globalReset: function () {
4617 + this.charts = {};
4618 },
4619
4506 - init: function () {
4507 - let custom = true;
4508 -
4509 - if (window.requestAnimationFrame) {
4510 - this.step = function (callback) {
4511 - return window.requestAnimationFrame(callback);
4512 - };
4513 -
4514 - this.clear = function (handle) {
4515 - return window.cancelAnimationFrame(handle.value);
4516 - };
4517 - } else if (window.webkitRequestAnimationFrame) {
4518 - this.step = function (callback) {
4519 - return window.webkitRequestAnimationFrame(callback);
4520 - };
4521 -
4522 - if (window.webkitCancelAnimationFrame) {
4523 - this.clear = function (handle) {
4524 - return window.webkitCancelAnimationFrame(handle.value);
4525 - };
4526 - } else if (window.webkitCancelRequestAnimationFrame) {
4527 - this.clear = function (handle) {
4528 - return window.webkitCancelRequestAnimationFrame(handle.value);
4529 - };
4530 - }
4531 - } else if (window.mozRequestAnimationFrame) {
4532 - this.step = function (callback) {
4533 - return window.mozRequestAnimationFrame(callback);
4534 - };
4535 -
4536 - this.clear = function (handle) {
4537 - return window.mozCancelRequestAnimationFrame(handle.value);
4538 - };
4539 - } else if (window.oRequestAnimationFrame) {
4540 - this.step = function (callback) {
4541 - return window.oRequestAnimationFrame(callback);
4542 - };
4543 -
4544 - this.clear = function (handle) {
4545 - return window.oCancelRequestAnimationFrame(handle.value);
4546 - };
4547 - } else if (window.msRequestAnimationFrame) {
4548 - this.step = function (callback) {
4549 - return window.msRequestAnimationFrame(callback);
4550 - };
4551 -
4552 - this.clear = function (handle) {
4553 - return window.msCancelRequestAnimationFrame(handle.value);
4554 - };
4555 - } else {
4556 - custom = false;
4557 - }
4558 -
4559 - if (custom) {
4560 - // we have installed custom .step() / .clear() functions
4561 - // overwrite the .set() too
4562 -
4563 - this.set = function (callback, delay) {
4564 - let that = this;
4565 -
4566 - let start = Date.now(),
4567 - handle = new Object();
4568 -
4569 - function loop() {
4570 - let current = Date.now(),
4571 - delta = current - start;
4572 -
4573 - if (delta >= delay) {
4574 - callback.call();
4575 - } else {
4576 - handle.value = that.step(loop);
4577 - }
4578 - }
4579 -
4580 - handle.value = that.step(loop);
4581 - return handle;
4582 - };
4583 - }
4584 - }
4585 -};
4586 -
4587 -NETDATA.timeout.init();
4588 -
4589 -// ----------------------------------------------------------------------------------------------------------------
4590 -
4591 -if (NETDATA.options.debug.main_loop) {
4592 - console.log('welcome to NETDATA');
4593 -}
4594 -
4595 -NETDATA.onresizeCallback = null;
4596 -NETDATA.onresize = function () {
4597 - NETDATA.options.last_page_resize = Date.now();
4598 - NETDATA.onscroll();
4599 -
4600 - if (typeof NETDATA.onresizeCallback === 'function') {
4601 - NETDATA.onresizeCallback();
4602 - }
4603 -};
4604 -
4605 -NETDATA.abort_all_refreshes = function () {
4606 - let targets = NETDATA.options.targets;
4607 - let len = targets.length;
4608 -
4609 - while (len--) {
4610 - if (targets[len].fetching_data) {
4611 - if (typeof targets[len].xhr !== 'undefined') {
4612 - targets[len].xhr.abort();
4613 - targets[len].running = false;
4614 - targets[len].fetching_data = false;
4615 - }
4620 + add: function (host, id, data) {
4621 + if (typeof this.charts[host] === 'undefined') {
4622 + this.charts[host] = {};
4623 }
4617 - }
4618 -};
4619 -
4620 -NETDATA.onscroll_start_delay = function () {
4621 - NETDATA.options.last_page_scroll = Date.now();
4622 -
4623 - NETDATA.options.on_scroll_refresher_stop_until =
4624 - NETDATA.options.last_page_scroll
4625 - + (NETDATA.options.current.async_on_scroll ? 1000 : 0);
4626 -};
4627 -
4628 -NETDATA.onscroll_end_delay = function () {
4629 - NETDATA.options.on_scroll_refresher_stop_until =
4630 - Date.now()
4631 - + (NETDATA.options.current.async_on_scroll ? NETDATA.options.current.onscroll_worker_duration_threshold : 0);
4632 -};
4633 -
4634 -NETDATA.onscroll_updater_timeout_id = undefined;
4635 -NETDATA.onscroll_updater = function () {
4636 - NETDATA.globalSelectionSync.stop();
4624
4638 - if (NETDATA.options.abort_ajax_on_scroll) {
4639 - NETDATA.abort_all_refreshes();
4640 - }
4641 -
4642 - // when the user scrolls he sees that we have
4643 - // hidden all the not-visible charts
4644 - // using this little function we try to switch
4645 - // the charts back to visible quickly
4646 -
4647 - // if (NETDATA.intersectionObserver.enabled() === false) {
4648 - if (!NETDATA.intersectionObserver.enabled()) {
4649 - // if (NETDATA.options.current.parallel_refresher === false) {
4650 - if (!NETDATA.options.current.parallel_refresher) {
4651 - let targets = NETDATA.options.targets;
4652 - let len = targets.length;
4653 -
4654 - while (len--) {
4655 - if (!targets[len].running) {
4656 - // if (targets[len].running === false) {
4657 - targets[len].isVisible();
4658 - }
4659 - }
4660 - }
4661 - }
4625 + //console.log('added ' + host + '/' + id);
4626 + this.charts[host][id] = data;
4627 + },
4628
4663 - NETDATA.onscroll_end_delay();
4664 -};
4629 + get: function (host, id) {
4630 + if (typeof this.charts[host] === 'undefined') {
4631 + return null;
4632 + }
4633
4666 -NETDATA.scrollUp = false;
4667 -NETDATA.scrollY = window.scrollY;
4668 -NETDATA.onscroll = function () {
4669 - //console.log('onscroll() begin');
4634 + if (typeof this.charts[host][id] === 'undefined') {
4635 + return null;
4636 + }
4637
4671 - NETDATA.onscroll_start_delay();
4672 - NETDATA.chartRefresherReschedule();
4638 + //console.log('cached ' + host + '/' + id);
4639 + return this.charts[host][id];
4640 + },
4641
4674 - NETDATA.scrollUp = (window.scrollY > NETDATA.scrollY);
4675 - NETDATA.scrollY = window.scrollY;
4642 + downloadAll: function (host, callback) {
4643 + host = NETDATA.fixHost(host);
4644
4677 - if (NETDATA.onscroll_updater_timeout_id) {
4678 - NETDATA.timeout.clear(NETDATA.onscroll_updater_timeout_id);
4679 - }
4645 + let self = this;
4646
4681 - NETDATA.onscroll_updater_timeout_id = NETDATA.timeout.set(NETDATA.onscroll_updater, 0);
4682 - //console.log('onscroll() end');
4683 -};
4647 + function got_data(h, data, callback) {
4648 + if (data !== null) {
4649 + self.charts[h] = data.charts;
4650
4685 -NETDATA.supportsPassiveEvents = function () {
4686 - if (NETDATA.options.passive_events === null) {
4687 - let supportsPassive = false;
4688 - try {
4689 - let opts = Object.defineProperty({}, 'passive', {
4690 - get: function () {
4691 - supportsPassive = true;
4651 + // update the server timezone in our options
4652 + if (typeof data.timezone === 'string') {
4653 + NETDATA.options.server_timezone = data.timezone;
4654 }
4693 - });
4694 - window.addEventListener("test", null, opts);
4695 - } catch (e) {
4696 - console.log('browser does not support passive events');
4655 + } else {
4656 + NETDATA.error(406, h + '/api/v1/charts');
4657 + }
4658 +
4659 + if (typeof callback === 'function') {
4660 + callback(data);
4661 + }
4662 }
4663
4699 - NETDATA.options.passive_events = supportsPassive;
4700 - }
4664 + if (netdataSnapshotData !== null) {
4665 + got_data(host, netdataSnapshotData.charts, callback);
4666 + } else {
4667 + $.ajax({
4668 + url: host + '/api/v1/charts',
4669 + async: true,
4670 + cache: false,
4671 + xhrFields: {withCredentials: true} // required for the cookie
4672 + })
4673 + .done(function (data) {
4674 + data = NETDATA.xss.checkOptional('/api/v1/charts', data);
4675 + got_data(host, data, callback);
4676 + })
4677 + .fail(function () {
4678 + NETDATA.error(405, host + '/api/v1/charts');
4679
4702 - // console.log('passive ' + NETDATA.options.passive_events);
4703 - return NETDATA.options.passive_events;
4680 + if (typeof callback === 'function') {
4681 + callback(null);
4682 + }
4683 + });
4684 + }
4685 + }
4686 };
4687
4706 -window.addEventListener('resize', NETDATA.onresize, NETDATA.supportsPassiveEvents() ? {passive: true} : false);
4707 -window.addEventListener('scroll', NETDATA.onscroll, NETDATA.supportsPassiveEvents() ? {passive: true} : false);
4708 -// window.onresize = NETDATA.onresize;
4709 -// window.onscroll = NETDATA.onscroll;
4688 +// Compute common (joint) values over multiple charts.
4689 +
4690
4711 -// ----------------------------------------------------------------------------------------------------------------
4691 // commonMin & commonMax
4692
4693 NETDATA.commonMin = {
@@ -4955,99 +4934,125 @@ NETDATA.commonColors = {
4934 }
4935 };
4936
4958 -// ----------------------------------------------------------------------------------------------------------------
4959 -// Chart Registry
4937 +// *** src/dashboard.js/main.js
4938
4961 -// When multiple charts need the same chart, we avoid downloading it
4962 -// multiple times (and having it in browser memory multiple time)
4963 -// by using this registry.
4939 +if (NETDATA.options.debug.main_loop) {
4940 + console.log('welcome to NETDATA');
4941 +}
4942
4965 -// Every time we download a chart definition, we save it here with .add()
4966 -// Then we try to get it back with .get(). If that fails, we download it.
4943 +NETDATA.onresizeCallback = null;
4944 +NETDATA.onresize = function () {
4945 + NETDATA.options.last_page_resize = Date.now();
4946 + NETDATA.onscroll();
4947
4968 -NETDATA.fixHost = function (host) {
4969 - while (host.slice(-1) === '/') {
4970 - host = host.substring(0, host.length - 1);
4948 + if (typeof NETDATA.onresizeCallback === 'function') {
4949 + NETDATA.onresizeCallback();
4950 }
4972 -
4973 - return host;
4951 };
4952
4976 -NETDATA.chartRegistry = {
4977 - charts: {},
4978 -
4979 - globalReset: function () {
4980 - this.charts = {};
4981 - },
4953 +NETDATA.abortAllRefreshes = function () {
4954 + let targets = NETDATA.options.targets;
4955 + let len = targets.length;
4956
4983 - add: function (host, id, data) {
4984 - if (typeof this.charts[host] === 'undefined') {
4985 - this.charts[host] = {};
4957 + while (len--) {
4958 + if (targets[len].fetching_data) {
4959 + if (typeof targets[len].xhr !== 'undefined') {
4960 + targets[len].xhr.abort();
4961 + targets[len].running = false;
4962 + targets[len].fetching_data = false;
4963 + }
4964 }
4965 + }
4966 +};
4967
4988 - //console.log('added ' + host + '/' + id);
4989 - this.charts[host][id] = data;
4990 - },
4968 +NETDATA.onscrollStartDelay = function () {
4969 + NETDATA.options.last_page_scroll = Date.now();
4970
4992 - get: function (host, id) {
4993 - if (typeof this.charts[host] === 'undefined') {
4994 - return null;
4995 - }
4971 + NETDATA.options.on_scroll_refresher_stop_until =
4972 + NETDATA.options.last_page_scroll
4973 + + (NETDATA.options.current.async_on_scroll ? 1000 : 0);
4974 +};
4975
4997 - if (typeof this.charts[host][id] === 'undefined') {
4998 - return null;
4999 - }
4976 +NETDATA.onscrollEndDelay = function () {
4977 + NETDATA.options.on_scroll_refresher_stop_until =
4978 + Date.now()
4979 + + (NETDATA.options.current.async_on_scroll ? NETDATA.options.current.onscroll_worker_duration_threshold : 0);
4980 +};
4981
5001 - //console.log('cached ' + host + '/' + id);
5002 - return this.charts[host][id];
5003 - },
4982 +NETDATA.onscroll_updater_timeout_id = undefined;
4983 +NETDATA.onscrollUpdater = function () {
4984 + NETDATA.globalSelectionSync.stop();
4985
5005 - downloadAll: function (host, callback) {
5006 - host = NETDATA.fixHost(host);
4986 + if (NETDATA.options.abort_ajax_on_scroll) {
4987 + NETDATA.abortAllRefreshes();
4988 + }
4989
5008 - let self = this;
4990 + // when the user scrolls he sees that we have
4991 + // hidden all the not-visible charts
4992 + // using this little function we try to switch
4993 + // the charts back to visible quickly
4994
5010 - function got_data(h, data, callback) {
5011 - if (data !== null) {
5012 - self.charts[h] = data.charts;
4995 + if (!NETDATA.intersectionObserver.enabled()) {
4996 + if (!NETDATA.options.current.parallel_refresher) {
4997 + let targets = NETDATA.options.targets;
4998 + let len = targets.length;
4999
5014 - // update the server timezone in our options
5015 - if (typeof data.timezone === 'string') {
5016 - NETDATA.options.server_timezone = data.timezone;
5000 + while (len--) {
5001 + if (!targets[len].running) {
5002 + targets[len].isVisible();
5003 }
5018 - } else {
5019 - NETDATA.error(406, h + '/api/v1/charts');
5020 - }
5021 -
5022 - if (typeof callback === 'function') {
5023 - callback(data);
5004 }
5005 }
5006 + }
5007
5027 - if (netdataSnapshotData !== null) {
5028 - got_data(host, netdataSnapshotData.charts, callback);
5029 - } else {
5030 - $.ajax({
5031 - url: host + '/api/v1/charts',
5032 - async: true,
5033 - cache: false,
5034 - xhrFields: {withCredentials: true} // required for the cookie
5035 - })
5036 - .done(function (data) {
5037 - data = NETDATA.xss.checkOptional('/api/v1/charts', data);
5038 - got_data(host, data, callback);
5039 - })
5040 - .fail(function () {
5041 - NETDATA.error(405, host + '/api/v1/charts');
5008 + NETDATA.onscrollEndDelay();
5009 +};
5010
5043 - if (typeof callback === 'function') {
5044 - callback(null);
5045 - }
5046 - });
5011 +NETDATA.scrollUp = false;
5012 +NETDATA.scrollY = window.scrollY;
5013 +NETDATA.onscroll = function () {
5014 + //console.log('onscroll() begin');
5015 +
5016 + NETDATA.onscrollStartDelay();
5017 + NETDATA.chartRefresherReschedule();
5018 +
5019 + NETDATA.scrollUp = (window.scrollY > NETDATA.scrollY);
5020 + NETDATA.scrollY = window.scrollY;
5021 +
5022 + if (NETDATA.onscroll_updater_timeout_id) {
5023 + NETDATA.timeout.clear(NETDATA.onscroll_updater_timeout_id);
5024 + }
5025 +
5026 + NETDATA.onscroll_updater_timeout_id = NETDATA.timeout.set(NETDATA.onscrollUpdater, 0);
5027 + //console.log('onscroll() end');
5028 +};
5029 +
5030 +NETDATA.supportsPassiveEvents = function () {
5031 + if (NETDATA.options.passive_events === null) {
5032 + let supportsPassive = false;
5033 + try {
5034 + let opts = Object.defineProperty({}, 'passive', {
5035 + get: function () {
5036 + supportsPassive = true;
5037 + }
5038 + });
5039 + window.addEventListener("test", null, opts);
5040 + } catch (e) {
5041 + console.log('browser does not support passive events');
5042 }
5043 +
5044 + NETDATA.options.passive_events = supportsPassive;
5045 }
5046 +
5047 + // console.log('passive ' + NETDATA.options.passive_events);
5048 + return NETDATA.options.passive_events;
5049 };
5050
5051 +window.addEventListener('resize', NETDATA.onresize, NETDATA.supportsPassiveEvents() ? {passive: true} : false);
5052 +window.addEventListener('scroll', NETDATA.onscroll, NETDATA.supportsPassiveEvents() ? {passive: true} : false);
5053 +// window.onresize = NETDATA.onresize;
5054 +// window.onscroll = NETDATA.onscroll;
5055 +
5056 // ----------------------------------------------------------------------------------------------------------------
5057 // Global Pan and Zoom on charts
5058
@@ -5092,8 +5097,6 @@ NETDATA.globalPanAndZoom = {
5097 setMaster: function (state, after, before) {
5098 this.delay();
5099
5095 - // if (NETDATA.options.current.sync_pan_and_zoom === false)
5096 - // return;
5100 if (!NETDATA.options.current.sync_pan_and_zoom) {
5101 return;
5102 }
@@ -5290,7 +5293,6 @@ dimensionStatus.prototype.setOptions = function (name_div, value_div, color) {
5293 this.name_div = name_div;
5294 this.name_div.title = this.label;
5295 this.name_div.style.setProperty('color', this.color, 'important');
5293 - // if (this.selected === false)
5296 if (!this.selected) {
5297 this.name_div.className = 'netdata-legend-name not-selected';
5298 } else {
@@ -5302,7 +5304,7 @@ dimensionStatus.prototype.setOptions = function (name_div, value_div, color) {
5304 this.value_div = value_div;
5305 this.value_div.title = this.label;
5306 this.value_div.style.setProperty('color', this.color, 'important');
5305 - if (this.selected === false) {
5307 + if (!this.selected) {
5308 this.value_div.className = 'netdata-legend-value not-selected';
5309 } else {
5310 this.value_div.className = 'netdata-legend-value selected';
@@ -5314,7 +5316,6 @@ dimensionStatus.prototype.setOptions = function (name_div, value_div, color) {
5316 };
5317
5318 dimensionStatus.prototype.setHandler = function () {
5317 - // if (this.enabled === false) return;
5319 if (!this.enabled) {
5320 return;
5321 }
@@ -5360,7 +5361,6 @@ dimensionStatus.prototype.setHandler = function () {
5361 };
5362
5363 dimensionStatus.prototype.select = function () {
5363 - // if (this.enabled === false) return;
5364 if (!this.enabled) {
5365 return;
5366 }
@@ -5371,7 +5371,6 @@ dimensionStatus.prototype.select = function () {
5371 };
5372
5373 dimensionStatus.prototype.unselect = function () {
5374 - // if (this.enabled === false) return;
5374 if (!this.enabled) {
5375 return;
5376 }
@@ -5600,18 +5599,18 @@ NETDATA.dateTime.init(NETDATA.options.current.timezone);
5599
5600 NETDATA.globalSelectionSync = {
5601 state: null,
5603 - dont_sync_before: 0,
5602 + dontSyncBefore: 0,
5603 last_t: 0,
5604 slaves: [],
5606 - timeout_id: undefined,
5605 + timeoutId: undefined,
5606
5607 globalReset: function () {
5608 this.stop();
5609 this.state = null;
5611 - this.dont_sync_before = 0;
5610 + this.dontSyncBefore = 0;
5611 this.last_t = 0;
5612 this.slaves = [];
5614 - this.timeout_id = undefined;
5613 + this.timeoutId = undefined;
5614 },
5615
5616 active: function () {
@@ -5622,17 +5621,15 @@ NETDATA.globalSelectionSync = {
5621 enabled: function () {
5622 // console.log('enabled()');
5623 // can we globally apply selection sync?
5625 - // if (NETDATA.options.current.sync_selection === false) {
5624 if (!NETDATA.options.current.sync_selection) {
5625 return false;
5626 }
5627
5630 - return (this.dont_sync_before <= Date.now());
5628 + return (this.dontSyncBefore <= Date.now());
5629 },
5630
5631 // set the global selection sync master
5632 setMaster: function (state) {
5635 - // if (this.enabled() === false) {
5633 if (!this.enabled()) {
5634 this.stop();
5635 return;
@@ -5697,9 +5694,9 @@ NETDATA.globalSelectionSync = {
5694 }
5695
5696 if (typeof ms === 'number') {
5700 - this.dont_sync_before = Date.now() + ms;
5697 + this.dontSyncBefore = Date.now() + ms;
5698 } else {
5702 - this.dont_sync_before = Date.now() + NETDATA.options.current.sync_selection_delay;
5699 + this.dontSyncBefore = Date.now() + NETDATA.options.current.sync_selection_delay;
5700 }
5701 }
5702 },
@@ -5718,7 +5715,7 @@ NETDATA.globalSelectionSync = {
5715 NETDATA.globalSelectionSync.slaves[len].setSelection(t);
5716 }
5717
5721 - this.timeout_id = undefined;
5718 + this.timeoutId = undefined;
5719 }
5720 },
5721
@@ -5740,15 +5737,15 @@ NETDATA.globalSelectionSync = {
5737
5738 this.last_t = t;
5739
5743 - if (state.foreign_element_selection !== null) {
5744 - state.foreign_element_selection.innerText = NETDATA.dateTime.localeDateString(t) + ' ' + NETDATA.dateTime.localeTimeString(t);
5740 + if (state.foreignElementSelection !== null) {
5741 + state.foreignElementSelection.innerText = NETDATA.dateTime.localeDateString(t) + ' ' + NETDATA.dateTime.localeTimeString(t);
5742 }
5743
5747 - if (this.timeout_id) {
5748 - NETDATA.timeout.clear(this.timeout_id);
5744 + if (this.timeoutId) {
5745 + NETDATA.timeout.clear(this.timeoutId);
5746 }
5747
5751 - this.timeout_id = NETDATA.timeout.set(this.__syncSlaves, 0);
5748 + this.timeoutId = NETDATA.timeout.set(this.__syncSlaves, 0);
5749 }
5750 }
5751 };
@@ -5825,7 +5822,7 @@ NETDATA.intersectionObserver = {
5822
5823 state.__visibilityRatio = entry.intersectionRatio;
5824
5828 - if (NETDATA.options.current.async_on_scroll === false) {
5825 + if (!NETDATA.options.current.async_on_scroll) {
5826 if (window.requestIdleCallback) {
5827 window.requestIdleCallback(function () {
5828 NETDATA.intersectionObserver.switchChartVisibility.call(state);
@@ -5844,7 +5841,7 @@ NETDATA.intersectionObserver = {
5841 this.observer.observe(state.element);
5842
5843 state.isVisible = function () {
5847 - if (NETDATA.options.current.update_only_visible === false) {
5844 + if (!NETDATA.options.current.update_only_visible) {
5845 return true;
5846 }
5847
@@ -5879,6 +5876,7 @@ let chartState = function (element) {
5876
5877 // IMPORTANT:
5878 // all private functions should use 'that', instead of 'this'
5879 + // Alternatively, you can use arrow functions (related issue #4514)
5880 let that = this;
5881
5882 // ============================================================================================================
@@ -5887,17 +5885,17 @@ let chartState = function (element) {
5885 /* error() - private
5886 * show an error instead of the chart
5887 */
5890 - let error = function (msg) {
5888 + let error = (msg) => {
5889 let ret = true;
5890
5891 if (typeof netdataErrorCallback === 'function') {
5894 - ret = netdataErrorCallback('chart', that.id, msg);
5892 + ret = netdataErrorCallback('chart', this.id, msg);
5893 }
5894
5895 if (ret) {
5898 - that.element.innerHTML = that.id + ': ' + msg;
5899 - that.enabled = false;
5900 - that.current = that.pan;
5896 + this.element.innerHTML = this.id + ': ' + msg;
5897 + this.enabled = false;
5898 + this.current = this.pan;
5899 }
5900 };
5901
@@ -5956,7 +5954,7 @@ let chartState = function (element) {
5954 NETDATA.error(402, this.library_name);
5955 error('chart library "' + this.library_name + '" is not found');
5956 this.enabled = false;
5959 - } else if (NETDATA.chartLibraries[this.library_name].enabled === false) {
5957 + } else if (!NETDATA.chartLibraries[this.library_name].enabled) {
5958 NETDATA.error(403, this.library_name);
5959 error('chart library "' + this.library_name + '" is not enabled');
5960 this.enabled = false;
@@ -5997,29 +5995,29 @@ let chartState = function (element) {
5995
5996 this.tmp = {};
5997
6000 - this.foreign_element_before = null;
6001 - this.foreign_element_after = null;
6002 - this.foreign_element_duration = null;
6003 - this.foreign_element_update_every = null;
6004 - this.foreign_element_selection = null;
5998 + this.foreignElementBefore = null;
5999 + this.foreignElementAfter = null;
6000 + this.foreignElementDuration = null;
6001 + this.foreignElementUpdateEvery = null;
6002 + this.foreignElementSelection = null;
6003
6004 // ============================================================================================================
6005 // PRIVATE FUNCTIONS
6006
6007 // reset the runtime status variables to their defaults
6010 - const runtimeInit = function () {
6011 - that.paused = false; // boolean - is the chart paused for any reason?
6012 - that.selected = false; // boolean - is the chart shown a selection?
6008 + const runtimeInit = () => {
6009 + this.paused = false; // boolean - is the chart paused for any reason?
6010 + this.selected = false; // boolean - is the chart shown a selection?
6011
6014 - that.chart_created = false; // boolean - is the library.create() been called?
6015 - that.dom_created = false; // boolean - is the chart DOM been created?
6016 - that.fetching_data = false; // boolean - true while we fetch data via ajax
6012 + this.chart_created = false; // boolean - is the library.create() been called?
6013 + this.dom_created = false; // boolean - is the chart DOM been created?
6014 + this.fetching_data = false; // boolean - true while we fetch data via ajax
6015
6018 - that.updates_counter = 0; // numeric - the number of refreshes made so far
6019 - that.updates_since_last_unhide = 0; // numeric - the number of refreshes made since the last time the chart was unhidden
6020 - that.updates_since_last_creation = 0; // numeric - the number of refreshes made since the last time the chart was created
6016 + this.updates_counter = 0; // numeric - the number of refreshes made so far
6017 + this.updates_since_last_unhide = 0; // numeric - the number of refreshes made since the last time the chart was unhidden
6018 + this.updates_since_last_creation = 0; // numeric - the number of refreshes made since the last time the chart was created
6019
6022 - that.tm = {
6020 + this.tm = {
6021 last_initialized: 0, // milliseconds - the timestamp it was last initialized
6022 last_dom_created: 0, // milliseconds - the timestamp its DOM was last created
6023 last_mode_switch: 0, // milliseconds - the timestamp it switched modes
@@ -6036,116 +6034,116 @@ let chartState = function (element) {
6034 last_autorefreshed: 0 // the time the chart was last refreshed
6035 };
6036
6039 - that.data = null; // the last data as downloaded from the netdata server
6040 - that.data_url = 'invalid://'; // string - the last url used to update the chart
6041 - that.data_points = 0; // number - the number of points returned from netdata
6042 - that.data_after = 0; // milliseconds - the first timestamp of the data
6043 - that.data_before = 0; // milliseconds - the last timestamp of the data
6044 - that.data_update_every = 0; // milliseconds - the frequency to update the data
6037 + this.data = null; // the last data as downloaded from the netdata server
6038 + this.data_url = 'invalid://'; // string - the last url used to update the chart
6039 + this.data_points = 0; // number - the number of points returned from netdata
6040 + this.data_after = 0; // milliseconds - the first timestamp of the data
6041 + this.data_before = 0; // milliseconds - the last timestamp of the data
6042 + this.data_update_every = 0; // milliseconds - the frequency to update the data
6043
6046 - that.tmp = {}; // members that can be destroyed to save memory
6044 + this.tmp = {}; // members that can be destroyed to save memory
6045 };
6046
6047 // initialize all the variables that are required for the chart to be rendered
6050 - const lateInitialization = function () {
6051 - if (typeof that.host !== 'undefined') {
6048 + const lateInitialization = () => {
6049 + if (typeof this.host !== 'undefined') {
6050 return;
6051 }
6052
6053 // string - the netdata server URL, without any path
6056 - that.host = NETDATA.dataAttribute(that.element, 'host', NETDATA.serverDefault);
6054 + this.host = NETDATA.dataAttribute(this.element, 'host', NETDATA.serverDefault);
6055
6056 // make sure the host does not end with /
6057 // all netdata API requests use absolute paths
6060 - while (that.host.slice(-1) === '/') {
6061 - that.host = that.host.substring(0, that.host.length - 1);
6058 + while (this.host.slice(-1) === '/') {
6059 + this.host = this.host.substring(0, this.host.length - 1);
6060 }
6061
6062 // string - the grouping method requested by the user
6065 - that.method = NETDATA.dataAttribute(that.element, 'method', NETDATA.chartDefaults.method);
6066 - that.gtime = NETDATA.dataAttribute(that.element, 'gtime', 0);
6063 + this.method = NETDATA.dataAttribute(this.element, 'method', NETDATA.chartDefaults.method);
6064 + this.gtime = NETDATA.dataAttribute(this.element, 'gtime', 0);
6065
6066 // the time-range requested by the user
6069 - that.after = NETDATA.dataAttribute(that.element, 'after', NETDATA.chartDefaults.after);
6070 - that.before = NETDATA.dataAttribute(that.element, 'before', NETDATA.chartDefaults.before);
6067 + this.after = NETDATA.dataAttribute(this.element, 'after', NETDATA.chartDefaults.after);
6068 + this.before = NETDATA.dataAttribute(this.element, 'before', NETDATA.chartDefaults.before);
6069
6070 // the pixels per point requested by the user
6073 - that.pixels_per_point = NETDATA.dataAttribute(that.element, 'pixels-per-point', 1);
6074 - that.points = NETDATA.dataAttribute(that.element, 'points', null);
6071 + this.pixels_per_point = NETDATA.dataAttribute(this.element, 'pixels-per-point', 1);
6072 + this.points = NETDATA.dataAttribute(this.element, 'points', null);
6073
6074 // the forced update_every
6077 - that.force_update_every = NETDATA.dataAttribute(that.element, 'update-every', null);
6078 - if (typeof that.force_update_every !== 'number' || that.force_update_every <= 1) {
6079 - if (that.force_update_every !== null) {
6080 - that.log('ignoring invalid value of property data-update-every');
6075 + this.force_update_every = NETDATA.dataAttribute(this.element, 'update-every', null);
6076 + if (typeof this.force_update_every !== 'number' || this.force_update_every <= 1) {
6077 + if (this.force_update_every !== null) {
6078 + this.log('ignoring invalid value of property data-update-every');
6079 }
6080
6083 - that.force_update_every = null;
6081 + this.force_update_every = null;
6082 } else {
6085 - that.force_update_every *= 1000;
6083 + this.force_update_every *= 1000;
6084 }
6085
6086 // the dimensions requested by the user
6089 - that.dimensions = NETDATA.encodeURIComponent(NETDATA.dataAttribute(that.element, 'dimensions', null));
6087 + this.dimensions = NETDATA.encodeURIComponent(NETDATA.dataAttribute(this.element, 'dimensions', null));
6088
6091 - that.title = NETDATA.dataAttribute(that.element, 'title', null); // the title of the chart
6092 - that.units = NETDATA.dataAttribute(that.element, 'units', null); // the units of the chart dimensions
6093 - that.units_desired = NETDATA.dataAttribute(that.element, 'desired-units', NETDATA.options.current.units); // the units of the chart dimensions
6094 - that.units_current = that.units;
6095 - that.units_common = NETDATA.dataAttribute(that.element, 'common-units', null);
6089 + this.title = NETDATA.dataAttribute(this.element, 'title', null); // the title of the chart
6090 + this.units = NETDATA.dataAttribute(this.element, 'units', null); // the units of the chart dimensions
6091 + this.units_desired = NETDATA.dataAttribute(this.element, 'desired-units', NETDATA.options.current.units); // the units of the chart dimensions
6092 + this.units_current = this.units;
6093 + this.units_common = NETDATA.dataAttribute(this.element, 'common-units', null);
6094
6095 // additional options to pass to netdata
6098 - that.append_options = NETDATA.encodeURIComponent(NETDATA.dataAttribute(that.element, 'append-options', null));
6096 + this.append_options = NETDATA.encodeURIComponent(NETDATA.dataAttribute(this.element, 'append-options', null));
6097
6098 // override options to pass to netdata
6101 - that.override_options = NETDATA.encodeURIComponent(NETDATA.dataAttribute(that.element, 'override-options', null));
6099 + this.override_options = NETDATA.encodeURIComponent(NETDATA.dataAttribute(this.element, 'override-options', null));
6100
6103 - that.debug = NETDATA.dataAttributeBoolean(that.element, 'debug', false);
6101 + this.debug = NETDATA.dataAttributeBoolean(this.element, 'debug', false);
6102
6105 - that.value_decimal_detail = -1;
6106 - let d = NETDATA.dataAttribute(that.element, 'decimal-digits', -1);
6103 + this.value_decimal_detail = -1;
6104 + let d = NETDATA.dataAttribute(this.element, 'decimal-digits', -1);
6105 if (typeof d === 'number') {
6108 - that.value_decimal_detail = d;
6106 + this.value_decimal_detail = d;
6107 } else if (typeof d !== 'undefined') {
6110 - that.log('ignoring decimal-digits value: ' + d.toString());
6108 + this.log('ignoring decimal-digits value: ' + d.toString());
6109 }
6110
6111 // if we need to report the rendering speed
6112 // find the element that needs to be updated
6115 - let refresh_dt_element_name = NETDATA.dataAttribute(that.element, 'dt-element-name', null); // string - the element to print refresh_dt_ms
6113 + let refresh_dt_element_name = NETDATA.dataAttribute(this.element, 'dt-element-name', null); // string - the element to print refresh_dt_ms
6114
6115 if (refresh_dt_element_name !== null) {
6118 - that.refresh_dt_element = document.getElementById(refresh_dt_element_name) || null;
6116 + this.refresh_dt_element = document.getElementById(refresh_dt_element_name) || null;
6117 }
6118 else {
6121 - that.refresh_dt_element = null;
6119 + this.refresh_dt_element = null;
6120 }
6121
6124 - that.dimensions_visibility = new dimensionsVisibility(that);
6122 + this.dimensions_visibility = new dimensionsVisibility(that);
6123
6126 - that.netdata_first = 0; // milliseconds - the first timestamp in netdata
6127 - that.netdata_last = 0; // milliseconds - the last timestamp in netdata
6128 - that.requested_after = null; // milliseconds - the timestamp of the request after param
6129 - that.requested_before = null; // milliseconds - the timestamp of the request before param
6130 - that.requested_padding = null;
6131 - that.view_after = 0;
6132 - that.view_before = 0;
6124 + this.netdata_first = 0; // milliseconds - the first timestamp in netdata
6125 + this.netdata_last = 0; // milliseconds - the last timestamp in netdata
6126 + this.requested_after = null; // milliseconds - the timestamp of the request after param
6127 + this.requested_before = null; // milliseconds - the timestamp of the request before param
6128 + this.requested_padding = null;
6129 + this.view_after = 0;
6130 + this.view_before = 0;
6131
6134 - that.refresh_dt_ms = 0; // milliseconds - the time the last refresh took
6132 + this.refresh_dt_ms = 0; // milliseconds - the time the last refresh took
6133
6134 // how many retries we have made to load chart data from the server
6137 - that.retries_on_data_failures = 0;
6135 + this.retries_on_data_failures = 0;
6136
6137 // color management
6140 - that.colors = null;
6141 - that.colors_assigned = null;
6142 - that.colors_available = null;
6143 - that.colors_custom = null;
6144 -
6145 - that.element_message = null; // the element already created by the user
6146 - that.element_chart = null; // the element with the chart
6147 - that.element_legend = null; // the element with the legend of the chart (if created by us)
6148 - that.element_legend_childs = {
6138 + this.colors = null;
6139 + this.colors_assigned = null;
6140 + this.colors_available = null;
6141 + this.colors_custom = null;
6142 +
6143 + this.element_message = null; // the element already created by the user
6144 + this.element_chart = null; // the element with the chart
6145 + this.element_legend = null; // the element with the legend of the chart (if created by us)
6146 + this.element_legend_childs = {
6147 content: null,
6148 hidden: null,
6149 title_date: null,
@@ -6155,105 +6153,104 @@ let chartState = function (element) {
6153 series: null
6154 };
6155
6158 - that.chart_url = null; // string - the url to download chart info
6159 - that.chart = null; // object - the chart as downloaded from the server
6156 + this.chart_url = null; // string - the url to download chart info
6157 + this.chart = null; // object - the chart as downloaded from the server
6158
6161 - function get_foreign_element_by_id(opt) {
6162 - let id = NETDATA.dataAttribute(that.element, opt, null);
6159 + const getForeignElementById = (opt) => {
6160 + let id = NETDATA.dataAttribute(this.element, opt, null);
6161 if (id === null) {
6164 - //that.log('option "' + opt + '" is undefined');
6162 + //this.log('option "' + opt + '" is undefined');
6163 return null;
6164 }
6165
6166 let el = document.getElementById(id);
6167 if (typeof el === 'undefined') {
6170 - that.log('cannot find an element with name "' + id.toString() + '"');
6168 + this.log('cannot find an element with name "' + id.toString() + '"');
6169 return null;
6170 }
6171
6172 return el;
6175 - }
6173 + };
6174
6177 - that.foreign_element_before = get_foreign_element_by_id('show-before-at');
6178 - that.foreign_element_after = get_foreign_element_by_id('show-after-at');
6179 - that.foreign_element_duration = get_foreign_element_by_id('show-duration-at');
6180 - that.foreign_element_update_every = get_foreign_element_by_id('show-update-every-at');
6181 - that.foreign_element_selection = get_foreign_element_by_id('show-selection-at');
6175 + this.foreignElementBefore = getForeignElementById('show-before-at');
6176 + this.foreignElementAfter = getForeignElementById('show-after-at');
6177 + this.foreignElementDuration = getForeignElementById('show-duration-at');
6178 + this.foreignElementUpdateEvery = getForeignElementById('show-update-every-at');
6179 + this.foreignElementSelection = getForeignElementById('show-selection-at');
6180 };
6181
6184 - const destroyDOM = function () {
6185 - if (that.enabled === false) {
6182 + const destroyDOM = () => {
6183 + if (!this.enabled) {
6184 return;
6185 }
6186
6189 - if (that.debug) {
6190 - that.log('destroyDOM()');
6187 + if (this.debug) {
6188 + this.log('destroyDOM()');
6189 }
6190
6193 - // that.element.className = 'netdata-message icon';
6194 - // that.element.innerHTML = '<i class="fas fa-sync"></i> netdata';
6195 - that.element.innerHTML = '';
6196 - that.element_message = null;
6197 - that.element_legend = null;
6198 - that.element_chart = null;
6199 - that.element_legend_childs.series = null;
6191 + // this.element.className = 'netdata-message icon';
6192 + // this.element.innerHTML = '<i class="fas fa-sync"></i> netdata';
6193 + this.element.innerHTML = '';
6194 + this.element_message = null;
6195 + this.element_legend = null;
6196 + this.element_chart = null;
6197 + this.element_legend_childs.series = null;
6198
6201 - that.chart_created = false;
6202 - that.dom_created = false;
6199 + this.chart_created = false;
6200 + this.dom_created = false;
6201
6204 - that.tm.last_resized = 0;
6205 - that.tm.last_dom_created = 0;
6202 + this.tm.last_resized = 0;
6203 + this.tm.last_dom_created = 0;
6204 };
6205
6208 - let createDOM = function () {
6209 - if (that.enabled === false) {
6206 + let createDOM = () => {
6207 + if (!this.enabled) {
6208 return;
6209 }
6210 lateInitialization();
6211
6212 destroyDOM();
6213
6216 - if (that.debug) {
6217 - that.log('createDOM()');
6214 + if (this.debug) {
6215 + this.log('createDOM()');
6216 }
6217
6220 - that.element_message = document.createElement('div');
6221 - that.element_message.className = 'netdata-message icon hidden';
6222 - that.element.appendChild(that.element_message);
6218 + this.element_message = document.createElement('div');
6219 + this.element_message.className = 'netdata-message icon hidden';
6220 + this.element.appendChild(this.element_message);
6221
6224 - that.dom_created = true;
6225 - that.chart_created = false;
6222 + this.dom_created = true;
6223 + this.chart_created = false;
6224
6227 - that.tm.last_dom_created =
6228 - that.tm.last_resized = Date.now();
6225 + this.tm.last_dom_created = this.tm.last_resized = Date.now();
6226
6227 showLoading();
6228 };
6229
6233 - const initDOM = function () {
6234 - that.element.className = that.library.container_class(that);
6230 + const initDOM = () => {
6231 + this.element.className = this.library.container_class(that);
6232
6236 - if (typeof(that.width) === 'string') {
6237 - that.element.style.width = that.width;
6238 - } else if (typeof(that.width) === 'number') {
6239 - that.element.style.width = that.width.toString() + 'px';
6233 + if (typeof(this.width) === 'string') {
6234 + this.element.style.width = this.width;
6235 + } else if (typeof(this.width) === 'number') {
6236 + this.element.style.width = this.width.toString() + 'px';
6237 }
6238
6242 - if (typeof(that.library.aspect_ratio) === 'undefined') {
6243 - if (typeof(that.height) === 'string') {
6244 - that.element.style.height = that.height;
6245 - } else if (typeof(that.height) === 'number') {
6246 - that.element.style.height = that.height.toString() + 'px';
6239 + if (typeof(this.library.aspect_ratio) === 'undefined') {
6240 + if (typeof(this.height) === 'string') {
6241 + this.element.style.height = this.height;
6242 + } else if (typeof(this.height) === 'number') {
6243 + this.element.style.height = this.height.toString() + 'px';
6244 }
6245 }
6246
6247 if (NETDATA.chartDefaults.min_width !== null) {
6251 - that.element.style.min_width = NETDATA.chartDefaults.min_width;
6248 + this.element.style.min_width = NETDATA.chartDefaults.min_width;
6249 }
6250 };
6251
6255 - const invisibleSearchableText = function () {
6256 - return '<span style="position:absolute; opacity: 0; width: 0px;">' + that.id + '</span>';
6252 + const invisibleSearchableText = () => {
6253 + return '<span style="position:absolute; opacity: 0; width: 0px;">' + this.id + '</span>';
6254 };
6255
6256 /* init() private
@@ -6261,27 +6258,27 @@ let chartState = function (element) {
6258 * destroy all (possibly) created state elements
6259 * create the basic DOM for a chart
6260 */
6264 - const init = function (opt) {
6265 - if (that.enabled === false) {
6261 + const init = (opt) => {
6262 + if (!this.enabled) {
6263 return;
6264 }
6265
6266 runtimeInit();
6270 - that.element.innerHTML = invisibleSearchableText();
6267 + this.element.innerHTML = invisibleSearchableText();
6268
6272 - that.tm.last_initialized = Date.now();
6273 - that.setMode('auto');
6269 + this.tm.last_initialized = Date.now();
6270 + this.setMode('auto');
6271
6272 if (opt !== 'fast') {
6276 - if (that.isVisible(true) || opt === 'force') {
6273 + if (this.isVisible(true) || opt === 'force') {
6274 createDOM();
6275 }
6276 }
6277 };
6278
6282 - const maxMessageFontSize = function () {
6279 + const maxMessageFontSize = () => {
6280 let screenHeight = screen.height;
6284 - let el = that.element;
6281 + let el = this.element;
6282
6283 // normally we want a font size, as tall as the element
6284 let h = el.clientHeight;
@@ -6309,28 +6306,28 @@ let chartState = function (element) {
6306 }
6307
6308 // set it
6312 - that.element_message.style.fontSize = h.toString() + 'px';
6313 - that.element_message.style.paddingTop = paddingTop.toString() + 'px';
6309 + this.element_message.style.fontSize = h.toString() + 'px';
6310 + this.element_message.style.paddingTop = paddingTop.toString() + 'px';
6311 };
6312
6316 - const showMessageIcon = function (icon) {
6317 - that.element_message.innerHTML = icon;
6313 + const showMessageIcon = (icon) => {
6314 + this.element_message.innerHTML = icon;
6315 maxMessageFontSize();
6319 - $(that.element_message).removeClass('hidden');
6320 - that.tmp.___messageHidden___ = undefined;
6316 + $(this.element_message).removeClass('hidden');
6317 + this.tmp.___messageHidden___ = undefined;
6318 };
6319
6323 - const hideMessage = function () {
6324 - if (typeof that.tmp.___messageHidden___ === 'undefined') {
6325 - that.tmp.___messageHidden___ = true;
6326 - $(that.element_message).addClass('hidden');
6320 + const hideMessage = () => {
6321 + if (typeof this.tmp.___messageHidden___ === 'undefined') {
6322 + this.tmp.___messageHidden___ = true;
6323 + $(this.element_message).addClass('hidden');
6324 }
6325 };
6326
6330 - const showRendering = function () {
6327 + const showRendering = () => {
6328 let icon;
6332 - if (that.chart !== null) {
6333 - if (that.chart.chart_type === 'line') {
6329 + if (this.chart !== null) {
6330 + if (this.chart.chart_type === 'line') {
6331 icon = NETDATA.icons.lineChart;
6332 } else {
6333 icon = NETDATA.icons.areaChart;
@@ -6343,22 +6340,21 @@ let chartState = function (element) {
6340 showMessageIcon(icon + ' netdata' + invisibleSearchableText());
6341 };
6342
6346 - const showLoading = function () {
6347 - if (that.chart_created === false) {
6343 + const showLoading = () => {
6344 + if (!this.chart_created) {
6345 showMessageIcon(NETDATA.icons.loading + ' netdata');
6346 return true;
6347 }
6348 return false;
6349 };
6350
6354 - const isHidden = function () {
6355 - return (typeof that.tmp.___chartIsHidden___ !== 'undefined');
6351 + const isHidden = () => {
6352 + return (typeof this.tmp.___chartIsHidden___ !== 'undefined');
6353 };
6354
6355 // hide the chart, when it is not visible - called from isVisible()
6356 this.hideChart = function () {
6357 // hide it, if it is not already hidden
6361 - // if (isHidden() === true) return;
6358 if (isHidden()) {
6359 return;
6360 }
@@ -6426,14 +6422,14 @@ let chartState = function (element) {
6422
6423 // unhide the chart, when it is visible - called from isVisible()
6424 this.unhideChart = function () {
6429 - if (isHidden() === false) {
6425 + if (!isHidden()) {
6426 return;
6427 }
6428
6429 this.tmp.___chartIsHidden___ = undefined;
6430 this.updates_since_last_unhide = 0;
6431
6436 - if (this.chart_created === false) {
6432 + if (!this.chart_created) {
6433 if (this.debug) {
6434 this.log('unhideChart(): initializing chart');
6435 }
@@ -6472,12 +6468,11 @@ let chartState = function (element) {
6468 }
6469 };
6470
6475 - const canBeRendered = function (uncached_visibility) {
6476 - if (that.debug) {
6477 - that.log('canBeRendered() called');
6471 + const canBeRendered = (uncached_visibility) => {
6472 + if (this.debug) {
6473 + this.log('canBeRendered() called');
6474 }
6475
6480 - // if (NETDATA.options.current.update_only_visible === false)
6476 if (!NETDATA.options.current.update_only_visible) {
6477 return true;
6478 }
@@ -6486,20 +6481,20 @@ let chartState = function (element) {
6481 (
6482 NETDATA.options.page_is_visible ||
6483 NETDATA.options.current.stop_updates_when_focus_is_lost === false ||
6489 - that.updates_since_last_unhide === 0
6484 + this.updates_since_last_unhide === 0
6485 )
6491 - && isHidden() === false && that.isVisible(uncached_visibility)
6486 + && isHidden() === false && this.isVisible(uncached_visibility)
6487 );
6488
6494 - if (that.debug) {
6495 - that.log('canBeRendered(): ' + ret);
6489 + if (this.debug) {
6490 + this.log('canBeRendered(): ' + ret);
6491 }
6492
6493 return ret;
6494 };
6495
6496 // https://github.com/petkaantonov/bluebird/wiki/Optimization-killers
6502 - const callChartLibraryUpdateSafely = function (data) {
6497 + const callChartLibraryUpdateSafely = (data) => {
6498 let status;
6499
6500 // we should not do this here
@@ -6513,22 +6508,22 @@ let chartState = function (element) {
6508 return true;
6509 }
6510
6516 - that.updates_counter++;
6517 - that.updates_since_last_unhide++;
6518 - that.updates_since_last_creation++;
6511 + this.updates_counter++;
6512 + this.updates_since_last_unhide++;
6513 + this.updates_since_last_creation++;
6514
6515 if (NETDATA.options.debug.chart_errors) {
6521 - status = that.library.update(that, data);
6516 + status = this.library.update(that, data);
6517 } else {
6518 try {
6524 - status = that.library.update(that, data);
6519 + status = this.library.update(that, data);
6520 } catch (err) {
6521 status = false;
6522 }
6523 }
6524
6525 if (!status) {
6531 - error('chart failed to be updated as ' + that.library_name);
6526 + error('chart failed to be updated as ' + this.library_name);
6527 return false;
6528 }
6529
@@ -6536,7 +6531,7 @@ let chartState = function (element) {
6531 };
6532
6533 // https://github.com/petkaantonov/bluebird/wiki/Optimization-killers
6539 - const callChartLibraryCreateSafely = function (data) {
6534 + const callChartLibraryCreateSafely = (data) => {
6535 let status;
6536
6537 // we should not do this here
@@ -6550,27 +6545,27 @@ let chartState = function (element) {
6545 return true;
6546 }
6547
6553 - that.updates_counter++;
6554 - that.updates_since_last_unhide++;
6555 - that.updates_since_last_creation++;
6548 + this.updates_counter++;
6549 + this.updates_since_last_unhide++;
6550 + this.updates_since_last_creation++;
6551
6552 if (NETDATA.options.debug.chart_errors) {
6558 - status = that.library.create(that, data);
6553 + status = this.library.create(that, data);
6554 } else {
6555 try {
6561 - status = that.library.create(that, data);
6556 + status = this.library.create(that, data);
6557 } catch (err) {
6558 status = false;
6559 }
6560 }
6561
6562 if (!status) {
6568 - error('chart failed to be created as ' + that.library_name);
6563 + error('chart failed to be created as ' + this.library_name);
6564 return false;
6565 }
6566
6572 - that.chart_created = true;
6573 - that.updates_since_last_creation = 0;
6567 + this.chart_created = true;
6568 + this.updates_since_last_creation = 0;
6569 return true;
6570 };
6571
@@ -6580,33 +6575,33 @@ let chartState = function (element) {
6575 // resizeChart() - private
6576 // to be called just before the chart library to make sure that
6577 // a properly sized dom is available
6583 - const resizeChart = function () {
6584 - if (that.tm.last_resized < NETDATA.options.last_page_resize) {
6585 - if (!that.chart_created) {
6578 + const resizeChart = () => {
6579 + if (this.tm.last_resized < NETDATA.options.last_page_resize) {
6580 + if (!this.chart_created) {
6581 return;
6582 }
6583
6589 - if (that.needsRecreation()) {
6590 - if (that.debug) {
6591 - that.log('resizeChart(): initializing chart');
6584 + if (this.needsRecreation()) {
6585 + if (this.debug) {
6586 + this.log('resizeChart(): initializing chart');
6587 }
6588
6589 init('force');
6595 - } else if (typeof that.library.resize === 'function') {
6596 - if (that.debug) {
6597 - that.log('resizeChart(): resizing chart');
6590 + } else if (typeof this.library.resize === 'function') {
6591 + if (this.debug) {
6592 + this.log('resizeChart(): resizing chart');
6593 }
6594
6600 - that.library.resize(that);
6595 + this.library.resize(that);
6596
6602 - if (that.element_legend_childs.perfect_scroller !== null) {
6603 - Ps.update(that.element_legend_childs.perfect_scroller);
6597 + if (this.element_legend_childs.perfect_scroller !== null) {
6598 + Ps.update(this.element_legend_childs.perfect_scroller);
6599 }
6600
6601 maxMessageFontSize();
6602 }
6603
6609 - that.tm.last_resized = Date.now();
6604 + this.tm.last_resized = Date.now();
6605 }
6606 };
6607
@@ -6616,12 +6611,12 @@ let chartState = function (element) {
6611 // - update the internal states
6612 // - resize the chart as the div changes height
6613 // - update the scrollbar of the legend
6619 - const resizeChartToHeight = function (h) {
6614 + const resizeChartToHeight = (h) => {
6615 // console.log(h);
6621 - that.element.style.height = h;
6616 + this.element.style.height = h;
6617
6623 - if (that.settings_id !== null) {
6624 - NETDATA.localStorageSet('chart_heights.' + that.settings_id, h);
6618 + if (this.settings_id !== null) {
6619 + NETDATA.localStorageSet('chart_heights.' + this.settings_id, h);
6620 }
6621
6622 let now = Date.now();
@@ -6629,7 +6624,7 @@ let chartState = function (element) {
6624 NETDATA.options.auto_refresher_stop_until = now + NETDATA.options.current.stop_updates_while_resizing;
6625
6626 // force a resize
6632 - that.tm.last_resized = 0;
6627 + this.tm.last_resized = 0;
6628 resizeChart();
6629 };
6630
@@ -6779,14 +6774,14 @@ let chartState = function (element) {
6774 }
6775 };
6776
6782 - const noDataToShow = function () {
6777 + const noDataToShow = () => {
6778 showMessageIcon(NETDATA.icons.noData + ' empty');
6784 - that.legendUpdateDOM();
6785 - that.tm.last_autorefreshed = Date.now();
6786 - // that.data_update_every = 30 * 1000;
6787 - //that.element_chart.style.display = 'none';
6788 - //if (that.element_legend !== null) that.element_legend.style.display = 'none';
6789 - //that.tmp.___chartIsHidden___ = true;
6779 + this.legendUpdateDOM();
6780 + this.tm.last_autorefreshed = Date.now();
6781 + // this.data_update_every = 30 * 1000;
6782 + //this.element_chart.style.display = 'none';
6783 + //if (this.element_legend !== null) this.element_legend.style.display = 'none';
6784 + //this.tmp.___chartIsHidden___ = true;
6785 };
6786
6787 // ============================================================================================================
@@ -6844,8 +6839,8 @@ let chartState = function (element) {
6839 this.log('selection set to ' + t.toString());
6840 }
6841
6847 - if (this.foreign_element_selection !== null) {
6848 - this.foreign_element_selection.innerText = NETDATA.dateTime.localeDateString(t) + ' ' + NETDATA.dateTime.localeTimeString(t);
6842 + if (this.foreignElementSelection !== null) {
6843 + this.foreignElementSelection.innerText = NETDATA.dateTime.localeDateString(t) + ' ' + NETDATA.dateTime.localeTimeString(t);
6844 }
6845
6846 return this.selected;
@@ -6863,8 +6858,8 @@ let chartState = function (element) {
6858 this.log('selection cleared');
6859 }
6860
6866 - if (this.foreign_element_selection !== null) {
6867 - this.foreign_element_selection.innerText = '';
6861 + if (this.foreignElementSelection !== null) {
6862 + this.foreignElementSelection.innerText = '';
6863 }
6864
6865 this.legendReset();
@@ -6881,7 +6876,7 @@ let chartState = function (element) {
6876 };
6877
6878 this.calculateRowForTime = function (t) {
6884 - if (this.timeIsVisible(t) === false) {
6879 + if (!this.timeIsVisible(t)) {
6880 return -1;
6881 }
6882 return Math.floor((t - this.data_after) / this.data_update_every);
@@ -6890,7 +6885,7 @@ let chartState = function (element) {
6885 // ----------------------------------------------------------------------------------------------------------------
6886
6887 this.pauseChart = function () {
6893 - if (this.paused === false) {
6888 + if (!this.paused) {
6889 if (this.debug) {
6890 this.log('pauseChart()');
6891 }
@@ -6909,20 +6904,20 @@ let chartState = function (element) {
6904 }
6905 };
6906
6912 - this.resetChart = function (dont_clear_master, dont_update) {
6907 + this.resetChart = function (dontClearMaster, dontUpdate) {
6908 if (this.debug) {
6914 - this.log('resetChart(' + dont_clear_master + ', ' + dont_update + ') called');
6909 + this.log('resetChart(' + dontClearMaster + ', ' + dontUpdate + ') called');
6910 }
6911
6917 - if (typeof dont_clear_master === 'undefined') {
6918 - dont_clear_master = false;
6912 + if (typeof dontClearMaster === 'undefined') {
6913 + dontClearMaster = false;
6914 }
6915
6921 - if (typeof dont_update === 'undefined') {
6922 - dont_update = false;
6916 + if (typeof dontUpdate === 'undefined') {
6917 + dontUpdate = false;
6918 }
6919
6925 - if (dont_clear_master !== true && NETDATA.globalPanAndZoom.isMaster(this)) {
6920 + if (dontClearMaster !== true && NETDATA.globalPanAndZoom.isMaster(this)) {
6921 if (this.debug) {
6922 this.log('resetChart() diverting to clearMaster().');
6923 }
@@ -6950,7 +6945,7 @@ let chartState = function (element) {
6945 // of a selection sync and another chart becomes
6946 // the new master
6947
6953 - if (dont_update !== true && this.isVisible()) {
6948 + if (dontUpdate !== true && this.isVisible()) {
6949 this.updateChart();
6950 }
6951 };
@@ -7050,7 +7045,7 @@ let chartState = function (element) {
7045 NETDATA.globalPanAndZoom.delay();
7046 NETDATA.globalSelectionSync.delay();
7047
7053 - if (NETDATA.globalPanAndZoom.isMaster(this) === false) {
7048 + if (!NETDATA.globalPanAndZoom.isMaster(this)) {
7049 this.pauseChart();
7050 NETDATA.globalPanAndZoom.setMaster(this, after, before);
7051 // NETDATA.globalSelectionSync.stop();
@@ -7067,25 +7062,25 @@ let chartState = function (element) {
7062 }, 0);
7063 };
7064
7070 - let __unitsConversionLastUnits = undefined;
7071 - let __unitsConversionLastUnitsDesired = undefined;
7072 - let __unitsConversionLastMin = undefined;
7073 - let __unitsConversionLastMax = undefined;
7074 - let __unitsConversion = function (value) {
7065 + let _unitsConversionLastUnits = undefined;
7066 + let _unitsConversionLastUnitsDesired = undefined;
7067 + let _unitsConversionLastMin = undefined;
7068 + let _unitsConversionLastMax = undefined;
7069 + let _unitsConversion = function (value) {
7070 return value;
7071 };
7072 this.unitsConversionSetup = function (min, max) {
7078 - if (this.units !== __unitsConversionLastUnits
7079 - || this.units_desired !== __unitsConversionLastUnitsDesired
7080 - || min !== __unitsConversionLastMin
7081 - || max !== __unitsConversionLastMax) {
7073 + if (this.units !== _unitsConversionLastUnits
7074 + || this.units_desired !== _unitsConversionLastUnitsDesired
7075 + || min !== _unitsConversionLastMin
7076 + || max !== _unitsConversionLastMax) {
7077
7083 - __unitsConversionLastUnits = this.units;
7084 - __unitsConversionLastUnitsDesired = this.units_desired;
7085 - __unitsConversionLastMin = min;
7086 - __unitsConversionLastMax = max;
7078 + _unitsConversionLastUnits = this.units;
7079 + _unitsConversionLastUnitsDesired = this.units_desired;
7080 + _unitsConversionLastMin = min;
7081 + _unitsConversionLastMax = max;
7082
7088 - __unitsConversion = NETDATA.unitsConversion.get(this.uuid, min, max, this.units, this.units_desired, this.units_common, function (units) {
7083 + _unitsConversion = NETDATA.unitsConversion.get(this.uuid, min, max, this.units, this.units_desired, this.units_common, function (units) {
7084 // console.log('switching units from ' + that.units.toString() + ' to ' + units.toString());
7085 that.units_current = units;
7086 that.legendSetUnitsString(that.units_current);
@@ -7093,38 +7088,38 @@ let chartState = function (element) {
7088 }
7089 };
7090
7096 - let __legendFormatValueChartDecimalsLastMin = undefined;
7097 - let __legendFormatValueChartDecimalsLastMax = undefined;
7098 - let __legendFormatValueChartDecimals = -1;
7099 - let __intlNumberFormat = null;
7091 + let _legendFormatValueChartDecimalsLastMin = undefined;
7092 + let _legendFormatValueChartDecimalsLastMax = undefined;
7093 + let _legendFormatValueChartDecimals = -1;
7094 + let _intlNumberFormat = null;
7095 this.legendFormatValueDecimalsFromMinMax = function (min, max) {
7101 - if (min === __legendFormatValueChartDecimalsLastMin && max === __legendFormatValueChartDecimalsLastMax) {
7096 + if (min === _legendFormatValueChartDecimalsLastMin && max === _legendFormatValueChartDecimalsLastMax) {
7097 return;
7098 }
7099
7100 this.unitsConversionSetup(min, max);
7106 - if (__unitsConversion !== null) {
7107 - min = __unitsConversion(min);
7108 - max = __unitsConversion(max);
7101 + if (_unitsConversion !== null) {
7102 + min = _unitsConversion(min);
7103 + max = _unitsConversion(max);
7104
7105 if (typeof min !== 'number' || typeof max !== 'number') {
7106 return;
7107 }
7108 }
7109
7115 - __legendFormatValueChartDecimalsLastMin = min;
7116 - __legendFormatValueChartDecimalsLastMax = max;
7110 + _legendFormatValueChartDecimalsLastMin = min;
7111 + _legendFormatValueChartDecimalsLastMax = max;
7112
7118 - let old = __legendFormatValueChartDecimals;
7113 + let old = _legendFormatValueChartDecimals;
7114
7115 if (this.data !== null && this.data.min === this.data.max)
7116 // it is a fixed number, let the visualizer decide based on the value
7117 {
7123 - __legendFormatValueChartDecimals = -1;
7118 + _legendFormatValueChartDecimals = -1;
7119 } else if (this.value_decimal_detail !== -1)
7120 // there is an override
7121 {
7127 - __legendFormatValueChartDecimals = this.value_decimal_detail;
7122 + _legendFormatValueChartDecimals = this.value_decimal_detail;
7123 } else {
7124 // ok, let's calculate the proper number of decimal points
7125 let delta;
@@ -7136,31 +7131,31 @@ let chartState = function (element) {
7131 }
7132
7133 if (delta > 1000) {
7139 - __legendFormatValueChartDecimals = 0;
7134 + _legendFormatValueChartDecimals = 0;
7135 } else if (delta > 10) {
7141 - __legendFormatValueChartDecimals = 1;
7136 + _legendFormatValueChartDecimals = 1;
7137 } else if (delta > 1) {
7143 - __legendFormatValueChartDecimals = 2;
7138 + _legendFormatValueChartDecimals = 2;
7139 } else if (delta > 0.1) {
7145 - __legendFormatValueChartDecimals = 2;
7140 + _legendFormatValueChartDecimals = 2;
7141 } else if (delta > 0.01) {
7147 - __legendFormatValueChartDecimals = 4;
7142 + _legendFormatValueChartDecimals = 4;
7143 } else if (delta > 0.001) {
7149 - __legendFormatValueChartDecimals = 5;
7144 + _legendFormatValueChartDecimals = 5;
7145 } else if (delta > 0.0001) {
7151 - __legendFormatValueChartDecimals = 6;
7146 + _legendFormatValueChartDecimals = 6;
7147 } else {
7153 - __legendFormatValueChartDecimals = 7;
7148 + _legendFormatValueChartDecimals = 7;
7149 }
7150 }
7151
7157 - if (__legendFormatValueChartDecimals !== old) {
7158 - if (__legendFormatValueChartDecimals < 0) {
7159 - __intlNumberFormat = null;
7152 + if (_legendFormatValueChartDecimals !== old) {
7153 + if (_legendFormatValueChartDecimals < 0) {
7154 + _intlNumberFormat = null;
7155 } else {
7161 - __intlNumberFormat = NETDATA.fastNumberFormat.get(
7162 - __legendFormatValueChartDecimals,
7163 - __legendFormatValueChartDecimals
7156 + _intlNumberFormat = NETDATA.fastNumberFormat.get(
7157 + _legendFormatValueChartDecimals,
7158 + _legendFormatValueChartDecimals
7159 );
7160 }
7161 }
@@ -7171,14 +7166,14 @@ let chartState = function (element) {
7166 return '-';
7167 }
7168
7174 - value = __unitsConversion(value);
7169 + value = _unitsConversion(value);
7170
7171 if (typeof value !== 'number') {
7172 return value;
7173 }
7174
7180 - if (__intlNumberFormat !== null) {
7181 - return __intlNumberFormat.format(value);
7175 + if (_intlNumberFormat !== null) {
7176 + return _intlNumberFormat.format(value);
7177 }
7178
7179 let dmin, dmax;
@@ -7496,7 +7491,7 @@ let chartState = function (element) {
7491 }
7492 }
7493
7499 - if (needed === false) {
7494 + if (!needed) {
7495 // make sure colors available
7496 this.chartPrepareColorPalette();
7497
@@ -7634,7 +7629,7 @@ let chartState = function (element) {
7629 this.element_legend_childs.toolbox_zoomout = document.createElement('div');
7630 this.element_legend_childs.toolbox_volume = document.createElement('div');
7631
7637 - const get_pan_and_zoom_step = function (event) {
7632 + const getPanAndZoomStep = function (event) {
7633 if (event.ctrlKey) {
7634 return NETDATA.options.current.pan_and_zoom_factor * NETDATA.options.current.pan_and_zoom_factor_multiplier_control;
7635 } else if (event.shiftKey) {
@@ -7655,7 +7650,7 @@ let chartState = function (element) {
7650 this.element_legend_childs.toolbox_left.onclick = function (e) {
7651 e.preventDefault();
7652
7658 - let step = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
7653 + let step = (that.view_before - that.view_after) * getPanAndZoomStep(e);
7654 let before = that.view_before - step;
7655 let after = that.view_after - step;
7656 if (after >= that.netdata_first) {
@@ -7706,7 +7701,7 @@ let chartState = function (element) {
7701 this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_right);
7702 this.element_legend_childs.toolbox_right.onclick = function (e) {
7703 e.preventDefault();
7709 - let step = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
7704 + let step = (that.view_before - that.view_after) * getPanAndZoomStep(e);
7705 let before = that.view_before + step;
7706 let after = that.view_after + step;
7707 if (before <= that.netdata_last) {
@@ -7734,7 +7729,7 @@ let chartState = function (element) {
7729 this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomin);
7730 this.element_legend_childs.toolbox_zoomin.onclick = function (e) {
7731 e.preventDefault();
7737 - let dt = ((that.view_before - that.view_after) * (get_pan_and_zoom_step(e) * 0.8) / 2);
7732 + let dt = ((that.view_before - that.view_after) * (getPanAndZoomStep(e) * 0.8) / 2);
7733 let before = that.view_before - dt;
7734 let after = that.view_after + dt;
7735 that.library.toolboxPanAndZoom(that, after, before);
@@ -7760,7 +7755,7 @@ let chartState = function (element) {
7755 this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomout);
7756 this.element_legend_childs.toolbox_zoomout.onclick = function (e) {
7757 e.preventDefault();
7763 - let dt = (((that.view_before - that.view_after) / (1.0 - (get_pan_and_zoom_step(e) * 0.8)) - (that.view_before - that.view_after)) / 2);
7758 + let dt = (((that.view_before - that.view_after) / (1.0 - (getPanAndZoomStep(e) * 0.8)) - (that.view_before - that.view_after)) / 2);
7759 let before = that.view_before + dt;
7760 let after = that.view_after - dt;
7761
@@ -8251,20 +8246,20 @@ let chartState = function (element) {
8246 this.refresh_dt_element.innerText = this.refresh_dt_ms.toString();
8247 }
8248
8254 - if (this.foreign_element_before !== null) {
8255 - this.foreign_element_before.innerText = NETDATA.dateTime.localeDateString(this.view_before) + ' ' + NETDATA.dateTime.localeTimeString(this.view_before);
8249 + if (this.foreignElementBefore !== null) {
8250 + this.foreignElementBefore.innerText = NETDATA.dateTime.localeDateString(this.view_before) + ' ' + NETDATA.dateTime.localeTimeString(this.view_before);
8251 }
8252
8258 - if (this.foreign_element_after !== null) {
8259 - this.foreign_element_after.innerText = NETDATA.dateTime.localeDateString(this.view_after) + ' ' + NETDATA.dateTime.localeTimeString(this.view_after);
8253 + if (this.foreignElementAfter !== null) {
8254 + this.foreignElementAfter.innerText = NETDATA.dateTime.localeDateString(this.view_after) + ' ' + NETDATA.dateTime.localeTimeString(this.view_after);
8255 }
8256
8262 - if (this.foreign_element_duration !== null) {
8263 - this.foreign_element_duration.innerText = NETDATA.seconds4human(Math.floor((this.view_before - this.view_after) / 1000) + 1);
8257 + if (this.foreignElementDuration !== null) {
8258 + this.foreignElementDuration.innerText = NETDATA.seconds4human(Math.floor((this.view_before - this.view_after) / 1000) + 1);
8259 }
8260
8266 - if (this.foreign_element_update_every !== null) {
8267 - this.foreign_element_update_every.innerText = NETDATA.seconds4human(Math.floor(this.data_update_every / 1000));
8261 + if (this.foreignElementUpdateEvery !== null) {
8262 + this.foreignElementUpdateEvery.innerText = NETDATA.seconds4human(Math.floor(this.data_update_every / 1000));
8263 }
8264 };
8265
@@ -8338,7 +8333,6 @@ let chartState = function (element) {
8333
8334 // due to late initialization of charts and libraries
8335 // we need to check this too
8341 - // if (this.enabled === false) {
8336 if (!this.enabled) {
8337 if (this.debug) {
8338 this.log('updateChart(): I am not enabled');
@@ -8351,7 +8345,6 @@ let chartState = function (element) {
8345 return;
8346 }
8347
8354 - // if (canBeRendered() === false) {
8348 if (!canBeRendered()) {
8349 if (this.debug) {
8350 this.log('updateChart(): cannot be rendered');
@@ -8382,7 +8375,7 @@ let chartState = function (element) {
8375 });
8376 }
8377
8385 - if (this.library.initialized === false) {
8378 + if (!this.library.initialized) {
8379 if (this.library.enabled) {
8380 if (this.debug) {
8381 this.log('updateChart(): initializing chart library');
@@ -8549,7 +8542,7 @@ let chartState = function (element) {
8542 };
8543
8544 this.canBeAutoRefreshed = function () {
8552 - if (this.enabled === false) {
8545 + if (!this.enabled) {
8546 if (this.debug) {
8547 this.log('canBeAutoRefreshed() -> not enabled');
8548 }
@@ -8574,7 +8567,6 @@ let chartState = function (element) {
8567 return false;
8568 }
8569
8577 - // if (this.isVisible() === false) {
8570 if (!this.isVisible()) {
8571 if (NETDATA.options.debug.visibility || this.debug) {
8572 this.log('canBeAutoRefreshed() -> not visible');
@@ -8594,7 +8586,7 @@ let chartState = function (element) {
8586 return true;
8587 }
8588
8597 - if (this.isAutoRefreshable() === false) {
8589 + if (!this.isAutoRefreshable()) {
8590 if (this.debug) {
8591 this.log('canBeAutoRefreshed() -> not auto-refreshable');
8592 }
@@ -8778,10 +8770,12 @@ NETDATA.resetAllCharts = function (state) {
8770 // there are 2 possibilities here
8771 // a. state is the global Pan and Zoom master
8772 // b. state is not the global Pan and Zoom master
8781 - let master = true;
8782 - if (NETDATA.globalPanAndZoom.isMaster(state) === false) {
8783 - master = false;
8784 - }
8773 +
8774 + // let master = true;
8775 + // if (NETDATA.globalPanAndZoom.isMaster(state) === false) {
8776 + // master = false;
8777 + // }
8778 + const master = NETDATA.globalPanAndZoom.isMaster(state)
8779
8780 // clear the global Pan and Zoom
8781 // this will also refresh the master
@@ -9024,7 +9018,7 @@ NETDATA.chartRefresher = function () {
9018 return;
9019 }
9020
9027 - if (NETDATA.options.current.parallel_refresher === false) {
9021 + if (!NETDATA.options.current.parallel_refresher) {
9022 // console.log('auto-refresher is calling chartRefresherNoParallel(0)');
9023 NETDATA.chartRefresherNoParallel(0, function () {
9024 NETDATA.chartRefresherTimeoutId = NETDATA.timeout.set(
@@ -9045,7 +9039,7 @@ NETDATA.chartRefresher = function () {
9039 return;
9040 }
9041
9048 - if (NETDATA.globalSelectionSync.active() === false) {
9042 + if (!NETDATA.globalSelectionSync.active()) {
9043 let parallel = [];
9044 let targets = NETDATA.intersectionObserver.targets();
9045 let len = targets.length;
@@ -9056,7 +9050,7 @@ NETDATA.chartRefresher = function () {
9050 continue;
9051 }
9052
9059 - if (state.library.initialized === false) {
9053 + if (!state.library.initialized) {
9054 if (state.library.enabled) {
9055 state.library.initialize(NETDATA.chartRefresher);
9056 //console.log('chartRefresher() end6 (library init)');
@@ -9080,7 +9074,7 @@ NETDATA.chartRefresher = function () {
9074 // console.log('auto-refresher executing in parallel for ' + parallel.length.toString() + ' charts');
9075 // this will execute the jobs in parallel
9076
9083 - if (state.running === false) {
9077 + if (!state.running) {
9078 NETDATA.timeout.set(state.autoRefresh, 0);
9079 }
9080 }
web/gui/index.html
+1 -1
@@ -3760,7 +3760,7 @@
3760 NETDATA.options.force_data_points = saveData.data_points;
3761 NETDATA.options.fake_chart_rendering = true;
3762 NETDATA.onscroll_updater_enabled = false;
3763 - NETDATA.abort_all_refreshes();
3763 + NETDATA.abortAllRefreshes();
3764
3765 var size = 0;
3766 var info = ' Resolution: <b>' + saveSnapshotSelectedSecondsPerPoint.toString() + ((saveSnapshotSelectedSecondsPerPoint === 1)?' second ':' seconds ').toString() + 'per point</b>.';
web/gui/src/dashboard.js/chart-registry.js new
+94
@@ -0,0 +1,94 @@
1 +
2 +// *** src/dashboard.js/chart-registry.js
3 +
4 +// Chart Registry
5 +
6 +// When multiple charts need the same chart, we avoid downloading it
7 +// multiple times (and having it in browser memory multiple time)
8 +// by using this registry.
9 +
10 +// Every time we download a chart definition, we save it here with .add()
11 +// Then we try to get it back with .get(). If that fails, we download it.
12 +
13 +NETDATA.fixHost = function (host) {
14 + while (host.slice(-1) === '/') {
15 + host = host.substring(0, host.length - 1);
16 + }
17 +
18 + return host;
19 +};
20 +
21 +NETDATA.chartRegistry = {
22 + charts: {},
23 +
24 + globalReset: function () {
25 + this.charts = {};
26 + },
27 +
28 + add: function (host, id, data) {
29 + if (typeof this.charts[host] === 'undefined') {
30 + this.charts[host] = {};
31 + }
32 +
33 + //console.log('added ' + host + '/' + id);
34 + this.charts[host][id] = data;
35 + },
36 +
37 + get: function (host, id) {
38 + if (typeof this.charts[host] === 'undefined') {
39 + return null;
40 + }
41 +
42 + if (typeof this.charts[host][id] === 'undefined') {
43 + return null;
44 + }
45 +
46 + //console.log('cached ' + host + '/' + id);
47 + return this.charts[host][id];
48 + },
49 +
50 + downloadAll: function (host, callback) {
51 + host = NETDATA.fixHost(host);
52 +
53 + let self = this;
54 +
55 + function got_data(h, data, callback) {
56 + if (data !== null) {
57 + self.charts[h] = data.charts;
58 +
59 + // update the server timezone in our options
60 + if (typeof data.timezone === 'string') {
61 + NETDATA.options.server_timezone = data.timezone;
62 + }
63 + } else {
64 + NETDATA.error(406, h + '/api/v1/charts');
65 + }
66 +
67 + if (typeof callback === 'function') {
68 + callback(data);
69 + }
70 + }
71 +
72 + if (netdataSnapshotData !== null) {
73 + got_data(host, netdataSnapshotData.charts, callback);
74 + } else {
75 + $.ajax({
76 + url: host + '/api/v1/charts',
77 + async: true,
78 + cache: false,
79 + xhrFields: {withCredentials: true} // required for the cookie
80 + })
81 + .done(function (data) {
82 + data = NETDATA.xss.checkOptional('/api/v1/charts', data);
83 + got_data(host, data, callback);
84 + })
85 + .fail(function () {
86 + NETDATA.error(405, host + '/api/v1/charts');
87 +
88 + if (typeof callback === 'function') {
89 + callback(null);
90 + }
91 + });
92 + }
93 + }
94 +};
web/gui/src/dashboard.js/charting/dygraph.js
+1 -1
@@ -875,7 +875,7 @@ NETDATA.dygraphChartCreate = function (state, data) {
875
876 // if it didn't move, it is a selection
877 if (state.dygraph_last_touch_move === 0 && state.dygraph_last_touch_page_x !== 0) {
878 - NETDATA.globalSelectionSync.dont_sync_before = 0;
878 + NETDATA.globalSelectionSync.dontSyncBefore = 0;
879 NETDATA.globalSelectionSync.setMaster(state);
880
881 // internal api of dygraph
web/gui/src/dashboard.js/common.js new
+249
@@ -0,0 +1,249 @@
1 +
2 +// Compute common (joint) values over multiple charts.
3 +
4 +
5 +// commonMin & commonMax
6 +
7 +NETDATA.commonMin = {
8 + keys: {},
9 + latest: {},
10 +
11 + globalReset: function () {
12 + this.keys = {};
13 + this.latest = {};
14 + },
15 +
16 + get: function (state) {
17 + if (typeof state.tmp.__commonMin === 'undefined') {
18 + // get the commonMin setting
19 + state.tmp.__commonMin = NETDATA.dataAttribute(state.element, 'common-min', null);
20 + }
21 +
22 + let min = state.data.min;
23 + let name = state.tmp.__commonMin;
24 +
25 + if (name === null) {
26 + // we don't need commonMin
27 + //state.log('no need for commonMin');
28 + return min;
29 + }
30 +
31 + let t = this.keys[name];
32 + if (typeof t === 'undefined') {
33 + // add our commonMin
34 + this.keys[name] = {};
35 + t = this.keys[name];
36 + }
37 +
38 + let uuid = state.uuid;
39 + if (typeof t[uuid] !== 'undefined') {
40 + if (t[uuid] === min) {
41 + //state.log('commonMin ' + state.tmp.__commonMin + ' not changed: ' + this.latest[name]);
42 + return this.latest[name];
43 + } else if (min < this.latest[name]) {
44 + //state.log('commonMin ' + state.tmp.__commonMin + ' increased: ' + min);
45 + t[uuid] = min;
46 + this.latest[name] = min;
47 + return min;
48 + }
49 + }
50 +
51 + // add our min
52 + t[uuid] = min;
53 +
54 + // find the common min
55 + let m = min;
56 + // for (let i in t) {
57 + // if (t.hasOwnProperty(i) && t[i] < m) m = t[i];
58 + // }
59 + for (const ti of Object.values(t)) {
60 + if (ti < m) {
61 + m = ti;
62 + }
63 + }
64 +
65 + //state.log('commonMin ' + state.tmp.__commonMin + ' updated: ' + m);
66 + this.latest[name] = m;
67 + return m;
68 + }
69 +};
70 +
71 +NETDATA.commonMax = {
72 + keys: {},
73 + latest: {},
74 +
75 + globalReset: function () {
76 + this.keys = {};
77 + this.latest = {};
78 + },
79 +
80 + get: function (state) {
81 + if (typeof state.tmp.__commonMax === 'undefined') {
82 + // get the commonMax setting
83 + state.tmp.__commonMax = NETDATA.dataAttribute(state.element, 'common-max', null);
84 + }
85 +
86 + let max = state.data.max;
87 + let name = state.tmp.__commonMax;
88 +
89 + if (name === null) {
90 + // we don't need commonMax
91 + //state.log('no need for commonMax');
92 + return max;
93 + }
94 +
95 + let t = this.keys[name];
96 + if (typeof t === 'undefined') {
97 + // add our commonMax
98 + this.keys[name] = {};
99 + t = this.keys[name];
100 + }
101 +
102 + let uuid = state.uuid;
103 + if (typeof t[uuid] !== 'undefined') {
104 + if (t[uuid] === max) {
105 + //state.log('commonMax ' + state.tmp.__commonMax + ' not changed: ' + this.latest[name]);
106 + return this.latest[name];
107 + } else if (max > this.latest[name]) {
108 + //state.log('commonMax ' + state.tmp.__commonMax + ' increased: ' + max);
109 + t[uuid] = max;
110 + this.latest[name] = max;
111 + return max;
112 + }
113 + }
114 +
115 + // add our max
116 + t[uuid] = max;
117 +
118 + // find the common max
119 + let m = max;
120 + // for (let i in t) {
121 + // if (t.hasOwnProperty(i) && t[i] > m) m = t[i];
122 + // }
123 + for (const ti of Object.values(t)) {
124 + if (ti > m) {
125 + m = ti;
126 + }
127 + }
128 +
129 + //state.log('commonMax ' + state.tmp.__commonMax + ' updated: ' + m);
130 + this.latest[name] = m;
131 + return m;
132 + }
133 +};
134 +
135 +NETDATA.commonColors = {
136 + keys: {},
137 +
138 + globalReset: function () {
139 + this.keys = {};
140 + },
141 +
142 + get: function (state, label) {
143 + let ret = this.refill(state);
144 +
145 + if (typeof ret.assigned[label] === 'undefined') {
146 + ret.assigned[label] = ret.available.shift();
147 + }
148 +
149 + return ret.assigned[label];
150 + },
151 +
152 + refill: function (state) {
153 + let ret, len;
154 +
155 + if (typeof state.tmp.__commonColors === 'undefined') {
156 + ret = this.prepare(state);
157 + } else {
158 + ret = this.keys[state.tmp.__commonColors];
159 + if (typeof ret === 'undefined') {
160 + ret = this.prepare(state);
161 + }
162 + }
163 +
164 + if (ret.available.length === 0) {
165 + if (ret.copy_theme || ret.custom.length === 0) {
166 + // copy the theme colors
167 + len = NETDATA.themes.current.colors.length;
168 + while (len--) {
169 + ret.available.unshift(NETDATA.themes.current.colors[len]);
170 + }
171 + }
172 +
173 + // copy the custom colors
174 + len = ret.custom.length;
175 + while (len--) {
176 + ret.available.unshift(ret.custom[len]);
177 + }
178 + }
179 +
180 + state.colors_assigned = ret.assigned;
181 + state.colors_available = ret.available;
182 + state.colors_custom = ret.custom;
183 +
184 + return ret;
185 + },
186 +
187 + __read_custom_colors: function (state, ret) {
188 + // add the user supplied colors
189 + let c = NETDATA.dataAttribute(state.element, 'colors', undefined);
190 + if (typeof c === 'string' && c.length > 0) {
191 + c = c.split(' ');
192 + let len = c.length;
193 +
194 + if (len > 0 && c[len - 1] === 'ONLY') {
195 + len--;
196 + ret.copy_theme = false;
197 + }
198 +
199 + while (len--) {
200 + ret.custom.unshift(c[len]);
201 + }
202 + }
203 + },
204 +
205 + prepare: function (state) {
206 + let has_custom_colors = false;
207 +
208 + if (typeof state.tmp.__commonColors === 'undefined') {
209 + let defname = state.chart.context;
210 +
211 + // if this chart has data-colors=""
212 + // we should use the chart uuid as the default key (private palette)
213 + // (data-common-colors="NAME" will be used anyways)
214 + let c = NETDATA.dataAttribute(state.element, 'colors', undefined);
215 + if (typeof c === 'string' && c.length > 0) {
216 + defname = state.uuid;
217 + has_custom_colors = true;
218 + }
219 +
220 + // get the commonColors setting
221 + state.tmp.__commonColors = NETDATA.dataAttribute(state.element, 'common-colors', defname);
222 + }
223 +
224 + let name = state.tmp.__commonColors;
225 + let ret = this.keys[name];
226 +
227 + if (typeof ret === 'undefined') {
228 + // add our commonMax
229 + this.keys[name] = {
230 + assigned: {}, // name-value of dimensions and their colors
231 + available: [], // an array of colors available to be used
232 + custom: [], // the array of colors defined by the user
233 + charts: {}, // the charts linked to this
234 + copy_theme: true
235 + };
236 + ret = this.keys[name];
237 + }
238 +
239 + if (typeof ret.charts[state.uuid] === 'undefined') {
240 + ret.charts[state.uuid] = state;
241 +
242 + if (has_custom_colors) {
243 + this.__read_custom_colors(state, ret);
244 + }
245 + }
246 +
247 + return ret;
248 + }
249 +};
web/gui/src/dashboard.js/dependencies.js new
+21
@@ -0,0 +1,21 @@
1 +
2 +// *** src/dashboard.js/dependencies.js
3 +
4 +// default URLs for all the external files we need
5 +// make them RELATIVE so that the whole thing can also be
6 +// installed under a web server
7 +NETDATA.jQuery = NETDATA.serverStatic + 'lib/jquery-2.2.4.min.js';
8 +NETDATA.peity_js = NETDATA.serverStatic + 'lib/jquery.peity-3.2.0.min.js';
9 +NETDATA.sparkline_js = NETDATA.serverStatic + 'lib/jquery.sparkline-2.1.2.min.js';
10 +NETDATA.easypiechart_js = NETDATA.serverStatic + 'lib/jquery.easypiechart-97b5824.min.js';
11 +NETDATA.gauge_js = NETDATA.serverStatic + 'lib/gauge-1.3.2.min.js';
12 +NETDATA.dygraph_js = NETDATA.serverStatic + 'lib/dygraph-c91c859.min.js';
13 +NETDATA.dygraph_smooth_js = NETDATA.serverStatic + 'lib/dygraph-smooth-plotter-c91c859.js';
14 +// NETDATA.raphael_js = NETDATA.serverStatic + 'lib/raphael-2.2.4-min.js';
15 +// NETDATA.c3_js = NETDATA.serverStatic + 'lib/c3-0.4.18.min.js';
16 +// NETDATA.c3_css = NETDATA.serverStatic + 'css/c3-0.4.18.min.css';
17 +NETDATA.d3pie_js = NETDATA.serverStatic + 'lib/d3pie-0.2.1-netdata-3.js';
18 +NETDATA.d3_js = NETDATA.serverStatic + 'lib/d3-4.12.2.min.js';
19 +// NETDATA.morris_js = NETDATA.serverStatic + 'lib/morris-0.5.1.min.js';
20 +// NETDATA.morris_css = NETDATA.serverStatic + 'css/morris-0.5.1.css';
21 +NETDATA.google_js = 'https://www.google.com/jsapi';
web/gui/src/dashboard.js/main.js
+318 -931
@@ -1,264 +1,5 @@
1 -// ----------------------------------------------------------------------------------------------------------------
2 -// Detect the netdata server
3 -
4 -// http://stackoverflow.com/questions/984510/what-is-my-script-src-url
5 -// http://stackoverflow.com/questions/6941533/get-protocol-domain-and-port-from-url
6 -NETDATA._scriptSource = function () {
7 - let script = null;
8 -
9 - if (typeof document.currentScript !== 'undefined') {
10 - script = document.currentScript;
11 - } else {
12 - const all_scripts = document.getElementsByTagName('script');
13 - script = all_scripts[all_scripts.length - 1];
14 - }
15 -
16 - if (typeof script.getAttribute.length !== 'undefined') {
17 - script = script.src;
18 - } else {
19 - script = script.getAttribute('src', -1);
20 - }
21 -
22 - return script;
23 -};
24 -
25 -if (typeof netdataServer !== 'undefined') {
26 - NETDATA.serverDefault = netdataServer;
27 -} else {
28 - let s = NETDATA._scriptSource();
29 - if (s) {
30 - NETDATA.serverDefault = s.replace(/\/dashboard.js(\?.*)?$/g, "");
31 - } else {
32 - console.log('WARNING: Cannot detect the URL of the netdata server.');
33 - NETDATA.serverDefault = null;
34 - }
35 -}
36 -
37 -if (NETDATA.serverDefault === null) {
38 - NETDATA.serverDefault = '';
39 -} else if (NETDATA.serverDefault.slice(-1) !== '/') {
40 - NETDATA.serverDefault += '/';
41 -}
42 -
43 -if (typeof netdataServerStatic !== 'undefined' && netdataServerStatic !== null && netdataServerStatic !== '') {
44 - NETDATA.serverStatic = netdataServerStatic;
45 - if (NETDATA.serverStatic.slice(-1) !== '/') {
46 - NETDATA.serverStatic += '/';
47 - }
48 -} else {
49 - NETDATA.serverStatic = NETDATA.serverDefault;
50 -}
51 -
52 -// default URLs for all the external files we need
53 -// make them RELATIVE so that the whole thing can also be
54 -// installed under a web server
55 -NETDATA.jQuery = NETDATA.serverStatic + 'lib/jquery-2.2.4.min.js';
56 -NETDATA.peity_js = NETDATA.serverStatic + 'lib/jquery.peity-3.2.0.min.js';
57 -NETDATA.sparkline_js = NETDATA.serverStatic + 'lib/jquery.sparkline-2.1.2.min.js';
58 -NETDATA.easypiechart_js = NETDATA.serverStatic + 'lib/jquery.easypiechart-97b5824.min.js';
59 -NETDATA.gauge_js = NETDATA.serverStatic + 'lib/gauge-1.3.2.min.js';
60 -NETDATA.dygraph_js = NETDATA.serverStatic + 'lib/dygraph-c91c859.min.js';
61 -NETDATA.dygraph_smooth_js = NETDATA.serverStatic + 'lib/dygraph-smooth-plotter-c91c859.js';
62 -// NETDATA.raphael_js = NETDATA.serverStatic + 'lib/raphael-2.2.4-min.js';
63 -// NETDATA.c3_js = NETDATA.serverStatic + 'lib/c3-0.4.18.min.js';
64 -// NETDATA.c3_css = NETDATA.serverStatic + 'css/c3-0.4.18.min.css';
65 -NETDATA.d3pie_js = NETDATA.serverStatic + 'lib/d3pie-0.2.1-netdata-3.js';
66 -NETDATA.d3_js = NETDATA.serverStatic + 'lib/d3-4.12.2.min.js';
67 -// NETDATA.morris_js = NETDATA.serverStatic + 'lib/morris-0.5.1.min.js';
68 -// NETDATA.morris_css = NETDATA.serverStatic + 'css/morris-0.5.1.css';
69 -NETDATA.google_js = 'https://www.google.com/jsapi';
70 -
71 -NETDATA.themes = {
72 - white: {
73 - bootstrap_css: NETDATA.serverStatic + 'css/bootstrap-3.3.7.css',
74 - dashboard_css: NETDATA.serverStatic + 'dashboard.css?v20180210-1',
75 - background: '#FFFFFF',
76 - foreground: '#000000',
77 - grid: '#F0F0F0',
78 - axis: '#F0F0F0',
79 - highlight: '#F5F5F5',
80 - colors: ['#3366CC', '#DC3912', '#109618', '#FF9900', '#990099', '#DD4477',
81 - '#3B3EAC', '#66AA00', '#0099C6', '#B82E2E', '#AAAA11', '#5574A6',
82 - '#994499', '#22AA99', '#6633CC', '#E67300', '#316395', '#8B0707',
83 - '#329262', '#3B3EAC'],
84 - easypiechart_track: '#f0f0f0',
85 - easypiechart_scale: '#dfe0e0',
86 - gauge_pointer: '#C0C0C0',
87 - gauge_stroke: '#F0F0F0',
88 - gauge_gradient: false,
89 - d3pie: {
90 - title: '#333333',
91 - subtitle: '#666666',
92 - footer: '#888888',
93 - other: '#aaaaaa',
94 - mainlabel: '#333333',
95 - percentage: '#dddddd',
96 - value: '#aaaa22',
97 - tooltip_bg: '#000000',
98 - tooltip_fg: '#efefef',
99 - segment_stroke: "#ffffff",
100 - gradient_color: '#000000'
101 - }
102 - },
103 - slate: {
104 - bootstrap_css: NETDATA.serverStatic + 'css/bootstrap-slate-flat-3.3.7.css?v20161229-1',
105 - dashboard_css: NETDATA.serverStatic + 'dashboard.slate.css?v20180210-1',
106 - background: '#272b30',
107 - foreground: '#C8C8C8',
108 - grid: '#283236',
109 - axis: '#283236',
110 - highlight: '#383838',
111 - /* colors: [ '#55bb33', '#ff2222', '#0099C6', '#faa11b', '#adbce0', '#DDDD00',
112 - '#4178ba', '#f58122', '#a5cc39', '#f58667', '#f5ef89', '#cf93c0',
113 - '#a5d18a', '#b8539d', '#3954a3', '#c8a9cf', '#c7de8a', '#fad20a',
114 - '#a6a479', '#a66da8' ],
115 - */
116 - colors: ['#66AA00', '#FE3912', '#3366CC', '#D66300', '#0099C6', '#DDDD00',
117 - '#5054e6', '#EE9911', '#BB44CC', '#e45757', '#ef0aef', '#CC7700',
118 - '#22AA99', '#109618', '#905bfd', '#f54882', '#4381bf', '#ff3737',
119 - '#329262', '#3B3EFF'],
120 - easypiechart_track: '#373b40',
121 - easypiechart_scale: '#373b40',
122 - gauge_pointer: '#474b50',
123 - gauge_stroke: '#373b40',
124 - gauge_gradient: false,
125 - d3pie: {
126 - title: '#C8C8C8',
127 - subtitle: '#283236',
128 - footer: '#283236',
129 - other: '#283236',
130 - mainlabel: '#C8C8C8',
131 - percentage: '#dddddd',
132 - value: '#cccc44',
133 - tooltip_bg: '#272b30',
134 - tooltip_fg: '#C8C8C8',
135 - segment_stroke: "#283236",
136 - gradient_color: '#000000'
137 - }
138 - }
139 -};
140 -
141 -if (typeof netdataTheme !== 'undefined' && typeof NETDATA.themes[netdataTheme] !== 'undefined') {
142 - NETDATA.themes.current = NETDATA.themes[netdataTheme];
143 -} else {
144 - NETDATA.themes.current = NETDATA.themes.white;
145 -}
146 -
147 -NETDATA.colors = NETDATA.themes.current.colors;
148 -
149 -// these are the colors Google Charts are using
150 -// we have them here to attempt emulate their look and feel on the other chart libraries
151 -// http://there4.io/2012/05/02/google-chart-color-list/
152 -//NETDATA.colors = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6',
153 -// '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11',
154 -// '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC' ];
155 -
156 -// an alternative set
157 -// http://www.mulinblog.com/a-color-palette-optimized-for-data-visualization/
158 -// (blue) (red) (orange) (green) (pink) (brown) (purple) (yellow) (gray)
159 -//NETDATA.colors = [ '#5DA5DA', '#F15854', '#FAA43A', '#60BD68', '#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#4D4D4D' ];
160 -
161 -// ----------------------------------------------------------------------------------------------------------------
162 -
163 -NETDATA.timeout = {
164 - // by default, these are just wrappers to setTimeout() / clearTimeout()
165 -
166 - step: function (callback) {
167 - return window.setTimeout(callback, 1000 / 60);
168 - },
169 -
170 - set: function (callback, delay) {
171 - return window.setTimeout(callback, delay);
172 - },
173 -
174 - clear: function (id) {
175 - return window.clearTimeout(id);
176 - },
177 -
178 - init: function () {
179 - let custom = true;
180 -
181 - if (window.requestAnimationFrame) {
182 - this.step = function (callback) {
183 - return window.requestAnimationFrame(callback);
184 - };
185 -
186 - this.clear = function (handle) {
187 - return window.cancelAnimationFrame(handle.value);
188 - };
189 - } else if (window.webkitRequestAnimationFrame) {
190 - this.step = function (callback) {
191 - return window.webkitRequestAnimationFrame(callback);
192 - };
193 -
194 - if (window.webkitCancelAnimationFrame) {
195 - this.clear = function (handle) {
196 - return window.webkitCancelAnimationFrame(handle.value);
197 - };
198 - } else if (window.webkitCancelRequestAnimationFrame) {
199 - this.clear = function (handle) {
200 - return window.webkitCancelRequestAnimationFrame(handle.value);
201 - };
202 - }
203 - } else if (window.mozRequestAnimationFrame) {
204 - this.step = function (callback) {
205 - return window.mozRequestAnimationFrame(callback);
206 - };
207 -
208 - this.clear = function (handle) {
209 - return window.mozCancelRequestAnimationFrame(handle.value);
210 - };
211 - } else if (window.oRequestAnimationFrame) {
212 - this.step = function (callback) {
213 - return window.oRequestAnimationFrame(callback);
214 - };
215 -
216 - this.clear = function (handle) {
217 - return window.oCancelRequestAnimationFrame(handle.value);
218 - };
219 - } else if (window.msRequestAnimationFrame) {
220 - this.step = function (callback) {
221 - return window.msRequestAnimationFrame(callback);
222 - };
223 -
224 - this.clear = function (handle) {
225 - return window.msCancelRequestAnimationFrame(handle.value);
226 - };
227 - } else {
228 - custom = false;
229 - }
230 -
231 - if (custom) {
232 - // we have installed custom .step() / .clear() functions
233 - // overwrite the .set() too
1
235 - this.set = function (callback, delay) {
236 - let that = this;
237 -
238 - let start = Date.now(),
239 - handle = new Object();
240 -
241 - function loop() {
242 - let current = Date.now(),
243 - delta = current - start;
244 -
245 - if (delta >= delay) {
246 - callback.call();
247 - } else {
248 - handle.value = that.step(loop);
249 - }
250 - }
251 -
252 - handle.value = that.step(loop);
253 - return handle;
254 - };
255 - }
256 - }
257 -};
258 -
259 -NETDATA.timeout.init();
260 -
261 -// ----------------------------------------------------------------------------------------------------------------
2 +// *** src/dashboard.js/main.js
3
4 if (NETDATA.options.debug.main_loop) {
5 console.log('welcome to NETDATA');
@@ -274,7 +15,7 @@ NETDATA.onresize = function () {
15 }
16 };
17
277 -NETDATA.abort_all_refreshes = function () {
18 +NETDATA.abortAllRefreshes = function () {
19 let targets = NETDATA.options.targets;
20 let len = targets.length;
21
@@ -289,7 +30,7 @@ NETDATA.abort_all_refreshes = function () {
30 }
31 };
32
292 -NETDATA.onscroll_start_delay = function () {
33 +NETDATA.onscrollStartDelay = function () {
34 NETDATA.options.last_page_scroll = Date.now();
35
36 NETDATA.options.on_scroll_refresher_stop_until =
@@ -297,18 +38,18 @@ NETDATA.onscroll_start_delay = function () {
38 + (NETDATA.options.current.async_on_scroll ? 1000 : 0);
39 };
40
300 -NETDATA.onscroll_end_delay = function () {
41 +NETDATA.onscrollEndDelay = function () {
42 NETDATA.options.on_scroll_refresher_stop_until =
43 Date.now()
44 + (NETDATA.options.current.async_on_scroll ? NETDATA.options.current.onscroll_worker_duration_threshold : 0);
45 };
46
47 NETDATA.onscroll_updater_timeout_id = undefined;
307 -NETDATA.onscroll_updater = function () {
48 +NETDATA.onscrollUpdater = function () {
49 NETDATA.globalSelectionSync.stop();
50
51 if (NETDATA.options.abort_ajax_on_scroll) {
311 - NETDATA.abort_all_refreshes();
52 + NETDATA.abortAllRefreshes();
53 }
54
55 // when the user scrolls he sees that we have
@@ -316,23 +57,20 @@ NETDATA.onscroll_updater = function () {
57 // using this little function we try to switch
58 // the charts back to visible quickly
59
319 - // if (NETDATA.intersectionObserver.enabled() === false) {
60 if (!NETDATA.intersectionObserver.enabled()) {
321 - // if (NETDATA.options.current.parallel_refresher === false) {
61 if (!NETDATA.options.current.parallel_refresher) {
62 let targets = NETDATA.options.targets;
63 let len = targets.length;
64
65 while (len--) {
66 if (!targets[len].running) {
328 - // if (targets[len].running === false) {
67 targets[len].isVisible();
68 }
69 }
70 }
71 }
72
335 - NETDATA.onscroll_end_delay();
73 + NETDATA.onscrollEndDelay();
74 };
75
76 NETDATA.scrollUp = false;
@@ -340,7 +78,7 @@ NETDATA.scrollY = window.scrollY;
78 NETDATA.onscroll = function () {
79 //console.log('onscroll() begin');
80
343 - NETDATA.onscroll_start_delay();
81 + NETDATA.onscrollStartDelay();
82 NETDATA.chartRefresherReschedule();
83
84 NETDATA.scrollUp = (window.scrollY > NETDATA.scrollY);
@@ -350,7 +88,7 @@ NETDATA.onscroll = function () {
88 NETDATA.timeout.clear(NETDATA.onscroll_updater_timeout_id);
89 }
90
353 - NETDATA.onscroll_updater_timeout_id = NETDATA.timeout.set(NETDATA.onscroll_updater, 0);
91 + NETDATA.onscroll_updater_timeout_id = NETDATA.timeout.set(NETDATA.onscrollUpdater, 0);
92 //console.log('onscroll() end');
93 };
94
@@ -380,346 +118,6 @@ window.addEventListener('scroll', NETDATA.onscroll, NETDATA.supportsPassiveEvent
118 // window.onresize = NETDATA.onresize;
119 // window.onscroll = NETDATA.onscroll;
120
383 -// ----------------------------------------------------------------------------------------------------------------
384 -// commonMin & commonMax
385 -
386 -NETDATA.commonMin = {
387 - keys: {},
388 - latest: {},
389 -
390 - globalReset: function () {
391 - this.keys = {};
392 - this.latest = {};
393 - },
394 -
395 - get: function (state) {
396 - if (typeof state.tmp.__commonMin === 'undefined') {
397 - // get the commonMin setting
398 - state.tmp.__commonMin = NETDATA.dataAttribute(state.element, 'common-min', null);
399 - }
400 -
401 - let min = state.data.min;
402 - let name = state.tmp.__commonMin;
403 -
404 - if (name === null) {
405 - // we don't need commonMin
406 - //state.log('no need for commonMin');
407 - return min;
408 - }
409 -
410 - let t = this.keys[name];
411 - if (typeof t === 'undefined') {
412 - // add our commonMin
413 - this.keys[name] = {};
414 - t = this.keys[name];
415 - }
416 -
417 - let uuid = state.uuid;
418 - if (typeof t[uuid] !== 'undefined') {
419 - if (t[uuid] === min) {
420 - //state.log('commonMin ' + state.tmp.__commonMin + ' not changed: ' + this.latest[name]);
421 - return this.latest[name];
422 - } else if (min < this.latest[name]) {
423 - //state.log('commonMin ' + state.tmp.__commonMin + ' increased: ' + min);
424 - t[uuid] = min;
425 - this.latest[name] = min;
426 - return min;
427 - }
428 - }
429 -
430 - // add our min
431 - t[uuid] = min;
432 -
433 - // find the common min
434 - let m = min;
435 - // for (let i in t) {
436 - // if (t.hasOwnProperty(i) && t[i] < m) m = t[i];
437 - // }
438 - for (const ti of Object.values(t)) {
439 - if (ti < m) {
440 - m = ti;
441 - }
442 - }
443 -
444 - //state.log('commonMin ' + state.tmp.__commonMin + ' updated: ' + m);
445 - this.latest[name] = m;
446 - return m;
447 - }
448 -};
449 -
450 -NETDATA.commonMax = {
451 - keys: {},
452 - latest: {},
453 -
454 - globalReset: function () {
455 - this.keys = {};
456 - this.latest = {};
457 - },
458 -
459 - get: function (state) {
460 - if (typeof state.tmp.__commonMax === 'undefined') {
461 - // get the commonMax setting
462 - state.tmp.__commonMax = NETDATA.dataAttribute(state.element, 'common-max', null);
463 - }
464 -
465 - let max = state.data.max;
466 - let name = state.tmp.__commonMax;
467 -
468 - if (name === null) {
469 - // we don't need commonMax
470 - //state.log('no need for commonMax');
471 - return max;
472 - }
473 -
474 - let t = this.keys[name];
475 - if (typeof t === 'undefined') {
476 - // add our commonMax
477 - this.keys[name] = {};
478 - t = this.keys[name];
479 - }
480 -
481 - let uuid = state.uuid;
482 - if (typeof t[uuid] !== 'undefined') {
483 - if (t[uuid] === max) {
484 - //state.log('commonMax ' + state.tmp.__commonMax + ' not changed: ' + this.latest[name]);
485 - return this.latest[name];
486 - } else if (max > this.latest[name]) {
487 - //state.log('commonMax ' + state.tmp.__commonMax + ' increased: ' + max);
488 - t[uuid] = max;
489 - this.latest[name] = max;
490 - return max;
491 - }
492 - }
493 -
494 - // add our max
495 - t[uuid] = max;
496 -
497 - // find the common max
498 - let m = max;
499 - // for (let i in t) {
500 - // if (t.hasOwnProperty(i) && t[i] > m) m = t[i];
501 - // }
502 - for (const ti of Object.values(t)) {
503 - if (ti > m) {
504 - m = ti;
505 - }
506 - }
507 -
508 - //state.log('commonMax ' + state.tmp.__commonMax + ' updated: ' + m);
509 - this.latest[name] = m;
510 - return m;
511 - }
512 -};
513 -
514 -NETDATA.commonColors = {
515 - keys: {},
516 -
517 - globalReset: function () {
518 - this.keys = {};
519 - },
520 -
521 - get: function (state, label) {
522 - let ret = this.refill(state);
523 -
524 - if (typeof ret.assigned[label] === 'undefined') {
525 - ret.assigned[label] = ret.available.shift();
526 - }
527 -
528 - return ret.assigned[label];
529 - },
530 -
531 - refill: function (state) {
532 - let ret, len;
533 -
534 - if (typeof state.tmp.__commonColors === 'undefined') {
535 - ret = this.prepare(state);
536 - } else {
537 - ret = this.keys[state.tmp.__commonColors];
538 - if (typeof ret === 'undefined') {
539 - ret = this.prepare(state);
540 - }
541 - }
542 -
543 - if (ret.available.length === 0) {
544 - if (ret.copy_theme || ret.custom.length === 0) {
545 - // copy the theme colors
546 - len = NETDATA.themes.current.colors.length;
547 - while (len--) {
548 - ret.available.unshift(NETDATA.themes.current.colors[len]);
549 - }
550 - }
551 -
552 - // copy the custom colors
553 - len = ret.custom.length;
554 - while (len--) {
555 - ret.available.unshift(ret.custom[len]);
556 - }
557 - }
558 -
559 - state.colors_assigned = ret.assigned;
560 - state.colors_available = ret.available;
561 - state.colors_custom = ret.custom;
562 -
563 - return ret;
564 - },
565 -
566 - __read_custom_colors: function (state, ret) {
567 - // add the user supplied colors
568 - let c = NETDATA.dataAttribute(state.element, 'colors', undefined);
569 - if (typeof c === 'string' && c.length > 0) {
570 - c = c.split(' ');
571 - let len = c.length;
572 -
573 - if (len > 0 && c[len - 1] === 'ONLY') {
574 - len--;
575 - ret.copy_theme = false;
576 - }
577 -
578 - while (len--) {
579 - ret.custom.unshift(c[len]);
580 - }
581 - }
582 - },
583 -
584 - prepare: function (state) {
585 - let has_custom_colors = false;
586 -
587 - if (typeof state.tmp.__commonColors === 'undefined') {
588 - let defname = state.chart.context;
589 -
590 - // if this chart has data-colors=""
591 - // we should use the chart uuid as the default key (private palette)
592 - // (data-common-colors="NAME" will be used anyways)
593 - let c = NETDATA.dataAttribute(state.element, 'colors', undefined);
594 - if (typeof c === 'string' && c.length > 0) {
595 - defname = state.uuid;
596 - has_custom_colors = true;
597 - }
598 -
599 - // get the commonColors setting
600 - state.tmp.__commonColors = NETDATA.dataAttribute(state.element, 'common-colors', defname);
601 - }
602 -
603 - let name = state.tmp.__commonColors;
604 - let ret = this.keys[name];
605 -
606 - if (typeof ret === 'undefined') {
607 - // add our commonMax
608 - this.keys[name] = {
609 - assigned: {}, // name-value of dimensions and their colors
610 - available: [], // an array of colors available to be used
611 - custom: [], // the array of colors defined by the user
612 - charts: {}, // the charts linked to this
613 - copy_theme: true
614 - };
615 - ret = this.keys[name];
616 - }
617 -
618 - if (typeof ret.charts[state.uuid] === 'undefined') {
619 - ret.charts[state.uuid] = state;
620 -
621 - if (has_custom_colors) {
622 - this.__read_custom_colors(state, ret);
623 - }
624 - }
625 -
626 - return ret;
627 - }
628 -};
629 -
630 -// ----------------------------------------------------------------------------------------------------------------
631 -// Chart Registry
632 -
633 -// When multiple charts need the same chart, we avoid downloading it
634 -// multiple times (and having it in browser memory multiple time)
635 -// by using this registry.
636 -
637 -// Every time we download a chart definition, we save it here with .add()
638 -// Then we try to get it back with .get(). If that fails, we download it.
639 -
640 -NETDATA.fixHost = function (host) {
641 - while (host.slice(-1) === '/') {
642 - host = host.substring(0, host.length - 1);
643 - }
644 -
645 - return host;
646 -};
647 -
648 -NETDATA.chartRegistry = {
649 - charts: {},
650 -
651 - globalReset: function () {
652 - this.charts = {};
653 - },
654 -
655 - add: function (host, id, data) {
656 - if (typeof this.charts[host] === 'undefined') {
657 - this.charts[host] = {};
658 - }
659 -
660 - //console.log('added ' + host + '/' + id);
661 - this.charts[host][id] = data;
662 - },
663 -
664 - get: function (host, id) {
665 - if (typeof this.charts[host] === 'undefined') {
666 - return null;
667 - }
668 -
669 - if (typeof this.charts[host][id] === 'undefined') {
670 - return null;
671 - }
672 -
673 - //console.log('cached ' + host + '/' + id);
674 - return this.charts[host][id];
675 - },
676 -
677 - downloadAll: function (host, callback) {
678 - host = NETDATA.fixHost(host);
679 -
680 - let self = this;
681 -
682 - function got_data(h, data, callback) {
683 - if (data !== null) {
684 - self.charts[h] = data.charts;
685 -
686 - // update the server timezone in our options
687 - if (typeof data.timezone === 'string') {
688 - NETDATA.options.server_timezone = data.timezone;
689 - }
690 - } else {
691 - NETDATA.error(406, h + '/api/v1/charts');
692 - }
693 -
694 - if (typeof callback === 'function') {
695 - callback(data);
696 - }
697 - }
698 -
699 - if (netdataSnapshotData !== null) {
700 - got_data(host, netdataSnapshotData.charts, callback);
701 - } else {
702 - $.ajax({
703 - url: host + '/api/v1/charts',
704 - async: true,
705 - cache: false,
706 - xhrFields: {withCredentials: true} // required for the cookie
707 - })
708 - .done(function (data) {
709 - data = NETDATA.xss.checkOptional('/api/v1/charts', data);
710 - got_data(host, data, callback);
711 - })
712 - .fail(function () {
713 - NETDATA.error(405, host + '/api/v1/charts');
714 -
715 - if (typeof callback === 'function') {
716 - callback(null);
717 - }
718 - });
719 - }
720 - }
721 -};
722 -
121 // ----------------------------------------------------------------------------------------------------------------
122 // Global Pan and Zoom on charts
123
@@ -764,8 +162,6 @@ NETDATA.globalPanAndZoom = {
162 setMaster: function (state, after, before) {
163 this.delay();
164
767 - // if (NETDATA.options.current.sync_pan_and_zoom === false)
768 - // return;
165 if (!NETDATA.options.current.sync_pan_and_zoom) {
166 return;
167 }
@@ -962,7 +358,6 @@ dimensionStatus.prototype.setOptions = function (name_div, value_div, color) {
358 this.name_div = name_div;
359 this.name_div.title = this.label;
360 this.name_div.style.setProperty('color', this.color, 'important');
965 - // if (this.selected === false)
361 if (!this.selected) {
362 this.name_div.className = 'netdata-legend-name not-selected';
363 } else {
@@ -974,7 +369,7 @@ dimensionStatus.prototype.setOptions = function (name_div, value_div, color) {
369 this.value_div = value_div;
370 this.value_div.title = this.label;
371 this.value_div.style.setProperty('color', this.color, 'important');
977 - if (this.selected === false) {
372 + if (!this.selected) {
373 this.value_div.className = 'netdata-legend-value not-selected';
374 } else {
375 this.value_div.className = 'netdata-legend-value selected';
@@ -986,7 +381,6 @@ dimensionStatus.prototype.setOptions = function (name_div, value_div, color) {
381 };
382
383 dimensionStatus.prototype.setHandler = function () {
989 - // if (this.enabled === false) return;
384 if (!this.enabled) {
385 return;
386 }
@@ -1032,7 +426,6 @@ dimensionStatus.prototype.setHandler = function () {
426 };
427
428 dimensionStatus.prototype.select = function () {
1035 - // if (this.enabled === false) return;
429 if (!this.enabled) {
430 return;
431 }
@@ -1043,7 +436,6 @@ dimensionStatus.prototype.select = function () {
436 };
437
438 dimensionStatus.prototype.unselect = function () {
1046 - // if (this.enabled === false) return;
439 if (!this.enabled) {
440 return;
441 }
@@ -1272,18 +664,18 @@ NETDATA.dateTime.init(NETDATA.options.current.timezone);
664
665 NETDATA.globalSelectionSync = {
666 state: null,
1275 - dont_sync_before: 0,
667 + dontSyncBefore: 0,
668 last_t: 0,
669 slaves: [],
1278 - timeout_id: undefined,
670 + timeoutId: undefined,
671
672 globalReset: function () {
673 this.stop();
674 this.state = null;
1283 - this.dont_sync_before = 0;
675 + this.dontSyncBefore = 0;
676 this.last_t = 0;
677 this.slaves = [];
1286 - this.timeout_id = undefined;
678 + this.timeoutId = undefined;
679 },
680
681 active: function () {
@@ -1294,17 +686,15 @@ NETDATA.globalSelectionSync = {
686 enabled: function () {
687 // console.log('enabled()');
688 // can we globally apply selection sync?
1297 - // if (NETDATA.options.current.sync_selection === false) {
689 if (!NETDATA.options.current.sync_selection) {
690 return false;
691 }
692
1302 - return (this.dont_sync_before <= Date.now());
693 + return (this.dontSyncBefore <= Date.now());
694 },
695
696 // set the global selection sync master
697 setMaster: function (state) {
1307 - // if (this.enabled() === false) {
698 if (!this.enabled()) {
699 this.stop();
700 return;
@@ -1369,9 +759,9 @@ NETDATA.globalSelectionSync = {
759 }
760
761 if (typeof ms === 'number') {
1372 - this.dont_sync_before = Date.now() + ms;
762 + this.dontSyncBefore = Date.now() + ms;
763 } else {
1374 - this.dont_sync_before = Date.now() + NETDATA.options.current.sync_selection_delay;
764 + this.dontSyncBefore = Date.now() + NETDATA.options.current.sync_selection_delay;
765 }
766 }
767 },
@@ -1390,7 +780,7 @@ NETDATA.globalSelectionSync = {
780 NETDATA.globalSelectionSync.slaves[len].setSelection(t);
781 }
782
1393 - this.timeout_id = undefined;
783 + this.timeoutId = undefined;
784 }
785 },
786
@@ -1412,15 +802,15 @@ NETDATA.globalSelectionSync = {
802
803 this.last_t = t;
804
1415 - if (state.foreign_element_selection !== null) {
1416 - state.foreign_element_selection.innerText = NETDATA.dateTime.localeDateString(t) + ' ' + NETDATA.dateTime.localeTimeString(t);
805 + if (state.foreignElementSelection !== null) {
806 + state.foreignElementSelection.innerText = NETDATA.dateTime.localeDateString(t) + ' ' + NETDATA.dateTime.localeTimeString(t);
807 }
808
1419 - if (this.timeout_id) {
1420 - NETDATA.timeout.clear(this.timeout_id);
809 + if (this.timeoutId) {
810 + NETDATA.timeout.clear(this.timeoutId);
811 }
812
1423 - this.timeout_id = NETDATA.timeout.set(this.__syncSlaves, 0);
813 + this.timeoutId = NETDATA.timeout.set(this.__syncSlaves, 0);
814 }
815 }
816 };
@@ -1497,7 +887,7 @@ NETDATA.intersectionObserver = {
887
888 state.__visibilityRatio = entry.intersectionRatio;
889
1500 - if (NETDATA.options.current.async_on_scroll === false) {
890 + if (!NETDATA.options.current.async_on_scroll) {
891 if (window.requestIdleCallback) {
892 window.requestIdleCallback(function () {
893 NETDATA.intersectionObserver.switchChartVisibility.call(state);
@@ -1516,7 +906,7 @@ NETDATA.intersectionObserver = {
906 this.observer.observe(state.element);
907
908 state.isVisible = function () {
1519 - if (NETDATA.options.current.update_only_visible === false) {
909 + if (!NETDATA.options.current.update_only_visible) {
910 return true;
911 }
912
@@ -1551,6 +941,7 @@ let chartState = function (element) {
941
942 // IMPORTANT:
943 // all private functions should use 'that', instead of 'this'
944 + // Alternatively, you can use arrow functions (related issue #4514)
945 let that = this;
946
947 // ============================================================================================================
@@ -1559,17 +950,17 @@ let chartState = function (element) {
950 /* error() - private
951 * show an error instead of the chart
952 */
1562 - let error = function (msg) {
953 + let error = (msg) => {
954 let ret = true;
955
956 if (typeof netdataErrorCallback === 'function') {
1566 - ret = netdataErrorCallback('chart', that.id, msg);
957 + ret = netdataErrorCallback('chart', this.id, msg);
958 }
959
960 if (ret) {
1570 - that.element.innerHTML = that.id + ': ' + msg;
1571 - that.enabled = false;
1572 - that.current = that.pan;
961 + this.element.innerHTML = this.id + ': ' + msg;
962 + this.enabled = false;
963 + this.current = this.pan;
964 }
965 };
966
@@ -1628,7 +1019,7 @@ let chartState = function (element) {
1019 NETDATA.error(402, this.library_name);
1020 error('chart library "' + this.library_name + '" is not found');
1021 this.enabled = false;
1631 - } else if (NETDATA.chartLibraries[this.library_name].enabled === false) {
1022 + } else if (!NETDATA.chartLibraries[this.library_name].enabled) {
1023 NETDATA.error(403, this.library_name);
1024 error('chart library "' + this.library_name + '" is not enabled');
1025 this.enabled = false;
@@ -1669,29 +1060,29 @@ let chartState = function (element) {
1060
1061 this.tmp = {};
1062
1672 - this.foreign_element_before = null;
1673 - this.foreign_element_after = null;
1674 - this.foreign_element_duration = null;
1675 - this.foreign_element_update_every = null;
1676 - this.foreign_element_selection = null;
1063 + this.foreignElementBefore = null;
1064 + this.foreignElementAfter = null;
1065 + this.foreignElementDuration = null;
1066 + this.foreignElementUpdateEvery = null;
1067 + this.foreignElementSelection = null;
1068
1069 // ============================================================================================================
1070 // PRIVATE FUNCTIONS
1071
1072 // reset the runtime status variables to their defaults
1682 - const runtimeInit = function () {
1683 - that.paused = false; // boolean - is the chart paused for any reason?
1684 - that.selected = false; // boolean - is the chart shown a selection?
1073 + const runtimeInit = () => {
1074 + this.paused = false; // boolean - is the chart paused for any reason?
1075 + this.selected = false; // boolean - is the chart shown a selection?
1076
1686 - that.chart_created = false; // boolean - is the library.create() been called?
1687 - that.dom_created = false; // boolean - is the chart DOM been created?
1688 - that.fetching_data = false; // boolean - true while we fetch data via ajax
1077 + this.chart_created = false; // boolean - is the library.create() been called?
1078 + this.dom_created = false; // boolean - is the chart DOM been created?
1079 + this.fetching_data = false; // boolean - true while we fetch data via ajax
1080
1690 - that.updates_counter = 0; // numeric - the number of refreshes made so far
1691 - that.updates_since_last_unhide = 0; // numeric - the number of refreshes made since the last time the chart was unhidden
1692 - that.updates_since_last_creation = 0; // numeric - the number of refreshes made since the last time the chart was created
1081 + this.updates_counter = 0; // numeric - the number of refreshes made so far
1082 + this.updates_since_last_unhide = 0; // numeric - the number of refreshes made since the last time the chart was unhidden
1083 + this.updates_since_last_creation = 0; // numeric - the number of refreshes made since the last time the chart was created
1084
1694 - that.tm = {
1085 + this.tm = {
1086 last_initialized: 0, // milliseconds - the timestamp it was last initialized
1087 last_dom_created: 0, // milliseconds - the timestamp its DOM was last created
1088 last_mode_switch: 0, // milliseconds - the timestamp it switched modes
@@ -1708,116 +1099,116 @@ let chartState = function (element) {
1099 last_autorefreshed: 0 // the time the chart was last refreshed
1100 };
1101
1711 - that.data = null; // the last data as downloaded from the netdata server
1712 - that.data_url = 'invalid://'; // string - the last url used to update the chart
1713 - that.data_points = 0; // number - the number of points returned from netdata
1714 - that.data_after = 0; // milliseconds - the first timestamp of the data
1715 - that.data_before = 0; // milliseconds - the last timestamp of the data
1716 - that.data_update_every = 0; // milliseconds - the frequency to update the data
1102 + this.data = null; // the last data as downloaded from the netdata server
1103 + this.data_url = 'invalid://'; // string - the last url used to update the chart
1104 + this.data_points = 0; // number - the number of points returned from netdata
1105 + this.data_after = 0; // milliseconds - the first timestamp of the data
1106 + this.data_before = 0; // milliseconds - the last timestamp of the data
1107 + this.data_update_every = 0; // milliseconds - the frequency to update the data
1108
1718 - that.tmp = {}; // members that can be destroyed to save memory
1109 + this.tmp = {}; // members that can be destroyed to save memory
1110 };
1111
1112 // initialize all the variables that are required for the chart to be rendered
1722 - const lateInitialization = function () {
1723 - if (typeof that.host !== 'undefined') {
1113 + const lateInitialization = () => {
1114 + if (typeof this.host !== 'undefined') {
1115 return;
1116 }
1117
1118 // string - the netdata server URL, without any path
1728 - that.host = NETDATA.dataAttribute(that.element, 'host', NETDATA.serverDefault);
1119 + this.host = NETDATA.dataAttribute(this.element, 'host', NETDATA.serverDefault);
1120
1121 // make sure the host does not end with /
1122 // all netdata API requests use absolute paths
1732 - while (that.host.slice(-1) === '/') {
1733 - that.host = that.host.substring(0, that.host.length - 1);
1123 + while (this.host.slice(-1) === '/') {
1124 + this.host = this.host.substring(0, this.host.length - 1);
1125 }
1126
1127 // string - the grouping method requested by the user
1737 - that.method = NETDATA.dataAttribute(that.element, 'method', NETDATA.chartDefaults.method);
1738 - that.gtime = NETDATA.dataAttribute(that.element, 'gtime', 0);
1128 + this.method = NETDATA.dataAttribute(this.element, 'method', NETDATA.chartDefaults.method);
1129 + this.gtime = NETDATA.dataAttribute(this.element, 'gtime', 0);
1130
1131 // the time-range requested by the user
1741 - that.after = NETDATA.dataAttribute(that.element, 'after', NETDATA.chartDefaults.after);
1742 - that.before = NETDATA.dataAttribute(that.element, 'before', NETDATA.chartDefaults.before);
1132 + this.after = NETDATA.dataAttribute(this.element, 'after', NETDATA.chartDefaults.after);
1133 + this.before = NETDATA.dataAttribute(this.element, 'before', NETDATA.chartDefaults.before);
1134
1135 // the pixels per point requested by the user
1745 - that.pixels_per_point = NETDATA.dataAttribute(that.element, 'pixels-per-point', 1);
1746 - that.points = NETDATA.dataAttribute(that.element, 'points', null);
1136 + this.pixels_per_point = NETDATA.dataAttribute(this.element, 'pixels-per-point', 1);
1137 + this.points = NETDATA.dataAttribute(this.element, 'points', null);
1138
1139 // the forced update_every
1749 - that.force_update_every = NETDATA.dataAttribute(that.element, 'update-every', null);
1750 - if (typeof that.force_update_every !== 'number' || that.force_update_every <= 1) {
1751 - if (that.force_update_every !== null) {
1752 - that.log('ignoring invalid value of property data-update-every');
1140 + this.force_update_every = NETDATA.dataAttribute(this.element, 'update-every', null);
1141 + if (typeof this.force_update_every !== 'number' || this.force_update_every <= 1) {
1142 + if (this.force_update_every !== null) {
1143 + this.log('ignoring invalid value of property data-update-every');
1144 }
1145
1755 - that.force_update_every = null;
1146 + this.force_update_every = null;
1147 } else {
1757 - that.force_update_every *= 1000;
1148 + this.force_update_every *= 1000;
1149 }
1150
1151 // the dimensions requested by the user
1761 - that.dimensions = NETDATA.encodeURIComponent(NETDATA.dataAttribute(that.element, 'dimensions', null));
1152 + this.dimensions = NETDATA.encodeURIComponent(NETDATA.dataAttribute(this.element, 'dimensions', null));
1153
1763 - that.title = NETDATA.dataAttribute(that.element, 'title', null); // the title of the chart
1764 - that.units = NETDATA.dataAttribute(that.element, 'units', null); // the units of the chart dimensions
1765 - that.units_desired = NETDATA.dataAttribute(that.element, 'desired-units', NETDATA.options.current.units); // the units of the chart dimensions
1766 - that.units_current = that.units;
1767 - that.units_common = NETDATA.dataAttribute(that.element, 'common-units', null);
1154 + this.title = NETDATA.dataAttribute(this.element, 'title', null); // the title of the chart
1155 + this.units = NETDATA.dataAttribute(this.element, 'units', null); // the units of the chart dimensions
1156 + this.units_desired = NETDATA.dataAttribute(this.element, 'desired-units', NETDATA.options.current.units); // the units of the chart dimensions
1157 + this.units_current = this.units;
1158 + this.units_common = NETDATA.dataAttribute(this.element, 'common-units', null);
1159
1160 // additional options to pass to netdata
1770 - that.append_options = NETDATA.encodeURIComponent(NETDATA.dataAttribute(that.element, 'append-options', null));
1161 + this.append_options = NETDATA.encodeURIComponent(NETDATA.dataAttribute(this.element, 'append-options', null));
1162
1163 // override options to pass to netdata
1773 - that.override_options = NETDATA.encodeURIComponent(NETDATA.dataAttribute(that.element, 'override-options', null));
1164 + this.override_options = NETDATA.encodeURIComponent(NETDATA.dataAttribute(this.element, 'override-options', null));
1165
1775 - that.debug = NETDATA.dataAttributeBoolean(that.element, 'debug', false);
1166 + this.debug = NETDATA.dataAttributeBoolean(this.element, 'debug', false);
1167
1777 - that.value_decimal_detail = -1;
1778 - let d = NETDATA.dataAttribute(that.element, 'decimal-digits', -1);
1168 + this.value_decimal_detail = -1;
1169 + let d = NETDATA.dataAttribute(this.element, 'decimal-digits', -1);
1170 if (typeof d === 'number') {
1780 - that.value_decimal_detail = d;
1171 + this.value_decimal_detail = d;
1172 } else if (typeof d !== 'undefined') {
1782 - that.log('ignoring decimal-digits value: ' + d.toString());
1173 + this.log('ignoring decimal-digits value: ' + d.toString());
1174 }
1175
1176 // if we need to report the rendering speed
1177 // find the element that needs to be updated
1787 - let refresh_dt_element_name = NETDATA.dataAttribute(that.element, 'dt-element-name', null); // string - the element to print refresh_dt_ms
1178 + let refresh_dt_element_name = NETDATA.dataAttribute(this.element, 'dt-element-name', null); // string - the element to print refresh_dt_ms
1179
1180 if (refresh_dt_element_name !== null) {
1790 - that.refresh_dt_element = document.getElementById(refresh_dt_element_name) || null;
1181 + this.refresh_dt_element = document.getElementById(refresh_dt_element_name) || null;
1182 }
1183 else {
1793 - that.refresh_dt_element = null;
1184 + this.refresh_dt_element = null;
1185 }
1186
1796 - that.dimensions_visibility = new dimensionsVisibility(that);
1187 + this.dimensions_visibility = new dimensionsVisibility(that);
1188
1798 - that.netdata_first = 0; // milliseconds - the first timestamp in netdata
1799 - that.netdata_last = 0; // milliseconds - the last timestamp in netdata
1800 - that.requested_after = null; // milliseconds - the timestamp of the request after param
1801 - that.requested_before = null; // milliseconds - the timestamp of the request before param
1802 - that.requested_padding = null;
1803 - that.view_after = 0;
1804 - that.view_before = 0;
1189 + this.netdata_first = 0; // milliseconds - the first timestamp in netdata
1190 + this.netdata_last = 0; // milliseconds - the last timestamp in netdata
1191 + this.requested_after = null; // milliseconds - the timestamp of the request after param
1192 + this.requested_before = null; // milliseconds - the timestamp of the request before param
1193 + this.requested_padding = null;
1194 + this.view_after = 0;
1195 + this.view_before = 0;
1196
1806 - that.refresh_dt_ms = 0; // milliseconds - the time the last refresh took
1197 + this.refresh_dt_ms = 0; // milliseconds - the time the last refresh took
1198
1199 // how many retries we have made to load chart data from the server
1809 - that.retries_on_data_failures = 0;
1200 + this.retries_on_data_failures = 0;
1201
1202 // color management
1812 - that.colors = null;
1813 - that.colors_assigned = null;
1814 - that.colors_available = null;
1815 - that.colors_custom = null;
1816 -
1817 - that.element_message = null; // the element already created by the user
1818 - that.element_chart = null; // the element with the chart
1819 - that.element_legend = null; // the element with the legend of the chart (if created by us)
1820 - that.element_legend_childs = {
1203 + this.colors = null;
1204 + this.colors_assigned = null;
1205 + this.colors_available = null;
1206 + this.colors_custom = null;
1207 +
1208 + this.element_message = null; // the element already created by the user
1209 + this.element_chart = null; // the element with the chart
1210 + this.element_legend = null; // the element with the legend of the chart (if created by us)
1211 + this.element_legend_childs = {
1212 content: null,
1213 hidden: null,
1214 title_date: null,
@@ -1827,105 +1218,104 @@ let chartState = function (element) {
1218 series: null
1219 };
1220
1830 - that.chart_url = null; // string - the url to download chart info
1831 - that.chart = null; // object - the chart as downloaded from the server
1221 + this.chart_url = null; // string - the url to download chart info
1222 + this.chart = null; // object - the chart as downloaded from the server
1223
1833 - function get_foreign_element_by_id(opt) {
1834 - let id = NETDATA.dataAttribute(that.element, opt, null);
1224 + const getForeignElementById = (opt) => {
1225 + let id = NETDATA.dataAttribute(this.element, opt, null);
1226 if (id === null) {
1836 - //that.log('option "' + opt + '" is undefined');
1227 + //this.log('option "' + opt + '" is undefined');
1228 return null;
1229 }
1230
1231 let el = document.getElementById(id);
1232 if (typeof el === 'undefined') {
1842 - that.log('cannot find an element with name "' + id.toString() + '"');
1233 + this.log('cannot find an element with name "' + id.toString() + '"');
1234 return null;
1235 }
1236
1237 return el;
1847 - }
1238 + };
1239
1849 - that.foreign_element_before = get_foreign_element_by_id('show-before-at');
1850 - that.foreign_element_after = get_foreign_element_by_id('show-after-at');
1851 - that.foreign_element_duration = get_foreign_element_by_id('show-duration-at');
1852 - that.foreign_element_update_every = get_foreign_element_by_id('show-update-every-at');
1853 - that.foreign_element_selection = get_foreign_element_by_id('show-selection-at');
1240 + this.foreignElementBefore = getForeignElementById('show-before-at');
1241 + this.foreignElementAfter = getForeignElementById('show-after-at');
1242 + this.foreignElementDuration = getForeignElementById('show-duration-at');
1243 + this.foreignElementUpdateEvery = getForeignElementById('show-update-every-at');
1244 + this.foreignElementSelection = getForeignElementById('show-selection-at');
1245 };
1246
1856 - const destroyDOM = function () {
1857 - if (that.enabled === false) {
1247 + const destroyDOM = () => {
1248 + if (!this.enabled) {
1249 return;
1250 }
1251
1861 - if (that.debug) {
1862 - that.log('destroyDOM()');
1252 + if (this.debug) {
1253 + this.log('destroyDOM()');
1254 }
1255
1865 - // that.element.className = 'netdata-message icon';
1866 - // that.element.innerHTML = '<i class="fas fa-sync"></i> netdata';
1867 - that.element.innerHTML = '';
1868 - that.element_message = null;
1869 - that.element_legend = null;
1870 - that.element_chart = null;
1871 - that.element_legend_childs.series = null;
1256 + // this.element.className = 'netdata-message icon';
1257 + // this.element.innerHTML = '<i class="fas fa-sync"></i> netdata';
1258 + this.element.innerHTML = '';
1259 + this.element_message = null;
1260 + this.element_legend = null;
1261 + this.element_chart = null;
1262 + this.element_legend_childs.series = null;
1263
1873 - that.chart_created = false;
1874 - that.dom_created = false;
1264 + this.chart_created = false;
1265 + this.dom_created = false;
1266
1876 - that.tm.last_resized = 0;
1877 - that.tm.last_dom_created = 0;
1267 + this.tm.last_resized = 0;
1268 + this.tm.last_dom_created = 0;
1269 };
1270
1880 - let createDOM = function () {
1881 - if (that.enabled === false) {
1271 + let createDOM = () => {
1272 + if (!this.enabled) {
1273 return;
1274 }
1275 lateInitialization();
1276
1277 destroyDOM();
1278
1888 - if (that.debug) {
1889 - that.log('createDOM()');
1279 + if (this.debug) {
1280 + this.log('createDOM()');
1281 }
1282
1892 - that.element_message = document.createElement('div');
1893 - that.element_message.className = 'netdata-message icon hidden';
1894 - that.element.appendChild(that.element_message);
1283 + this.element_message = document.createElement('div');
1284 + this.element_message.className = 'netdata-message icon hidden';
1285 + this.element.appendChild(this.element_message);
1286
1896 - that.dom_created = true;
1897 - that.chart_created = false;
1287 + this.dom_created = true;
1288 + this.chart_created = false;
1289
1899 - that.tm.last_dom_created =
1900 - that.tm.last_resized = Date.now();
1290 + this.tm.last_dom_created = this.tm.last_resized = Date.now();
1291
1292 showLoading();
1293 };
1294
1905 - const initDOM = function () {
1906 - that.element.className = that.library.container_class(that);
1295 + const initDOM = () => {
1296 + this.element.className = this.library.container_class(that);
1297
1908 - if (typeof(that.width) === 'string') {
1909 - that.element.style.width = that.width;
1910 - } else if (typeof(that.width) === 'number') {
1911 - that.element.style.width = that.width.toString() + 'px';
1298 + if (typeof(this.width) === 'string') {
1299 + this.element.style.width = this.width;
1300 + } else if (typeof(this.width) === 'number') {
1301 + this.element.style.width = this.width.toString() + 'px';
1302 }
1303
1914 - if (typeof(that.library.aspect_ratio) === 'undefined') {
1915 - if (typeof(that.height) === 'string') {
1916 - that.element.style.height = that.height;
1917 - } else if (typeof(that.height) === 'number') {
1918 - that.element.style.height = that.height.toString() + 'px';
1304 + if (typeof(this.library.aspect_ratio) === 'undefined') {
1305 + if (typeof(this.height) === 'string') {
1306 + this.element.style.height = this.height;
1307 + } else if (typeof(this.height) === 'number') {
1308 + this.element.style.height = this.height.toString() + 'px';
1309 }
1310 }
1311
1312 if (NETDATA.chartDefaults.min_width !== null) {
1923 - that.element.style.min_width = NETDATA.chartDefaults.min_width;
1313 + this.element.style.min_width = NETDATA.chartDefaults.min_width;
1314 }
1315 };
1316
1927 - const invisibleSearchableText = function () {
1928 - return '<span style="position:absolute; opacity: 0; width: 0px;">' + that.id + '</span>';
1317 + const invisibleSearchableText = () => {
1318 + return '<span style="position:absolute; opacity: 0; width: 0px;">' + this.id + '</span>';
1319 };
1320
1321 /* init() private
@@ -1933,27 +1323,27 @@ let chartState = function (element) {
1323 * destroy all (possibly) created state elements
1324 * create the basic DOM for a chart
1325 */
1936 - const init = function (opt) {
1937 - if (that.enabled === false) {
1326 + const init = (opt) => {
1327 + if (!this.enabled) {
1328 return;
1329 }
1330
1331 runtimeInit();
1942 - that.element.innerHTML = invisibleSearchableText();
1332 + this.element.innerHTML = invisibleSearchableText();
1333
1944 - that.tm.last_initialized = Date.now();
1945 - that.setMode('auto');
1334 + this.tm.last_initialized = Date.now();
1335 + this.setMode('auto');
1336
1337 if (opt !== 'fast') {
1948 - if (that.isVisible(true) || opt === 'force') {
1338 + if (this.isVisible(true) || opt === 'force') {
1339 createDOM();
1340 }
1341 }
1342 };
1343
1954 - const maxMessageFontSize = function () {
1344 + const maxMessageFontSize = () => {
1345 let screenHeight = screen.height;
1956 - let el = that.element;
1346 + let el = this.element;
1347
1348 // normally we want a font size, as tall as the element
1349 let h = el.clientHeight;
@@ -1981,28 +1371,28 @@ let chartState = function (element) {
1371 }
1372
1373 // set it
1984 - that.element_message.style.fontSize = h.toString() + 'px';
1985 - that.element_message.style.paddingTop = paddingTop.toString() + 'px';
1374 + this.element_message.style.fontSize = h.toString() + 'px';
1375 + this.element_message.style.paddingTop = paddingTop.toString() + 'px';
1376 };
1377
1988 - const showMessageIcon = function (icon) {
1989 - that.element_message.innerHTML = icon;
1378 + const showMessageIcon = (icon) => {
1379 + this.element_message.innerHTML = icon;
1380 maxMessageFontSize();
1991 - $(that.element_message).removeClass('hidden');
1992 - that.tmp.___messageHidden___ = undefined;
1381 + $(this.element_message).removeClass('hidden');
1382 + this.tmp.___messageHidden___ = undefined;
1383 };
1384
1995 - const hideMessage = function () {
1996 - if (typeof that.tmp.___messageHidden___ === 'undefined') {
1997 - that.tmp.___messageHidden___ = true;
1998 - $(that.element_message).addClass('hidden');
1385 + const hideMessage = () => {
1386 + if (typeof this.tmp.___messageHidden___ === 'undefined') {
1387 + this.tmp.___messageHidden___ = true;
1388 + $(this.element_message).addClass('hidden');
1389 }
1390 };
1391
2002 - const showRendering = function () {
1392 + const showRendering = () => {
1393 let icon;
2004 - if (that.chart !== null) {
2005 - if (that.chart.chart_type === 'line') {
1394 + if (this.chart !== null) {
1395 + if (this.chart.chart_type === 'line') {
1396 icon = NETDATA.icons.lineChart;
1397 } else {
1398 icon = NETDATA.icons.areaChart;
@@ -2015,22 +1405,21 @@ let chartState = function (element) {
1405 showMessageIcon(icon + ' netdata' + invisibleSearchableText());
1406 };
1407
2018 - const showLoading = function () {
2019 - if (that.chart_created === false) {
1408 + const showLoading = () => {
1409 + if (!this.chart_created) {
1410 showMessageIcon(NETDATA.icons.loading + ' netdata');
1411 return true;
1412 }
1413 return false;
1414 };
1415
2026 - const isHidden = function () {
2027 - return (typeof that.tmp.___chartIsHidden___ !== 'undefined');
1416 + const isHidden = () => {
1417 + return (typeof this.tmp.___chartIsHidden___ !== 'undefined');
1418 };
1419
1420 // hide the chart, when it is not visible - called from isVisible()
1421 this.hideChart = function () {
1422 // hide it, if it is not already hidden
2033 - // if (isHidden() === true) return;
1423 if (isHidden()) {
1424 return;
1425 }
@@ -2098,14 +1487,14 @@ let chartState = function (element) {
1487
1488 // unhide the chart, when it is visible - called from isVisible()
1489 this.unhideChart = function () {
2101 - if (isHidden() === false) {
1490 + if (!isHidden()) {
1491 return;
1492 }
1493
1494 this.tmp.___chartIsHidden___ = undefined;
1495 this.updates_since_last_unhide = 0;
1496
2108 - if (this.chart_created === false) {
1497 + if (!this.chart_created) {
1498 if (this.debug) {
1499 this.log('unhideChart(): initializing chart');
1500 }
@@ -2144,12 +1533,11 @@ let chartState = function (element) {
1533 }
1534 };
1535
2147 - const canBeRendered = function (uncached_visibility) {
2148 - if (that.debug) {
2149 - that.log('canBeRendered() called');
1536 + const canBeRendered = (uncached_visibility) => {
1537 + if (this.debug) {
1538 + this.log('canBeRendered() called');
1539 }
1540
2152 - // if (NETDATA.options.current.update_only_visible === false)
1541 if (!NETDATA.options.current.update_only_visible) {
1542 return true;
1543 }
@@ -2158,20 +1546,20 @@ let chartState = function (element) {
1546 (
1547 NETDATA.options.page_is_visible ||
1548 NETDATA.options.current.stop_updates_when_focus_is_lost === false ||
2161 - that.updates_since_last_unhide === 0
1549 + this.updates_since_last_unhide === 0
1550 )
2163 - && isHidden() === false && that.isVisible(uncached_visibility)
1551 + && isHidden() === false && this.isVisible(uncached_visibility)
1552 );
1553
2166 - if (that.debug) {
2167 - that.log('canBeRendered(): ' + ret);
1554 + if (this.debug) {
1555 + this.log('canBeRendered(): ' + ret);
1556 }
1557
1558 return ret;
1559 };
1560
1561 // https://github.com/petkaantonov/bluebird/wiki/Optimization-killers
2174 - const callChartLibraryUpdateSafely = function (data) {
1562 + const callChartLibraryUpdateSafely = (data) => {
1563 let status;
1564
1565 // we should not do this here
@@ -2185,22 +1573,22 @@ let chartState = function (element) {
1573 return true;
1574 }
1575
2188 - that.updates_counter++;
2189 - that.updates_since_last_unhide++;
2190 - that.updates_since_last_creation++;
1576 + this.updates_counter++;
1577 + this.updates_since_last_unhide++;
1578 + this.updates_since_last_creation++;
1579
1580 if (NETDATA.options.debug.chart_errors) {
2193 - status = that.library.update(that, data);
1581 + status = this.library.update(that, data);
1582 } else {
1583 try {
2196 - status = that.library.update(that, data);
1584 + status = this.library.update(that, data);
1585 } catch (err) {
1586 status = false;
1587 }
1588 }
1589
1590 if (!status) {
2203 - error('chart failed to be updated as ' + that.library_name);
1591 + error('chart failed to be updated as ' + this.library_name);
1592 return false;
1593 }
1594
@@ -2208,7 +1596,7 @@ let chartState = function (element) {
1596 };
1597
1598 // https://github.com/petkaantonov/bluebird/wiki/Optimization-killers
2211 - const callChartLibraryCreateSafely = function (data) {
1599 + const callChartLibraryCreateSafely = (data) => {
1600 let status;
1601
1602 // we should not do this here
@@ -2222,27 +1610,27 @@ let chartState = function (element) {
1610 return true;
1611 }
1612
2225 - that.updates_counter++;
2226 - that.updates_since_last_unhide++;
2227 - that.updates_since_last_creation++;
1613 + this.updates_counter++;
1614 + this.updates_since_last_unhide++;
1615 + this.updates_since_last_creation++;
1616
1617 if (NETDATA.options.debug.chart_errors) {
2230 - status = that.library.create(that, data);
1618 + status = this.library.create(that, data);
1619 } else {
1620 try {
2233 - status = that.library.create(that, data);
1621 + status = this.library.create(that, data);
1622 } catch (err) {
1623 status = false;
1624 }
1625 }
1626
1627 if (!status) {
2240 - error('chart failed to be created as ' + that.library_name);
1628 + error('chart failed to be created as ' + this.library_name);
1629 return false;
1630 }
1631
2244 - that.chart_created = true;
2245 - that.updates_since_last_creation = 0;
1632 + this.chart_created = true;
1633 + this.updates_since_last_creation = 0;
1634 return true;
1635 };
1636
@@ -2252,33 +1640,33 @@ let chartState = function (element) {
1640 // resizeChart() - private
1641 // to be called just before the chart library to make sure that
1642 // a properly sized dom is available
2255 - const resizeChart = function () {
2256 - if (that.tm.last_resized < NETDATA.options.last_page_resize) {
2257 - if (!that.chart_created) {
1643 + const resizeChart = () => {
1644 + if (this.tm.last_resized < NETDATA.options.last_page_resize) {
1645 + if (!this.chart_created) {
1646 return;
1647 }
1648
2261 - if (that.needsRecreation()) {
2262 - if (that.debug) {
2263 - that.log('resizeChart(): initializing chart');
1649 + if (this.needsRecreation()) {
1650 + if (this.debug) {
1651 + this.log('resizeChart(): initializing chart');
1652 }
1653
1654 init('force');
2267 - } else if (typeof that.library.resize === 'function') {
2268 - if (that.debug) {
2269 - that.log('resizeChart(): resizing chart');
1655 + } else if (typeof this.library.resize === 'function') {
1656 + if (this.debug) {
1657 + this.log('resizeChart(): resizing chart');
1658 }
1659
2272 - that.library.resize(that);
1660 + this.library.resize(that);
1661
2274 - if (that.element_legend_childs.perfect_scroller !== null) {
2275 - Ps.update(that.element_legend_childs.perfect_scroller);
1662 + if (this.element_legend_childs.perfect_scroller !== null) {
1663 + Ps.update(this.element_legend_childs.perfect_scroller);
1664 }
1665
1666 maxMessageFontSize();
1667 }
1668
2281 - that.tm.last_resized = Date.now();
1669 + this.tm.last_resized = Date.now();
1670 }
1671 };
1672
@@ -2288,12 +1676,12 @@ let chartState = function (element) {
1676 // - update the internal states
1677 // - resize the chart as the div changes height
1678 // - update the scrollbar of the legend
2291 - const resizeChartToHeight = function (h) {
1679 + const resizeChartToHeight = (h) => {
1680 // console.log(h);
2293 - that.element.style.height = h;
1681 + this.element.style.height = h;
1682
2295 - if (that.settings_id !== null) {
2296 - NETDATA.localStorageSet('chart_heights.' + that.settings_id, h);
1683 + if (this.settings_id !== null) {
1684 + NETDATA.localStorageSet('chart_heights.' + this.settings_id, h);
1685 }
1686
1687 let now = Date.now();
@@ -2301,7 +1689,7 @@ let chartState = function (element) {
1689 NETDATA.options.auto_refresher_stop_until = now + NETDATA.options.current.stop_updates_while_resizing;
1690
1691 // force a resize
2304 - that.tm.last_resized = 0;
1692 + this.tm.last_resized = 0;
1693 resizeChart();
1694 };
1695
@@ -2451,14 +1839,14 @@ let chartState = function (element) {
1839 }
1840 };
1841
2454 - const noDataToShow = function () {
1842 + const noDataToShow = () => {
1843 showMessageIcon(NETDATA.icons.noData + ' empty');
2456 - that.legendUpdateDOM();
2457 - that.tm.last_autorefreshed = Date.now();
2458 - // that.data_update_every = 30 * 1000;
2459 - //that.element_chart.style.display = 'none';
2460 - //if (that.element_legend !== null) that.element_legend.style.display = 'none';
2461 - //that.tmp.___chartIsHidden___ = true;
1844 + this.legendUpdateDOM();
1845 + this.tm.last_autorefreshed = Date.now();
1846 + // this.data_update_every = 30 * 1000;
1847 + //this.element_chart.style.display = 'none';
1848 + //if (this.element_legend !== null) this.element_legend.style.display = 'none';
1849 + //this.tmp.___chartIsHidden___ = true;
1850 };
1851
1852 // ============================================================================================================
@@ -2516,8 +1904,8 @@ let chartState = function (element) {
1904 this.log('selection set to ' + t.toString());
1905 }
1906
2519 - if (this.foreign_element_selection !== null) {
2520 - this.foreign_element_selection.innerText = NETDATA.dateTime.localeDateString(t) + ' ' + NETDATA.dateTime.localeTimeString(t);
1907 + if (this.foreignElementSelection !== null) {
1908 + this.foreignElementSelection.innerText = NETDATA.dateTime.localeDateString(t) + ' ' + NETDATA.dateTime.localeTimeString(t);
1909 }
1910
1911 return this.selected;
@@ -2535,8 +1923,8 @@ let chartState = function (element) {
1923 this.log('selection cleared');
1924 }
1925
2538 - if (this.foreign_element_selection !== null) {
2539 - this.foreign_element_selection.innerText = '';
1926 + if (this.foreignElementSelection !== null) {
1927 + this.foreignElementSelection.innerText = '';
1928 }
1929
1930 this.legendReset();
@@ -2553,7 +1941,7 @@ let chartState = function (element) {
1941 };
1942
1943 this.calculateRowForTime = function (t) {
2556 - if (this.timeIsVisible(t) === false) {
1944 + if (!this.timeIsVisible(t)) {
1945 return -1;
1946 }
1947 return Math.floor((t - this.data_after) / this.data_update_every);
@@ -2562,7 +1950,7 @@ let chartState = function (element) {
1950 // ----------------------------------------------------------------------------------------------------------------
1951
1952 this.pauseChart = function () {
2565 - if (this.paused === false) {
1953 + if (!this.paused) {
1954 if (this.debug) {
1955 this.log('pauseChart()');
1956 }
@@ -2581,20 +1969,20 @@ let chartState = function (element) {
1969 }
1970 };
1971
2584 - this.resetChart = function (dont_clear_master, dont_update) {
1972 + this.resetChart = function (dontClearMaster, dontUpdate) {
1973 if (this.debug) {
2586 - this.log('resetChart(' + dont_clear_master + ', ' + dont_update + ') called');
1974 + this.log('resetChart(' + dontClearMaster + ', ' + dontUpdate + ') called');
1975 }
1976
2589 - if (typeof dont_clear_master === 'undefined') {
2590 - dont_clear_master = false;
1977 + if (typeof dontClearMaster === 'undefined') {
1978 + dontClearMaster = false;
1979 }
1980
2593 - if (typeof dont_update === 'undefined') {
2594 - dont_update = false;
1981 + if (typeof dontUpdate === 'undefined') {
1982 + dontUpdate = false;
1983 }
1984
2597 - if (dont_clear_master !== true && NETDATA.globalPanAndZoom.isMaster(this)) {
1985 + if (dontClearMaster !== true && NETDATA.globalPanAndZoom.isMaster(this)) {
1986 if (this.debug) {
1987 this.log('resetChart() diverting to clearMaster().');
1988 }
@@ -2622,7 +2010,7 @@ let chartState = function (element) {
2010 // of a selection sync and another chart becomes
2011 // the new master
2012
2625 - if (dont_update !== true && this.isVisible()) {
2013 + if (dontUpdate !== true && this.isVisible()) {
2014 this.updateChart();
2015 }
2016 };
@@ -2722,7 +2110,7 @@ let chartState = function (element) {
2110 NETDATA.globalPanAndZoom.delay();
2111 NETDATA.globalSelectionSync.delay();
2112
2725 - if (NETDATA.globalPanAndZoom.isMaster(this) === false) {
2113 + if (!NETDATA.globalPanAndZoom.isMaster(this)) {
2114 this.pauseChart();
2115 NETDATA.globalPanAndZoom.setMaster(this, after, before);
2116 // NETDATA.globalSelectionSync.stop();
@@ -2739,25 +2127,25 @@ let chartState = function (element) {
2127 }, 0);
2128 };
2129
2742 - let __unitsConversionLastUnits = undefined;
2743 - let __unitsConversionLastUnitsDesired = undefined;
2744 - let __unitsConversionLastMin = undefined;
2745 - let __unitsConversionLastMax = undefined;
2746 - let __unitsConversion = function (value) {
2130 + let _unitsConversionLastUnits = undefined;
2131 + let _unitsConversionLastUnitsDesired = undefined;
2132 + let _unitsConversionLastMin = undefined;
2133 + let _unitsConversionLastMax = undefined;
2134 + let _unitsConversion = function (value) {
2135 return value;
2136 };
2137 this.unitsConversionSetup = function (min, max) {
2750 - if (this.units !== __unitsConversionLastUnits
2751 - || this.units_desired !== __unitsConversionLastUnitsDesired
2752 - || min !== __unitsConversionLastMin
2753 - || max !== __unitsConversionLastMax) {
2138 + if (this.units !== _unitsConversionLastUnits
2139 + || this.units_desired !== _unitsConversionLastUnitsDesired
2140 + || min !== _unitsConversionLastMin
2141 + || max !== _unitsConversionLastMax) {
2142
2755 - __unitsConversionLastUnits = this.units;
2756 - __unitsConversionLastUnitsDesired = this.units_desired;
2757 - __unitsConversionLastMin = min;
2758 - __unitsConversionLastMax = max;
2143 + _unitsConversionLastUnits = this.units;
2144 + _unitsConversionLastUnitsDesired = this.units_desired;
2145 + _unitsConversionLastMin = min;
2146 + _unitsConversionLastMax = max;
2147
2760 - __unitsConversion = NETDATA.unitsConversion.get(this.uuid, min, max, this.units, this.units_desired, this.units_common, function (units) {
2148 + _unitsConversion = NETDATA.unitsConversion.get(this.uuid, min, max, this.units, this.units_desired, this.units_common, function (units) {
2149 // console.log('switching units from ' + that.units.toString() + ' to ' + units.toString());
2150 that.units_current = units;
2151 that.legendSetUnitsString(that.units_current);
@@ -2765,38 +2153,38 @@ let chartState = function (element) {
2153 }
2154 };
2155
2768 - let __legendFormatValueChartDecimalsLastMin = undefined;
2769 - let __legendFormatValueChartDecimalsLastMax = undefined;
2770 - let __legendFormatValueChartDecimals = -1;
2771 - let __intlNumberFormat = null;
2156 + let _legendFormatValueChartDecimalsLastMin = undefined;
2157 + let _legendFormatValueChartDecimalsLastMax = undefined;
2158 + let _legendFormatValueChartDecimals = -1;
2159 + let _intlNumberFormat = null;
2160 this.legendFormatValueDecimalsFromMinMax = function (min, max) {
2773 - if (min === __legendFormatValueChartDecimalsLastMin && max === __legendFormatValueChartDecimalsLastMax) {
2161 + if (min === _legendFormatValueChartDecimalsLastMin && max === _legendFormatValueChartDecimalsLastMax) {
2162 return;
2163 }
2164
2165 this.unitsConversionSetup(min, max);
2778 - if (__unitsConversion !== null) {
2779 - min = __unitsConversion(min);
2780 - max = __unitsConversion(max);
2166 + if (_unitsConversion !== null) {
2167 + min = _unitsConversion(min);
2168 + max = _unitsConversion(max);
2169
2170 if (typeof min !== 'number' || typeof max !== 'number') {
2171 return;
2172 }
2173 }
2174
2787 - __legendFormatValueChartDecimalsLastMin = min;
2788 - __legendFormatValueChartDecimalsLastMax = max;
2175 + _legendFormatValueChartDecimalsLastMin = min;
2176 + _legendFormatValueChartDecimalsLastMax = max;
2177
2790 - let old = __legendFormatValueChartDecimals;
2178 + let old = _legendFormatValueChartDecimals;
2179
2180 if (this.data !== null && this.data.min === this.data.max)
2181 // it is a fixed number, let the visualizer decide based on the value
2182 {
2795 - __legendFormatValueChartDecimals = -1;
2183 + _legendFormatValueChartDecimals = -1;
2184 } else if (this.value_decimal_detail !== -1)
2185 // there is an override
2186 {
2799 - __legendFormatValueChartDecimals = this.value_decimal_detail;
2187 + _legendFormatValueChartDecimals = this.value_decimal_detail;
2188 } else {
2189 // ok, let's calculate the proper number of decimal points
2190 let delta;
@@ -2808,31 +2196,31 @@ let chartState = function (element) {
2196 }
2197
2198 if (delta > 1000) {
2811 - __legendFormatValueChartDecimals = 0;
2199 + _legendFormatValueChartDecimals = 0;
2200 } else if (delta > 10) {
2813 - __legendFormatValueChartDecimals = 1;
2201 + _legendFormatValueChartDecimals = 1;
2202 } else if (delta > 1) {
2815 - __legendFormatValueChartDecimals = 2;
2203 + _legendFormatValueChartDecimals = 2;
2204 } else if (delta > 0.1) {
2817 - __legendFormatValueChartDecimals = 2;
2205 + _legendFormatValueChartDecimals = 2;
2206 } else if (delta > 0.01) {
2819 - __legendFormatValueChartDecimals = 4;
2207 + _legendFormatValueChartDecimals = 4;
2208 } else if (delta > 0.001) {
2821 - __legendFormatValueChartDecimals = 5;
2209 + _legendFormatValueChartDecimals = 5;
2210 } else if (delta > 0.0001) {
2823 - __legendFormatValueChartDecimals = 6;
2211 + _legendFormatValueChartDecimals = 6;
2212 } else {
2825 - __legendFormatValueChartDecimals = 7;
2213 + _legendFormatValueChartDecimals = 7;
2214 }
2215 }
2216
2829 - if (__legendFormatValueChartDecimals !== old) {
2830 - if (__legendFormatValueChartDecimals < 0) {
2831 - __intlNumberFormat = null;
2217 + if (_legendFormatValueChartDecimals !== old) {
2218 + if (_legendFormatValueChartDecimals < 0) {
2219 + _intlNumberFormat = null;
2220 } else {
2833 - __intlNumberFormat = NETDATA.fastNumberFormat.get(
2834 - __legendFormatValueChartDecimals,
2835 - __legendFormatValueChartDecimals
2221 + _intlNumberFormat = NETDATA.fastNumberFormat.get(
2222 + _legendFormatValueChartDecimals,
2223 + _legendFormatValueChartDecimals
2224 );
2225 }
2226 }
@@ -2843,14 +2231,14 @@ let chartState = function (element) {
2231 return '-';
2232 }
2233
2846 - value = __unitsConversion(value);
2234 + value = _unitsConversion(value);
2235
2236 if (typeof value !== 'number') {
2237 return value;
2238 }
2239
2852 - if (__intlNumberFormat !== null) {
2853 - return __intlNumberFormat.format(value);
2240 + if (_intlNumberFormat !== null) {
2241 + return _intlNumberFormat.format(value);
2242 }
2243
2244 let dmin, dmax;
@@ -3168,7 +2556,7 @@ let chartState = function (element) {
2556 }
2557 }
2558
3171 - if (needed === false) {
2559 + if (!needed) {
2560 // make sure colors available
2561 this.chartPrepareColorPalette();
2562
@@ -3306,7 +2694,7 @@ let chartState = function (element) {
2694 this.element_legend_childs.toolbox_zoomout = document.createElement('div');
2695 this.element_legend_childs.toolbox_volume = document.createElement('div');
2696
3309 - const get_pan_and_zoom_step = function (event) {
2697 + const getPanAndZoomStep = function (event) {
2698 if (event.ctrlKey) {
2699 return NETDATA.options.current.pan_and_zoom_factor * NETDATA.options.current.pan_and_zoom_factor_multiplier_control;
2700 } else if (event.shiftKey) {
@@ -3327,7 +2715,7 @@ let chartState = function (element) {
2715 this.element_legend_childs.toolbox_left.onclick = function (e) {
2716 e.preventDefault();
2717
3330 - let step = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
2718 + let step = (that.view_before - that.view_after) * getPanAndZoomStep(e);
2719 let before = that.view_before - step;
2720 let after = that.view_after - step;
2721 if (after >= that.netdata_first) {
@@ -3378,7 +2766,7 @@ let chartState = function (element) {
2766 this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_right);
2767 this.element_legend_childs.toolbox_right.onclick = function (e) {
2768 e.preventDefault();
3381 - let step = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
2769 + let step = (that.view_before - that.view_after) * getPanAndZoomStep(e);
2770 let before = that.view_before + step;
2771 let after = that.view_after + step;
2772 if (before <= that.netdata_last) {
@@ -3406,7 +2794,7 @@ let chartState = function (element) {
2794 this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomin);
2795 this.element_legend_childs.toolbox_zoomin.onclick = function (e) {
2796 e.preventDefault();
3409 - let dt = ((that.view_before - that.view_after) * (get_pan_and_zoom_step(e) * 0.8) / 2);
2797 + let dt = ((that.view_before - that.view_after) * (getPanAndZoomStep(e) * 0.8) / 2);
2798 let before = that.view_before - dt;
2799 let after = that.view_after + dt;
2800 that.library.toolboxPanAndZoom(that, after, before);
@@ -3432,7 +2820,7 @@ let chartState = function (element) {
2820 this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomout);
2821 this.element_legend_childs.toolbox_zoomout.onclick = function (e) {
2822 e.preventDefault();
3435 - let dt = (((that.view_before - that.view_after) / (1.0 - (get_pan_and_zoom_step(e) * 0.8)) - (that.view_before - that.view_after)) / 2);
2823 + let dt = (((that.view_before - that.view_after) / (1.0 - (getPanAndZoomStep(e) * 0.8)) - (that.view_before - that.view_after)) / 2);
2824 let before = that.view_before + dt;
2825 let after = that.view_after - dt;
2826
@@ -3923,20 +3311,20 @@ let chartState = function (element) {
3311 this.refresh_dt_element.innerText = this.refresh_dt_ms.toString();
3312 }
3313
3926 - if (this.foreign_element_before !== null) {
3927 - this.foreign_element_before.innerText = NETDATA.dateTime.localeDateString(this.view_before) + ' ' + NETDATA.dateTime.localeTimeString(this.view_before);
3314 + if (this.foreignElementBefore !== null) {
3315 + this.foreignElementBefore.innerText = NETDATA.dateTime.localeDateString(this.view_before) + ' ' + NETDATA.dateTime.localeTimeString(this.view_before);
3316 }
3317
3930 - if (this.foreign_element_after !== null) {
3931 - this.foreign_element_after.innerText = NETDATA.dateTime.localeDateString(this.view_after) + ' ' + NETDATA.dateTime.localeTimeString(this.view_after);
3318 + if (this.foreignElementAfter !== null) {
3319 + this.foreignElementAfter.innerText = NETDATA.dateTime.localeDateString(this.view_after) + ' ' + NETDATA.dateTime.localeTimeString(this.view_after);
3320 }
3321
3934 - if (this.foreign_element_duration !== null) {
3935 - this.foreign_element_duration.innerText = NETDATA.seconds4human(Math.floor((this.view_before - this.view_after) / 1000) + 1);
3322 + if (this.foreignElementDuration !== null) {
3323 + this.foreignElementDuration.innerText = NETDATA.seconds4human(Math.floor((this.view_before - this.view_after) / 1000) + 1);
3324 }
3325
3938 - if (this.foreign_element_update_every !== null) {
3939 - this.foreign_element_update_every.innerText = NETDATA.seconds4human(Math.floor(this.data_update_every / 1000));
3326 + if (this.foreignElementUpdateEvery !== null) {
3327 + this.foreignElementUpdateEvery.innerText = NETDATA.seconds4human(Math.floor(this.data_update_every / 1000));
3328 }
3329 };
3330
@@ -4010,7 +3398,6 @@ let chartState = function (element) {
3398
3399 // due to late initialization of charts and libraries
3400 // we need to check this too
4013 - // if (this.enabled === false) {
3401 if (!this.enabled) {
3402 if (this.debug) {
3403 this.log('updateChart(): I am not enabled');
@@ -4023,7 +3410,6 @@ let chartState = function (element) {
3410 return;
3411 }
3412
4026 - // if (canBeRendered() === false) {
3413 if (!canBeRendered()) {
3414 if (this.debug) {
3415 this.log('updateChart(): cannot be rendered');
@@ -4054,7 +3440,7 @@ let chartState = function (element) {
3440 });
3441 }
3442
4057 - if (this.library.initialized === false) {
3443 + if (!this.library.initialized) {
3444 if (this.library.enabled) {
3445 if (this.debug) {
3446 this.log('updateChart(): initializing chart library');
@@ -4221,7 +3607,7 @@ let chartState = function (element) {
3607 };
3608
3609 this.canBeAutoRefreshed = function () {
4224 - if (this.enabled === false) {
3610 + if (!this.enabled) {
3611 if (this.debug) {
3612 this.log('canBeAutoRefreshed() -> not enabled');
3613 }
@@ -4246,7 +3632,6 @@ let chartState = function (element) {
3632 return false;
3633 }
3634
4249 - // if (this.isVisible() === false) {
3635 if (!this.isVisible()) {
3636 if (NETDATA.options.debug.visibility || this.debug) {
3637 this.log('canBeAutoRefreshed() -> not visible');
@@ -4266,7 +3651,7 @@ let chartState = function (element) {
3651 return true;
3652 }
3653
4269 - if (this.isAutoRefreshable() === false) {
3654 + if (!this.isAutoRefreshable()) {
3655 if (this.debug) {
3656 this.log('canBeAutoRefreshed() -> not auto-refreshable');
3657 }
@@ -4450,10 +3835,12 @@ NETDATA.resetAllCharts = function (state) {
3835 // there are 2 possibilities here
3836 // a. state is the global Pan and Zoom master
3837 // b. state is not the global Pan and Zoom master
4453 - let master = true;
4454 - if (NETDATA.globalPanAndZoom.isMaster(state) === false) {
4455 - master = false;
4456 - }
3838 +
3839 + // let master = true;
3840 + // if (NETDATA.globalPanAndZoom.isMaster(state) === false) {
3841 + // master = false;
3842 + // }
3843 + const master = NETDATA.globalPanAndZoom.isMaster(state)
3844
3845 // clear the global Pan and Zoom
3846 // this will also refresh the master
@@ -4696,7 +4083,7 @@ NETDATA.chartRefresher = function () {
4083 return;
4084 }
4085
4699 - if (NETDATA.options.current.parallel_refresher === false) {
4086 + if (!NETDATA.options.current.parallel_refresher) {
4087 // console.log('auto-refresher is calling chartRefresherNoParallel(0)');
4088 NETDATA.chartRefresherNoParallel(0, function () {
4089 NETDATA.chartRefresherTimeoutId = NETDATA.timeout.set(
@@ -4717,7 +4104,7 @@ NETDATA.chartRefresher = function () {
4104 return;
4105 }
4106
4720 - if (NETDATA.globalSelectionSync.active() === false) {
4107 + if (!NETDATA.globalSelectionSync.active()) {
4108 let parallel = [];
4109 let targets = NETDATA.intersectionObserver.targets();
4110 let len = targets.length;
@@ -4728,7 +4115,7 @@ NETDATA.chartRefresher = function () {
4115 continue;
4116 }
4117
4731 - if (state.library.initialized === false) {
4118 + if (!state.library.initialized) {
4119 if (state.library.enabled) {
4120 state.library.initialize(NETDATA.chartRefresher);
4121 //console.log('chartRefresher() end6 (library init)');
@@ -4752,7 +4139,7 @@ NETDATA.chartRefresher = function () {
4139 // console.log('auto-refresher executing in parallel for ' + parallel.length.toString() + ' charts');
4140 // this will execute the jobs in parallel
4141
4755 - if (state.running === false) {
4142 + if (!state.running) {
4143 NETDATA.timeout.set(state.autoRefresh, 0);
4144 }
4145 }
web/gui/src/dashboard.js/server-detection.js new
+29
@@ -0,0 +1,29 @@
1 +
2 +// *** src/dashboard.js/server-detection.js
3 +
4 +if (typeof netdataServer !== 'undefined') {
5 + NETDATA.serverDefault = netdataServer;
6 +} else {
7 + let s = NETDATA._scriptSource();
8 + if (s) {
9 + NETDATA.serverDefault = s.replace(/\/dashboard.js(\?.*)?$/g, "");
10 + } else {
11 + console.log('WARNING: Cannot detect the URL of the netdata server.');
12 + NETDATA.serverDefault = null;
13 + }
14 +}
15 +
16 +if (NETDATA.serverDefault === null) {
17 + NETDATA.serverDefault = '';
18 +} else if (NETDATA.serverDefault.slice(-1) !== '/') {
19 + NETDATA.serverDefault += '/';
20 +}
21 +
22 +if (typeof netdataServerStatic !== 'undefined' && netdataServerStatic !== null && netdataServerStatic !== '') {
23 + NETDATA.serverStatic = netdataServerStatic;
24 + if (NETDATA.serverStatic.slice(-1) !== '/') {
25 + NETDATA.serverStatic += '/';
26 + }
27 +} else {
28 + NETDATA.serverStatic = NETDATA.serverDefault;
29 +}
web/gui/src/dashboard.js/themes.js new
+90
@@ -0,0 +1,90 @@
1 +
2 +NETDATA.themes = {
3 + white: {
4 + bootstrap_css: NETDATA.serverStatic + 'css/bootstrap-3.3.7.css',
5 + dashboard_css: NETDATA.serverStatic + 'dashboard.css?v20180210-1',
6 + background: '#FFFFFF',
7 + foreground: '#000000',
8 + grid: '#F0F0F0',
9 + axis: '#F0F0F0',
10 + highlight: '#F5F5F5',
11 + colors: ['#3366CC', '#DC3912', '#109618', '#FF9900', '#990099', '#DD4477',
12 + '#3B3EAC', '#66AA00', '#0099C6', '#B82E2E', '#AAAA11', '#5574A6',
13 + '#994499', '#22AA99', '#6633CC', '#E67300', '#316395', '#8B0707',
14 + '#329262', '#3B3EAC'],
15 + easypiechart_track: '#f0f0f0',
16 + easypiechart_scale: '#dfe0e0',
17 + gauge_pointer: '#C0C0C0',
18 + gauge_stroke: '#F0F0F0',
19 + gauge_gradient: false,
20 + d3pie: {
21 + title: '#333333',
22 + subtitle: '#666666',
23 + footer: '#888888',
24 + other: '#aaaaaa',
25 + mainlabel: '#333333',
26 + percentage: '#dddddd',
27 + value: '#aaaa22',
28 + tooltip_bg: '#000000',
29 + tooltip_fg: '#efefef',
30 + segment_stroke: "#ffffff",
31 + gradient_color: '#000000'
32 + }
33 + },
34 + slate: {
35 + bootstrap_css: NETDATA.serverStatic + 'css/bootstrap-slate-flat-3.3.7.css?v20161229-1',
36 + dashboard_css: NETDATA.serverStatic + 'dashboard.slate.css?v20180210-1',
37 + background: '#272b30',
38 + foreground: '#C8C8C8',
39 + grid: '#283236',
40 + axis: '#283236',
41 + highlight: '#383838',
42 + /* colors: [ '#55bb33', '#ff2222', '#0099C6', '#faa11b', '#adbce0', '#DDDD00',
43 + '#4178ba', '#f58122', '#a5cc39', '#f58667', '#f5ef89', '#cf93c0',
44 + '#a5d18a', '#b8539d', '#3954a3', '#c8a9cf', '#c7de8a', '#fad20a',
45 + '#a6a479', '#a66da8' ],
46 + */
47 + colors: ['#66AA00', '#FE3912', '#3366CC', '#D66300', '#0099C6', '#DDDD00',
48 + '#5054e6', '#EE9911', '#BB44CC', '#e45757', '#ef0aef', '#CC7700',
49 + '#22AA99', '#109618', '#905bfd', '#f54882', '#4381bf', '#ff3737',
50 + '#329262', '#3B3EFF'],
51 + easypiechart_track: '#373b40',
52 + easypiechart_scale: '#373b40',
53 + gauge_pointer: '#474b50',
54 + gauge_stroke: '#373b40',
55 + gauge_gradient: false,
56 + d3pie: {
57 + title: '#C8C8C8',
58 + subtitle: '#283236',
59 + footer: '#283236',
60 + other: '#283236',
61 + mainlabel: '#C8C8C8',
62 + percentage: '#dddddd',
63 + value: '#cccc44',
64 + tooltip_bg: '#272b30',
65 + tooltip_fg: '#C8C8C8',
66 + segment_stroke: "#283236",
67 + gradient_color: '#000000'
68 + }
69 + }
70 +};
71 +
72 +if (typeof netdataTheme !== 'undefined' && typeof NETDATA.themes[netdataTheme] !== 'undefined') {
73 + NETDATA.themes.current = NETDATA.themes[netdataTheme];
74 +} else {
75 + NETDATA.themes.current = NETDATA.themes.white;
76 +}
77 +
78 +NETDATA.colors = NETDATA.themes.current.colors;
79 +
80 +// these are the colors Google Charts are using
81 +// we have them here to attempt emulate their look and feel on the other chart libraries
82 +// http://there4.io/2012/05/02/google-chart-color-list/
83 +//NETDATA.colors = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6',
84 +// '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11',
85 +// '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC' ];
86 +
87 +// an alternative set
88 +// http://www.mulinblog.com/a-color-palette-optimized-for-data-visualization/
89 +// (blue) (red) (orange) (green) (pink) (brown) (purple) (yellow) (gray)
90 +//NETDATA.colors = [ '#5DA5DA', '#F15854', '#FAA43A', '#60BD68', '#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#4D4D4D' ];
web/gui/src/dashboard.js/timeout.js new
+100
@@ -0,0 +1,100 @@
1 +
2 +// *** src/dashboard.js/timeout.js
3 +
4 +// TODO: Better name needed
5 +
6 +NETDATA.timeout = {
7 + // by default, these are just wrappers to setTimeout() / clearTimeout()
8 +
9 + step: function (callback) {
10 + return window.setTimeout(callback, 1000 / 60);
11 + },
12 +
13 + set: function (callback, delay) {
14 + return window.setTimeout(callback, delay);
15 + },
16 +
17 + clear: function (id) {
18 + return window.clearTimeout(id);
19 + },
20 +
21 + init: function () {
22 + let custom = true;
23 +
24 + if (window.requestAnimationFrame) {
25 + this.step = function (callback) {
26 + return window.requestAnimationFrame(callback);
27 + };
28 +
29 + this.clear = function (handle) {
30 + return window.cancelAnimationFrame(handle.value);
31 + };
32 + // } else if (window.webkitRequestAnimationFrame) {
33 + // this.step = function (callback) {
34 + // return window.webkitRequestAnimationFrame(callback);
35 + // };
36 +
37 + // if (window.webkitCancelAnimationFrame) {
38 + // this.clear = function (handle) {
39 + // return window.webkitCancelAnimationFrame(handle.value);
40 + // };
41 + // } else if (window.webkitCancelRequestAnimationFrame) {
42 + // this.clear = function (handle) {
43 + // return window.webkitCancelRequestAnimationFrame(handle.value);
44 + // };
45 + // }
46 + // } else if (window.mozRequestAnimationFrame) {
47 + // this.step = function (callback) {
48 + // return window.mozRequestAnimationFrame(callback);
49 + // };
50 +
51 + // this.clear = function (handle) {
52 + // return window.mozCancelRequestAnimationFrame(handle.value);
53 + // };
54 + // } else if (window.oRequestAnimationFrame) {
55 + // this.step = function (callback) {
56 + // return window.oRequestAnimationFrame(callback);
57 + // };
58 +
59 + // this.clear = function (handle) {
60 + // return window.oCancelRequestAnimationFrame(handle.value);
61 + // };
62 + // } else if (window.msRequestAnimationFrame) {
63 + // this.step = function (callback) {
64 + // return window.msRequestAnimationFrame(callback);
65 + // };
66 +
67 + // this.clear = function (handle) {
68 + // return window.msCancelRequestAnimationFrame(handle.value);
69 + // };
70 + } else {
71 + custom = false;
72 + }
73 +
74 + if (custom) {
75 + // we have installed custom .step() / .clear() functions
76 + // overwrite the .set() too
77 +
78 + this.set = function (callback, delay) {
79 + let start = Date.now(),
80 + handle = new Object();
81 +
82 + const loop = () => {
83 + let current = Date.now(),
84 + delta = current - start;
85 +
86 + if (delta >= delay) {
87 + callback.call();
88 + } else {
89 + handle.value = this.step(loop);
90 + }
91 + }
92 +
93 + handle.value = this.step(loop);
94 + return handle;
95 + };
96 + }
97 + }
98 +};
99 +
100 +NETDATA.timeout.init();
web/gui/src/dashboard.js/utils.js
+48 -24
@@ -45,7 +45,7 @@ NETDATA.zeropad = function (x) {
45 };
46
47 NETDATA.seconds4human = function (seconds, options) {
48 - let default_options = {
48 + let defaultOptions = {
49 now: 'now',
50 space: ' ',
51 negative_suffix: 'ago',
@@ -61,11 +61,11 @@ NETDATA.seconds4human = function (seconds, options) {
61 };
62
63 if (typeof options !== 'object') {
64 - options = default_options;
64 + options = defaultOptions;
65 } else {
66 - for (const x in default_options) {
66 + for (const x in defaultOptions) {
67 if (typeof options[x] !== 'string') {
68 - options[x] = default_options[x];
68 + options[x] = defaultOptions[x];
69 }
70 }
71 }
@@ -193,15 +193,15 @@ NETDATA.dataAttributeBoolean = function (element, attribute, def) {
193 // fast numbers formatting
194
195 NETDATA.fastNumberFormat = {
196 - formatters_fixed: [],
197 - formatters_zero_based: [],
196 + formattersFixed: [],
197 + formattersZeroBased: [],
198
199 // this is the fastest and the preferred
200 getIntlNumberFormat: function (min, max) {
201 let key = max;
202 if (min === max) {
203 - if (typeof this.formatters_fixed[key] === 'undefined') {
204 - this.formatters_fixed[key] = new Intl.NumberFormat(undefined, {
203 + if (typeof this.formattersFixed[key] === 'undefined') {
204 + this.formattersFixed[key] = new Intl.NumberFormat(undefined, {
205 // style: 'decimal',
206 // minimumIntegerDigits: 1,
207 // minimumSignificantDigits: 1,
@@ -212,10 +212,10 @@ NETDATA.fastNumberFormat = {
212 });
213 }
214
215 - return this.formatters_fixed[key];
215 + return this.formattersFixed[key];
216 } else if (min === 0) {
217 - if (typeof this.formatters_zero_based[key] === 'undefined') {
218 - this.formatters_zero_based[key] = new Intl.NumberFormat(undefined, {
217 + if (typeof this.formattersZeroBased[key] === 'undefined') {
218 + this.formattersZeroBased[key] = new Intl.NumberFormat(undefined, {
219 // style: 'decimal',
220 // minimumIntegerDigits: 1,
221 // minimumSignificantDigits: 1,
@@ -226,7 +226,7 @@ NETDATA.fastNumberFormat = {
226 });
227 }
228
229 - return this.formatters_zero_based[key];
229 + return this.formattersZeroBased[key];
230 } else {
231 // this is never used
232 // it is added just for completeness
@@ -246,8 +246,8 @@ NETDATA.fastNumberFormat = {
246 getLocaleString: function (min, max) {
247 let key = max;
248 if (min === max) {
249 - if (typeof this.formatters_fixed[key] === 'undefined') {
250 - this.formatters_fixed[key] = {
249 + if (typeof this.formattersFixed[key] === 'undefined') {
250 + this.formattersFixed[key] = {
251 format: function (value) {
252 return value.toLocaleString(undefined, {
253 // style: 'decimal',
@@ -262,10 +262,10 @@ NETDATA.fastNumberFormat = {
262 };
263 }
264
265 - return this.formatters_fixed[key];
265 + return this.formattersFixed[key];
266 } else if (min === 0) {
267 - if (typeof this.formatters_zero_based[key] === 'undefined') {
268 - this.formatters_zero_based[key] = {
267 + if (typeof this.formattersZeroBased[key] === 'undefined') {
268 + this.formattersZeroBased[key] = {
269 format: function (value) {
270 return value.toLocaleString(undefined, {
271 // style: 'decimal',
@@ -280,7 +280,7 @@ NETDATA.fastNumberFormat = {
280 };
281 }
282
283 - return this.formatters_zero_based[key];
283 + return this.formattersZeroBased[key];
284 } else {
285 return {
286 format: function (value) {
@@ -302,8 +302,8 @@ NETDATA.fastNumberFormat = {
302 getFixed: function (min, max) {
303 let key = max;
304 if (min === max) {
305 - if (typeof this.formatters_fixed[key] === 'undefined') {
306 - this.formatters_fixed[key] = {
305 + if (typeof this.formattersFixed[key] === 'undefined') {
306 + this.formattersFixed[key] = {
307 format: function (value) {
308 if (value === 0) {
309 return "0";
@@ -313,10 +313,10 @@ NETDATA.fastNumberFormat = {
313 };
314 }
315
316 - return this.formatters_fixed[key];
316 + return this.formattersFixed[key];
317 } else if (min === 0) {
318 - if (typeof this.formatters_zero_based[key] === 'undefined') {
319 - this.formatters_zero_based[key] = {
318 + if (typeof this.formattersZeroBased[key] === 'undefined') {
319 + this.formattersZeroBased[key] = {
320 format: function (value) {
321 if (value === 0) {
322 return "0";
@@ -326,7 +326,7 @@ NETDATA.fastNumberFormat = {
326 };
327 }
328
329 - return this.formatters_zero_based[key];
329 + return this.formattersZeroBased[key];
330 } else {
331 return {
332 format: function (value) {
@@ -394,3 +394,27 @@ NETDATA.fastNumberFormat = {
394 return this.get(min, max);
395 }
396 };
397 +
398 +// ----------------------------------------------------------------------------------------------------------------
399 +// Detect the netdata server
400 +
401 +// http://stackoverflow.com/questions/984510/what-is-my-script-src-url
402 +// http://stackoverflow.com/questions/6941533/get-protocol-domain-and-port-from-url
403 +NETDATA._scriptSource = function () {
404 + let script = null;
405 +
406 + if (typeof document.currentScript !== 'undefined') {
407 + script = document.currentScript;
408 + } else {
409 + const all_scripts = document.getElementsByTagName('script');
410 + script = all_scripts[all_scripts.length - 1];
411 + }
412 +
413 + if (typeof script.getAttribute.length !== 'undefined') {
414 + script = script.src;
415 + } else {
416 + script = script.getAttribute('src', -1);
417 + }
418 +
419 + return script;
420 +};