@cryptotaxi247 / netdata-1 / commits / b4897fe58

added data-common-colors; by default use common colors for charts of the same context

Costa Tsaousis (ktsaou) committed Jan 14, 2018 at 16:14 UTC b4897fe58ee57203176569ea6a258919e973f9e4
1 file changed +124 -78
web/dashboard.js
+124 -78
@@ -1249,6 +1249,116 @@ var NETDATA = window.NETDATA || {};
1249 }
1250 };
1251
1252 + NETDATA.commonColors = {
1253 + keys: {},
1254 +
1255 + globalReset: function() {
1256 + this.keys = {};
1257 + },
1258 +
1259 + get: function(state, label) {
1260 + var ret = this.refill(state);
1261 +
1262 + if(typeof ret.assigned[label] === 'undefined')
1263 + ret.assigned[label] = ret.available.shift();
1264 +
1265 + return ret.assigned[label];
1266 + },
1267 +
1268 + refill: function(state) {
1269 + var ret, len;
1270 +
1271 + if(typeof state.tmp.__commonColors === 'undefined')
1272 + ret = this.prepare(state);
1273 + else {
1274 + ret = this.keys[state.tmp.__commonColors];
1275 + if(typeof ret === 'undefined')
1276 + ret = this.prepare(state);
1277 + }
1278 +
1279 + if(ret.available.length === 0) {
1280 + if(ret.copy_theme === true || ret.custom.length === 0) {
1281 + // copy the theme colors
1282 + len = NETDATA.themes.current.colors.length;
1283 + while (len--)
1284 + ret.available.unshift(NETDATA.themes.current.colors[len]);
1285 + }
1286 +
1287 + // copy the custom colors
1288 + len = ret.custom.length;
1289 + while (len--)
1290 + ret.available.unshift(ret.custom[len]);
1291 + }
1292 +
1293 + state.colors_assigned = ret.assigned;
1294 + state.colors_available = ret.available;
1295 + state.colors_custom = ret.custom;
1296 +
1297 + return ret;
1298 + },
1299 +
1300 + __read_custom_colors: function(state, ret) {
1301 + // add the user supplied colors
1302 + var c = NETDATA.dataAttribute(state.element, 'colors', undefined);
1303 + if (typeof c === 'string' && c.length > 0) {
1304 + c = c.split(' ');
1305 + var len = c.length;
1306 +
1307 + if (len > 0 && c[len - 1] === 'ONLY') {
1308 + len--;
1309 + ret.copy_theme = false;
1310 + }
1311 +
1312 + while (len--)
1313 + ret.custom.unshift(c[len]);
1314 + }
1315 + },
1316 +
1317 + prepare: function(state) {
1318 + var has_custom_colors = false;
1319 +
1320 + if(typeof state.tmp.__commonColors === 'undefined') {
1321 + var defname = state.chart.context;
1322 +
1323 + // if this chart has data-colors=""
1324 + // we should use the chart uuid as the default key (private palette)
1325 + // (data-common-colors="NAME" will be used anyways)
1326 + var c = NETDATA.dataAttribute(state.element, 'colors', undefined);
1327 + if (typeof c === 'string' && c.length > 0) {
1328 + defname = state.uuid;
1329 + has_custom_colors = true;
1330 + }
1331 +
1332 + // get the commonColors setting
1333 + state.tmp.__commonColors = NETDATA.dataAttribute(state.element, 'common-colors', defname);
1334 + }
1335 +
1336 + var name = state.tmp.__commonColors;
1337 + var ret = this.keys[name];
1338 +
1339 + if(typeof ret === 'undefined') {
1340 + // add our commonMax
1341 + this.keys[name] = {
1342 + assigned: {}, // name-value of dimensions and their colors
1343 + available: [], // an array of colors available to be used
1344 + custom: [], // the array of colors defined by the user
1345 + charts: {}, // the charts linked to this
1346 + copy_theme: true
1347 + };
1348 + ret = this.keys[name];
1349 + }
1350 +
1351 + if(typeof ret.charts[state.uuid] === 'undefined') {
1352 + ret.charts[state.uuid] = state;
1353 +
1354 + if(has_custom_colors === true)
1355 + this.__read_custom_colors(state, ret);
1356 + }
1357 +
1358 + return ret;
1359 + },
1360 + };
1361 +
1362 // ----------------------------------------------------------------------------------------------------------------
1363 // Chart Registry
1364
@@ -2634,7 +2744,7 @@ var NETDATA = window.NETDATA || {};
2744
2745 // color management
2746 that.colors = null;
2637 - that.colors_assigned = {};
2747 + that.colors_assigned = null;
2748 that.colors_available = null;
2749 that.colors_custom = null;
2750
@@ -3715,87 +3825,19 @@ var NETDATA = window.NETDATA || {};
3825
3826 // this should be called just ONCE per dimension per chart
3827 this.__chartDimensionColor = function(label) {
3718 - this.chartPrepareColorPalette();
3719 -
3720 - if(typeof this.colors_assigned[label] === 'undefined') {
3828 + var c = NETDATA.commonColors.get(this, label);
3829
3722 - if(this.colors_available.length === 0) {
3723 - var len;
3724 - var copy_standard = true;
3725 -
3726 - // copy the custom colors
3727 - if(this.colors_custom !== null) {
3728 - len = this.colors_custom.length;
3729 - if(len > 0 && this.colors_custom[len - 1] === 'ONLY') {
3730 - len--;
3731 - copy_standard = false;
3732 - }
3733 -
3734 - while (len--)
3735 - this.colors_available.unshift(this.colors_custom[len]);
3736 - }
3737 -
3738 - if(copy_standard === true) {
3739 - // copy the standard palette colors
3740 - len = NETDATA.themes.current.colors.length;
3741 - while (len--)
3742 - this.colors_available.unshift(NETDATA.themes.current.colors[len]);
3743 - }
3744 - }
3745 -
3746 - // assign a color to this dimension
3747 - this.colors_assigned[label] = this.colors_available.shift();
3748 -
3749 - if(this.debug === true)
3750 - this.log('label "' + label + '" got color "' + this.colors_assigned[label]);
3751 - }
3752 - else {
3753 - if(this.debug === true)
3754 - this.log('label "' + label + '" already has color "' + this.colors_assigned[label] + '"');
3755 - }
3830 + // it is important to maintain a list of colors
3831 + // for this chart only, since the chart library
3832 + // uses this to assign colors to dimensions in the same
3833 + // order the dimension are given to it
3834 + this.colors.push(c);
3835
3757 - this.colors.push(this.colors_assigned[label]);
3758 - return this.colors_assigned[label];
3836 + return c;
3837 };
3838
3839 this.chartPrepareColorPalette = function() {
3762 - var len;
3763 -
3764 - if(this.colors_custom !== null) return;
3765 -
3766 - if(this.debug === true)
3767 - this.log("Preparing chart color palette");
3768 -
3769 - this.colors = [];
3770 - this.colors_available = [];
3771 - this.colors_custom = [];
3772 -
3773 - // add the standard colors
3774 - len = NETDATA.themes.current.colors.length;
3775 - while(len--)
3776 - this.colors_available.unshift(NETDATA.themes.current.colors[len]);
3777 -
3778 - // add the user supplied colors
3779 - var c = NETDATA.dataAttribute(this.element, 'colors', undefined);
3780 - // this.log('read colors: ' + c);
3781 - if(typeof c === 'string' && c.length > 0) {
3782 - c = c.split(' ');
3783 - len = c.length;
3784 - while(len--) {
3785 - if(this.debug === true)
3786 - this.log("Adding custom color " + c[len].toString() + " to palette");
3787 -
3788 - this.colors_custom.unshift(c[len]);
3789 - this.colors_available.unshift(c[len]);
3790 - }
3791 - }
3792 -
3793 - if(this.debug === true) {
3794 - this.log("colors_custom:");
3795 - this.log(this.colors_custom);
3796 - this.log("colors_available:");
3797 - this.log(this.colors_available);
3798 - }
3840 + NETDATA.commonColors.refill(this);
3841 };
3842
3843 // get the ordered list of chart colors
@@ -3910,16 +3952,19 @@ var NETDATA = window.NETDATA || {};
3952 }
3953 return;
3954 }
3955 +
3956 if(this.colors === null) {
3957 // this is the first time we update the chart
3958 // let's assign colors to all dimensions
3959 if(this.library.track_colors() === true) {
3960 + this.colors = [];
3961 keys = Object.keys(this.chart.dimensions);
3962 len = keys.length;
3963 for(i = 0; i < len ;i++)
3920 - this.__chartDimensionColor(this.chart.dimensions[keys[i]].name);
3964 + NETDATA.commonColors.get(this, this.chart.dimensions[keys[i]].name);
3965 }
3966 }
3967 +
3968 // we will re-generate the colors for the chart
3969 // based on the dimensions this result has data for
3970 this.colors = [];
@@ -5577,6 +5622,7 @@ var NETDATA = window.NETDATA || {};
5622 NETDATA.chartRegistry.globalReset();
5623 NETDATA.commonMin.globalReset();
5624 NETDATA.commonMax.globalReset();
5625 + NETDATA.commonColors.globalReset();
5626 NETDATA.unitsConversion.globalReset();
5627 NETDATA.options.targets = [];
5628 NETDATA.parseDom();