Merge pull request #13442 from ArtemDzhereleiko/AD/imp/time-series-chart/hide-zero-tooltip

Hide zero tooltip for time series charts

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

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();
     }

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,9 @@ 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 || item.param.value[1]) {
+          this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
+        }
       }
     }
   }

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

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();
     }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -5878,6 +5878,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"
     },