detect slow browsers and lower charts detail and update frequency; fixes #212
Costa Tsaousis (ktsaou) committed
Feb 5, 2017 at 17:50 UTC
0534a2056633fe586fa3fa5220e8d38997222f96
2 files changed
+200
-93
web/dashboard.js
+199
-92
@@ -218,6 +218,30 @@ var NETDATA = window.NETDATA || {};
218
if(netdataRegistry === false && typeof netdataRegistryCallback === 'function')
219
netdataRegistry = true;
220
221
+
222
+ // ----------------------------------------------------------------------------------------------------------------
223
+ // detect if this is probably a slow device
224
+
225
+ var isSlowDeviceResult = undefined;
226
+ var isSlowDevice = function() {
227
+ if(isSlowDeviceResult !== undefined)
228
+ return isSlowDeviceResult;
229
+
230
+ try {
231
+ var ua = navigator.userAgent.toLowerCase();
232
+
233
+ var iOS = /ipad|iphone|ipod/.test(ua) && !window.MSStream;
234
+ var android = /android/.test(ua) && !window.MSStream;
235
+ isSlowDeviceResult = (iOS === true || android === true);
236
+ }
237
+ catch (e) {
238
+ isSlowDeviceResult = false;
239
+ }
240
+
241
+ console.log('isSlowDevice(): ' + isSlowDeviceResult);
242
+ return isSlowDeviceResult;
243
+ };
244
+
245
// ----------------------------------------------------------------------------------------------------------------
246
// the defaults for all charts
247
@@ -271,7 +295,7 @@ var NETDATA = window.NETDATA || {};
295
// the current profile
296
// we may have many...
297
current: {
274
- pixels_per_point: 1, // the minimum pixels per point for all charts
298
+ pixels_per_point: isSlowDevice()?5:1, // the minimum pixels per point for all charts
299
// increase this to speed javascript up
300
// each chart library has its own limit too
301
// the max of this and the chart library is used
@@ -313,11 +337,11 @@ var NETDATA = window.NETDATA || {};
337
338
update_only_visible: true, // enable or disable visibility management
339
316
- parallel_refresher: true, // enable parallel refresh of charts
340
+ parallel_refresher: (isSlowDevice() === false), // enable parallel refresh of charts
341
342
concurrent_refreshes: true, // when parallel_refresher is enabled, sync also the charts
343
320
- destroy_on_hide: false, // destroy charts when they are not visible
344
+ destroy_on_hide: (isSlowDevice() === true), // destroy charts when they are not visible
345
346
show_help: netdataShowHelp, // when enabled the charts will show some help
347
show_help_delay_show_ms: 500,
@@ -330,7 +354,7 @@ var NETDATA = window.NETDATA || {};
354
355
double_click_speed: 500, // ms - time between clicks / taps to detect double click/tap
356
333
- smooth_plot: true, // enable smooth plot, where possible
357
+ smooth_plot: (isSlowDevice() === false), // enable smooth plot, where possible
358
359
charts_selection_animation_delay: 50, // delay to animate charts when syncing selection
360
@@ -4186,101 +4210,184 @@ var NETDATA = window.NETDATA || {};
4210
4211
var self = $(state.element);
4212
4189
- var chart_type = state.chart.chart_type;
4213
+ var chart_type = self.data('dygraph-type') || state.chart.chart_type;
4214
if(chart_type === 'stacked' && data.dimensions === 1) chart_type = 'area';
4191
- chart_type = self.data('dygraph-type') || chart_type;
4215
4193
- var smooth = (chart_type === 'line' && NETDATA.chartLibraries.dygraph.isSparkline(state) === false);
4194
- smooth = self.data('dygraph-smooth') || smooth;
4216
+ var highlightCircleSize = (NETDATA.chartLibraries.dygraph.isSparkline(state) === true)?3:4;
4217
4196
- if(NETDATA.dygraph.smooth === false)
4197
- smooth = false;
4198
-
4199
- var strokeWidth = (chart_type === 'stacked')?0.1:((smooth)?1.5:0.7);
4200
- var highlightCircleSize = (NETDATA.chartLibraries.dygraph.isSparkline(state))?3:4;
4218
+ var smooth = (NETDATA.dygraph.smooth === true)
4219
+ ?(self.data('dygraph-smooth') || (chart_type === 'line' && NETDATA.chartLibraries.dygraph.isSparkline(state) === false))
4220
+ :false;
4221
4222
state.dygraph_options = {
4203
- colors: self.data('dygraph-colors') || state.chartColors(),
4223
+ colors: self.data('dygraph-colors') || state.chartColors(),
4224
4225
// leave a few pixels empty on the right of the chart
4206
- rightGap: self.data('dygraph-rightgap') || 5,
4207
- showRangeSelector: self.data('dygraph-showrangeselector') || false,
4208
- showRoller: self.data('dygraph-showroller') || false,
4209
-
4210
- title: self.data('dygraph-title') || state.title,
4211
- titleHeight: self.data('dygraph-titleheight') || 19,
4212
-
4213
- legend: self.data('dygraph-legend') || 'always', // we need this to get selection events
4214
- labels: data.result.labels,
4215
- labelsDiv: self.data('dygraph-labelsdiv') || state.element_legend_childs.hidden,
4216
- labelsDivStyles: self.data('dygraph-labelsdivstyles') || { 'fontSize':'1px' },
4217
- labelsDivWidth: self.data('dygraph-labelsdivwidth') || state.chartWidth() - 70,
4218
- labelsSeparateLines: self.data('dygraph-labelsseparatelines') || true,
4219
- labelsShowZeroValues: self.data('dygraph-labelsshowzerovalues') || true,
4220
- labelsKMB: false,
4221
- labelsKMG2: false,
4222
- showLabelsOnHighlight: self.data('dygraph-showlabelsonhighlight') || true,
4223
- hideOverlayOnMouseOut: self.data('dygraph-hideoverlayonmouseout') || true,
4224
-
4225
- includeZero: self.data('dygraph-includezero') || (chart_type === 'stacked'),
4226
- xRangePad: self.data('dygraph-xrangepad') || 0,
4227
- yRangePad: self.data('dygraph-yrangepad') || 1,
4228
-
4229
- valueRange: self.data('dygraph-valuerange') || [ null, null ],
4230
-
4231
- ylabel: state.units,
4232
- yLabelWidth: self.data('dygraph-ylabelwidth') || 12,
4233
-
4234
- // the function to plot the chart
4235
- plotter: null,
4236
-
4237
- // The width of the lines connecting data points. This can be used to increase the contrast or some graphs.
4238
- strokeWidth: self.data('dygraph-strokewidth') || strokeWidth,
4239
- strokePattern: self.data('dygraph-strokepattern') || undefined,
4240
-
4241
- // The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is "isolated",
4242
- // i.e. there is a missing point on either side of it. This also controls the size of those dots.
4243
- drawPoints: self.data('dygraph-drawpoints') || false,
4244
-
4245
- // Draw points at the edges of gaps in the data. This improves visibility of small data segments or other data irregularities.
4246
- drawGapEdgePoints: self.data('dygraph-drawgapedgepoints') || true,
4247
-
4248
- connectSeparatedPoints: self.data('dygraph-connectseparatedpoints') || false,
4249
- pointSize: self.data('dygraph-pointsize') || 1,
4250
-
4251
- // enabling this makes the chart with little square lines
4252
- stepPlot: self.data('dygraph-stepplot') || false,
4253
-
4254
- // Draw a border around graph lines to make crossing lines more easily distinguishable. Useful for graphs with many lines.
4255
- strokeBorderColor: self.data('dygraph-strokebordercolor') || NETDATA.themes.current.background,
4256
- strokeBorderWidth: self.data('dygraph-strokeborderwidth') || (chart_type === 'stacked')?0.0:0.0,
4257
-
4258
- fillGraph: self.data('dygraph-fillgraph') || (chart_type === 'area' || chart_type === 'stacked'),
4259
- fillAlpha: self.data('dygraph-fillalpha') || ((chart_type === 'stacked')?NETDATA.options.current.color_fill_opacity_stacked:NETDATA.options.current.color_fill_opacity_area),
4260
- stackedGraph: self.data('dygraph-stackedgraph') || (chart_type === 'stacked'),
4261
- stackedGraphNaNFill: self.data('dygraph-stackedgraphnanfill') || 'none',
4262
-
4263
- drawAxis: self.data('dygraph-drawaxis') || true,
4264
- axisLabelFontSize: self.data('dygraph-axislabelfontsize') || 10,
4265
- axisLineColor: self.data('dygraph-axislinecolor') || NETDATA.themes.current.axis,
4266
- axisLineWidth: self.data('dygraph-axislinewidth') || 1.0,
4267
-
4268
- drawGrid: self.data('dygraph-drawgrid') || true,
4269
- gridLinePattern: self.data('dygraph-gridlinepattern') || null,
4270
- gridLineWidth: self.data('dygraph-gridlinewidth') || 1.0,
4271
- gridLineColor: self.data('dygraph-gridlinecolor') || NETDATA.themes.current.grid,
4272
-
4273
- maxNumberWidth: self.data('dygraph-maxnumberwidth') || 8,
4274
- sigFigs: self.data('dygraph-sigfigs') || null,
4275
- digitsAfterDecimal: self.data('dygraph-digitsafterdecimal') || 2,
4276
- valueFormatter: self.data('dygraph-valueformatter') || function(x){ return x.toFixed(2); },
4277
-
4278
- highlightCircleSize: self.data('dygraph-highlightcirclesize') || highlightCircleSize,
4279
- highlightSeriesOpts: self.data('dygraph-highlightseriesopts') || null, // TOO SLOW: { strokeWidth: 1.5 },
4280
- highlightSeriesBackgroundAlpha: self.data('dygraph-highlightseriesbackgroundalpha') || null, // TOO SLOW: (chart_type === 'stacked')?0.7:0.5,
4281
-
4282
- pointClickCallback: self.data('dygraph-pointclickcallback') || undefined,
4283
- visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names),
4226
+ rightGap: self.data('dygraph-rightgap')
4227
+ || 5,
4228
+
4229
+ showRangeSelector: self.data('dygraph-showrangeselector')
4230
+ || false,
4231
+
4232
+ showRoller: self.data('dygraph-showroller')
4233
+ || false,
4234
+
4235
+ title: self.data('dygraph-title')
4236
+ || state.title,
4237
+
4238
+ titleHeight: self.data('dygraph-titleheight')
4239
+ || 19,
4240
+
4241
+ legend: self.data('dygraph-legend')
4242
+ || 'always', // we need this to get selection events
4243
+
4244
+ labels: data.result.labels,
4245
+
4246
+ labelsDiv: self.data('dygraph-labelsdiv')
4247
+ || state.element_legend_childs.hidden,
4248
+
4249
+ labelsDivStyles: self.data('dygraph-labelsdivstyles')
4250
+ || { 'fontSize':'1px' },
4251
+
4252
+ labelsDivWidth: self.data('dygraph-labelsdivwidth')
4253
+ || state.chartWidth() - 70,
4254
+
4255
+ labelsSeparateLines: self.data('dygraph-labelsseparatelines')
4256
+ || true,
4257
+
4258
+ labelsShowZeroValues: self.data('dygraph-labelsshowzerovalues')
4259
+ || true,
4260
+
4261
+ labelsKMB: false,
4262
+ labelsKMG2: false,
4263
+
4264
+ showLabelsOnHighlight: self.data('dygraph-showlabelsonhighlight')
4265
+ || true,
4266
+
4267
+ hideOverlayOnMouseOut: self.data('dygraph-hideoverlayonmouseout')
4268
+ || true,
4269
+
4270
+ includeZero: self.data('dygraph-includezero')
4271
+ || (chart_type === 'stacked'),
4272
+
4273
+ xRangePad: self.data('dygraph-xrangepad')
4274
+ || 0,
4275
+
4276
+ yRangePad: self.data('dygraph-yrangepad')
4277
+ || 1,
4278
+
4279
+ valueRange: self.data('dygraph-valuerange')
4280
+ || [ null, null ],
4281
+
4282
+ ylabel: state.units,
4283
+
4284
+ yLabelWidth: self.data('dygraph-ylabelwidth')
4285
+ || 12,
4286
+
4287
+ // the function to plot the chart
4288
+ plotter: null,
4289
+
4290
+ // The width of the lines connecting data points.
4291
+ // This can be used to increase the contrast or some graphs.
4292
+ strokeWidth: self.data('dygraph-strokewidth')
4293
+ || ((chart_type === 'stacked')?0.1:((smooth === true)?1.5:0.7)),
4294
+
4295
+ strokePattern: self.data('dygraph-strokepattern')
4296
+ || undefined,
4297
+
4298
+ // The size of the dot to draw on each point in pixels (see drawPoints).
4299
+ // A dot is always drawn when a point is "isolated",
4300
+ // i.e. there is a missing point on either side of it.
4301
+ // This also controls the size of those dots.
4302
+ drawPoints: self.data('dygraph-drawpoints')
4303
+ || false,
4304
+
4305
+ // Draw points at the edges of gaps in the data.
4306
+ // This improves visibility of small data segments or other data irregularities.
4307
+ drawGapEdgePoints: self.data('dygraph-drawgapedgepoints')
4308
+ || true,
4309
+
4310
+ connectSeparatedPoints: self.data('dygraph-connectseparatedpoints')
4311
+ || false,
4312
+
4313
+ pointSize: self.data('dygraph-pointsize')
4314
+ || 1,
4315
+
4316
+ // enabling this makes the chart with little square lines
4317
+ stepPlot: self.data('dygraph-stepplot')
4318
+ || false,
4319
+
4320
+ // Draw a border around graph lines to make crossing lines more easily
4321
+ // distinguishable. Useful for graphs with many lines.
4322
+ strokeBorderColor: self.data('dygraph-strokebordercolor')
4323
+ || NETDATA.themes.current.background,
4324
+
4325
+ strokeBorderWidth: self.data('dygraph-strokeborderwidth')
4326
+ || (chart_type === 'stacked')?0.0:0.0,
4327
+
4328
+ fillGraph: self.data('dygraph-fillgraph')
4329
+ || (chart_type === 'area' || chart_type === 'stacked'),
4330
+
4331
+ fillAlpha: self.data('dygraph-fillalpha')
4332
+ || ((chart_type === 'stacked')
4333
+ ?NETDATA.options.current.color_fill_opacity_stacked
4334
+ :NETDATA.options.current.color_fill_opacity_area),
4335
+
4336
+ stackedGraph: self.data('dygraph-stackedgraph')
4337
+ || (chart_type === 'stacked'),
4338
+
4339
+ stackedGraphNaNFill: self.data('dygraph-stackedgraphnanfill')
4340
+ || 'none',
4341
+
4342
+ drawAxis: self.data('dygraph-drawaxis')
4343
+ || true,
4344
+
4345
+ axisLabelFontSize: self.data('dygraph-axislabelfontsize')
4346
+ || 10,
4347
+
4348
+ axisLineColor: self.data('dygraph-axislinecolor')
4349
+ || NETDATA.themes.current.axis,
4350
+
4351
+ axisLineWidth: self.data('dygraph-axislinewidth')
4352
+ || 1.0,
4353
+
4354
+ drawGrid: self.data('dygraph-drawgrid')
4355
+ || true,
4356
+
4357
+ gridLinePattern: self.data('dygraph-gridlinepattern')
4358
+ || null,
4359
+
4360
+ gridLineWidth: self.data('dygraph-gridlinewidth')
4361
+ || 1.0,
4362
+
4363
+ gridLineColor: self.data('dygraph-gridlinecolor')
4364
+ || NETDATA.themes.current.grid,
4365
+
4366
+ maxNumberWidth: self.data('dygraph-maxnumberwidth')
4367
+ || 8,
4368
+
4369
+ sigFigs: self.data('dygraph-sigfigs')
4370
+ || null,
4371
+
4372
+ digitsAfterDecimal: self.data('dygraph-digitsafterdecimal')
4373
+ || 2,
4374
+
4375
+ valueFormatter: self.data('dygraph-valueformatter')
4376
+ || function(x){ return x.toFixed(2); },
4377
+
4378
+ highlightCircleSize: self.data('dygraph-highlightcirclesize')
4379
+ || highlightCircleSize,
4380
+
4381
+ highlightSeriesOpts: self.data('dygraph-highlightseriesopts')
4382
+ || null, // TOO SLOW: { strokeWidth: 1.5 },
4383
+
4384
+ highlightSeriesBackgroundAlpha: self.data('dygraph-highlightseriesbackgroundalpha')
4385
+ || null, // TOO SLOW: (chart_type === 'stacked')?0.7:0.5,
4386
+
4387
+ pointClickCallback: self.data('dygraph-pointclickcallback')
4388
+ || undefined,
4389
+
4390
+ visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names),
4391
axes: {
4392
x: {
4393
pixelsPerLabel: 50,
web/index.html
+1
-1
@@ -3312,4 +3312,4 @@
3312
</div>
3313
</body>
3314
</html>
3315
-<script type="text/javascript" src="dashboard.js?v20170205-1"></script>
3315
+<script type="text/javascript" src="dashboard.js?v20170205-4"></script>