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