From 1cc9bc01a4dfd63eb90523690008f08f9533b6b3 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 19 Oct 2017 17:28:39 +0300 Subject: [PATCH] UI: Fix minor issues in Flot widget. --- ui/package.json | 4 +- ui/src/app/api/telemetry-websocket.service.js | 4 + ui/src/app/widget/lib/flot-widget.js | 161 ++++++++++++------ 3 files changed, 115 insertions(+), 54 deletions(-) diff --git a/ui/package.json b/ui/package.json index 768c03d46c..cb8fdbd913 100644 --- a/ui/package.json +++ b/ui/package.json @@ -51,7 +51,7 @@ "clipboard": "^1.5.15", "compass-sass-mixins": "^0.12.7", "event-source-polyfill": "0.0.9", - "flot": "git://github.com/flot/flot.git#0.9-work", + "flot": "git://github.com/thingsboard/flot.git#0.9-work", "flot-curvedlines": "git://github.com/MichaelZinsmaier/CurvedLines.git#master", "font-awesome": "^4.6.3", "javascript-detect-element-resize": "^0.5.3", @@ -108,7 +108,7 @@ "html-loader": "^0.4.3", "html-minifier": "^3.2.2", "html-minifier-loader": "^1.3.4", - "html-webpack-plugin": "^2.22.0", + "html-webpack-plugin": "^2.30.1", "img-loader": "^1.3.1", "less": "^2.7.1", "less-loader": "^2.2.3", diff --git a/ui/src/app/api/telemetry-websocket.service.js b/ui/src/app/api/telemetry-websocket.service.js index 74f7bfdb07..f84d66d3dd 100644 --- a/ui/src/app/api/telemetry-websocket.service.js +++ b/ui/src/app/api/telemetry-websocket.service.js @@ -241,6 +241,10 @@ function TelemetryWebsocketService($rootScope, $websocket, $timeout, $window, ty } } } + var index = reconnectSubscribers.indexOf(subscriber); + if (index > -1) { + reconnectSubscribers.splice(index, 1); + } subscribersCount--; publishCommands(); } diff --git a/ui/src/app/widget/lib/flot-widget.js b/ui/src/app/widget/lib/flot-widget.js index 54fd799244..59787cf920 100644 --- a/ui/src/app/widget/lib/flot-widget.js +++ b/ui/src/app/widget/lib/flot-widget.js @@ -480,10 +480,9 @@ export default class TbFlot { ? this.subscription.data[i].data[0][1] : 0; } this.pieDataRendered(); - this.ctx.plot = $.plot(this.$element, this.pieData, this.options); - } else { - this.ctx.plot = $.plot(this.$element, this.subscription.data, this.options); } + this.ctx.plotInited = true; + this.createPlot(); } createYAxis(keySettings, units) { @@ -578,16 +577,13 @@ export default class TbFlot { if (this.chartType === 'bar') { this.ctx.plot.getOptions().series.bars.barWidth = this.subscription.timeWindow.interval * 0.6; } - this.ctx.plot.setData(this.subscription.data); - this.ctx.plot.setupGrid(); - this.ctx.plot.draw(); + this.updateData(); } } else if (this.chartType === 'pie') { if (this.ctx.animatedPie) { this.nextPieDataAnimation(true); } else { - this.ctx.plot.setData(this.subscription.data); - this.ctx.plot.draw(); + this.updateData(); } } } else if (this.isMouseInteraction && this.ctx.plot){ @@ -599,13 +595,105 @@ export default class TbFlot { } } + updateData() { + this.ctx.plot.setData(this.subscription.data); + if (this.chartType !== 'pie') { + this.ctx.plot.setupGrid(); + } + this.ctx.plot.draw(); + } + resize() { + if (this.resizeTimeoutHandle) { + this.ctx.$scope.$timeout.cancel(this.resizeTimeoutHandle); + this.resizeTimeoutHandle = null; + } + if (this.ctx.plot && this.ctx.plotInited) { + var width = this.$element.width(); + var height = this.$element.height(); + if (width && height) { + this.ctx.plot.resize(); + if (this.chartType !== 'pie') { + this.ctx.plot.setupGrid(); + } + this.ctx.plot.draw(); + } else { + var tbFlot = this; + this.resizeTimeoutHandle = this.ctx.$scope.$timeout(function() { + tbFlot.resize(); + }, 30, false); + } + } + } + + + redrawPlot() { + if (this.ctx.plot && this.ctx.plotInited) { + this.ctx.plot.destroy(); + this.ctx.plot = null; + this.createPlot(); + } + } + + createPlot() { + if (this.createPlotTimeoutHandle) { + this.ctx.$scope.$timeout.cancel(this.createPlotTimeoutHandle); + this.createPlotTimeoutHandle = null; + } + if (this.ctx.plotInited && !this.ctx.plot) { + var width = this.$element.width(); + var height = this.$element.height(); + if (width && height) { + if (this.chartType === 'pie' && this.ctx.animatedPie) { + this.ctx.plot = $.plot(this.$element, this.pieData, this.options); + } else { + this.ctx.plot = $.plot(this.$element, this.subscription.data, this.options); + } + } else { + var tbFlot = this; + this.createPlotTimeoutHandle = this.ctx.$scope.$timeout(function() { + tbFlot.createPlot(); + }, 30, false); + } + } + } + + destroy() { + this.cleanup(); if (this.ctx.plot) { - this.ctx.plot.resize(); - if (this.chartType !== 'pie') { - this.ctx.plot.setupGrid(); + this.ctx.plot.destroy(); + this.ctx.plot = null; + this.ctx.plotInited = false; + } + } + + cleanup() { + if (this.updateTimeoutHandle) { + this.ctx.$scope.$timeout.cancel(this.updateTimeoutHandle); + this.updateTimeoutHandle = null; + } + if (this.createPlotTimeoutHandle) { + this.ctx.$scope.$timeout.cancel(this.createPlotTimeoutHandle); + this.createPlotTimeoutHandle = null; + } + if (this.resizeTimeoutHandle) { + this.ctx.$scope.$timeout.cancel(this.resizeTimeoutHandle); + this.resizeTimeoutHandle = null; + } + } + + checkMouseEvents() { + var enabled = !this.ctx.isMobile && !this.ctx.isEdit; + if (angular.isUndefined(this.mouseEventsEnabled) || this.mouseEventsEnabled != enabled) { + this.mouseEventsEnabled = enabled; + if (this.$element) { + if (enabled) { + this.enableMouseEvents(); + } else { + this.disableMouseEvents(); + } + this.redrawPlot(); } - this.ctx.plot.draw(); } } @@ -1020,46 +1108,6 @@ export default class TbFlot { } } - checkMouseEvents() { - var enabled = !this.ctx.isMobile && !this.ctx.isEdit; - if (angular.isUndefined(this.mouseEventsEnabled) || this.mouseEventsEnabled != enabled) { - this.mouseEventsEnabled = enabled; - if (this.$element) { - if (enabled) { - this.enableMouseEvents(); - } else { - this.disableMouseEvents(); - } - if (this.ctx.plot) { - this.ctx.plot.destroy(); - if (this.chartType === 'pie' && this.ctx.animatedPie) { - this.ctx.plot = $.plot(this.$element, this.pieData, this.options); - } else { - this.ctx.plot = $.plot(this.$element, this.subscription.data, this.options); - } - } - } - } - } - - redrawPlot() { - if (this.ctx.plot) { - this.ctx.plot.destroy(); - if (this.chartType === 'pie' && this.ctx.animatedPie) { - this.ctx.plot = $.plot(this.$element, this.pieData, this.options); - } else { - this.ctx.plot = $.plot(this.$element, this.subscription.data, this.options); - } - } - } - - destroy() { - if (this.ctx.plot) { - this.ctx.plot.destroy(); - this.ctx.plot = null; - } - } - enableMouseEvents() { this.$element.css('pointer-events',''); this.$element.addClass('mouse-events'); @@ -1069,6 +1117,9 @@ export default class TbFlot { if (!this.flotHoverHandler) { this.flotHoverHandler = function (event, pos, item) { + if (!tbFlot.ctx.plot) { + return; + } if (!tbFlot.ctx.tooltipIndividual || item) { var multipleModeTooltip = !tbFlot.ctx.tooltipIndividual; @@ -1128,6 +1179,9 @@ export default class TbFlot { if (!this.flotSelectHandler) { this.flotSelectHandler = function (event, ranges) { + if (!tbFlot.ctx.plot) { + return; + } tbFlot.ctx.plot.clearSelection(); tbFlot.subscription.onUpdateTimewindow(ranges.xaxis.from, ranges.xaxis.to); }; @@ -1153,6 +1207,9 @@ export default class TbFlot { } if (!this.mouseleaveHandler) { this.mouseleaveHandler = function () { + if (!tbFlot.ctx.plot) { + return; + } tbFlot.ctx.tooltip.stop(true); tbFlot.ctx.tooltip.hide(); tbFlot.ctx.plot.unhighlight();