diff options
author | dpsy4 <dsitek89@gmail.com> | 2021-01-04 07:10:20 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-01-04 13:10:20 +0100 |
commit | b79b67b043cee4994e89a86e646fed9284b72cff (patch) | |
tree | 1e4a69d48dd95595eec271d7ea049ea38c6eb5b2 | |
parent | 65f9efdcf9739a211e374b2f3a3bdb881202ff36 (diff) |
web/gui: Added support for per series styling for dygraphs (#8668)
-rw-r--r-- | CONTRIBUTORS.md | 3 | ||||
-rw-r--r-- | web/gui/dashboard.js | 57 | ||||
-rw-r--r-- | web/gui/src/dashboard.js/charting/dygraph.js | 57 |
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; +}; |