UI: Improve some widgets style.

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

@@ -48,7 +48,7 @@ import {
 import { TbFlot } from '@home/components/widget/lib/flot-widget';
 import { TbFlotKeySettings, TbFlotSettings } from '@home/components/widget/lib/flot-widget.models';
 import { DataKey } from '@shared/models/widget.models';
-import { formatNumberValue, formatValue, isDefined } from '@core/utils';
+import { formatNumberValue, formatValue, isDefined, isDefinedAndNotNull, isNumeric } from '@core/utils';
 import { map } from 'rxjs/operators';
 import { ResizeObserver } from '@juggle/resize-observer';
 
@@ -119,7 +119,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
     this.showSubtitle = this.settings.showSubtitle;
     const subtitle = this.settings.subtitle;
     this.subtitle$ = this.ctx.registerLabelPattern(subtitle, this.subtitle$);
-    this.subtitleStyle = textStyle(this.settings.subtitleFont, '0.25px');
+    this.subtitleStyle = textStyle(this.settings.subtitleFont);
     this.subtitleColor =  this.settings.subtitleColor;
 
     const dataKey = getDataKey(this.ctx.defaultSubscription.datasources);
@@ -148,7 +148,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
 
     this.showDate = this.settings.showDate;
     this.dateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.dateFormat);
-    this.dateStyle = textStyle(this.settings.dateFont,  '0.25px');
+    this.dateStyle = textStyle(this.settings.dateFont);
     this.dateColor = this.settings.dateColor;
 
     this.backgroundStyle = backgroundStyle(this.settings.background);
@@ -230,7 +230,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
         const tsValue = getTsValueByLatestDataKey(this.ctx.latestData, aggValue.key);
         let ts;
         let value;
-        if (tsValue) {
+        if (tsValue && isDefinedAndNotNull(tsValue[1]) && isNumeric(tsValue[1])) {
           ts = tsValue[0];
           value = tsValue[1];
           aggValue.value = formatValue(value, (aggValue.key.decimals || this.ctx.decimals), null, false);

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

@@ -92,7 +92,7 @@ export const computeAggregatedCardValue =
       key,
       value: '',
       units: key.units,
-      style: textStyle(settings.font, '0.25px'),
+      style: textStyle(settings.font),
       color: ColorProcessor.fromSettings(settings.color),
       center: position === AggregatedValueCardKeyPosition.center,
       showArrow: settings.showArrow,

ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts

@@ -124,7 +124,7 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
     this.layout = this.settings.layout;
 
     this.showValue = this.settings.showValue;
-    this.valueStyle = textStyle(this.settings.valueFont,  '0.1px');
+    this.valueStyle = textStyle(this.settings.valueFont);
     this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
 
     this.showTitleValueRow = this.showValue ||
@@ -140,7 +140,7 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
 
     this.showTicks = this.settings.showTicks && this.layout === ProgressBarLayout.default;
     if (this.showTicks) {
-      this.ticksStyle = textStyle(this.settings.ticksFont,  '0.1px');
+      this.ticksStyle = textStyle(this.settings.ticksFont);
       this.ticksStyle.color = this.settings.ticksColor;
     }
 

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

@@ -27,7 +27,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { WidgetContext } from '@home/models/widget-component.models';
-import { formatValue, isDefinedAndNotNull } from '@core/utils';
+import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
 import {
   backgroundStyle,
   ColorProcessor,
@@ -132,14 +132,14 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
     this.showLabel = this.settings.showLabel;
     const label = getLabel(this.ctx.datasources);
     this.label$ = this.ctx.registerLabelPattern(label, this.label$);
-    this.labelStyle = textStyle(this.settings.labelFont, '0.25px');
+    this.labelStyle = textStyle(this.settings.labelFont);
     this.labelColor =  ColorProcessor.fromSettings(this.settings.labelColor);
-    this.valueStyle = textStyle(this.settings.valueFont,  '0.13px');
+    this.valueStyle = textStyle(this.settings.valueFont);
     this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
 
     this.showDate = this.settings.showDate;
     this.dateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.dateFormat);
-    this.dateStyle = textStyle(this.settings.dateFont,  '0.25px');
+    this.dateStyle = textStyle(this.settings.dateFont);
     this.dateColor = ColorProcessor.fromSettings(this.settings.dateColor);
 
     this.backgroundStyle = backgroundStyle(this.settings.background);
@@ -179,7 +179,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
     const tsValue = getSingleTsValue(this.ctx.data);
     let ts;
     let value;
-    if (tsValue) {
+    if (tsValue && isDefinedAndNotNull(tsValue[1]) && isNumeric(tsValue[1])) {
       ts = tsValue[0];
       value = tsValue[1];
       this.valueText = formatValue(value, this.decimals, this.units, false);

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

@@ -28,7 +28,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { WidgetContext } from '@home/models/widget-component.models';
-import { formatValue, isDefinedAndNotNull } from '@core/utils';
+import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
 import {
   backgroundStyle,
   ColorProcessor,
@@ -126,7 +126,7 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
     this.layout = this.settings.layout;
 
     this.showValue = this.settings.showValue;
-    this.valueStyle = textStyle(this.settings.valueFont,  '0.25px');
+    this.valueStyle = textStyle(this.settings.valueFont);
     this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
 
     this.backgroundStyle = backgroundStyle(this.settings.background);
@@ -192,7 +192,7 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
     if (this.showValue && this.valueKey) {
       const tsValue = getTsValueByLatestDataKey(this.ctx.latestData, this.valueKey);
       let value;
-      if (tsValue) {
+      if (tsValue && isDefinedAndNotNull(tsValue[1]) && isNumeric(tsValue[1])) {
         value = tsValue[1];
         this.valueText = formatValue(value, this.decimals, this.units, false);
       } else {

ui-ngx/src/app/modules/home/components/widget/lib/count/count-widget.component.ts

@@ -115,7 +115,7 @@ export class CountWidgetComponent implements OnInit, AfterViewInit, OnDestroy {
 
     this.showLabel = this.settings.showLabel;
     this.label = this.settings.label;
-    this.labelStyle = textStyle(this.settings.labelFont, '0.4px');
+    this.labelStyle = textStyle(this.settings.labelFont);
     this.labelColor = ColorProcessor.fromSettings(this.settings.labelColor);
 
     this.showIcon = this.settings.showIcon;
@@ -136,7 +136,7 @@ export class CountWidgetComponent implements OnInit, AfterViewInit, OnDestroy {
     };
     this.iconBackgroundColor = ColorProcessor.fromSettings(this.settings.iconBackgroundColor);
 
-    this.valueStyle = textStyle(this.settings.valueFont, '0.1px');
+    this.valueStyle = textStyle(this.settings.valueFont);
     this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
 
     this.showChevron = this.settings.showChevron;

ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts

@@ -183,7 +183,7 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
 
     this.showValue = this.settings.showValue;
     this.autoScaleValueSize = this.showValue && this.settings.autoScaleValueSize;
-    this.valueStyle = textStyle(this.settings.valueFont,  '0.1px');
+    this.valueStyle = textStyle(this.settings.valueFont);
     this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
 
     this.batteryLevelColor = ColorProcessor.fromSettings(this.settings.batteryLevelColor);

ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts

@@ -142,7 +142,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
     this.showDate = this.settings.showDate;
     if (this.showDate) {
       this.dateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.dateFormat);
-      this.dateStyle = textStyle(this.settings.dateFont,  '0.25px');
+      this.dateStyle = textStyle(this.settings.dateFont);
       this.dateStyle.color = this.settings.dateColor;
     }
 
@@ -173,7 +173,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
       if (dataKey?.units) {
         this.units = dataKey.units;
       }
-      this.tooltipValueStyle = textStyle(this.settings.tooltipValueFont,  '0.13px');
+      this.tooltipValueStyle = textStyle(this.settings.tooltipValueFont);
       this.tooltipValueStyle.color = this.settings.tooltipValueColor;
       this.tooltipValueLabelStyle = {...this.tooltipValueStyle, ...this.tooltipValueLabelStyle};
     }
@@ -181,7 +181,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
     if (this.showTooltipDate) {
       this.tooltipDateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector,
         {...this.settings.tooltipDateFormat, ...{hideLastUpdatePrefix: true}});
-      this.tooltipDateStyle = textStyle(this.settings.tooltipDateFont,  '0.13px');
+      this.tooltipDateStyle = textStyle(this.settings.tooltipDateFont);
       this.tooltipDateStyle.color = this.settings.tooltipDateColor;
       this.tooltipDateLabelStyle = {...this.tooltipDateStyle, ...this.tooltipDateLabelStyle};
     }

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts

@@ -437,7 +437,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
       && this.widgetContext.widgetTitleTooltip.length ? this.widgetContext.widgetTitleTooltip : this.widget.config.titleTooltip;
     this.titleTooltip = this.dashboard.utils.customTranslation(this.titleTooltip, this.titleTooltip);
     this.showTitle = isDefined(this.widget.config.showTitle) ? this.widget.config.showTitle : true;
-    this.titleStyle = {...(this.widget.config.titleStyle || {}), ...textStyle(this.widget.config.titleFont, 'normal')};
+    this.titleStyle = {...(this.widget.config.titleStyle || {}), ...textStyle(this.widget.config.titleFont)};
     if (this.widget.config.titleColor) {
       this.titleStyle.color = this.widget.config.titleColor;
     }

ui-ngx/src/app/shared/models/widget-settings.models.ts

@@ -302,7 +302,11 @@ export class SimpleDateFormatProcessor extends DateFormatProcessor {
   }
 
   update(ts: string| number | Date): void {
-    this.formatted = this.datePipe.transform(ts, this.settings.format);
+    if (ts) {
+      this.formatted = this.datePipe.transform(ts, this.settings.format);
+    } else {
+      this.formatted = ' ';
+    }
   }
 
 }
@@ -320,12 +324,16 @@ export class LastUpdateAgoDateFormatProcessor extends DateFormatProcessor {
   }
 
   update(ts: string| number | Date): void {
-    const agoText = this.dateAgoPipe.transform(ts, {applyAgo: true, short: true, textPart: true});
-    if (this.settings.hideLastUpdatePrefix) {
-      this.formatted = agoText;
+    if (ts) {
+      const agoText = this.dateAgoPipe.transform(ts, {applyAgo: true, short: true, textPart: true});
+      if (this.settings.hideLastUpdatePrefix) {
+        this.formatted = agoText;
+      } else {
+        this.formatted = this.translate.instant('date.last-update-n-ago-text',
+          {agoText});
+      }
     } else {
-      this.formatted = this.translate.instant('date.last-update-n-ago-text',
-        {agoText});
+      this.formatted = ' ';
     }
   }