dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6672 from kalutkaz/fix/pieFlotWidget

Browse Source 
[3.4] UI: Fix visual bugs in pie flot widget
This commit is contained in:
Igor Kulikov 2022-06-09 16:55:51 +03:00 committed by GitHub
commit 9afdd97363
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
application/src/main/data/json/system/widget_bundles/charts.json
View File

File diff suppressed because one or more lines are too long

33
ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
View File

@ -312,6 +312,9 @@ export class TbFlot {
if (this.settings.stroke) { if (this.settings.stroke) {
this.options.series.pie.stroke.color = this.settings.stroke.color || '#fff'; this.options.series.pie.stroke.color = this.settings.stroke.color || '#fff';
this.options.series.pie.stroke.width = this.settings.stroke.width || 0; this.options.series.pie.stroke.width = this.settings.stroke.width || 0;
if (this.options.series.pie.stroke.width) {
this.scalingPieRadius();
}
} }
if (this.options.series.pie.label.show) { if (this.options.series.pie.label.show) {
@ -690,22 +693,34 @@ export class TbFlot {
} }
} }
private scalingPieRadius() {
let scalingLine;
this.ctx.width > this.ctx.height ? scalingLine = this.ctx.height : scalingLine = this.ctx.width;
let changeRadius = this.options.series.pie.stroke.width / scalingLine;
this.options.series.pie.radius = changeRadius < 1 ? this.settings.radius - changeRadius : 0;
}
public resize() { public resize() {
if (this.resizeTimeoutHandle) { if (this.resizeTimeoutHandle) {
clearTimeout(this.resizeTimeoutHandle); clearTimeout(this.resizeTimeoutHandle);
this.resizeTimeoutHandle = null; this.resizeTimeoutHandle = null;
} }
if (this.plot && this.plotInited) { if (this.plot && this.plotInited) {
const width = this.$element.width(); if (this.chartType === 'pie' && this.settings.stroke?.width) {
const height = this.$element.height(); this.scalingPieRadius();
if (width && height) { this.redrawPlot();
this.plot.resize();
if (this.chartType !== 'pie') {
this.plot.setupGrid();
}
this.plot.draw();
} else { } else {
this.resizeTimeoutHandle = setTimeout(this.resize.bind(this), 30); const width = this.$element.width();
const height = this.$element.height();
if (width && height) {
this.plot.resize();
if (this.chartType !== 'pie') {
this.plot.setupGrid();
}
this.plot.draw();
} else {
this.resizeTimeoutHandle = setTimeout(this.resize.bind(this), 30);
}
} }
} }
} }