From acc28245adcf74d845397161e7774d1e93c7bdbc Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Tue, 27 May 2025 12:15:06 +0300
Subject: [PATCH] UI: Hide zero tooltip for time series charts

---
 .../chart/time-series-chart-basic-config.component.html  | 5 +++++
 .../chart/time-series-chart-basic-config.component.ts    | 4 ++++
 .../widget/lib/chart/time-series-chart-tooltip.models.ts | 9 ++++++++-
 .../time-series-chart-widget-settings.component.html     | 5 +++++
 .../chart/time-series-chart-widget-settings.component.ts | 3 +++
 ui-ngx/src/assets/locale/locale.constant-en_US.json      | 1 +
 6 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
index 61c9f89c7c..ddf7216896 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
@@ -311,6 +311,11 @@
             </div>
           </mat-slide-toggle>
         </div>
+        <div class="tb-form-row">
+          <mat-slide-toggle class="mat-slide" formControlName="tooltipHideZeroFalse">
+              {{ 'tooltip.hide-zero-false-tooltip-values' | translate }}
+          </mat-slide-toggle>
+        </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.background-color' | translate }}</div>
           <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
index 9d5807c3d3..c0dd95913c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
@@ -188,6 +188,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       tooltipDateFont: [settings.tooltipDateFont, []],
       tooltipDateColor: [settings.tooltipDateColor, []],
       tooltipDateInterval: [settings.tooltipDateInterval, []],
+      tooltipHideZeroFalse: [settings.tooltipHideZeroFalse ,[]],
 
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
@@ -264,6 +265,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.settings.tooltipDateFont = config.tooltipDateFont;
     this.widgetConfig.config.settings.tooltipDateColor = config.tooltipDateColor;
     this.widgetConfig.config.settings.tooltipDateInterval = config.tooltipDateInterval;
+    this.widgetConfig.config.settings.tooltipHideZeroFalse = config.tooltipHideZeroFalse;
     this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor;
     this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur;
 
@@ -357,6 +359,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueFont').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false});
+      this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroFalse').enable({emitEvent: false});
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').enable();
       if (tooltipShowDate) {
@@ -381,6 +384,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       this.timeSeriesChartWidgetConfigForm.get('tooltipDateFont').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipDateColor').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipDateInterval').disable();
+      this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroFalse').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').disable();
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts
index ee4e5b4c70..f40e95276e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts
@@ -39,6 +39,7 @@ export interface TimeSeriesChartTooltipWidgetSettings {
   tooltipValueFormatter?: string | TimeSeriesChartTooltipValueFormatFunction;
   tooltipShowDate: boolean;
   tooltipDateInterval?: boolean;
+  tooltipHideZeroFalse?: boolean;
   tooltipDateFormat: DateFormatSettings;
   tooltipDateFont: Font;
   tooltipDateColor: string;
@@ -129,7 +130,13 @@ export class TimeSeriesChartTooltip {
         this.renderer.appendChild(tooltipItemsElement, this.constructTooltipDateElement(items[0].param, interval));
       }
       for (const item of items) {
-        this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
+        if (this.settings.tooltipHideZeroFalse) {
+          if (item.param.value[1]) {
+            this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
+          }
+        } else {
+          this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
+        }
       }
     }
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
index 9bbe3f6ec6..e433a7d739 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
@@ -235,6 +235,11 @@
               </div>
             </mat-slide-toggle>
           </div>
+          <div class="tb-form-row">
+            <mat-slide-toggle class="mat-slide" formControlName="tooltipHideZeroFalse">
+              {{ 'tooltip.hide-zero-false-tooltip-values' | translate }}
+            </mat-slide-toggle>
+          </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.background-color' | translate }}</div>
             <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
index f56fb6260d..45a65b875f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
@@ -163,6 +163,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       tooltipDateFont: [settings.tooltipDateFont, []],
       tooltipDateColor: [settings.tooltipDateColor, []],
       tooltipDateInterval: [settings.tooltipDateInterval, []],
+      tooltipHideZeroFalse: [settings.tooltipHideZeroFalse ,[]],
 
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
@@ -223,6 +224,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFormatter').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').enable({emitEvent: false});
+      this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroFalse').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable();
       if (tooltipShowDate) {
@@ -248,6 +250,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       this.timeSeriesChartWidgetSettingsForm.get('tooltipDateFont').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipDateColor').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipDateInterval').disable();
+      this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroFalse').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').disable();
     }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 5f6f882a49..abacfc3221 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -5863,6 +5863,7 @@
         "date": "Date",
         "show-date-time-interval": "Show date time interval",
         "show-date-time-interval-hint": "Show date time interval according to the data aggregation.",
+        "hide-zero-false-tooltip-values": "Hide zero/false values",
         "background-color": "Background color",
         "background-blur": "Background blur"
     },