web/gui: Added support for per series styling for dygraphs (#8668)

3 files changed, 112 insertions, 5 deletions

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index f97343e84e..7d7d5218fc 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -28,7 +28,7 @@ The Contributor (_you_) hereby assigns Netdata Inc. copyright in his
 contributions, to be licensed under the same terms as the rest of the code.
 
 > _Note: this means we may re-license Netdata (your contributions included)
-> any way we see fit, without asking your permission. 
+> any way we see fit, without asking your permission.
 > We intend to keep the Netdata agent forever FOSS.
 > But open-source licenses have significant differences and in our attempt to
 > help Netdata grow we may have to distribute it under a different license.
@@ -130,6 +130,7 @@ This is the list of contributors that have signed this agreement:
 |@akwan|Alan Kwan||
 |@underhood|Timotej Šiškovič||
 |@stevenh|Steven Hartland|steven.hartland@multiplay.co.uk|
+|@dpsy4|Dave Sitek||
 |@devinrsmith|Devin Smith||
 
 [![analytics](https://www.google-analytics.com/collect?v=1&aip=1&t=pageview&_s=1&ds=github&dr=https%3A%2F%2Fgithub.com%2Fnetdata%2Fnetdata&dl=https%3A%2F%2Fmy-netdata.io%2Fgithub%2FCONTRIBUTORS&_u=MAC~&cid=5792dfd7-8dc4-476b-af31-da2fdb9f93d2&tid=UA-64295674-3)](<>)
diff --git a/web/gui/dashboard.js b/web/gui/dashboard.js
index b8879241f7..53e9090b12 100644
--- a/web/gui/dashboard.js
+++ b/web/gui/dashboard.js
@@ -2199,6 +2199,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),
@@ -2855,9 +2858,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 = `
@@ -2895,6 +2903,51 @@ 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;
+};
 // ----------------------------------------------------------------------------------------------------------------
 // sparkline
 
diff --git a/web/gui/src/dashboard.js/charting/dygraph.js b/web/gui/src/dashboard.js/charting/dygraph.js
index f34d2f4aa1..4b44e7c430 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;
+};