diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2021-02-07 11:45:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2021-02-07 11:45:55 +0000 |
commit | a8220ab2d293bb7f4b014b79d16b2fb05090fa93 (patch) | |
tree | 77f0a30f016c0925cf7ee9292e644bba183c2774 /web/gui/src | |
parent | Adding upstream version 1.19.0. (diff) | |
download | netdata-a8220ab2d293bb7f4b014b79d16b2fb05090fa93.tar.xz netdata-a8220ab2d293bb7f4b014b79d16b2fb05090fa93.zip |
Adding upstream version 1.29.0.upstream/1.29.0
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'web/gui/src')
-rw-r--r-- | web/gui/src/dashboard.js/charting/_c3.js | 114 | ||||
-rw-r--r-- | web/gui/src/dashboard.js/charting/_morris.js | 81 | ||||
-rw-r--r-- | web/gui/src/dashboard.js/charting/_raphael.js | 48 | ||||
-rw-r--r-- | web/gui/src/dashboard.js/charting/dygraph.js | 57 | ||||
-rw-r--r-- | web/gui/src/dashboard.js/main.js | 10 | ||||
-rw-r--r-- | web/gui/src/dashboard.js/units-conversion.js | 14 |
6 files changed, 317 insertions, 7 deletions
diff --git a/web/gui/src/dashboard.js/charting/_c3.js b/web/gui/src/dashboard.js/charting/_c3.js new file mode 100644 index 000000000..6688bbcce --- /dev/null +++ b/web/gui/src/dashboard.js/charting/_c3.js @@ -0,0 +1,114 @@ + +// DEPRECATED: will be removed! + +// c3 + +NETDATA.c3Initialize = function(callback) { + if (typeof netdataNoC3 === 'undefined' || !netdataNoC3) { + + // C3 requires D3 + if (!NETDATA.chartLibraries.d3.initialized) { + if (NETDATA.chartLibraries.d3.enabled) { + NETDATA.d3Initialize(function() { + NETDATA.c3Initialize(callback); + }); + } else { + NETDATA.chartLibraries.c3.enabled = false; + if (typeof callback === "function") + return callback(); + } + } else { + NETDATA._loadCSS(NETDATA.c3_css); + + $.ajax({ + url: NETDATA.c3_js, + cache: true, + dataType: "script", + xhrFields: { withCredentials: true } // required for the cookie + }) + .done(function() { + NETDATA.registerChartLibrary('c3', NETDATA.c3_js); + }) + .fail(function() { + NETDATA.chartLibraries.c3.enabled = false; + NETDATA.error(100, NETDATA.c3_js); + }) + .always(function() { + if (typeof callback === "function") + return callback(); + }); + } + } else { + NETDATA.chartLibraries.c3.enabled = false; + if (typeof callback === "function") + return callback(); + } +}; + +NETDATA.c3ChartUpdate = function(state, data) { + state.c3_instance.destroy(); + return NETDATA.c3ChartCreate(state, data); + + //state.c3_instance.load({ + // rows: data.result, + // unload: true + //}); + + //return true; +}; + +NETDATA.c3ChartCreate = function(state, data) { + + state.element_chart.id = 'c3-' + state.uuid; + // console.log('id = ' + state.element_chart.id); + + state.c3_instance = c3.generate({ + bindto: '#' + state.element_chart.id, + size: { + width: state.chartWidth(), + height: state.chartHeight() + }, + color: { + pattern: state.chartColors() + }, + data: { + x: 'time', + rows: data.result, + type: (state.chart.chart_type === 'line')?'spline':'area-spline' + }, + axis: { + x: { + type: 'timeseries', + tick: { + format: function(x) { + return NETDATA.dateTime.xAxisTimeString(x); + } + } + } + }, + grid: { + x: { + show: true + }, + y: { + show: true + } + }, + point: { + show: false + }, + line: { + connectNull: false + }, + transition: { + duration: 0 + }, + interaction: { + enabled: true + } + }); + + // console.log(state.c3_instance); + + return true; +}; diff --git a/web/gui/src/dashboard.js/charting/_morris.js b/web/gui/src/dashboard.js/charting/_morris.js new file mode 100644 index 000000000..30789e4e2 --- /dev/null +++ b/web/gui/src/dashboard.js/charting/_morris.js @@ -0,0 +1,81 @@ + +// DEPRECATED: will be removed! + +// morris + +NETDATA.morrisInitialize = function(callback) { + if (typeof netdataNoMorris === 'undefined' || !netdataNoMorris) { + + // morris requires raphael + if (!NETDATA.chartLibraries.raphael.initialized) { + if (NETDATA.chartLibraries.raphael.enabled) { + NETDATA.raphaelInitialize(function() { + NETDATA.morrisInitialize(callback); + }); + } else { + NETDATA.chartLibraries.morris.enabled = false; + if (typeof callback === "function") + return callback(); + } + } else { + NETDATA._loadCSS(NETDATA.morris_css); + + $.ajax({ + url: NETDATA.morris_js, + cache: true, + dataType: "script", + xhrFields: { withCredentials: true } // required for the cookie + }) + .done(function() { + NETDATA.registerChartLibrary('morris', NETDATA.morris_js); + }) + .fail(function() { + NETDATA.chartLibraries.morris.enabled = false; + NETDATA.error(100, NETDATA.morris_js); + }) + .always(function() { + if (typeof callback === "function") + return callback(); + }); + } + } else { + NETDATA.chartLibraries.morris.enabled = false; + if (typeof callback === "function") + return callback(); + } +}; + +NETDATA.morrisChartUpdate = function(state, data) { + state.morris_instance.setData(data.result.data); + return true; +}; + +NETDATA.morrisChartCreate = function(state, data) { + + state.morris_options = { + element: state.element_chart.id, + data: data.result.data, + xkey: 'time', + ykeys: data.dimension_names, + labels: data.dimension_names, + lineWidth: 2, + pointSize: 3, + smooth: true, + hideHover: 'auto', + parseTime: true, + continuousLine: false, + behaveLikeLine: false + }; + + if (state.chart.chart_type === 'line') + state.morris_instance = new Morris.Line(state.morris_options); + + else if (state.chart.chart_type === 'area') { + state.morris_options.behaveLikeLine = true; + state.morris_instance = new Morris.Area(state.morris_options); + } + else // stacked + state.morris_instance = new Morris.Area(state.morris_options); + + return true; +}; diff --git a/web/gui/src/dashboard.js/charting/_raphael.js b/web/gui/src/dashboard.js/charting/_raphael.js new file mode 100644 index 000000000..2d89a22a8 --- /dev/null +++ b/web/gui/src/dashboard.js/charting/_raphael.js @@ -0,0 +1,48 @@ + +// DEPRECATED: will be removed! + +// raphael + +NETDATA.raphaelInitialize = function(callback) { + if (typeof netdataStopRaphael === 'undefined' || !netdataStopRaphael) { + $.ajax({ + url: NETDATA.raphael_js, + cache: true, + dataType: "script", + xhrFields: { withCredentials: true } // required for the cookie + }) + .done(function() { + NETDATA.registerChartLibrary('raphael', NETDATA.raphael_js); + }) + .fail(function() { + NETDATA.chartLibraries.raphael.enabled = false; + NETDATA.error(100, NETDATA.raphael_js); + }) + .always(function() { + if (typeof callback === "function") + return callback(); + }); + } else { + NETDATA.chartLibraries.raphael.enabled = false; + if (typeof callback === "function") + return callback(); + } +}; + +NETDATA.raphaelChartUpdate = function(state, data) { + $(state.element_chart).raphael(data.result, { + width: state.chartWidth(), + height: state.chartHeight() + }); + + return false; +}; + +NETDATA.raphaelChartCreate = function(state, data) { + $(state.element_chart).raphael(data.result, { + width: state.chartWidth(), + height: state.chartHeight() + }); + + return false; +}; diff --git a/web/gui/src/dashboard.js/charting/dygraph.js b/web/gui/src/dashboard.js/charting/dygraph.js index f34d2f4aa..4b44e7c43 100644 --- a/web/gui/src/dashboard.js/charting/dygraph.js +++ b/web/gui/src/dashboard.js/charting/dygraph.js @@ -314,6 +314,9 @@ NETDATA.dygraphChartCreate = function (state, data) { visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names), logscale: NETDATA.chartLibraries.dygraph.isLogScale(state) ? 'y' : undefined, + // Expects a string in the format "<series name>: <style>" where each series is separated by a | + perSeriesStyle: NETDATA.dataAttribute(state.element, 'dygraph-per-series-style', ''), + axes: { x: { pixelsPerLabel: NETDATA.dataAttribute(state.element, 'dygraph-xpixelsperlabel', 50), @@ -970,9 +973,14 @@ NETDATA.dygraphChartCreate = function (state, data) { //state.tmp.dygraph_options.isZoomedIgnoreProgrammaticZoom = true; } - state.tmp.dygraph_instance = new Dygraph(state.element_chart, - data.result.data, state.tmp.dygraph_options); + let seriesStyles = NETDATA.dygraphGetSeriesStyle(state.tmp.dygraph_options); + state.tmp.dygraph_options.series = seriesStyles; + state.tmp.dygraph_instance = new Dygraph( + state.element_chart, + data.result.data, + state.tmp.dygraph_options + ); state.tmp.dygraph_history_tip_element = document.createElement('div'); state.tmp.dygraph_history_tip_element.innerHTML = ` @@ -1010,3 +1018,48 @@ NETDATA.dygraphChartCreate = function (state, data) { return true; }; + +NETDATA.dygraphGetSeriesStyle = function(dygraphOptions) { + const seriesStyleStr = dygraphOptions.perSeriesStyle; + let formattedStyles = {}; + + if (seriesStyleStr === '') { + return formattedStyles; + } + + // Parse the config string into a JSON object + let styles = seriesStyleStr.replace(' ', '').split('|'); + + styles.forEach(style => { + const keys = style.split(':'); + formattedStyles[keys[0]] = keys[1]; + }); + + for (let key in formattedStyles) { + if (formattedStyles.hasOwnProperty(key)) { + let settings; + + switch (formattedStyles[key]) { + case 'line': + settings = { fillGraph: false }; + break; + case 'area': + settings = { fillGraph: true }; + break; + case 'dot': + settings = { + fillGraph: false, + drawPoints: true, + pointSize: dygraphOptions.pointSize + }; + break; + default: + settings = undefined; + } + + formattedStyles[key] = settings; + } + } + + return formattedStyles; +}; diff --git a/web/gui/src/dashboard.js/main.js b/web/gui/src/dashboard.js/main.js index 564ee7d4e..c1cfba5e5 100644 --- a/web/gui/src/dashboard.js/main.js +++ b/web/gui/src/dashboard.js/main.js @@ -2789,7 +2789,7 @@ let chartState = function (element) { hide: NETDATA.options.current.show_help_delay_hide_ms }, title: 'Pan Right', - content: 'Pan the chart to the right. You can also <b>drag it</b> with your mouse or your finger (on touch devices).<br/><small>Help, can be disabled from the settings.</small>' + content: 'Pan the chart to the right. You can also <b>drag it</b> with your mouse or your finger (on touch devices).<br/><small>Help can be disabled from the settings.</small>' }); } @@ -2815,7 +2815,7 @@ let chartState = function (element) { hide: NETDATA.options.current.show_help_delay_hide_ms }, title: 'Chart Zoom In', - content: 'Zoom in the chart. You can also press SHIFT and select an area of the chart, or press SHIFT or ALT and use the mouse wheel or 2-finger touchpad scroll to zoom in or out.<br/><small>Help, can be disabled from the settings.</small>' + content: 'Zoom in the chart. You can also press SHIFT and select an area of the chart, or press SHIFT or ALT and use the mouse wheel or 2-finger touchpad scroll to zoom in or out.<br/><small>Help can be disabled from the settings.</small>' }); } @@ -2842,7 +2842,7 @@ let chartState = function (element) { hide: NETDATA.options.current.show_help_delay_hide_ms }, title: 'Chart Zoom Out', - content: 'Zoom out the chart. You can also press SHIFT or ALT and use the mouse wheel, or 2-finger touchpad scroll to zoom in or out.<br/><small>Help, can be disabled from the settings.</small>' + content: 'Zoom out the chart. You can also press SHIFT or ALT and use the mouse wheel, or 2-finger touchpad scroll to zoom in or out.<br/><small>Help can be disabled from the settings.</small>' }); } @@ -2874,7 +2874,7 @@ let chartState = function (element) { hide: NETDATA.options.current.show_help_delay_hide_ms }, title: 'Chart Resize', - content: 'Drag this point with your mouse or your finger (on touch devices), to resize the chart vertically. You can also <b>double click it</b> or <b>double tap it</b> to reset between 2 states: the default and the one that fits all the values.<br/><small>Help, can be disabled from the settings.</small>' + content: 'Drag this point with your mouse or your finger (on touch devices), to resize the chart vertically. You can also <b>double click it</b> or <b>double tap it</b> to reset between 2 states: the default and the one that fits all the values.<br/><small>Help can be disabled from the settings.</small>' }); } @@ -2934,7 +2934,7 @@ let chartState = function (element) { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms }, - content: 'You can click or tap on the values or the labels to select dimensions. By pressing SHIFT or CONTROL, you can enable or disable multiple dimensions.<br/><small>Help, can be disabled from the settings.</small>' + content: 'You can click or tap on the values or the labels to select dimensions. By pressing SHIFT or CONTROL, you can enable or disable multiple dimensions.<br/><small>Help can be disabled from the settings.</small>' }); } } else { diff --git a/web/gui/src/dashboard.js/units-conversion.js b/web/gui/src/dashboard.js/units-conversion.js index af2c843eb..b0dbd2938 100644 --- a/web/gui/src/dashboard.js/units-conversion.js +++ b/web/gui/src/dashboard.js/units-conversion.js @@ -25,6 +25,13 @@ NETDATA.unitsConversion = { 'gigabits/s': 1000000, 'terabits/s': 1000000000 }, + 'bytes/s': { + 'bytes/s': 1, + 'kilobytes/s': 1024, + 'megabytes/s': 1024 * 1024, + 'gigabytes/s': 1024 * 1024 * 1024, + 'terabytes/s': 1024 * 1024 * 1024 * 1024 + }, 'kilobytes/s': { 'bytes/s': 1 / 1024, 'kilobytes/s': 1, @@ -32,6 +39,13 @@ NETDATA.unitsConversion = { 'gigabytes/s': 1024 * 1024, 'terabytes/s': 1024 * 1024 * 1024 }, + 'B/s': { + 'B/s': 1, + 'KiB/s': 1024, + 'MiB/s': 1024 * 1024, + 'GiB/s': 1024 * 1024 * 1024, + 'TiB/s': 1024 * 1024 * 1024 * 1024 + }, 'KB/s': { 'B/s': 1 / 1024, 'KB/s': 1, |