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

UI: Improve time series chart legend configuration - added font/color settings for legend value and column title.

Browse Source
This commit is contained in:
Igor Kulikov 2024-04-17 17:49:25 +03:00
parent 02648dd4a5
commit 94da3da2ff
9 changed files with 123 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
View File

@ -199,6 +199,7 @@
<div>{{ 'legend.label' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="legendLabelFont"
[initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendLabelColor').value}"
previewText="Temperature">
</tb-font-settings>
<tb-color-input asBoxInput
@ -207,6 +208,32 @@
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div>{{ 'legend.value' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="legendValueFont"
[initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendValueColor').value}"
previewText="22 °C">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="legendValueColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div>{{ 'legend.column-title' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="legendColumnTitleFont"
[initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendColumnTitleColor').value}"
previewText="{{ 'legend.Avg' | translate }}">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="legendColumnTitleColor">
</tb-color-input>
</div>
</div>
<tb-legend-config hideDirection
formControlName="legendConfig">
</tb-legend-config>

16
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
View File

@ -168,8 +168,12 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
noAggregationBarWidthSettings: [settings.noAggregationBarWidthSettings, []],
showLegend: [settings.showLegend, []],
legendColumnTitleFont: [settings.legendColumnTitleFont, []],
legendColumnTitleColor: [settings.legendColumnTitleColor, []],
legendLabelFont: [settings.legendLabelFont, []],
legendLabelColor: [settings.legendLabelColor, []],
legendValueFont: [settings.legendValueFont, []],
legendValueColor: [settings.legendValueColor, []],
legendConfig: [settings.legendConfig, []],
showTooltip: [settings.showTooltip, []],
@ -236,8 +240,12 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
this.widgetConfig.config.settings.noAggregationBarWidthSettings = config.noAggregationBarWidthSettings;
this.widgetConfig.config.settings.showLegend = config.showLegend;
this.widgetConfig.config.settings.legendColumnTitleFont = config.legendColumnTitleFont;
this.widgetConfig.config.settings.legendColumnTitleColor = config.legendColumnTitleColor;
this.widgetConfig.config.settings.legendLabelFont = config.legendLabelFont;
this.widgetConfig.config.settings.legendLabelColor = config.legendLabelColor;
this.widgetConfig.config.settings.legendValueFont = config.legendValueFont;
this.widgetConfig.config.settings.legendValueColor = config.legendValueColor;
this.widgetConfig.config.settings.legendConfig = config.legendConfig;
this.widgetConfig.config.settings.showTooltip = config.showTooltip;
@ -318,12 +326,20 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
}
if (showLegend) {
this.timeSeriesChartWidgetConfigForm.get('legendColumnTitleFont').enable();
this.timeSeriesChartWidgetConfigForm.get('legendColumnTitleColor').enable();
this.timeSeriesChartWidgetConfigForm.get('legendLabelFont').enable();
this.timeSeriesChartWidgetConfigForm.get('legendLabelColor').enable();
this.timeSeriesChartWidgetConfigForm.get('legendValueFont').enable();
this.timeSeriesChartWidgetConfigForm.get('legendValueColor').enable();
this.timeSeriesChartWidgetConfigForm.get('legendConfig').enable();
} else {
this.timeSeriesChartWidgetConfigForm.get('legendColumnTitleFont').disable();
this.timeSeriesChartWidgetConfigForm.get('legendColumnTitleColor').disable();
this.timeSeriesChartWidgetConfigForm.get('legendLabelFont').disable();
this.timeSeriesChartWidgetConfigForm.get('legendLabelColor').disable();
this.timeSeriesChartWidgetConfigForm.get('legendValueFont').disable();
this.timeSeriesChartWidgetConfigForm.get('legendValueColor').disable();
this.timeSeriesChartWidgetConfigForm.get('legendConfig').disable();
}

24
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
View File

@ -63,11 +63,11 @@
<thead>
<tr>
<th></th>
<th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showMin === true">{{ 'legend.Min' | translate }}</th>
<th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showMax === true">{{ 'legend.Max' | translate }}</th>
<th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showAvg === true">{{ 'legend.Avg' | translate }}</th>
<th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showTotal === true">{{ 'legend.Total' | translate }}</th>
<th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showLatest === true">{{ 'legend.Latest' | translate }}</th>
<th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showMin === true">{{ 'legend.Min' | translate }}</th>
<th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showMax === true">{{ 'legend.Max' | translate }}</th>
<th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showAvg === true">{{ 'legend.Avg' | translate }}</th>
<th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showTotal === true">{{ 'legend.Total' | translate }}</th>
<th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showLatest === true">{{ 'legend.Latest' | translate }}</th>
</tr>
</thead>
<tbody>
@ -75,19 +75,19 @@
<th>
<ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey, left: true}"></ng-container>
</th>
<td *ngIf="legendConfig.showMin === true" class="tb-time-series-chart-legend-value">
<td *ngIf="legendConfig.showMin === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
{{ legendData.data[legendKey.dataIndex].min }}
</td>
<td *ngIf="legendConfig.showMax === true" class="tb-time-series-chart-legend-value">
<td *ngIf="legendConfig.showMax === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
{{ legendData.data[legendKey.dataIndex].max }}
</td>
<td *ngIf="legendConfig.showAvg === true" class="tb-time-series-chart-legend-value">
<td *ngIf="legendConfig.showAvg === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
{{ legendData.data[legendKey.dataIndex].avg }}
</td>
<td *ngIf="legendConfig.showTotal === true" class="tb-time-series-chart-legend-value">
<td *ngIf="legendConfig.showTotal === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
{{ legendData.data[legendKey.dataIndex].total }}
</td>
<td *ngIf="legendConfig.showLatest === true" class="tb-time-series-chart-legend-value">
<td *ngIf="legendConfig.showLatest === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
{{ legendData.data[legendKey.dataIndex].latest }}
</td>
</tr>
@ -113,8 +113,8 @@
</ng-template>
<ng-template #legendDataRow let-label="label" let-type="type">
<tr>
<th class="tb-time-series-chart-legend-type-label">{{ label | translate }}</th>
<td *ngFor="let legendKey of legendKeys" class="tb-time-series-chart-legend-value">
<th class="tb-time-series-chart-legend-type-label" [style]="legendColumnTitleStyle">{{ label | translate }}</th>
<td *ngFor="let legendKey of legendKeys" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
{{ legendData.data[legendKey.dataIndex][type] }}
</td>
</tr>

10
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss
View File

@ -147,11 +147,6 @@ $maxLegendHeight: 35%;
}
}
.tb-time-series-chart-legend-type-label {
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
color: rgba(0, 0, 0, 0.38);
white-space: nowrap;
text-align: left;
&.right {
@ -159,11 +154,6 @@ $maxLegendHeight: 35%;
}
}
.tb-time-series-chart-legend-value {
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px;
color: rgba(0, 0, 0, 0.87);
white-space: nowrap;
text-align: right;
}

6
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
View File

@ -73,8 +73,10 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
overlayEnabled: boolean;
padding: string;
legendColumnTitleStyle: ComponentStyle;
legendLabelStyle: ComponentStyle;
disabledLegendLabelStyle: ComponentStyle;
legendValueStyle: ComponentStyle;
displayLegendValues = false;
@ -117,9 +119,13 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
if (this.showLegend) {
this.horizontalLegendPosition = [LegendPosition.left, LegendPosition.right].includes(this.legendConfig.position);
this.legendClass = `legend-${this.legendConfig.position}`;
this.legendColumnTitleStyle = textStyle(this.settings.legendColumnTitleFont);
this.legendColumnTitleStyle.color = this.settings.legendColumnTitleColor;
this.legendLabelStyle = textStyle(this.settings.legendLabelFont);
this.disabledLegendLabelStyle = textStyle(this.settings.legendLabelFont);
this.legendLabelStyle.color = this.settings.legendLabelColor;
this.legendValueStyle = textStyle(this.settings.legendValueFont);
this.legendValueStyle.color = this.settings.legendValueColor;
this.displayLegendValues = this.legendConfig.showMin || this.legendConfig.showMax ||
this.legendConfig.showAvg || this.legendConfig.showTotal || this.legendConfig.showLatest;
}

22
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.models.ts
View File

@ -21,8 +21,12 @@ import { mergeDeep } from '@core/utils';
export interface TimeSeriesChartWidgetSettings extends TimeSeriesChartSettings {
showLegend: boolean;
legendColumnTitleFont: Font;
legendColumnTitleColor: string;
legendLabelFont: Font;
legendLabelColor: string;
legendValueFont: Font;
legendValueColor: string;
legendConfig: LegendConfig;
background: BackgroundSettings;
padding: string;
@ -31,6 +35,15 @@ export interface TimeSeriesChartWidgetSettings extends TimeSeriesChartSettings {
export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings =
mergeDeep({} as TimeSeriesChartWidgetSettings, timeSeriesChartDefaultSettings as TimeSeriesChartWidgetSettings, {
showLegend: true,
legendColumnTitleFont: {
family: 'Roboto',
size: 12,
sizeUnit: 'px',
style: 'normal',
weight: '400',
lineHeight: '16px'
},
legendColumnTitleColor: 'rgba(0, 0, 0, 0.38)',
legendLabelFont: {
family: 'Roboto',
size: 12,
@ -40,6 +53,15 @@ export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings
lineHeight: '16px'
},
legendLabelColor: 'rgba(0, 0, 0, 0.76)',
legendValueFont: {
family: 'Roboto',
size: 12,
sizeUnit: 'px',
style: 'normal',
weight: '500',
lineHeight: '16px'
},
legendValueColor: 'rgba(0, 0, 0, 0.87)',
legendConfig: {...defaultLegendConfig(widgetType.timeseries), position: LegendPosition.top},
background: {
type: BackgroundType.color,

27
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
View File

@ -118,6 +118,7 @@
<div>{{ 'legend.label' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="legendLabelFont"
[initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendLabelColor').value}"
previewText="Temperature">
</tb-font-settings>
<tb-color-input asBoxInput
@ -126,6 +127,32 @@
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div>{{ 'legend.value' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="legendValueFont"
[initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendValueColor').value}"
previewText="22 °C">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="legendValueColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div>{{ 'legend.column-title' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="legendColumnTitleFont"
[initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendColumnTitleColor').value}"
previewText="{{ 'legend.Avg' | translate }}">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="legendColumnTitleColor">
</tb-color-input>
</div>
</div>
<tb-legend-config hideDirection
formControlName="legendConfig">
</tb-legend-config>

12
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
View File

@ -133,8 +133,12 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
noAggregationBarWidthSettings: [settings.noAggregationBarWidthSettings, []],
showLegend: [settings.showLegend, []],
legendColumnTitleFont: [settings.legendColumnTitleFont, []],
legendColumnTitleColor: [settings.legendColumnTitleColor, []],
legendLabelFont: [settings.legendLabelFont, []],
legendLabelColor: [settings.legendLabelColor, []],
legendValueFont: [settings.legendValueFont, []],
legendValueColor: [settings.legendValueColor, []],
legendConfig: [settings.legendConfig, []],
showTooltip: [settings.showTooltip, []],
@ -182,12 +186,20 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
}
if (showLegend) {
this.timeSeriesChartWidgetSettingsForm.get('legendColumnTitleFont').enable();
this.timeSeriesChartWidgetSettingsForm.get('legendColumnTitleColor').enable();
this.timeSeriesChartWidgetSettingsForm.get('legendLabelFont').enable();
this.timeSeriesChartWidgetSettingsForm.get('legendLabelColor').enable();
this.timeSeriesChartWidgetSettingsForm.get('legendValueFont').enable();
this.timeSeriesChartWidgetSettingsForm.get('legendValueColor').enable();
this.timeSeriesChartWidgetSettingsForm.get('legendConfig').enable();
} else {
this.timeSeriesChartWidgetSettingsForm.get('legendColumnTitleFont').disable();
this.timeSeriesChartWidgetSettingsForm.get('legendColumnTitleColor').disable();
this.timeSeriesChartWidgetSettingsForm.get('legendLabelFont').disable();
this.timeSeriesChartWidgetSettingsForm.get('legendLabelColor').disable();
this.timeSeriesChartWidgetSettingsForm.get('legendValueFont').disable();
this.timeSeriesChartWidgetSettingsForm.get('legendValueColor').disable();
this.timeSeriesChartWidgetSettingsForm.get('legendConfig').disable();
}

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3292,6 +3292,7 @@
"months": "(month ago)",
"years": "(year ago)"
},
"column-title": "Column title",
"label": "Label",
"value": "Value"
},