diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts index b5b37df7f8..86046df6d7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts +++ b/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); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts index b199aaa9c6..1d02d71cdf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts +++ b/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, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts index 2b9d4328d5..43d2c6300c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts +++ b/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; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts index 75a922daff..a80d1d850b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts +++ b/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); 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 ce5b61943c..8b05847fb3 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 @@ -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 { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/count/count-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/count/count-widget.component.ts index 0f3c922e1b..3302ba4477 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/count/count-widget.component.ts +++ b/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; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts index a983dc81a9..31f98aff6c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts +++ b/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); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts index 10ba3b3b1b..8427cf362b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts +++ b/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}; } diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index 8104e80e36..fbfa520fb3 100644 --- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts +++ b/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; } diff --git a/ui-ngx/src/app/shared/models/widget-settings.models.ts b/ui-ngx/src/app/shared/models/widget-settings.models.ts index 5055893b6f..bd10859e55 100644 --- a/ui-ngx/src/app/shared/models/widget-settings.models.ts +++ b/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 = ' '; } }