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
Costa Tsaousis (ktsaou) committed
Apr 22, 2017 at 00:32 UTC
9d810ed3bdf980cb690b4c7e767ca1f33ace73a1
2 files changed
+71
-28
web/dashboard.js
+70
-27
@@ -1523,6 +1523,7 @@ var NETDATA = window.NETDATA || {};
1523
this.colors = null;
1524
this.colors_assigned = {};
1525
this.colors_available = null;
1526
+ this.colors_defined = null;
1527
1528
// the element already created by the user
1529
this.element_message = null;
@@ -1553,7 +1554,7 @@ var NETDATA = window.NETDATA || {};
1554
this.enabled = true; // boolean - is the chart enabled for refresh?
1555
this.paused = false; // boolean - is the chart paused for any reason?
1556
this.selected = false; // boolean - is the chart shown a selection?
1556
- this.debug = false; // boolean - console.log() debug info about this chart
1557
+ this.debug = self.data('debug') === true; // boolean - console.log() debug info about this chart
1558
1559
this.netdata_first = 0; // milliseconds - the first timestamp in netdata
1560
this.netdata_last = 0; // milliseconds - the last timestamp in netdata
@@ -2678,7 +2679,7 @@ var NETDATA = window.NETDATA || {};
2679
2680
// this should be called just ONCE per dimension per chart
2681
this._chartDimensionColor = function(label) {
2681
- if(this.colors === null) this.chartColors();
2682
+ this.chartPrepareColorPalette();
2683
2684
if(typeof this.colors_assigned[label] === 'undefined') {
2685
if(this.colors_available.length === 0) {
@@ -2701,32 +2702,74 @@ var NETDATA = window.NETDATA || {};
2702
return this.colors_assigned[label];
2703
};
2704
2704
- this.chartColors = function() {
2705
- if(this.colors !== null) return this.colors;
2705
+ this.chartPrepareColorPalette = function() {
2706
+ var len;
2707
+
2708
+ if(this.colors !== null) return;
2709
+
2710
+ if(this.colors_defined !== null) {
2711
+ this.colors = [];
2712
+ this.colors_available = [];
2713
+
2714
+ len = this.colors_defined.length;
2715
+ while(len--)
2716
+ this.colors_available.unshift(this.colors_defined[len]);
2717
+
2718
+ if(this.debug === true) {
2719
+ this.log("restored available palette:");
2720
+ this.log(this.colors_defined);
2721
+ }
2722
+
2723
+ return;
2724
+ }
2725
+
2726
+ if(this.debug === true)
2727
+ this.log("Preparing chart color palette");
2728
2729
this.colors = [];
2730
this.colors_available = [];
2731
+ this.colors_defined = [];
2732
2733
// add the standard colors
2711
- var len = NETDATA.themes.current.colors.length;
2712
- while(len--)
2734
+ len = NETDATA.themes.current.colors.length;
2735
+ while(len--) {
2736
this.colors_available.unshift(NETDATA.themes.current.colors[len]);
2737
+ this.colors_defined.unshift(NETDATA.themes.current.colors[len]);
2738
+ }
2739
2715
- // add the user supplied colors
2740
+ // add the user supplied colosrs
2741
var c = $(this.element).data('colors');
2742
// this.log('read colors: ' + c);
2718
- if(typeof c !== 'undefined' && c !== null && c.length > 0) {
2719
- if(typeof c !== 'string') {
2720
- this.log('invalid color given: ' + c + ' (give a space separated list of colors)');
2721
- }
2722
- else {
2723
- c = c.split(' ');
2724
- len = c.length;
2725
- while(len--)
2726
- this.colors_available.unshift(c[len]);
2743
+ if(typeof c === 'string' && c.length > 0) {
2744
+ c = c.split(' ');
2745
+ len = c.length;
2746
+ while(len--) {
2747
+ if(this.debug === true)
2748
+ this.log("Adding custom color " + c[len].toString() + " to palette");
2749
+
2750
+ this.colors_available.unshift(c[len]);
2751
+ this.colors_defined.unshift(c[len]);
2752
}
2753
}
2754
2755
+ if(this.debug === true) {
2756
+ this.log("defined palette:");
2757
+ this.log(this.colors_defined);
2758
+ }
2759
+ };
2760
+
2761
+ // get the ordered list of chart colors
2762
+ // this includes user defined colors
2763
+ this.chartDefinedColors = function() {
2764
+ this.chartPrepareColorPalette();
2765
+ return this.colors_defined;
2766
+ };
2767
+
2768
+ // get the order list of chart ASSIGNED colors
2769
+ // (this retuns only the colors that have beed
2770
+ // assigned to dimensions)
2771
+ this.chartDimensionColors = function() {
2772
+ this.chartPrepareColorPalette();
2773
return this.colors;
2774
};
2775
@@ -2757,7 +2800,7 @@ var NETDATA = window.NETDATA || {};
2800
2801
if(needed === false) {
2802
// make sure colors available
2760
- this.chartColors();
2803
+ this.chartPrepareColorPalette();
2804
2805
// do we have to update the current values?
2806
// we do this, only when the visible chart is current
@@ -4115,12 +4158,12 @@ var NETDATA = window.NETDATA || {};
4158
NETDATA.peityChartUpdate = function(state, data) {
4159
state.peity_instance.innerHTML = data.result;
4160
4118
- if(state.peity_options.stroke !== state.chartColors()[0]) {
4119
- state.peity_options.stroke = state.chartColors()[0];
4161
+ if(state.peity_options.stroke !== state.chartDefinedColors()[0]) {
4162
+ state.peity_options.stroke = state.chartDefinedColors()[0];
4163
if(state.chart.chart_type === 'line')
4164
state.peity_options.fill = NETDATA.themes.current.background;
4165
else
4123
- state.peity_options.fill = NETDATA.colorLuminance(state.chartColors()[0], NETDATA.chartDefaults.fill_luminance);
4166
+ state.peity_options.fill = NETDATA.colorLuminance(state.chartDefinedColors()[0], NETDATA.chartDefaults.fill_luminance);
4167
}
4168
4169
$(state.peity_instance).peity('line', state.peity_options);
@@ -4185,7 +4228,7 @@ var NETDATA = window.NETDATA || {};
4228
NETDATA.sparklineChartCreate = function(state, data) {
4229
var self = $(state.element);
4230
var type = self.data('sparkline-type') || 'line';
4188
- var lineColor = self.data('sparkline-linecolor') || state.chartColors()[0];
4231
+ var lineColor = self.data('sparkline-linecolor') || state.chartDefinedColors()[0];
4232
var fillColor = self.data('sparkline-fillcolor') || ((state.chart.chart_type === 'line')?NETDATA.themes.current.background:NETDATA.colorLuminance(lineColor, NETDATA.chartDefaults.fill_luminance));
4233
var chartRangeMin = self.data('sparkline-chartrangemin') || undefined;
4234
var chartRangeMax = self.data('sparkline-chartrangemax') || undefined;
@@ -4400,7 +4443,7 @@ var NETDATA = window.NETDATA || {};
4443
4444
var options = {
4445
file: data.result.data,
4403
- colors: state.chartColors(),
4446
+ colors: state.chartDimensionColors(),
4447
labels: data.result.labels,
4448
labelsDivWidth: state.chartWidth() - 70,
4449
visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names)
@@ -4485,7 +4528,7 @@ var NETDATA = window.NETDATA || {};
4528
:false;
4529
4530
state.dygraph_options = {
4488
- colors: self.data('dygraph-colors') || state.chartColors(),
4531
+ colors: self.data('dygraph-colors') || state.chartDimensionColors(),
4532
4533
// leave a few pixels empty on the right of the chart
4534
rightGap: self.data('dygraph-rightgap')
@@ -5273,7 +5316,7 @@ var NETDATA = window.NETDATA || {};
5316
height: state.chartHeight()
5317
},
5318
color: {
5276
- pattern: state.chartColors()
5319
+ pattern: state.chartDimensionColors()
5320
},
5321
data: {
5322
x: 'time',
@@ -5403,7 +5446,7 @@ var NETDATA = window.NETDATA || {};
5446
var datatable = new google.visualization.DataTable(data.result);
5447
5448
state.google_options = {
5406
- colors: state.chartColors(),
5449
+ colors: state.chartDimensionColors(),
5450
5451
// do not set width, height - the chart resizes itself
5452
//width: state.chartWidth(),
@@ -5698,7 +5741,7 @@ var NETDATA = window.NETDATA || {};
5741
5742
var barColor = self.data('easypiechart-barcolor');
5743
if(typeof barColor === 'undefined' || barColor === null)
5701
- barColor = state.chartColors()[0];
5744
+ barColor = state.chartDefinedColors()[0];
5745
else {
5746
// <div ... data-easypiechart-barcolor="(function(percent){return(percent < 50 ? '#5cb85c' : percent < 85 ? '#f0ad4e' : '#cb3935');})" ...></div>
5747
var tmp = eval(barColor);
@@ -5929,7 +5972,7 @@ var NETDATA = window.NETDATA || {};
5972
var adjust = self.data('gauge-adjust') || null;
5973
var pointerColor = self.data('gauge-pointer-color') || NETDATA.themes.current.gauge_pointer;
5974
var strokeColor = self.data('gauge-stroke-color') || NETDATA.themes.current.gauge_stroke;
5932
- var startColor = self.data('gauge-start-color') || state.chartColors()[0];
5975
+ var startColor = self.data('gauge-start-color') || state.chartDefinedColors()[0];
5976
var stopColor = self.data('gauge-stop-color') || void 0;
5977
var generateGradient = self.data('gauge-generate-gradient') || false;
5978
web/index.html
+1
-1
@@ -3523,4 +3523,4 @@
3523
</div>
3524
</body>
3525
</html>
3526
-<script type="text/javascript" src="dashboard.js?v20170421-1"></script>
3526
+<script type="text/javascript" src="dashboard.js?v20170421-2"></script>