tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Fix minor issues in Flot widget.

pull/362/head
Igor Kulikov 9 years ago
parent
626eb75b82
commit
1cc9bc01a4
3 changed files with 115 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ui/package.json
  2. 4
      ui/src/app/api/telemetry-websocket.service.js
  3. 161
      ui/src/app/widget/lib/flot-widget.js

4
ui/package.json
View File

@ -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",

4
ui/src/app/api/telemetry-websocket.service.js
View File

@ -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();
}

161
ui/src/app/widget/lib/flot-widget.js
View File

@ -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();

Write Preview
Loading…
Cancel
Save