UI: Improve 'Simple value chart card' autoscale.

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

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