opensourcemirror
/
netdata
mirror of https://github.com/netdata/netdata.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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

This commit is contained in:
dpsy4 2021-01-04 07:10:20 -05:00 committed by GitHub
parent 65f9efdcf9
commit b79b67b043
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 112 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CONTRIBUTORS.md
View File

@ -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)](<>)

57
web/gui/dashboard.js
View File

@ -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

57
web/gui/src/dashboard.js/charting/dygraph.js
View File

@ -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;
};