fixed bug on chart colors palette management; it was copying the same color to all slots - now it prepends custom colors and appends new ones

2 files changed, 71 insertions, 28 deletions

diff --git a/web/dashboard.js b/web/dashboard.js
index 288035b45a..3778b52d6f 100644
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -1523,6 +1523,7 @@ var NETDATA = window.NETDATA || {};
         this.colors = null;
         this.colors_assigned = {};
         this.colors_available = null;
+        this.colors_defined = null;
 
         // the element already created by the user
         this.element_message = null;
@@ -1553,7 +1554,7 @@ var NETDATA = window.NETDATA || {};
         this.enabled = true;                        // boolean - is the chart enabled for refresh?
         this.paused = false;                        // boolean - is the chart paused for any reason?
         this.selected = false;                      // boolean - is the chart shown a selection?
-        this.debug = false;                         // boolean - console.log() debug info about this chart
+        this.debug = self.data('debug') === true;   // boolean - console.log() debug info about this chart
 
         this.netdata_first = 0;                     // milliseconds - the first timestamp in netdata
         this.netdata_last = 0;                      // milliseconds - the last timestamp in netdata
@@ -2678,7 +2679,7 @@ var NETDATA = window.NETDATA || {};
 
         // this should be called just ONCE per dimension per chart
         this._chartDimensionColor = function(label) {
-            if(this.colors === null) this.chartColors();
+            this.chartPrepareColorPalette();
 
             if(typeof this.colors_assigned[label] === 'undefined') {
                 if(this.colors_available.length === 0) {
@@ -2701,32 +2702,74 @@ var NETDATA = window.NETDATA || {};
             return this.colors_assigned[label];
         };
 
-        this.chartColors = function() {
-            if(this.colors !== null) return this.colors;
+        this.chartPrepareColorPalette = function() {
+            var len;
+
+            if(this.colors !== null) return;
+
+            if(this.colors_defined !== null) {
+                this.colors = [];
+                this.colors_available = [];
+
+                len = this.colors_defined.length;
+                while(len--)
+                    this.colors_available.unshift(this.colors_defined[len]);
+
+                if(this.debug === true) {
+                    this.log("restored available palette:");
+                    this.log(this.colors_defined);
+                }
+
+                return;
+            }
+
+            if(this.debug === true)
+                this.log("Preparing chart color palette");
 
             this.colors = [];
             this.colors_available = [];
+            this.colors_defined = [];
 
             // add the standard colors
-            var len = NETDATA.themes.current.colors.length;
-            while(len--)
+            len = NETDATA.themes.current.colors.length;
+            while(len--) {
                 this.colors_available.unshift(NETDATA.themes.current.colors[len]);
+                this.colors_defined.unshift(NETDATA.themes.current.colors[len]);
+            }
 
-            // add the user supplied colors
+            // add the user supplied colosrs
             var c = $(this.element).data('colors');
             // this.log('read colors: ' + c);
-            if(typeof c !== 'undefined' && c !== null && c.length > 0) {
-                if(typeof c !== 'string') {
-                    this.log('invalid color given: ' + c + ' (give a space separated list of colors)');
-                }
-                else {
-                    c = c.split(' ');
-                    len = c.length;
-                    while(len--)
-                        this.colors_available.unshift(c[len]);
+            if(typeof c === 'string' && c.length > 0) {
+                c = c.split(' ');
+                len = c.length;
+                while(len--) {
+                    if(this.debug === true)
+                        this.log("Adding custom color " + c[len].toString() + " to palette");
+
+                    this.colors_available.unshift(c[len]);
+                    this.colors_defined.unshift(c[len]);
                 }
             }
 
+            if(this.debug === true) {
+                this.log("defined palette:");
+                this.log(this.colors_defined);
+            }
+        };
+
+        // get the ordered list of chart colors
+        // this includes user defined colors
+        this.chartDefinedColors = function() {
+            this.chartPrepareColorPalette();
+            return this.colors_defined;
+        };
+
+        // get the order list of chart ASSIGNED colors
+        // (this retuns only the colors that have beed
+        //  assigned to dimensions)
+        this.chartDimensionColors = function() {
+            this.chartPrepareColorPalette();
             return this.colors;
         };
 
@@ -2757,7 +2800,7 @@ var NETDATA = window.NETDATA || {};
 
             if(needed === false) {
                 // make sure colors available
-                this.chartColors();
+                this.chartPrepareColorPalette();
 
                 // do we have to update the current values?
                 // we do this, only when the visible chart is current
@@ -4115,12 +4158,12 @@ var NETDATA = window.NETDATA || {};
     NETDATA.peityChartUpdate = function(state, data) {
         state.peity_instance.innerHTML = data.result;
 
-        if(state.peity_options.stroke !== state.chartColors()[0]) {
-            state.peity_options.stroke = state.chartColors()[0];
+        if(state.peity_options.stroke !== state.chartDefinedColors()[0]) {
+            state.peity_options.stroke = state.chartDefinedColors()[0];
             if(state.chart.chart_type === 'line')
                 state.peity_options.fill = NETDATA.themes.current.background;
             else
-                state.peity_options.fill = NETDATA.colorLuminance(state.chartColors()[0], NETDATA.chartDefaults.fill_luminance);
+                state.peity_options.fill = NETDATA.colorLuminance(state.chartDefinedColors()[0], NETDATA.chartDefaults.fill_luminance);
         }
 
         $(state.peity_instance).peity('line', state.peity_options);
@@ -4185,7 +4228,7 @@ var NETDATA = window.NETDATA || {};
     NETDATA.sparklineChartCreate = function(state, data) {
         var self = $(state.element);
         var type = self.data('sparkline-type') || 'line';
-        var lineColor = self.data('sparkline-linecolor') || state.chartColors()[0];
+        var lineColor = self.data('sparkline-linecolor') || state.chartDefinedColors()[0];
         var fillColor = self.data('sparkline-fillcolor') || ((state.chart.chart_type === 'line')?NETDATA.themes.current.background:NETDATA.colorLuminance(lineColor, NETDATA.chartDefaults.fill_luminance));
         var chartRangeMin = self.data('sparkline-chartrangemin') || undefined;
         var chartRangeMax = self.data('sparkline-chartrangemax') || undefined;
@@ -4400,7 +4443,7 @@ var NETDATA = window.NETDATA || {};
 
         var options = {
                 file: data.result.data,
-                colors: state.chartColors(),
+                colors: state.chartDimensionColors(),
                 labels: data.result.labels,
                 labelsDivWidth: state.chartWidth() - 70,
                 visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names)
@@ -4485,7 +4528,7 @@ var NETDATA = window.NETDATA || {};
             :false;
 
         state.dygraph_options = {
-            colors:                 self.data('dygraph-colors') || state.chartColors(),
+            colors:                 self.data('dygraph-colors') || state.chartDimensionColors(),
 
             // leave a few pixels empty on the right of the chart
             rightGap:               self.data('dygraph-rightgap')
@@ -5273,7 +5316,7 @@ var NETDATA = window.NETDATA || {};
                 height: state.chartHeight()
             },
             color: {
-                pattern: state.chartColors()
+                pattern: state.chartDimensionColors()
             },
             data: {
                 x: 'time',
@@ -5403,7 +5446,7 @@ var NETDATA = window.NETDATA || {};
         var datatable = new google.visualization.DataTable(data.result);
 
         state.google_options = {
-            colors: state.chartColors(),
+            colors: state.chartDimensionColors(),
 
             // do not set width, height - the chart resizes itself
             //width: state.chartWidth(),
@@ -5698,7 +5741,7 @@ var NETDATA = window.NETDATA || {};
 
         var barColor = self.data('easypiechart-barcolor');
         if(typeof barColor === 'undefined' || barColor === null)
-            barColor = state.chartColors()[0];
+            barColor = state.chartDefinedColors()[0];
         else {
             // <div ... data-easypiechart-barcolor="(function(percent){return(percent < 50 ? '#5cb85c' : percent < 85 ? '#f0ad4e' : '#cb3935');})" ...></div>
             var tmp = eval(barColor);
@@ -5929,7 +5972,7 @@ var NETDATA = window.NETDATA || {};
         var adjust = self.data('gauge-adjust') || null;
         var pointerColor = self.data('gauge-pointer-color') || NETDATA.themes.current.gauge_pointer;
         var strokeColor = self.data('gauge-stroke-color') || NETDATA.themes.current.gauge_stroke;
-        var startColor = self.data('gauge-start-color') || state.chartColors()[0];
+        var startColor = self.data('gauge-start-color') || state.chartDefinedColors()[0];
         var stopColor = self.data('gauge-stop-color') || void 0;
         var generateGradient = self.data('gauge-generate-gradient') || false;
 
diff --git a/web/index.html b/web/index.html
index 44a76bb413..350eefc2cd 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3523,4 +3523,4 @@
     </div>
 </body>
 </html>
-<script type="text/javascript" src="dashboard.js?v20170421-1"></script>
+<script type="text/javascript" src="dashboard.js?v20170421-2"></script>