From da11ac58faa8125550067f38de9848a5a8dd9527 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 20 Oct 2023 17:54:11 +0300
Subject: [PATCH] UI: Improve 'Simple value chart card' autoscale.

---
 .../value-chart-card-widget.component.ts      | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
index 8b05847fb3..b187aa7969 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
+++ b/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;