dashboard optimizations; faster hover; bigger legend fonts
Costa Tsaousis (ktsaou) committed
Dec 26, 2016 at 22:09 UTC
ff6e4e79605df01ea970746e83d354a500337be0
4 files changed
+85
-44
web/dashboard.css
+7
-7
@@ -176,20 +176,20 @@ body {
176
}
177
.netdata-legend-title-units {
178
position: absolute;
179
- right: 5px;
179
+ right: 7px;
180
float: right;
181
- font-size: 10px;
181
+ font-size: 11px;
182
vertical-align: top;
183
font-weight: normal;
184
margin-top: 0px;
185
}
186
.netdata-legend-series {
187
position: absolute;
188
- width: 140px; /* --legend-width */
188
+ width: 140px; /* legend-width */
189
height: calc(100% - 50px);
190
overflow: hidden;
191
text-overflow: ellipsis;
192
- line-height: 14px;
192
+ line-height: 14.5px; /* line spacing at the legend */
193
display: block;
194
font-size: 10px;
195
margin-top: 0px;
@@ -279,7 +279,7 @@ body {
279
}
280
.netdata-legend-name {
281
text-align: left;
282
- font-size: 10px;
282
+ font-size: 11px; /* legend: dimension name size */
283
font-weight: bold;
284
vertical-align: bottom;
285
margin-top: 0px;
@@ -297,10 +297,10 @@ body {
297
.netdata-legend-value {
298
/*margin-left: 14px;*/
299
position: absolute;
300
- right: 5px;
300
+ right: 7px;
301
float: right;
302
text-align: right;
303
- font-size: 10px;
303
+ font-size: 11px; /* legend: dimension value size */
304
font-weight: bold;
305
vertical-align: bottom;
306
background-color: White;
web/dashboard.js
+70
-29
@@ -126,7 +126,7 @@
126
NETDATA.themes = {
127
white: {
128
bootstrap_css: NETDATA.serverDefault + 'css/bootstrap-3.3.7.css',
129
- dashboard_css: NETDATA.serverDefault + 'dashboard.css?v20161002-1',
129
+ dashboard_css: NETDATA.serverDefault + 'dashboard.css?v20161226-1',
130
background: '#FFFFFF',
131
foreground: '#000000',
132
grid: '#F0F0F0',
@@ -143,7 +143,7 @@
143
},
144
slate: {
145
bootstrap_css: NETDATA.serverDefault + 'css/bootstrap-slate-flat-3.3.7.css?v20161218-2',
146
- dashboard_css: NETDATA.serverDefault + 'dashboard.slate.css?v20161218-1',
146
+ dashboard_css: NETDATA.serverDefault + 'dashboard.slate.css?v20161226-1',
147
background: '#272b30',
148
foreground: '#C8C8C8',
149
grid: '#283236',
@@ -2197,6 +2197,10 @@
2197
if(typeof series === 'undefined') return;
2198
if(series.value === null && series.user === null) return;
2199
2200
+ /*
2201
+ // this slows down firefox and edge significantly
2202
+ // since it requires to use innerHTML(), instead of innerText()
2203
+
2204
// if the value has not changed, skip DOM update
2205
//if(series.last === value) return;
2206
@@ -2211,15 +2215,48 @@
2215
else s += '<i class="fa fa-angle-left" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
2216
}
2217
else s += '<i class="fa fa-angle-right" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
2218
+
2219
series.last = v;
2220
}
2221
else {
2217
- s = r = value;
2222
+ if(value === null)
2223
+ s = r = '';
2224
+ else
2225
+ s = r = value;
2226
+
2227
series.last = value;
2228
}
2229
+ */
2230
+
2231
+ var s = this.legendFormatValue(value);
2232
+
2233
+ // caching: do not update the update to show the same value again
2234
+ if(s === series.last_shown_value) return;
2235
+ series.last_shown_value = s;
2236
2221
- if(series.value !== null) series.value.innerHTML = s;
2222
- if(series.user !== null) series.user.innerHTML = r;
2237
+ if(series.value !== null) series.value.innerText = s;
2238
+ if(series.user !== null) series.user.innerText = s;
2239
+ };
2240
+
2241
+ this.__legendSetDateString = function(date) {
2242
+ if(date !== this.__last_shown_legend_date) {
2243
+ this.element_legend_childs.title_date.innerText = date;
2244
+ this.__last_shown_legend_date = date;
2245
+ }
2246
+ };
2247
+
2248
+ this.__legendSetTimeString = function(time) {
2249
+ if(time !== this.__last_shown_legend_time) {
2250
+ this.element_legend_childs.title_time.innerText = time;
2251
+ this.__last_shown_legend_time = time;
2252
+ }
2253
+ };
2254
+
2255
+ this.__legendSetUnitsString = function(units) {
2256
+ if(units !== this.__last_shown_legend_units) {
2257
+ this.element_legend_childs.title_units.innerText = units;
2258
+ this.__last_shown_legend_units = units;
2259
+ }
2260
};
2261
2262
this.legendSetDate = function(ms) {
@@ -2231,24 +2268,24 @@
2268
var d = new Date(ms);
2269
2270
if(this.element_legend_childs.title_date)
2234
- this.element_legend_childs.title_date.innerHTML = d.toLocaleDateString();
2271
+ this.__legendSetDateString(d.toLocaleDateString());
2272
2273
if(this.element_legend_childs.title_time)
2237
- this.element_legend_childs.title_time.innerHTML = d.toLocaleTimeString();
2274
+ this.__legendSetTimeString(d.toLocaleTimeString());
2275
2276
if(this.element_legend_childs.title_units)
2240
- this.element_legend_childs.title_units.innerHTML = this.units;
2277
+ this.__legendSetUnitsString(this.units)
2278
};
2279
2280
this.legendShowUndefined = function() {
2281
if(this.element_legend_childs.title_date)
2245
- this.element_legend_childs.title_date.innerHTML = ' ';
2282
+ this.__legendSetDateString(' ');
2283
2284
if(this.element_legend_childs.title_time)
2248
- this.element_legend_childs.title_time.innerHTML = this.chart.name;
2285
+ this.__legendSetTimeString(this.chart.name);
2286
2287
if(this.element_legend_childs.title_units)
2251
- this.element_legend_childs.title_units.innerHTML = ' ';
2288
+ this.__legendSetUnitsString(' ')
2289
2290
if(this.data && this.element_legend_childs.series !== null) {
2291
var labels = this.data.dimension_names;
@@ -2439,7 +2476,8 @@
2476
name: document.createElement('span'),
2477
value: document.createElement('span'),
2478
user: user_element,
2442
- last: null
2479
+ last: null,
2480
+ last_shown_value: null
2481
};
2482
2483
var label = state.element_legend_childs.series[name];
@@ -3009,7 +3047,7 @@
3047
NETDATA.options.auto_refresher_fast_weight += this.refresh_dt_ms;
3048
3049
if(this.refresh_dt_element !== null)
3012
- this.refresh_dt_element.innerHTML = this.refresh_dt_ms.toString();
3050
+ this.refresh_dt_element.innerText = this.refresh_dt_ms.toString();
3051
};
3052
3053
this.updateChart = function(callback) {
@@ -4207,9 +4245,12 @@
4245
return NETDATA.zeropad(d.getHours()) + ":" + NETDATA.zeropad(d.getMinutes()) + ":" + NETDATA.zeropad(d.getSeconds());
4246
},
4247
valueFormatter: function (ms) {
4210
- var d = new Date(ms);
4211
- return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
4212
- // return NETDATA.zeropad(d.getHours()) + ":" + NETDATA.zeropad(d.getMinutes()) + ":" + NETDATA.zeropad(d.getSeconds());
4248
+ //var d = new Date(ms);
4249
+ //return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
4250
+
4251
+ // no need to return anything here
4252
+ return ' ';
4253
+
4254
}
4255
},
4256
y: {
@@ -4235,8 +4276,8 @@
4276
var i = data.series.length;
4277
while(i--) {
4278
var series = data.series[i];
4238
- if(!series.isVisible) continue;
4239
- state.legendSetLabelValue(series.label, series.y);
4279
+ if(series.isVisible === true)
4280
+ state.legendSetLabelValue(series.label, series.y);
4281
}
4282
}
4283
@@ -5085,7 +5126,7 @@
5126
NETDATA.easypiechartChartUpdate(state, state.data);
5127
}
5128
else {
5088
- state.easyPieChartLabel.innerHTML = state.legendFormatValue(null);
5129
+ state.easyPieChartLabel.innerText = state.legendFormatValue(null);
5130
state.easyPieChart_instance.update(0);
5131
}
5132
state.easyPieChart_instance.enableAnimation();
@@ -5116,7 +5157,7 @@
5157
5158
state.easyPieChartEvent.value = value;
5159
state.easyPieChartEvent.pcent = pcent;
5119
- state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
5160
+ state.easyPieChartLabel.innerText = state.legendFormatValue(value);
5161
5162
if(state.easyPieChartEvent.timer === null) {
5163
state.easyPieChart_instance.disableAnimation();
@@ -5144,7 +5185,7 @@
5185
pcent = NETDATA.easypiechartPercentFromValueMinMax(value, min, max);
5186
}
5187
5147
- state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
5188
+ state.easyPieChartLabel.innerText = state.legendFormatValue(value);
5189
state.easyPieChart_instance.update(pcent);
5190
return true;
5191
};
@@ -5194,7 +5235,7 @@
5235
var valuetop = Math.round((size - valuefontsize - (size / 40)) / 2);
5236
state.easyPieChartLabel = document.createElement('span');
5237
state.easyPieChartLabel.className = 'easyPieChartLabel';
5197
- state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
5238
+ state.easyPieChartLabel.innerText = state.legendFormatValue(value);
5239
state.easyPieChartLabel.style.fontSize = valuefontsize + 'px';
5240
state.easyPieChartLabel.style.top = valuetop.toString() + 'px';
5241
state.element_chart.appendChild(state.easyPieChartLabel);
@@ -5203,7 +5244,7 @@
5244
var titletop = Math.round(valuetop - (titlefontsize * 2) - (size / 40));
5245
state.easyPieChartTitle = document.createElement('span');
5246
state.easyPieChartTitle.className = 'easyPieChartTitle';
5206
- state.easyPieChartTitle.innerHTML = state.title;
5247
+ state.easyPieChartTitle.innerText = state.title;
5248
state.easyPieChartTitle.style.fontSize = titlefontsize + 'px';
5249
state.easyPieChartTitle.style.lineHeight = titlefontsize + 'px';
5250
state.easyPieChartTitle.style.top = titletop.toString() + 'px';
@@ -5213,7 +5254,7 @@
5254
var unittop = Math.round(valuetop + (valuefontsize + unitfontsize) + (size / 40));
5255
state.easyPieChartUnits = document.createElement('span');
5256
state.easyPieChartUnits.className = 'easyPieChartUnits';
5216
- state.easyPieChartUnits.innerHTML = state.units;
5257
+ state.easyPieChartUnits.innerText = state.units;
5258
state.easyPieChartUnits.style.fontSize = unitfontsize + 'px';
5259
state.easyPieChartUnits.style.top = unittop.toString() + 'px';
5260
state.element_chart.appendChild(state.easyPieChartUnits);
@@ -5337,15 +5378,15 @@
5378
NETDATA.gaugeSetLabels = function(state, value, min, max) {
5379
if(state.___gaugeOld__.valueLabel !== value) {
5380
state.___gaugeOld__.valueLabel = value;
5340
- state.gaugeChartLabel.innerHTML = state.legendFormatValue(value);
5381
+ state.gaugeChartLabel.innerText = state.legendFormatValue(value);
5382
}
5383
if(state.___gaugeOld__.minLabel !== min) {
5384
state.___gaugeOld__.minLabel = min;
5344
- state.gaugeChartMin.innerHTML = state.legendFormatValue(min);
5385
+ state.gaugeChartMin.innerText = state.legendFormatValue(min);
5386
}
5387
if(state.___gaugeOld__.maxLabel !== max) {
5388
state.___gaugeOld__.maxLabel = max;
5348
- state.gaugeChartMax.innerHTML = state.legendFormatValue(max);
5389
+ state.gaugeChartMax.innerText = state.legendFormatValue(max);
5390
}
5391
};
5392
@@ -5555,7 +5596,7 @@
5596
var titletop = 0;
5597
state.gaugeChartTitle = document.createElement('span');
5598
state.gaugeChartTitle.className = 'gaugeChartTitle';
5558
- state.gaugeChartTitle.innerHTML = state.title;
5599
+ state.gaugeChartTitle.innerText = state.title;
5600
state.gaugeChartTitle.style.fontSize = titlefontsize + 'px';
5601
state.gaugeChartTitle.style.lineHeight = titlefontsize + 'px';
5602
state.gaugeChartTitle.style.top = titletop.toString() + 'px';
@@ -5564,7 +5605,7 @@
5605
var unitfontsize = Math.round(titlefontsize * 0.9);
5606
state.gaugeChartUnits = document.createElement('span');
5607
state.gaugeChartUnits.className = 'gaugeChartUnits';
5567
- state.gaugeChartUnits.innerHTML = state.units;
5608
+ state.gaugeChartUnits.innerText = state.units;
5609
state.gaugeChartUnits.style.fontSize = unitfontsize + 'px';
5610
state.element_chart.appendChild(state.gaugeChartUnits);
5611
web/dashboard.slate.css
+7
-7
@@ -190,20 +190,20 @@ code {
190
}
191
.netdata-legend-title-units {
192
position: absolute;
193
- right: 5px;
193
+ right: 7px;
194
float: right;
195
- font-size: 10px;
195
+ font-size: 11px;
196
vertical-align: top;
197
font-weight: normal;
198
margin-top: 0px;
199
}
200
.netdata-legend-series {
201
position: absolute;
202
- width: 140px; /* --legend-width */
202
+ width: 140px; /* legend-width */
203
height: calc(100% - 50px);
204
overflow: hidden;
205
text-overflow: ellipsis;
206
- line-height: 14px;
206
+ line-height: 14.5px; /* line spacing at the legend */
207
display: block;
208
font-size: 10px;
209
margin-top: 0px;
@@ -293,7 +293,7 @@ code {
293
}
294
.netdata-legend-name {
295
text-align: left;
296
- font-size: 10px;
296
+ font-size: 11px; /* legend: dimension name size */
297
font-weight: bold;
298
vertical-align: bottom;
299
margin-top: 0px;
@@ -311,10 +311,10 @@ code {
311
.netdata-legend-value {
312
/*margin-left: 14px;*/
313
position: absolute;
314
- right: 5px;
314
+ right: 7px;
315
float: right;
316
text-align: right;
317
- font-size: 10px;
317
+ font-size: 11px; /* legend: dimension value size */
318
font-weight: bold;
319
vertical-align: bottom;
320
background-color: #272b30;
web/index.html
+1
-1
@@ -3188,4 +3188,4 @@
3188
</div>
3189
</body>
3190
</html>
3191
-<script type="text/javascript" src="dashboard.js?v20161219-1"></script>
3191
+<script type="text/javascript" src="dashboard.js?v20161226-1"></script>