simplified charts color management
Costa Tsaousis (ktsaou) committed
May 3, 2017 at 00:58 UTC
2005b00557bde56424c12742e3dc028e1d423197
2 files changed
+37
-44
web/dashboard.js
+36
-43
@@ -1523,7 +1523,6 @@ var NETDATA = window.NETDATA || {};
1523
this.colors = null;
1524
this.colors_assigned = {};
1525
this.colors_available = null;
1526
- this.colors_defined = null;
1526
this.colors_custom = null;
1527
1528
// the element already created by the user
@@ -2683,12 +2682,24 @@ var NETDATA = window.NETDATA || {};
2682
this.chartPrepareColorPalette();
2683
2684
if(typeof this.colors_assigned[label] === 'undefined') {
2685
+
2686
if(this.colors_available.length === 0) {
2687
- var len = NETDATA.themes.current.colors.length;
2687
+ var len;
2688
+
2689
+ // copy the custom colors
2690
+ if(this.colors_custom !== null) {
2691
+ len = this.colors_custom.length;
2692
+ while (len--)
2693
+ this.colors_available.unshift(this.colors_custom[len]);
2694
+ }
2695
+
2696
+ // copy the standard palette colors
2697
+ len = NETDATA.themes.current.colors.length;
2698
while(len--)
2699
this.colors_available.unshift(NETDATA.themes.current.colors[len]);
2700
}
2701
2702
+ // assign a color to this dimension
2703
this.colors_assigned[label] = this.colors_available.shift();
2704
2705
if(this.debug === true)
@@ -2708,42 +2719,17 @@ var NETDATA = window.NETDATA || {};
2719
2720
if(this.colors !== null) return;
2721
2711
- if(this.colors_defined !== null) {
2712
- this.colors = [];
2713
- this.colors_available = [];
2714
-
2715
- if(this.colors_custom !== null) {
2716
- len = this.colors_custom.length;
2717
- while(len--)
2718
- this.colors.unshift(this.colors_custom[len]);
2719
- }
2720
-
2721
- len = this.colors_defined.length;
2722
- while(len--)
2723
- this.colors_available.unshift(this.colors_defined[len]);
2724
-
2725
- if(this.debug === true) {
2726
- this.log("colors_available:");
2727
- this.log(this.colors_available);
2728
- }
2729
-
2730
- return;
2731
- }
2732
-
2722
if(this.debug === true)
2723
this.log("Preparing chart color palette");
2724
2725
this.colors = [];
2726
this.colors_available = [];
2738
- this.colors_defined = [];
2727
this.colors_custom = [];
2728
2729
// add the standard colors
2730
len = NETDATA.themes.current.colors.length;
2743
- while(len--) {
2731
+ while(len--)
2732
this.colors_available.unshift(NETDATA.themes.current.colors[len]);
2745
- this.colors_defined.unshift(NETDATA.themes.current.colors[len]);
2746
- }
2733
2734
// add the user supplied colors
2735
var c = $(this.element).data('colors');
@@ -2757,27 +2743,34 @@ var NETDATA = window.NETDATA || {};
2743
2744
this.colors_custom.unshift(c[len]);
2745
this.colors_available.unshift(c[len]);
2760
- this.colors_defined.unshift(c[len]);
2746
}
2747
}
2748
2749
if(this.debug === true) {
2765
- this.log("colors_defined:");
2766
- this.log(this.colors_defined);
2750
+ this.log("colors_custom:");
2751
+ this.log(this.colors_custom);
2752
+ this.log("colors_available:");
2753
+ this.log(this.colors_available);
2754
}
2755
};
2756
2757
// get the ordered list of chart colors
2758
// this includes user defined colors
2772
- this.chartDefinedColors = function() {
2759
+ this.chartCustomColors = function() {
2760
this.chartPrepareColorPalette();
2761
2762
+ var colors;
2763
+ if(this.colors_custom.length)
2764
+ colors = this.colors_custom;
2765
+ else
2766
+ colors = this.colors;
2767
+
2768
if(this.debug === true) {
2776
- this.log("chartDefinedColors() returns:");
2777
- this.log(this.colors);
2769
+ this.log("chartCustomColors() returns:");
2770
+ this.log(colors);
2771
}
2772
2780
- return this.colors_defined;
2773
+ return colors;
2774
};
2775
2776
// get the ordered list of chart ASSIGNED colors
@@ -3666,8 +3659,8 @@ var NETDATA = window.NETDATA || {};
3659
if(this.isAutoRefreshable() === true) {
3660
// allow the first update, even if the page is not visible
3661
if(this.updates_counter && this.updates_since_last_unhide && NETDATA.options.page_is_visible === false) {
3669
- if(NETDATA.options.debug.focus === true || this.debug === true)
3670
- this.log('canBeAutoRefreshed(): page does not have focus');
3662
+ // if(NETDATA.options.debug.focus === true || this.debug === true)
3663
+ // this.log('canBeAutoRefreshed(): page does not have focus');
3664
3665
return false;
3666
}
@@ -4180,12 +4173,12 @@ var NETDATA = window.NETDATA || {};
4173
NETDATA.peityChartUpdate = function(state, data) {
4174
state.peity_instance.innerHTML = data.result;
4175
4183
- if(state.peity_options.stroke !== state.chartColors()[0]) {
4184
- state.peity_options.stroke = state.chartColors()[0];
4176
+ if(state.peity_options.stroke !== state.chartCustomColors()[0]) {
4177
+ state.peity_options.stroke = state.chartCustomColors()[0];
4178
if(state.chart.chart_type === 'line')
4179
state.peity_options.fill = NETDATA.themes.current.background;
4180
else
4188
- state.peity_options.fill = NETDATA.colorLuminance(state.chartColors()[0], NETDATA.chartDefaults.fill_luminance);
4181
+ state.peity_options.fill = NETDATA.colorLuminance(state.chartCustomColors()[0], NETDATA.chartDefaults.fill_luminance);
4182
}
4183
4184
$(state.peity_instance).peity('line', state.peity_options);
@@ -4250,7 +4243,7 @@ var NETDATA = window.NETDATA || {};
4243
NETDATA.sparklineChartCreate = function(state, data) {
4244
var self = $(state.element);
4245
var type = self.data('sparkline-type') || 'line';
4253
- var lineColor = self.data('sparkline-linecolor') || state.chartColors()[0];
4246
+ var lineColor = self.data('sparkline-linecolor') || state.chartCustomColors()[0];
4247
var fillColor = self.data('sparkline-fillcolor') || ((state.chart.chart_type === 'line')?NETDATA.themes.current.background:NETDATA.colorLuminance(lineColor, NETDATA.chartDefaults.fill_luminance));
4248
var chartRangeMin = self.data('sparkline-chartrangemin') || undefined;
4249
var chartRangeMax = self.data('sparkline-chartrangemax') || undefined;
@@ -5770,7 +5763,7 @@ var NETDATA = window.NETDATA || {};
5763
5764
var barColor = self.data('easypiechart-barcolor');
5765
if(typeof barColor === 'undefined' || barColor === null)
5773
- barColor = state.chartColors()[0];
5766
+ barColor = state.chartCustomColors()[0];
5767
else {
5768
// <div ... data-easypiechart-barcolor="(function(percent){return(percent < 50 ? '#5cb85c' : percent < 85 ? '#f0ad4e' : '#cb3935');})" ...></div>
5769
var tmp = eval(barColor);
@@ -6001,7 +5994,7 @@ var NETDATA = window.NETDATA || {};
5994
var adjust = self.data('gauge-adjust') || null;
5995
var pointerColor = self.data('gauge-pointer-color') || NETDATA.themes.current.gauge_pointer;
5996
var strokeColor = self.data('gauge-stroke-color') || NETDATA.themes.current.gauge_stroke;
6004
- var startColor = self.data('gauge-start-color') || state.chartColors()[0];
5997
+ var startColor = self.data('gauge-start-color') || state.chartCustomColors()[0];
5998
var stopColor = self.data('gauge-stop-color') || void 0;
5999
var generateGradient = self.data('gauge-generate-gradient') || false;
6000
web/index.html
+1
-1
@@ -3543,4 +3543,4 @@
3543
</div>
3544
</body>
3545
</html>
3546
-<script type="text/javascript" src="dashboard.js?v20170503-1"></script>
3546
+<script type="text/javascript" src="dashboard.js?v20170503-2"></script>