added up/down indicators in legend values
Costa Tsaousis (ktsaou) committed
Dec 26, 2015 at 18:02 UTC
2bc669342dcaa254efb40fee11268102e65aab53
3 files changed
+374
-327
web/dashboard.css
+317
-301
@@ -1,301 +1,317 @@
1
-html {
2
- font-family: sans-serif;
3
-}
4
-
5
-.netdata-chart-alignment {
6
- margin-left: 55px;
7
-}
8
-
9
-.netdata-container {
10
- display: -webkit-flex; /* Safari */
11
- -webkit-flex-wrap: wrap; /* Safari 6.1+ */
12
- display: inline-block;
13
- flex-wrap: wrap;
14
- overflow: hidden;
15
-
16
- /* required for child elements to have absolute position */
17
- position: relative;
18
-
19
- /* width and height is given per chart with data-width and data-height */
20
-}
21
-
22
-.netdata-legend-resize-handler {
23
- display: block;
24
- position: absolute;
25
- bottom: 0px;
26
- right: 0px;
27
- height: 15px;
28
- width: 30px;
29
- background-color: White;
30
- font-size: 12px;
31
- vertical-align: middle;
32
- line-height: 15px;
33
- cursor: ns-resize;
34
- color: #DDDDDD;
35
- text-align: center;
36
- overflow: hidden;
37
- z-index: 11;
38
- padding: 0px;
39
- margin: 0px;
40
-}
41
-
42
-.netdata-message {
43
- display: none;
44
- font-size: x-small;
45
- width: 100%;
46
- height: calc(100% - 10px); /* for the resize handler */
47
- overflow: hidden;
48
- background: inherit;
49
- z-index: 10000;
50
-}
51
-
52
-.netdata-chart-is-loading {
53
- display: none;
54
- font-size: x-small;
55
- width: 100%;
56
- overflow: hidden;
57
- background: white;
58
- z-index: 10000;
59
-}
60
-
61
-.netdata-error-message {
62
- background: #EEEEEE;
63
-}
64
-
65
-.netdata-info-message {
66
-}
67
-
68
-.netdata-chart-legend {
69
- position: absolute; /* within .netdata-container */
70
- top: 0;
71
- right: 0;
72
- background-color: white;
73
- overflow: hidden;
74
- text-overflow: ellipsis;
75
- line-height: 14px;
76
- display: block;
77
- width: 120px; /* --legend-width */
78
- height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
79
- font-size: 10px;
80
- margin-top: 5px;
81
- /* width and height is calculated (depends on the appearance of the legend) */
82
-}
83
-
84
-.netdata-legend-title-date {
85
- font-size: 10px;
86
- font-weight: normal;
87
- margin-top: 0px;
88
-}
89
-.netdata-legend-title-time {
90
- font-size: 11px;
91
- font-weight: bold;
92
- margin-top: 0px;
93
-}
94
-.netdata-legend-title-units {
95
- position: absolute;
96
- right: 5px;
97
- float: right;
98
- font-size: 10px;
99
- vertical-align: top;
100
- font-weight: normal;
101
- margin-top: 0px;
102
-}
103
-.netdata-legend-series {
104
- position: absolute;
105
- width: 120px; /* --legend-width */
106
- height: calc(100% - 50px);
107
- overflow: hidden;
108
- text-overflow: ellipsis;
109
- line-height: 14px;
110
- display: block;
111
- font-size: 10px;
112
- margin-top: 0px;
113
-}
114
-
115
-.netdata-legend-series > .netdata-legend-series-content {
116
- position : absolute;
117
- overflow : scroll;
118
- overflow-x : hidden;
119
- top : 0;
120
- right : 0;
121
- bottom : 0;
122
- left : 0;
123
- text-overflow: ellipsis;
124
-}
125
-.netdata-legend-series > .netdata-legend-series-content:focus {
126
- outline: thin dotted;
127
-}
128
-.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
129
- display: block; /* was 'none', but chrome was hidding content with it */
130
-}
131
-.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
132
- display: block;
133
-}
134
-.netdata-legend-series > .netdata-legend-series-pane {
135
-/* background : rgba(0,0,0,.25);*/
136
- background : #DDD;
137
- position : absolute;
138
- width : 4px;
139
- right : 0;
140
- top : 0;
141
- bottom : 0;
142
-/* visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
143
-/* opacity : .01; */
144
-/* -webkit-transition : .2s; */
145
-/* -moz-transition : .2s; */
146
-/* -o-transition : .2s; */
147
-/* transition : .2s; */
148
- -moz-border-radius : 4px;
149
- -webkit-border-radius : 4px;
150
- border-radius : 4px;
151
-}
152
-.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
153
- background : #444;
154
-/* background : rgba(0,0,0,.5);*/
155
- position : relative;
156
- margin : 0 1px;
157
- -moz-border-radius : 2px;
158
- -webkit-border-radius : 2px;
159
- border-radius : 2px;
160
-}
161
-.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
162
-/* visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
163
-/* opacity : 0.99;*/
164
-}
165
-
166
-.netdata-legend-name-table-line {
167
- display: inline-block;
168
- width: 13px;
169
- height: 4px;
170
- border-width: 0px;
171
- border-bottom-width: 2px;
172
- border-bottom-style: solid;
173
- border-bottom-color: white;
174
-}
175
-.netdata-legend-name-table-area {
176
- display: inline-block;
177
- width: 13px;
178
- height: 5px;
179
- border-width: 1px;
180
- border-top-width: 1px;
181
- border-top-style: solid;
182
- border-top-color: inherit;
183
-}
184
-.netdata-legend-name-table-stacked {
185
- display: inline-block;
186
- width: 13px;
187
- height: 5px;
188
- border-width: 1px;
189
- border-top-width: 1px;
190
- border-top-style: solid;
191
- border-top-color: inherit;
192
-}
193
-.netdata-legend-name-tr {
194
-}
195
-.netdata-legend-name-td {
196
-}
197
-.netdata-legend-name {
198
- text-align: left;
199
- font-size: 10px;
200
- font-weight: bold;
201
- vertical-align: bottom;
202
- margin-top: 0px;
203
- z-index: 9;
204
- padding: 0px;
205
- width: 80px !important;
206
- max-width: 80px !important;
207
- text-overflow: ellipsis;
208
- overflow: hidden;
209
- white-space: nowrap;
210
- display: inline-block;
211
- cursor: pointer;
212
-}
213
-
214
-.netdata-legend-value {
215
- /*margin-left: 14px;*/
216
- position: absolute;
217
- right: 5px;
218
- float: right;
219
- text-align: right;
220
- font-size: 10px;
221
- font-weight: bold;
222
- vertical-align: bottom;
223
- background-color: White;
224
- margin-top: 0px;
225
- z-index: 10;
226
- padding: 0px;
227
- padding-left: 15px;
228
- cursor: pointer;
229
-}
230
-.netdata-legend-name.not-selected {
231
- font-weight: normal;
232
- opacity: 0.3;
233
-}
234
-
235
-.netdata-chart {
236
- position: absolute; /* within .netdata-container */
237
- top: 0; /* within .netdata-container */
238
- left: 0; /* within .netdata-container */
239
- display: inline-block;
240
- overflow: hidden;
241
- width: 100%;
242
- height: 100%;
243
-
244
- /* width and height is calculated (depends on the appearance of the legend) */
245
-}
246
-
247
-.netdata-chart-with-legend-right {
248
- position: absolute; /* within .netdata-container */
249
- top: 0; /* within .netdata-container */
250
- left: 0; /* within .netdata-container */
251
- display: block;
252
- overflow: hidden;
253
- margin-right: 120px; /* --legend-width */
254
- width: calc(100% - 120px); /* --legend-width */
255
- height: 100%;
256
- flex-grow: 1;
257
-
258
- /* width and height is calculated (depends on the appearance of the legend) */
259
-}
260
-
261
-.netdata-peity-chart {
262
-
263
-}
264
-
265
-.netdata-sparkline-chart {
266
-
267
-}
268
-
269
-.netdata-dygraph-chart {
270
-
271
-}
272
-
273
-.netdata-morris-chart {
274
-
275
-}
276
-
277
-.netdata-google-chart {
278
-
279
-}
280
-
281
-.dygraph-ylabel {
282
-}
283
-
284
-.dygraph-title {
285
- text-indent: 56px;
286
- text-align: left;
287
- position: absolute;
288
- left: 0px;
289
- top: 4px;
290
- font-size: 11px;
291
- font-weight: bold;
292
- text-overflow: ellipsis;
293
- overflow: hidden;
294
- white-space: nowrap;
295
-}
296
-
297
-/* fix for sparkline tooltip under bootstrap */
298
-.jqstooltip {
299
- width: auto !important;
300
- height: auto !important;
301
-}
1
+html {
2
+ font-family: sans-serif;
3
+}
4
+
5
+.netdata-chart-alignment {
6
+ margin-left: 55px;
7
+}
8
+
9
+.netdata-container {
10
+ display: -webkit-flex; /* Safari */
11
+ -webkit-flex-wrap: wrap; /* Safari 6.1+ */
12
+ display: inline-block;
13
+ flex-wrap: wrap;
14
+ overflow: hidden;
15
+
16
+ /* required for child elements to have absolute position */
17
+ position: relative;
18
+
19
+ /* width and height is given per chart with data-width and data-height */
20
+}
21
+
22
+.netdata-container-with-legend {
23
+ display: -webkit-flex; /* Safari */
24
+ -webkit-flex-wrap: wrap; /* Safari 6.1+ */
25
+ display: inline-block;
26
+ flex-wrap: wrap;
27
+ overflow: hidden;
28
+
29
+ /* fix minimum scrollbar issue in firefox */
30
+ min-height: 99px;
31
+
32
+ /* required for child elements to have absolute position */
33
+ position: relative;
34
+
35
+ /* width and height is given per chart with data-width and data-height */
36
+}
37
+
38
+.netdata-legend-resize-handler {
39
+ display: block;
40
+ position: absolute;
41
+ bottom: 0px;
42
+ right: 0px;
43
+ height: 15px;
44
+ width: 30px;
45
+ background-color: White;
46
+ font-size: 12px;
47
+ vertical-align: middle;
48
+ line-height: 15px;
49
+ cursor: ns-resize;
50
+ color: #DDDDDD;
51
+ text-align: center;
52
+ overflow: hidden;
53
+ z-index: 11;
54
+ padding: 0px;
55
+ margin: 0px;
56
+}
57
+
58
+.netdata-message {
59
+ display: none;
60
+ font-size: x-small;
61
+ width: 100%;
62
+ height: calc(100% - 10px); /* for the resize handler */
63
+ overflow: hidden;
64
+ background: inherit;
65
+ z-index: 10000;
66
+}
67
+
68
+.netdata-chart-is-loading {
69
+ display: none;
70
+ font-size: x-small;
71
+ width: 100%;
72
+ overflow: hidden;
73
+ background: white;
74
+ z-index: 10000;
75
+}
76
+
77
+.netdata-error-message {
78
+ background: #EEEEEE;
79
+}
80
+
81
+.netdata-info-message {
82
+}
83
+
84
+.netdata-chart-legend {
85
+ position: absolute; /* within .netdata-container */
86
+ top: 0;
87
+ right: 0;
88
+ background-color: white;
89
+ overflow: hidden;
90
+ text-overflow: ellipsis;
91
+ line-height: 14px;
92
+ display: block;
93
+ width: 140px; /* --legend-width */
94
+ height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
95
+ font-size: 10px;
96
+ margin-top: 5px;
97
+ /* width and height is calculated (depends on the appearance of the legend) */
98
+}
99
+
100
+.netdata-legend-title-date {
101
+ font-size: 10px;
102
+ font-weight: normal;
103
+ margin-top: 0px;
104
+}
105
+.netdata-legend-title-time {
106
+ font-size: 11px;
107
+ font-weight: bold;
108
+ margin-top: 0px;
109
+}
110
+.netdata-legend-title-units {
111
+ position: absolute;
112
+ right: 5px;
113
+ float: right;
114
+ font-size: 10px;
115
+ vertical-align: top;
116
+ font-weight: normal;
117
+ margin-top: 0px;
118
+}
119
+.netdata-legend-series {
120
+ position: absolute;
121
+ width: 140px; /* --legend-width */
122
+ height: calc(100% - 50px);
123
+ overflow: hidden;
124
+ text-overflow: ellipsis;
125
+ line-height: 14px;
126
+ display: block;
127
+ font-size: 10px;
128
+ margin-top: 0px;
129
+}
130
+
131
+.netdata-legend-series > .netdata-legend-series-content {
132
+ position : absolute;
133
+ overflow : scroll;
134
+ overflow-x : hidden;
135
+ top : 0;
136
+ right : 0;
137
+ bottom : 0;
138
+ left : 0;
139
+ text-overflow: ellipsis;
140
+}
141
+.netdata-legend-series > .netdata-legend-series-content:focus {
142
+ outline: thin dotted;
143
+}
144
+.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
145
+ display: block; /* was 'none', but chrome was hidding content with it */
146
+}
147
+.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
148
+ display: block;
149
+}
150
+.netdata-legend-series > .netdata-legend-series-pane {
151
+/* background : rgba(0,0,0,.25);*/
152
+ background : #DDD;
153
+ position : absolute;
154
+ width : 4px;
155
+ right : 0;
156
+ top : 0;
157
+ bottom : 0;
158
+/* visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
159
+/* opacity : .01; */
160
+/* -webkit-transition : .2s; */
161
+/* -moz-transition : .2s; */
162
+/* -o-transition : .2s; */
163
+/* transition : .2s; */
164
+ -moz-border-radius : 4px;
165
+ -webkit-border-radius : 4px;
166
+ border-radius : 4px;
167
+}
168
+.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
169
+ background : #444;
170
+/* background : rgba(0,0,0,.5);*/
171
+ position : relative;
172
+ margin : 0 1px;
173
+ -moz-border-radius : 2px;
174
+ -webkit-border-radius : 2px;
175
+ border-radius : 2px;
176
+}
177
+.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
178
+/* visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
179
+/* opacity : 0.99;*/
180
+}
181
+
182
+.netdata-legend-name-table-line {
183
+ display: inline-block;
184
+ width: 13px;
185
+ height: 4px;
186
+ border-width: 0px;
187
+ border-bottom-width: 2px;
188
+ border-bottom-style: solid;
189
+ border-bottom-color: white;
190
+}
191
+.netdata-legend-name-table-area {
192
+ display: inline-block;
193
+ width: 13px;
194
+ height: 5px;
195
+ border-width: 1px;
196
+ border-top-width: 1px;
197
+ border-top-style: solid;
198
+ border-top-color: inherit;
199
+}
200
+.netdata-legend-name-table-stacked {
201
+ display: inline-block;
202
+ width: 13px;
203
+ height: 5px;
204
+ border-width: 1px;
205
+ border-top-width: 1px;
206
+ border-top-style: solid;
207
+ border-top-color: inherit;
208
+}
209
+.netdata-legend-name-tr {
210
+}
211
+.netdata-legend-name-td {
212
+}
213
+.netdata-legend-name {
214
+ text-align: left;
215
+ font-size: 10px;
216
+ font-weight: bold;
217
+ vertical-align: bottom;
218
+ margin-top: 0px;
219
+ z-index: 9;
220
+ padding: 0px;
221
+ width: 80px !important;
222
+ max-width: 80px !important;
223
+ text-overflow: ellipsis;
224
+ overflow: hidden;
225
+ white-space: nowrap;
226
+ display: inline-block;
227
+ cursor: pointer;
228
+}
229
+
230
+.netdata-legend-value {
231
+ /*margin-left: 14px;*/
232
+ position: absolute;
233
+ right: 5px;
234
+ float: right;
235
+ text-align: right;
236
+ font-size: 10px;
237
+ font-weight: bold;
238
+ vertical-align: bottom;
239
+ background-color: White;
240
+ margin-top: 0px;
241
+ z-index: 10;
242
+ padding: 0px;
243
+ padding-left: 15px;
244
+ cursor: pointer;
245
+}
246
+.netdata-legend-name.not-selected {
247
+ font-weight: normal;
248
+ opacity: 0.3;
249
+}
250
+
251
+.netdata-chart {
252
+ position: absolute; /* within .netdata-container */
253
+ top: 0; /* within .netdata-container */
254
+ left: 0; /* within .netdata-container */
255
+ display: inline-block;
256
+ overflow: hidden;
257
+ width: 100%;
258
+ height: 100%;
259
+
260
+ /* width and height is calculated (depends on the appearance of the legend) */
261
+}
262
+
263
+.netdata-chart-with-legend-right {
264
+ position: absolute; /* within .netdata-container */
265
+ top: 0; /* within .netdata-container */
266
+ left: 0; /* within .netdata-container */
267
+ display: block;
268
+ overflow: hidden;
269
+ margin-right: 140px; /* --legend-width */
270
+ width: calc(100% - 140px); /* --legend-width */
271
+ height: 100%;
272
+ flex-grow: 1;
273
+
274
+ /* width and height is calculated (depends on the appearance of the legend) */
275
+}
276
+
277
+.netdata-peity-chart {
278
+
279
+}
280
+
281
+.netdata-sparkline-chart {
282
+
283
+}
284
+
285
+.netdata-dygraph-chart {
286
+
287
+}
288
+
289
+.netdata-morris-chart {
290
+
291
+}
292
+
293
+.netdata-google-chart {
294
+
295
+}
296
+
297
+.dygraph-ylabel {
298
+}
299
+
300
+.dygraph-title {
301
+ text-indent: 56px;
302
+ text-align: left;
303
+ position: absolute;
304
+ left: 0px;
305
+ top: 4px;
306
+ font-size: 11px;
307
+ font-weight: bold;
308
+ text-overflow: ellipsis;
309
+ overflow: hidden;
310
+ white-space: nowrap;
311
+}
312
+
313
+/* fix for sparkline tooltip under bootstrap */
314
+.jqstooltip {
315
+ width: auto !important;
316
+ height: auto !important;
317
+}
web/dashboard.js
+56
-25
@@ -945,6 +945,7 @@
945
// - resize the chart as the div changes height
946
// - update the scrollbar of the legend
947
chartState.prototype.resizeAndRedrawChart = function(h) {
948
+ // console.log(h);
949
this.element.style.height = h;
950
951
if(this.settings_id !== null)
@@ -1392,14 +1393,29 @@
1393
if(typeof series === 'undefined') return;
1394
if(series.value === null && series.user === null) return;
1395
1395
- value = this.legendFormatValue(value);
1396
-
1396
// if the value has not changed, skip DOM update
1398
- if(series.last === value) return;
1399
- series.last = value;
1397
+ //if(series.last === value) return;
1398
+
1399
+ var s, r;
1400
+ if(typeof value === 'number') {
1401
+ var v = Math.abs(value);
1402
+ s = r = this.legendFormatValue(value);
1403
1401
- if(series.value !== null) series.value.innerHTML = value;
1402
- if(series.user !== null) series.user.innerHTML = value;
1404
+ if(typeof series.last === 'number') {
1405
+ if(v > series.last) s += '<i class="fa fa-angle-up" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
1406
+ else if(v < series.last) s += '<i class="fa fa-angle-down" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
1407
+ else s += '<i class="fa fa-angle-left" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
1408
+ }
1409
+ else s += '<i class="fa fa-angle-right" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
1410
+ series.last = v;
1411
+ }
1412
+ else {
1413
+ s = r = value;
1414
+ series.last = value;
1415
+ }
1416
+
1417
+ if(series.value !== null) series.value.innerHTML = s;
1418
+ if(series.user !== null) series.user.innerHTML = r;
1419
}
1420
1421
chartState.prototype.legendSetDate = function(ms) {
@@ -1456,10 +1472,12 @@
1472
if(Math.abs(this.data.last_entry - this.data.before) <= this.data.view_update_every)
1473
show_undefined = false;
1474
1459
- if(show_undefined)
1475
+ if(show_undefined) {
1476
this.legendShowUndefined();
1461
- else
1462
- this.legendSetDate(this.data.before * 1000);
1477
+ return;
1478
+ }
1479
+
1480
+ this.legendSetDate(this.data.before * 1000);
1481
1482
var labels = this.data.dimension_names;
1483
var i = labels.length;
@@ -1565,10 +1583,10 @@
1583
if(this.debug === true)
1584
this.log('chart in running... updating values on legend...');
1585
1568
- var labels = this.data.dimension_names;
1569
- var i = labels.length;
1570
- while(i--)
1571
- this.legendSetLabelValue(labels[i], this.data.latest_values[i]);
1586
+ //var labels = this.data.dimension_names;
1587
+ //var i = labels.length;
1588
+ //while(i--)
1589
+ // this.legendSetLabelValue(labels[i], this.data.latest_values[i]);
1590
}
1591
return;
1592
}
@@ -1647,7 +1665,8 @@
1665
flashedClass: '__flashed',
1666
activeClass: '__active',
1667
tabIndex: -1,
1650
- alwaysVisible: true
1668
+ alwaysVisible: true,
1669
+ sliderMinHeight: 10
1670
},
1671
series: {}
1672
};
@@ -1787,7 +1806,7 @@
1806
}
1807
1808
chartState.prototype.legendWidth = function() {
1790
- return (this.hasLegend())?110:0;
1809
+ return (this.hasLegend())?140:0;
1810
}
1811
1812
chartState.prototype.legendHeight = function() {
@@ -1989,7 +2008,7 @@
2008
}
2009
}
2010
}
1992
- this.legendShowLatestValues();
2011
+ // this.legendShowLatestValues();
2012
2013
// update the performance counters
2014
var now = new Date().getTime();
@@ -2415,7 +2434,10 @@
2434
// resize the chart to its real dimensions
2435
// as given by the caller
2436
chartState.prototype.sizeChart = function() {
2418
- this.element.className += " netdata-container";
2437
+ if(this.hasLegend() === true)
2438
+ this.element.className += " netdata-container-with-legend";
2439
+ else
2440
+ this.element.className += " netdata-container";
2441
2442
if(this.debug === true)
2443
this.log('sizing element');
@@ -2472,8 +2494,6 @@
2494
if(this.debug === null)
2495
this.log('created');
2496
2475
- this.sizeChart();
2476
-
2497
// make sure the host does not end with /
2498
// all netdata API requests use absolute paths
2499
while(this.host.slice(-1) === '/')
@@ -2493,6 +2513,8 @@
2513
else
2514
this.library = NETDATA.chartLibraries[this.library_name];
2515
2516
+ this.sizeChart();
2517
+
2518
// if we need to report the rendering speed
2519
// find the element that needs to be updated
2520
if(this.refresh_dt_element_name)
@@ -3164,7 +3186,7 @@
3186
if(NETDATA.dygraph.smooth === false)
3187
smooth = false;
3188
3167
- var strokeWidth = (chart_type === 'stacked')?0.0:((smooth)?1.5:1.0)
3189
+ var strokeWidth = (chart_type === 'stacked')?0.1:((smooth)?1.5:0.7)
3190
var highlightCircleSize = (NETDATA.chartLibraries.dygraph.isSparkline(state))?3:4;
3191
3192
state.dygraph_options = {
@@ -3181,7 +3203,7 @@
3203
legend: self.data('dygraph-legend') || 'always', // 'onmouseover',
3204
labels: data.result.labels,
3205
labelsDiv: self.data('dygraph-labelsdiv') || state.element_legend_childs.hidden,
3184
- labelsDivStyles: self.data('dygraph-labelsdivstyles') || { 'fontSize':'10px', 'zIndex': 10000 },
3206
+ labelsDivStyles: self.data('dygraph-labelsdivstyles') || { 'fontSize':'1px' },
3207
labelsDivWidth: self.data('dygraph-labelsdivwidth') || state.chartWidth() - 70,
3208
labelsSeparateLines: self.data('dygraph-labelsseparatelines') || true,
3209
labelsShowZeroValues: self.data('dygraph-labelsshowzerovalues') || true,
@@ -3217,8 +3239,8 @@
3239
strokeBorderColor: self.data('dygraph-strokebordercolor') || 'white',
3240
strokeBorderWidth: self.data('dygraph-strokeborderwidth') || (chart_type === 'stacked')?0.0:0.0,
3241
3220
- fillGraph: self.data('dygraph-fillgraph') || (chart_type === 'area')?true:false,
3221
- fillAlpha: self.data('dygraph-fillalpha') || (chart_type === 'stacked')?0.8:0.2,
3242
+ fillGraph: self.data('dygraph-fillgraph') || (chart_type === 'area' || chart_type === 'stacked')?true:false,
3243
+ fillAlpha: self.data('dygraph-fillalpha') || (chart_type === 'stacked')?NETDATA.options.current.color_fill_opacity_stacked:NETDATA.options.current.color_fill_opacity_area,
3244
stackedGraph: self.data('dygraph-stackedgraph') || (chart_type === 'stacked')?true:false,
3245
stackedGraphNaNFill: self.data('dygraph-stackedgraphnanfill') || 'none',
3246
@@ -3278,7 +3300,7 @@
3300
if(elements.hidden === null) return;
3301
3302
if (typeof data.x === 'undefined') {
3281
- state.legendReset();
3303
+ //state.legendReset();
3304
}
3305
else {
3306
state.legendSetDate(data.x);
@@ -3788,6 +3810,8 @@
3810
var datatable = new google.visualization.DataTable(data.result);
3811
3812
state.google_options = {
3813
+ colors: state.chartColors(),
3814
+
3815
// do not set width, height - the chart resizes itself
3816
//width: state.chartWidth(),
3817
//height: state.chartHeight(),
@@ -3850,12 +3874,13 @@
3874
switch(state.chart.chart_type) {
3875
case "area":
3876
state.google_options.vAxis.viewWindowMode = 'maximized';
3877
+ state.google_options.areaOpacity = NETDATA.options.current.color_fill_opacity_area;
3878
state.google_instance = new google.visualization.AreaChart(state.element_chart);
3879
break;
3880
3881
case "stacked":
3882
state.google_options.isStacked = true;
3858
- state.google_options.areaOpacity = 0.85;
3883
+ state.google_options.areaOpacity = NETDATA.options.current.color_fill_opacity_stacked;
3884
state.google_options.vAxis.viewWindowMode = 'maximized';
3885
state.google_options.vAxis.minValue = null;
3886
state.google_options.vAxis.maxValue = null;
@@ -3978,6 +4003,7 @@
4003
initialize: NETDATA.sparklineInitialize,
4004
create: NETDATA.sparklineChartCreate,
4005
update: NETDATA.sparklineChartUpdate,
4006
+ resize: null,
4007
setSelection: function(t) { return true; },
4008
clearSelection: function() { return true; },
4009
initialized: false,
@@ -3994,6 +4020,7 @@
4020
initialize: NETDATA.peityInitialize,
4021
create: NETDATA.peityChartCreate,
4022
update: NETDATA.peityChartUpdate,
4023
+ resize: null,
4024
setSelection: function(t) { return true; },
4025
clearSelection: function() { return true; },
4026
initialized: false,
@@ -4010,6 +4037,7 @@
4037
initialize: NETDATA.morrisInitialize,
4038
create: NETDATA.morrisChartCreate,
4039
update: NETDATA.morrisChartUpdate,
4040
+ resize: null,
4041
setSelection: function(t) { return true; },
4042
clearSelection: function() { return true; },
4043
initialized: false,
@@ -4026,6 +4054,7 @@
4054
initialize: NETDATA.googleInitialize,
4055
create: NETDATA.googleChartCreate,
4056
update: NETDATA.googleChartUpdate,
4057
+ resize: null,
4058
setSelection: function(t) { return true; },
4059
clearSelection: function() { return true; },
4060
initialized: false,
@@ -4042,6 +4071,7 @@
4071
initialize: NETDATA.raphaelInitialize,
4072
create: NETDATA.raphaelChartCreate,
4073
update: NETDATA.raphaelChartUpdate,
4074
+ resize: null,
4075
setSelection: function(t) { return true; },
4076
clearSelection: function() { return true; },
4077
initialized: false,
@@ -4058,6 +4088,7 @@
4088
initialize: NETDATA.easypiechartInitialize,
4089
create: NETDATA.easypiechartChartCreate,
4090
update: NETDATA.easypiechartChartUpdate,
4091
+ resize: null,
4092
setSelection: function(t) { return true; },
4093
clearSelection: function() { return true; },
4094
initialized: false,
web/index.html
+1
-1
@@ -253,7 +253,7 @@
253
<!-- <script> netdataServer = "http://box:19999"; </script> -->
254
255
<!-- load the dashboard manager - it will do the rest -->
256
- <script type="text/javascript" src="dashboard.js?v7"></script>
256
+ <script type="text/javascript" src="dashboard.js?v8"></script>
257
</head>
258
259
<body data-spy="scroll" data-target="#sidebar">