respect custom colors for dimensions on non-dygraph charts, but at the same time try to assing colors based on dimension name
Costa Tsaousis (ktsaou) committed
May 3, 2017 at 00:10 UTC
df569a9375aa1df46a45a4e2f04c13b688a4de08
3 files changed
+43
-21
web/dashboard.js
+40
-18
@@ -1524,6 +1524,7 @@ var NETDATA = window.NETDATA || {};
1524
this.colors_assigned = {};
1525
this.colors_available = null;
1526
this.colors_defined = null;
1527
+ this.colors_custom = null;
1528
1529
// the element already created by the user
1530
this.element_message = null;
@@ -2711,13 +2712,19 @@ var NETDATA = window.NETDATA || {};
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) {
2719
- this.log("restored available palette:");
2720
- this.log(this.colors_defined);
2726
+ this.log("colors_available:");
2727
+ this.log(this.colors_available);
2728
}
2729
2730
return;
@@ -2729,6 +2736,7 @@ var NETDATA = window.NETDATA || {};
2736
this.colors = [];
2737
this.colors_available = [];
2738
this.colors_defined = [];
2739
+ this.colors_custom = [];
2740
2741
// add the standard colors
2742
len = NETDATA.themes.current.colors.length;
@@ -2737,7 +2745,7 @@ var NETDATA = window.NETDATA || {};
2745
this.colors_defined.unshift(NETDATA.themes.current.colors[len]);
2746
}
2747
2740
- // add the user supplied colosrs
2748
+ // add the user supplied colors
2749
var c = $(this.element).data('colors');
2750
// this.log('read colors: ' + c);
2751
if(typeof c === 'string' && c.length > 0) {
@@ -2747,13 +2755,14 @@ var NETDATA = window.NETDATA || {};
2755
if(this.debug === true)
2756
this.log("Adding custom color " + c[len].toString() + " to palette");
2757
2758
+ this.colors_custom.unshift(c[len]);
2759
this.colors_available.unshift(c[len]);
2760
this.colors_defined.unshift(c[len]);
2761
}
2762
}
2763
2764
if(this.debug === true) {
2756
- this.log("defined palette:");
2765
+ this.log("colors_defined:");
2766
this.log(this.colors_defined);
2767
}
2768
};
@@ -2762,14 +2771,27 @@ var NETDATA = window.NETDATA || {};
2771
// this includes user defined colors
2772
this.chartDefinedColors = function() {
2773
this.chartPrepareColorPalette();
2774
+
2775
+ if(this.debug === true) {
2776
+ this.log("chartDefinedColors() returns:");
2777
+ this.log(this.colors);
2778
+ }
2779
+
2780
return this.colors_defined;
2781
};
2782
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() {
2783
+ // get the ordered list of chart ASSIGNED colors
2784
+ // (this returns only the colors that have been
2785
+ // assigned to dimensions, prepended with any
2786
+ // custom colors defined)
2787
+ this.chartColors = function() {
2788
this.chartPrepareColorPalette();
2789
+
2790
+ if(this.debug === true) {
2791
+ this.log("chartColors() returns:");
2792
+ this.log(this.colors);
2793
+ }
2794
+
2795
return this.colors;
2796
};
2797
@@ -4158,12 +4180,12 @@ var NETDATA = window.NETDATA || {};
4180
NETDATA.peityChartUpdate = function(state, data) {
4181
state.peity_instance.innerHTML = data.result;
4182
4161
- if(state.peity_options.stroke !== state.chartDefinedColors()[0]) {
4162
- state.peity_options.stroke = state.chartDefinedColors()[0];
4183
+ if(state.peity_options.stroke !== state.chartColors()[0]) {
4184
+ state.peity_options.stroke = state.chartColors()[0];
4185
if(state.chart.chart_type === 'line')
4186
state.peity_options.fill = NETDATA.themes.current.background;
4187
else
4166
- state.peity_options.fill = NETDATA.colorLuminance(state.chartDefinedColors()[0], NETDATA.chartDefaults.fill_luminance);
4188
+ state.peity_options.fill = NETDATA.colorLuminance(state.chartColors()[0], NETDATA.chartDefaults.fill_luminance);
4189
}
4190
4191
$(state.peity_instance).peity('line', state.peity_options);
@@ -4228,7 +4250,7 @@ var NETDATA = window.NETDATA || {};
4250
NETDATA.sparklineChartCreate = function(state, data) {
4251
var self = $(state.element);
4252
var type = self.data('sparkline-type') || 'line';
4231
- var lineColor = self.data('sparkline-linecolor') || state.chartDefinedColors()[0];
4253
+ var lineColor = self.data('sparkline-linecolor') || state.chartColors()[0];
4254
var fillColor = self.data('sparkline-fillcolor') || ((state.chart.chart_type === 'line')?NETDATA.themes.current.background:NETDATA.colorLuminance(lineColor, NETDATA.chartDefaults.fill_luminance));
4255
var chartRangeMin = self.data('sparkline-chartrangemin') || undefined;
4256
var chartRangeMax = self.data('sparkline-chartrangemax') || undefined;
@@ -4443,7 +4465,7 @@ var NETDATA = window.NETDATA || {};
4465
4466
var options = {
4467
file: data.result.data,
4446
- colors: state.chartDimensionColors(),
4468
+ colors: state.chartColors(),
4469
labels: data.result.labels,
4470
labelsDivWidth: state.chartWidth() - 70,
4471
visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names)
@@ -4528,7 +4550,7 @@ var NETDATA = window.NETDATA || {};
4550
:false;
4551
4552
state.dygraph_options = {
4531
- colors: self.data('dygraph-colors') || state.chartDimensionColors(),
4553
+ colors: self.data('dygraph-colors') || state.chartColors(),
4554
4555
// leave a few pixels empty on the right of the chart
4556
rightGap: self.data('dygraph-rightgap')
@@ -5323,7 +5345,7 @@ var NETDATA = window.NETDATA || {};
5345
height: state.chartHeight()
5346
},
5347
color: {
5326
- pattern: state.chartDimensionColors()
5348
+ pattern: state.chartColors()
5349
},
5350
data: {
5351
x: 'time',
@@ -5453,7 +5475,7 @@ var NETDATA = window.NETDATA || {};
5475
var datatable = new google.visualization.DataTable(data.result);
5476
5477
state.google_options = {
5456
- colors: state.chartDimensionColors(),
5478
+ colors: state.chartColors(),
5479
5480
// do not set width, height - the chart resizes itself
5481
//width: state.chartWidth(),
@@ -5748,7 +5770,7 @@ var NETDATA = window.NETDATA || {};
5770
5771
var barColor = self.data('easypiechart-barcolor');
5772
if(typeof barColor === 'undefined' || barColor === null)
5751
- barColor = state.chartDefinedColors()[0];
5773
+ barColor = state.chartColors()[0];
5774
else {
5775
// <div ... data-easypiechart-barcolor="(function(percent){return(percent < 50 ? '#5cb85c' : percent < 85 ? '#f0ad4e' : '#cb3935');})" ...></div>
5776
var tmp = eval(barColor);
@@ -5979,7 +6001,7 @@ var NETDATA = window.NETDATA || {};
6001
var adjust = self.data('gauge-adjust') || null;
6002
var pointerColor = self.data('gauge-pointer-color') || NETDATA.themes.current.gauge_pointer;
6003
var strokeColor = self.data('gauge-stroke-color') || NETDATA.themes.current.gauge_stroke;
5982
- var startColor = self.data('gauge-start-color') || state.chartDefinedColors()[0];
6004
+ var startColor = self.data('gauge-start-color') || state.chartColors()[0];
6005
var stopColor = self.data('gauge-stop-color') || void 0;
6006
var generateGradient = self.data('gauge-generate-gradient') || false;
6007
web/demosites.html
+2
-2
@@ -921,7 +921,7 @@ p {
921
</div>
922
</div>
923
924
- <h3>Want more demos?</h3>
924
+ <h3>special demos</h3>
925
926
<div class="mygauge-combo30">
927
<div style="padding-bottom: 20px;">
@@ -1051,7 +1051,7 @@ p {
1051
data-width="100%"
1052
data-height="100%"
1053
data-after="-300"
1054
- data-colors="#558855 #558855 #558855"
1054
+ data-colors="#558855"
1055
data-show-value-of-persons-at="netdata.registry_entries.persons.netdata"
1056
></div>
1057
</div>
web/index.html
+1
-1
@@ -3543,4 +3543,4 @@
3543
</div>
3544
</body>
3545
</html>
3546
-<script type="text/javascript" src="dashboard.js?v20170426-6"></script>
3546
+<script type="text/javascript" src="dashboard.js?v20170503-1"></script>