dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Improve some widgets style.

Browse Source
This commit is contained in:
Igor Kulikov 2023-10-20 16:15:58 +03:00
parent 857256a9fe
commit 66d4f010e8
10 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

@ -115,7 +115,7 @@ export class CountWidgetComponent implements OnInit, AfterViewInit, OnDestroy {
this.showLabel = this.settings.showLabel; this.showLabel = this.settings.showLabel;
this.label = this.settings.label; 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.labelColor = ColorProcessor.fromSettings(this.settings.labelColor);
this.showIcon = this.settings.showIcon; this.showIcon = this.settings.showIcon;
@ -136,7 +136,7 @@ export class CountWidgetComponent implements OnInit, AfterViewInit, OnDestroy {
}; };
this.iconBackgroundColor = ColorProcessor.fromSettings(this.settings.iconBackgroundColor); 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.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
this.showChevron = this.settings.showChevron; this.showChevron = this.settings.showChevron;

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

@ -183,7 +183,7 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
this.showValue = this.settings.showValue; this.showValue = this.settings.showValue;
this.autoScaleValueSize = this.showValue && this.settings.autoScaleValueSize; 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.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
this.batteryLevelColor = ColorProcessor.fromSettings(this.settings.batteryLevelColor); this.batteryLevelColor = ColorProcessor.fromSettings(this.settings.batteryLevelColor);

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

@ -142,7 +142,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
this.showDate = this.settings.showDate; this.showDate = this.settings.showDate;
if (this.showDate) { if (this.showDate) {
this.dateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.dateFormat); 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; this.dateStyle.color = this.settings.dateColor;
} }
@ -173,7 +173,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
if (dataKey?.units) { if (dataKey?.units) {
this.units = 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.tooltipValueStyle.color = this.settings.tooltipValueColor;
this.tooltipValueLabelStyle = {...this.tooltipValueStyle, ...this.tooltipValueLabelStyle}; this.tooltipValueLabelStyle = {...this.tooltipValueStyle, ...this.tooltipValueLabelStyle};
} }
@ -181,7 +181,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
if (this.showTooltipDate) { if (this.showTooltipDate) {
this.tooltipDateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.tooltipDateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector,
{...this.settings.tooltipDateFormat, ...{hideLastUpdatePrefix: true}}); {...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.tooltipDateStyle.color = this.settings.tooltipDateColor;
this.tooltipDateLabelStyle = {...this.tooltipDateStyle, ...this.tooltipDateLabelStyle}; this.tooltipDateLabelStyle = {...this.tooltipDateStyle, ...this.tooltipDateLabelStyle};
} }

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

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

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

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