summaryrefslogtreecommitdiffstats
path: root/web/gui/src
diff options
context:
space:
mode:
Diffstat (limited to 'web/gui/src')
-rw-r--r--web/gui/src/dashboard.js/charting/_c3.js114
-rw-r--r--web/gui/src/dashboard.js/charting/_morris.js81
-rw-r--r--web/gui/src/dashboard.js/charting/_raphael.js48
-rw-r--r--web/gui/src/dashboard.js/charting/dygraph.js57
-rw-r--r--web/gui/src/dashboard.js/main.js10
-rw-r--r--web/gui/src/dashboard.js/units-conversion.js14
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,
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-10 22:56:42 +0000