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

UI: Improve 'Simple value chart card' autoscale.

Browse Source
This commit is contained in:
Igor Kulikov 2023-10-20 17:54:11 +03:00
parent e5dfd33752
commit da11ac58fa
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
View File

@ -49,9 +49,8 @@ import { DataKey } from '@shared/models/widget.models';
import { TbFlotKeySettings, TbFlotSettings } from '@home/components/widget/lib/flot-widget.models'; import { TbFlotKeySettings, TbFlotSettings } from '@home/components/widget/lib/flot-widget.models';
import { getTsValueByLatestDataKey } from '@home/components/widget/lib/cards/aggregated-value-card.models'; import { getTsValueByLatestDataKey } from '@home/components/widget/lib/cards/aggregated-value-card.models';
const layoutWidth = 218; const layoutHeight = 56;
const layoutValueWidth = 68; const valueRelativeMaxWidth = 0.5;
const valueRelativeWidth = layoutValueWidth / layoutWidth;
@Component({ @Component({
selector: 'tb-value-chart-card-widget', selector: 'tb-value-chart-card-widget',
@ -92,12 +91,13 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
private flotDataKey: DataKey; private flotDataKey: DataKey;
private valueKey: DataKey; private valueKey: DataKey;
private contentResize$: ResizeObserver; private contentResize$: ResizeObserver;
private decimals = 0; private decimals = 0;
private units = ''; private units = '';
private valueFontSize: number;
constructor(private renderer: Renderer2, constructor(private renderer: Renderer2,
private widgetComponent: WidgetComponent, private widgetComponent: WidgetComponent,
private cd: ChangeDetectorRef) { private cd: ChangeDetectorRef) {
@ -214,29 +214,35 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
this.flot.destroy(); this.flot.destroy();
} }
private onResize(fitMaxWidth = true) { private onResize(fitTargetHeight = true) {
if (this.settings.autoScale && this.showValue) { if (this.settings.autoScale && this.showValue) {
const contentWidth = this.valueChartCardContent.nativeElement.getBoundingClientRect().width; const contentWidth = this.valueChartCardContent.nativeElement.getBoundingClientRect().width;
const contentHeight = this.valueChartCardContent.nativeElement.getBoundingClientRect().height; const contentHeight = this.valueChartCardContent.nativeElement.getBoundingClientRect().height;
const targetValueWidth = valueRelativeWidth * contentWidth; if (!this.valueFontSize) {
this.setValueFontSize(targetValueWidth, contentHeight, fitMaxWidth); const fontSize = getComputedStyle(this.valueChartCardValue.nativeElement).fontSize;
this.valueFontSize = resolveCssSize(fontSize)[0];
}
const valueRelativeHeight = Math.min(this.valueFontSize / layoutHeight, 1);
const targetValueHeight = contentHeight * valueRelativeHeight;
const maxValueWidth = contentWidth * valueRelativeMaxWidth;
this.setValueFontSize(targetValueHeight, maxValueWidth, fitTargetHeight);
} }
this.flot.resize(); this.flot.resize();
} }
private setValueFontSize(maxWidth: number, maxHeight: number, fitMaxWidth = true) { private setValueFontSize(targetHeight: number, maxWidth: number, fitTargetHeight = true) {
const fontSize = getComputedStyle(this.valueChartCardValue.nativeElement).fontSize; const fontSize = getComputedStyle(this.valueChartCardValue.nativeElement).fontSize;
let valueFontSize = resolveCssSize(fontSize)[0]; let valueFontSize = resolveCssSize(fontSize)[0];
this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'fontSize', valueFontSize + 'px'); this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'fontSize', valueFontSize + 'px');
this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'lineHeight', '1'); this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'lineHeight', '1');
let valueWidth = this.valueChartCardValue.nativeElement.getBoundingClientRect().width; let valueHeight = this.valueChartCardValue.nativeElement.getBoundingClientRect().height;
while (fitMaxWidth && valueWidth < maxWidth) { while (fitTargetHeight && valueHeight < targetHeight) {
valueFontSize++; valueFontSize++;
this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'fontSize', valueFontSize + 'px'); this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'fontSize', valueFontSize + 'px');
valueWidth = this.valueChartCardValue.nativeElement.getBoundingClientRect().width; valueHeight = this.valueChartCardValue.nativeElement.getBoundingClientRect().height;
} }
let valueHeight = this.valueChartCardValue.nativeElement.getBoundingClientRect().height; let valueWidth = this.valueChartCardValue.nativeElement.getBoundingClientRect().width;
while ((valueWidth > maxWidth || valueHeight > maxHeight) && valueFontSize > 6) { while ((valueHeight > targetHeight || valueWidth > maxWidth) && valueFontSize > 6) {
valueFontSize--; valueFontSize--;
this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'fontSize', valueFontSize + 'px'); this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'fontSize', valueFontSize + 'px');
valueWidth = this.valueChartCardValue.nativeElement.getBoundingClientRect().width; valueWidth = this.valueChartCardValue.nativeElement.getBoundingClientRect().width;