From cff99ab843fd8518b7f21387629622b1a9a02f5c Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 28 Mar 2024 12:50:47 +0200
Subject: [PATCH] UI: Improve charts layout.

---
 .../bar-chart-with-labels-basic-config.component.html |  6 ++++++
 .../bar-chart-with-labels-basic-config.component.ts   |  2 ++
 .../chart/range-chart-basic-config.component.html     |  6 ++++++
 .../basic/chart/range-chart-basic-config.component.ts |  2 ++
 .../chart/bar-chart-with-labels-widget.component.html |  3 ++-
 .../chart/bar-chart-with-labels-widget.component.scss | 11 +++++++----
 .../chart/bar-chart-with-labels-widget.component.ts   |  4 ++++
 .../lib/chart/bar-chart-with-labels-widget.models.ts  |  4 +++-
 .../lib/chart/range-chart-widget.component.html       |  3 ++-
 .../lib/chart/range-chart-widget.component.scss       | 11 +++++++----
 .../widget/lib/chart/range-chart-widget.component.ts  |  4 ++++
 .../widget/lib/chart/range-chart-widget.models.ts     |  4 +++-
 .../components/widget/lib/chart/time-series-chart.ts  | 10 +++++++++-
 ...r-chart-with-labels-widget-settings.component.html |  6 ++++++
 ...bar-chart-with-labels-widget-settings.component.ts |  3 ++-
 .../chart/range-chart-widget-settings.component.html  |  6 ++++++
 .../chart/range-chart-widget-settings.component.ts    |  3 ++-
 17 files changed, 73 insertions(+), 15 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
index c98c9274cc..ca3d8a5b44 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
@@ -249,6 +249,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
index 78b0b6073b..8cdd89f01c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
@@ -136,6 +136,7 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -188,6 +189,7 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
index 5be56204fa..bb64c59302 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
@@ -223,6 +223,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
index 0add69096b..566dd4d86e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
@@ -117,6 +117,7 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -165,6 +166,7 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html
index c58dfdc90d..f48b8def30 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-bar-chart-panel" [style]="backgroundStyle$ | async">
+<div class="tb-bar-chart-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
   <div class="tb-bar-chart-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-bar-chart-content" [class]="legendClass">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.scss
index feb65353f6..ac7229672e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.scss
@@ -19,8 +19,10 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 20px 24px 24px 24px;
+  gap: 8px;
+  &.overlay {
+    padding: 20px 24px 24px 24px;
+  }
   > div:not(.tb-bar-chart-overlay) {
     z-index: 1;
   }
@@ -40,7 +42,7 @@
     min-height: 0;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 8px;
     &.legend-top {
       flex-direction: column-reverse;
     }
@@ -88,8 +90,9 @@
       }
     }
     &.legend-right, &.legend-left {
-      gap: 24px;
+      gap: 16px;
       .tb-bar-chart-legend {
+        padding-top: 8px;
         flex-direction: column-reverse;
         justify-content: flex-end;
         align-items: stretch;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
index 5aaa2671ea..b840f49e3b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
@@ -65,6 +65,8 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   legendKeys: DataKey[];
   legendLabelStyle: ComponentStyle;
@@ -84,6 +86,8 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     this.showLegend = this.settings.showLegend;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts
index 153a038d1e..8d99a7bd3f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts
@@ -44,6 +44,7 @@ export interface BarChartWithLabelsWidgetSettings extends EChartsTooltipWidgetSe
   legendLabelFont: Font;
   legendLabelColor: string;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const barChartWithLabelsDefaultSettings: BarChartWithLabelsWidgetSettings = {
@@ -110,7 +111,8 @@ export const barChartWithLabelsDefaultSettings: BarChartWithLabelsWidgetSettings
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
 
 export const barChartWithLabelsTimeSeriesSettings = (settings: BarChartWithLabelsWidgetSettings): DeepPartial<TimeSeriesChartSettings> => ({
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
index 6d3b6d43db..63a549bb48 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-range-chart-panel" [style]="backgroundStyle$ | async">
+<div class="tb-range-chart-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
   <div class="tb-range-chart-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-range-chart-content" [class]="legendClass">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.scss
index de2ca546fc..d956173281 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.scss
@@ -19,8 +19,10 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 20px 24px 24px 24px;
+  gap: 8px;
+  &.overlay {
+    padding: 20px 24px 24px 24px;
+  }
   > div:not(.tb-range-chart-overlay) {
     z-index: 1;
   }
@@ -40,7 +42,7 @@
     min-height: 0;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 8px;
     &.legend-top {
       flex-direction: column-reverse;
     }
@@ -88,8 +90,9 @@
       }
     }
     &.legend-right, &.legend-left {
-      gap: 24px;
+      gap: 16px;
       .tb-range-chart-legend {
+        padding-top: 8px;
         flex-direction: column-reverse;
         justify-content: flex-end;
         align-items: stretch;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
index 42c72d6526..9d89154111 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
@@ -73,6 +73,8 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   legendLabelStyle: ComponentStyle;
   disabledLegendLabelStyle: ComponentStyle;
@@ -110,6 +112,8 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     this.rangeItems = toRangeItems(this.settings.rangeColors);
     this.visibleRangeItems = this.rangeItems.filter(item => item.visible);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
index bff0c8fb1b..ee7b2835e6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
@@ -60,6 +60,7 @@ export interface RangeChartWidgetSettings extends EChartsTooltipWidgetSettings {
   legendLabelFont: Font;
   legendLabelColor: string;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
@@ -118,7 +119,8 @@ export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
 
 export const rangeChartTimeSeriesSettings = (settings: RangeChartWidgetSettings, rangeItems: RangeItem[],
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
index 4abd10a6e3..df8b74f898 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
@@ -333,7 +333,10 @@ export class TbTimeSeriesChart {
             timeSeriesChartKeyDefaultSettings, dataKey.settings);
           if ((keySettings.type === TimeSeriesChartSeriesType.line && keySettings.lineSettings.showPointLabel &&
               keySettings.lineSettings.pointLabelPosition === SeriesLabelPosition.top) ||
-            (keySettings.type === TimeSeriesChartSeriesType.bar && keySettings.barSettings.showLabel)) {
+            (keySettings.type === TimeSeriesChartSeriesType.bar &&
+              keySettings.barSettings.showLabel &&
+              [SeriesLabelPosition.top, SeriesLabelPosition.bottom]
+              .includes(keySettings.barSettings.labelPosition as SeriesLabelPosition))) {
             this.topPointLabels = true;
           }
           dataKey.settings = keySettings;
@@ -366,6 +369,11 @@ export class TbTimeSeriesChart {
     for (const thresholdSettings of this.settings.thresholds) {
       const threshold = mergeDeep<TimeSeriesChartThreshold>({} as TimeSeriesChartThreshold,
         timeSeriesChartThresholdDefaultSettings, thresholdSettings);
+      if (!this.topPointLabels) {
+        if (threshold.showLabel && !threshold.labelPosition.endsWith('Bottom')) {
+          this.topPointLabels = true;
+        }
+      }
       let latestDataKey: DataKey = null;
       let entityDataKey: DataKey = null;
       let value = null;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
index b20b941bd1..bc8044b957 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
@@ -154,5 +154,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts
index b69b023d34..f61a130e9d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts
@@ -88,7 +88,8 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
index cf5bbcfdd5..4a7331d4c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
@@ -144,5 +144,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
index f0870dbd80..4ef2971467 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
@@ -83,7 +83,8 @@ export class RangeChartWidgetSettingsComponent extends WidgetSettingsComponent {
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }