Igor Kulikov
2 years ago
25 changed files with 1935 additions and 4458 deletions
@ -1,261 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 The Thingsboard Authors |
|
||||
|
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
|
||||
you may not use this file except in compliance with the License. |
|
||||
You may obtain a copy of the License at |
|
||||
|
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
|
|
||||
Unless required by applicable law or agreed to in writing, software |
|
||||
distributed under the License is distributed on an "AS IS" BASIS, |
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||
See the License for the specific language governing permissions and |
|
||||
limitations under the License. |
|
||||
|
|
||||
--> |
|
||||
<ng-container [formGroup]="barChartWidgetConfigForm"> |
|
||||
<tb-timewindow-config-panel *ngIf="displayTimewindowConfig" |
|
||||
[onlyHistoryTimewindow]="onlyHistoryTimewindow()" |
|
||||
formControlName="timewindowConfig"> |
|
||||
</tb-timewindow-config-panel> |
|
||||
<tb-datasources |
|
||||
[configMode]="basicMode" |
|
||||
hideDatasourceLabel |
|
||||
hideDataKeys |
|
||||
forceSingleDatasource |
|
||||
formControlName="datasources"> |
|
||||
</tb-datasources> |
|
||||
<tb-data-keys-panel |
|
||||
panelTitle="{{ 'widgets.chart.series' | translate }}" |
|
||||
addKeyTitle="{{ 'widgets.chart.add-series' | translate }}" |
|
||||
keySettingsTitle="{{ 'widgets.chart.series-settings' | translate }}" |
|
||||
removeKeyTitle="{{ 'widgets.chart.remove-series' | translate }}" |
|
||||
noKeysText="{{ 'widgets.chart.no-series' | translate }}" |
|
||||
requiredKeysText="{{ 'widgets.chart.no-series-error' | translate }}" |
|
||||
hideUnits |
|
||||
hideDecimals |
|
||||
hideDataKeyUnits |
|
||||
hideDataKeyDecimals |
|
||||
[datasourceType]="datasource?.type" |
|
||||
[deviceId]="datasource?.deviceId" |
|
||||
[entityAliasId]="datasource?.entityAliasId" |
|
||||
formControlName="series"> |
|
||||
</tb-data-keys-panel> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|
||||
<div class="tb-form-row column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle"> |
|
||||
{{ 'widget-config.card-title' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="titleFont" |
|
||||
clearButton |
|
||||
[previewText]="barChartWidgetConfigForm.get('title').value" |
|
||||
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="titleColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon"> |
|
||||
{{ 'widget-config.card-icon' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-material-icon-select asBoxInput |
|
||||
iconClearButton |
|
||||
[color]="barChartWidgetConfigForm.get('iconColor').value" |
|
||||
formControlName="titleIcon"> |
|
||||
</tb-material-icon-select> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="iconColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
|
||||
{{ 'widgets.latest-chart.sort-series' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widget-config.units-short</div> |
|
||||
<tb-unit-input |
|
||||
formControlName="units"> |
|
||||
</tb-unit-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widget-config.decimals-short</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div> |
|
||||
<tb-chart-bar-settings |
|
||||
formControlName="barSettings" |
|
||||
[series]="false"> |
|
||||
</tb-chart-bar-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-axis</div> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div translate>widgets.chart.chart-axis.scale</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="axisMin" |
|
||||
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-max</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="axisMax" |
|
||||
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="axisTickLabelFont" |
|
||||
clearButton |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
previewText="100"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="axisTickLabelColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetConfigForm.get('showLegend').value" [disabled]="!barChartWidgetConfigForm.get('showLegend').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.legend' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.position' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="legendPosition"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
|
||||
{{ legendPositionTranslationMap.get(pos) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.label' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="legendLabelFont" |
|
||||
previewText="Wind"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendLabelColor"> |
|
||||
</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" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetConfigForm.get('showTooltip').value" [disabled]="!barChartWidgetConfigForm.get('showTooltip').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.tooltip' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div>{{ 'tooltip.value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="tooltipValueType"> |
|
||||
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
|
||||
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="tooltipValueFont" |
|
||||
[previewText]="tooltipValuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-color' | translate }}</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipBackgroundColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-blur' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<tb-chart-animation-settings |
|
||||
formControlName="animation"> |
|
||||
</tb-chart-animation-settings> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.background.background' | translate }}</div> |
|
||||
<tb-background-settings formControlName="background"> |
|
||||
</tb-background-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-lt-md"> |
|
||||
<div translate>widget-config.show-card-buttons</div> |
|
||||
<mat-chip-listbox multiple formControlName="cardButtons"> |
|
||||
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
|
||||
</mat-chip-listbox> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<tb-widget-actions-panel |
|
||||
formControlName="actions"> |
|
||||
</tb-widget-actions-panel> |
|
||||
</ng-container> |
|
||||
@ -1,258 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 The Thingsboard Authors |
|
||||
|
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
|
||||
you may not use this file except in compliance with the License. |
|
||||
You may obtain a copy of the License at |
|
||||
|
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
|
|
||||
Unless required by applicable law or agreed to in writing, software |
|
||||
distributed under the License is distributed on an "AS IS" BASIS, |
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||
See the License for the specific language governing permissions and |
|
||||
limitations under the License. |
|
||||
|
|
||||
--> |
|
||||
<ng-container [formGroup]="doughnutWidgetConfigForm"> |
|
||||
<tb-timewindow-config-panel *ngIf="displayTimewindowConfig" |
|
||||
[onlyHistoryTimewindow]="onlyHistoryTimewindow()" |
|
||||
formControlName="timewindowConfig"> |
|
||||
</tb-timewindow-config-panel> |
|
||||
<tb-datasources |
|
||||
[configMode]="basicMode" |
|
||||
hideDatasourceLabel |
|
||||
hideDataKeys |
|
||||
forceSingleDatasource |
|
||||
formControlName="datasources"> |
|
||||
</tb-datasources> |
|
||||
<tb-data-keys-panel |
|
||||
panelTitle="{{ 'widgets.chart.series' | translate }}" |
|
||||
addKeyTitle="{{ 'widgets.chart.add-series' | translate }}" |
|
||||
keySettingsTitle="{{ 'widgets.chart.series-settings' | translate }}" |
|
||||
removeKeyTitle="{{ 'widgets.chart.remove-series' | translate }}" |
|
||||
noKeysText="{{ 'widgets.chart.no-series' | translate }}" |
|
||||
requiredKeysText="{{ 'widgets.chart.no-series-error' | translate }}" |
|
||||
hideUnits |
|
||||
hideDecimals |
|
||||
hideDataKeyUnits |
|
||||
hideDataKeyDecimals |
|
||||
[datasourceType]="datasource?.type" |
|
||||
[deviceId]="datasource?.deviceId" |
|
||||
[entityAliasId]="datasource?.entityAliasId" |
|
||||
formControlName="series"> |
|
||||
</tb-data-keys-panel> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|
||||
<tb-image-cards-select rowHeight="{{ horizontal ? '8:5' : '5:4' }}" |
|
||||
[cols]="{columns: 2, |
|
||||
breakpoints: { |
|
||||
'lt-sm': 1 |
|
||||
}}" |
|
||||
label="{{ 'widgets.doughnut.layout' | translate }}" formControlName="layout"> |
|
||||
<tb-image-cards-select-option *ngFor="let layout of doughnutLayouts" |
|
||||
[value]="layout" |
|
||||
[image]="doughnutLayoutImageMap.get(layout)"> |
|
||||
{{ doughnutLayoutTranslationMap.get(layout) | translate }} |
|
||||
</tb-image-cards-select-option> |
|
||||
</tb-image-cards-select> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="autoScale"> |
|
||||
{{ 'widgets.latest-chart.auto-scale' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-row column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle"> |
|
||||
{{ 'widget-config.card-title' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="titleFont" |
|
||||
clearButton |
|
||||
[previewText]="doughnutWidgetConfigForm.get('title').value" |
|
||||
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="titleColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon"> |
|
||||
{{ 'widget-config.card-icon' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-material-icon-select asBoxInput |
|
||||
iconClearButton |
|
||||
[color]="doughnutWidgetConfigForm.get('iconColor').value" |
|
||||
formControlName="titleIcon"> |
|
||||
</tb-material-icon-select> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="iconColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="clockwise"> |
|
||||
{{ 'widgets.latest-chart.clockwise-layout' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
|
||||
{{ 'widgets.latest-chart.sort-series' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div [fxShow]="totalEnabled" class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.doughnut.central-total-value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="totalValueFont" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-settings formControlName="totalValueColor" settingsKey="{{'widgets.doughnut.central-total-value' | translate }}"> |
|
||||
</tb-color-settings> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widget-config.units-short</div> |
|
||||
<tb-unit-input |
|
||||
formControlName="units"> |
|
||||
</tb-unit-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widget-config.decimals-short</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="doughnutWidgetConfigForm.get('showLegend').value" [disabled]="!doughnutWidgetConfigForm.get('showLegend').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.legend' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.position' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="legendPosition"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
|
||||
{{ legendPositionTranslationMap.get(pos) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.label' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="legendLabelFont" |
|
||||
previewText="Wind power"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendLabelColor"> |
|
||||
</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" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="doughnutWidgetConfigForm.get('showTooltip').value" [disabled]="!doughnutWidgetConfigForm.get('showTooltip').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.tooltip' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div>{{ 'tooltip.value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="tooltipValueType"> |
|
||||
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
|
||||
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="tooltipValueFont" |
|
||||
[previewText]="tooltipValuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-color' | translate }}</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipBackgroundColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-blur' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<tb-chart-animation-settings |
|
||||
formControlName="animation"> |
|
||||
</tb-chart-animation-settings> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.background.background' | translate }}</div> |
|
||||
<tb-background-settings formControlName="background"> |
|
||||
</tb-background-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-lt-md"> |
|
||||
<div translate>widget-config.show-card-buttons</div> |
|
||||
<mat-chip-listbox multiple formControlName="cardButtons"> |
|
||||
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
|
||||
</mat-chip-listbox> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<tb-widget-actions-panel |
|
||||
formControlName="actions"> |
|
||||
</tb-widget-actions-panel> |
|
||||
</ng-container> |
|
||||
@ -0,0 +1,529 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="latestChartWidgetConfigForm"> |
||||
|
<tb-timewindow-config-panel *ngIf="displayTimewindowConfig" |
||||
|
[onlyHistoryTimewindow]="onlyHistoryTimewindow()" |
||||
|
formControlName="timewindowConfig"> |
||||
|
</tb-timewindow-config-panel> |
||||
|
<tb-datasources |
||||
|
[configMode]="basicMode" |
||||
|
hideDatasourceLabel |
||||
|
hideDataKeys |
||||
|
forceSingleDatasource |
||||
|
formControlName="datasources"> |
||||
|
</tb-datasources> |
||||
|
<tb-data-keys-panel |
||||
|
panelTitle="{{ 'widgets.chart.series' | translate }}" |
||||
|
addKeyTitle="{{ 'widgets.chart.add-series' | translate }}" |
||||
|
keySettingsTitle="{{ 'widgets.chart.series-settings' | translate }}" |
||||
|
removeKeyTitle="{{ 'widgets.chart.remove-series' | translate }}" |
||||
|
noKeysText="{{ 'widgets.chart.no-series' | translate }}" |
||||
|
requiredKeysText="{{ 'widgets.chart.no-series-error' | translate }}" |
||||
|
hideUnits |
||||
|
hideDecimals |
||||
|
hideDataKeyUnits |
||||
|
hideDataKeyDecimals |
||||
|
[datasourceType]="datasource?.type" |
||||
|
[deviceId]="datasource?.deviceId" |
||||
|
[entityAliasId]="datasource?.entityAliasId" |
||||
|
formControlName="series"> |
||||
|
</tb-data-keys-panel> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle"> |
||||
|
{{ 'widget-config.card-title' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="titleFont" |
||||
|
clearButton |
||||
|
[previewText]="latestChartWidgetConfigForm.get('title').value" |
||||
|
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="titleColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon"> |
||||
|
{{ 'widget-config.card-icon' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-material-icon-select asBoxInput |
||||
|
iconClearButton |
||||
|
[color]="latestChartWidgetConfigForm.get('iconColor').value" |
||||
|
formControlName="titleIcon"> |
||||
|
</tb-material-icon-select> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="iconColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
||||
|
{{ 'widgets.latest-chart.sort-series' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widget-config.units-short</div> |
||||
|
<tb-unit-input |
||||
|
formControlName="units"> |
||||
|
</tb-unit-input> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widget-config.decimals-short</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<ng-container *ngTemplateOutlet="latestChartConfigTemplate()"></ng-container> |
||||
|
<div class="tb-form-panel tb-slide-toggle"> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetConfigForm.get('showLegend').value" [disabled]="!latestChartWidgetConfigForm.get('showLegend').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widget-config.legend' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'legend.position' | translate }}</div> |
||||
|
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="legendPosition"> |
||||
|
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
||||
|
{{ legendPositionTranslationMap.get(pos) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'legend.label' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="legendLabelFont" |
||||
|
previewText="Wind"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="legendLabelColor"> |
||||
|
</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" |
||||
|
[previewText]="valuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="legendValueColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</div> |
||||
|
<div class="tb-form-panel tb-slide-toggle"> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetConfigForm.get('showTooltip').value" [disabled]="!latestChartWidgetConfigForm.get('showTooltip').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widget-config.tooltip' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<div>{{ 'tooltip.value' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="tooltipValueType"> |
||||
|
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
||||
|
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="tooltipValueFont" |
||||
|
[previewText]="tooltipValuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="tooltipValueColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'tooltip.background-color' | translate }}</div> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="tooltipBackgroundColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'tooltip.background-blur' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix>px</div> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</div> |
||||
|
<tb-chart-animation-settings |
||||
|
formControlName="animation"> |
||||
|
</tb-chart-animation-settings> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-background-settings formControlName="background"> |
||||
|
</tb-background-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-lt-md"> |
||||
|
<div translate>widget-config.show-card-buttons</div> |
||||
|
<mat-chip-listbox multiple formControlName="cardButtons"> |
||||
|
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
||||
|
</mat-chip-listbox> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-widget-actions-panel |
||||
|
formControlName="actions"> |
||||
|
</tb-widget-actions-panel> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-template #pieChart> |
||||
|
<ng-container [formGroup]="latestChartWidgetConfigForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.pie-chart.pie-chart-appearance</div> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel"> |
||||
|
{{ 'widgets.pie-chart.label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="labelPosition"> |
||||
|
<mat-option *ngFor="let position of pieChartLabelPositions" [value]="position"> |
||||
|
{{ pieChartLabelPositionTranslationMap.get(position) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="labelFont" |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
[previewText]="'Wind<br/>55%'"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="labelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.pie-chart.border' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix>px</div> |
||||
|
</mat-form-field> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="borderColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.pie-chart.radius' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="radius" type="number" min="0" max="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix>%</div> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="clockwise"> |
||||
|
{{ 'widgets.latest-chart.clockwise-layout' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
|
||||
|
<ng-template #doughnutChart> |
||||
|
<ng-container [formGroup]="latestChartWidgetConfigForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.doughnut.doughnut-appearance</div> |
||||
|
<tb-image-cards-select rowHeight="{{ doughnutHorizontal ? '8:5' : '5:4' }}" |
||||
|
[cols]="{columns: 2, |
||||
|
breakpoints: { |
||||
|
'lt-sm': 1 |
||||
|
}}" |
||||
|
label="{{ 'widgets.doughnut.layout' | translate }}" formControlName="layout"> |
||||
|
<tb-image-cards-select-option *ngFor="let layout of doughnutLayouts" |
||||
|
[value]="layout" |
||||
|
[image]="doughnutLayoutImageMap.get(layout)"> |
||||
|
{{ doughnutLayoutTranslationMap.get(layout) | translate }} |
||||
|
</tb-image-cards-select-option> |
||||
|
</tb-image-cards-select> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="autoScale"> |
||||
|
{{ 'widgets.latest-chart.auto-scale' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="clockwise"> |
||||
|
{{ 'widgets.latest-chart.clockwise-layout' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div [fxShow]="doughnutTotalEnabled" class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.doughnut.central-total-value' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="totalValueFont" |
||||
|
[previewText]="valuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-settings formControlName="totalValueColor" settingsKey="{{'widgets.doughnut.central-total-value' | translate }}"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
|
||||
|
<ng-template #barChart> |
||||
|
<ng-container [formGroup]="latestChartWidgetConfigForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div> |
||||
|
<tb-chart-bar-settings |
||||
|
formControlName="barSettings" |
||||
|
[series]="false"> |
||||
|
</tb-chart-bar-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-axis</div> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<div translate>widgets.chart.chart-axis.scale</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="axisMin" |
||||
|
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-max</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="axisMax" |
||||
|
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="axisTickLabelFont" |
||||
|
clearButton |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
previewText="100"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="axisTickLabelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
<ng-template #polarAreaChart> |
||||
|
<ng-container [formGroup]="latestChartWidgetConfigForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div> |
||||
|
<tb-chart-bar-settings |
||||
|
formControlName="barSettings" |
||||
|
pieLabelPosition |
||||
|
[series]="false"> |
||||
|
</tb-chart-bar-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-axis</div> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<div translate>widgets.chart.chart-axis.scale</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="axisMin" |
||||
|
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-max</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="axisMax" |
||||
|
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="axisTickLabelFont" |
||||
|
clearButton |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
previewText="100"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="axisTickLabelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.polar-area-chart.start-angle</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="angleAxisStartAngle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
<ng-template #radarChart> |
||||
|
<ng-container [formGroup]="latestChartWidgetConfigForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-appearance</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.radar-chart.shape' | translate }}</div> |
||||
|
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="shape"> |
||||
|
<mat-option *ngFor="let shape of radarChartShapes" [value]="shape"> |
||||
|
{{ radarChartShapeTranslations.get(shape) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.radar-chart.color</div> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="color"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showLine"> |
||||
|
{{ 'widgets.radar-chart.line' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="lineType"> |
||||
|
<mat-option *ngFor="let type of chartLineTypes" [value]="type"> |
||||
|
{{ chartLineTypeTranslations.get(type) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="lineWidth" |
||||
|
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showPoints"> |
||||
|
{{ 'widgets.radar-chart.points' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="pointShape"> |
||||
|
<mat-option *ngFor="let shape of chartShapes" [value]="shape"> |
||||
|
{{ chartShapeTranslations.get(shape) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="pointSize" |
||||
|
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-lt-md"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showLabel"> |
||||
|
{{ 'widgets.radar-chart.points-label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="labelPosition"> |
||||
|
<mat-option *ngFor="let position of chartLabelPositions" [value]="position"> |
||||
|
{{ chartLabelPositionTranslations.get(position) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="labelFont" |
||||
|
clearButton |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
[previewText]="valuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="labelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-chart-fill-settings |
||||
|
formControlName="fillAreaSettings"> |
||||
|
</tb-chart-fill-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-axis</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="axisShowLabel"> |
||||
|
{{ 'widgets.radar-chart.axis-label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<tb-font-settings formControlName="axisLabelFont" |
||||
|
clearButton |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
previewText="Wind"> |
||||
|
</tb-font-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels"> |
||||
|
{{ 'widgets.radar-chart.ticks-label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="axisTickLabelFont" |
||||
|
clearButton |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
previewText="100"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="axisTickLabelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
@ -0,0 +1,366 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Directive, TemplateRef } from '@angular/core'; |
||||
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
||||
|
import { |
||||
|
DataKey, |
||||
|
Datasource, |
||||
|
datasourcesHasAggregation, |
||||
|
datasourcesHasOnlyComparisonAggregation, |
||||
|
legendPositions, |
||||
|
legendPositionTranslationMap, |
||||
|
WidgetConfig |
||||
|
} from '@shared/models/widget.models'; |
||||
|
import { |
||||
|
LatestChartTooltipValueType, |
||||
|
latestChartTooltipValueTypes, |
||||
|
latestChartTooltipValueTypeTranslations, |
||||
|
LatestChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/latest-chart.models'; |
||||
|
import { formatValue, isDefinedAndNotNull, isUndefined, mergeDeep } from '@core/utils'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
import { |
||||
|
getTimewindowConfig, |
||||
|
setTimewindowConfig |
||||
|
} from '@home/components/widget/config/timewindow-config-panel.component'; |
||||
|
import { radarChartShapes, radarChartShapeTranslations } from '@home/components/widget/lib/chart/radar-chart.models'; |
||||
|
import { |
||||
|
chartLabelPositions, |
||||
|
chartLabelPositionTranslations, |
||||
|
chartLineTypes, |
||||
|
chartLineTypeTranslations, |
||||
|
chartShapes, |
||||
|
chartShapeTranslations, |
||||
|
pieChartLabelPositions, |
||||
|
pieChartLabelPositionTranslations |
||||
|
} from '@home/components/widget/lib/chart/chart.models'; |
||||
|
import { |
||||
|
DoughnutLayout, doughnutLayoutImages, |
||||
|
doughnutLayouts, |
||||
|
doughnutLayoutTranslations, horizontalDoughnutLayoutImages |
||||
|
} from '@home/components/widget/lib/chart/doughnut-widget.models'; |
||||
|
|
||||
|
@Directive() |
||||
|
// eslint-disable-next-line @angular-eslint/directive-class-suffix
|
||||
|
export abstract class LatestChartBasicConfigComponent<S extends LatestChartWidgetSettings> extends BasicWidgetConfigComponent { |
||||
|
|
||||
|
public get datasource(): Datasource { |
||||
|
const datasources: Datasource[] = this.latestChartWidgetConfigForm.get('datasources').value; |
||||
|
if (datasources && datasources.length) { |
||||
|
return datasources[0]; |
||||
|
} else { |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public get displayTimewindowConfig(): boolean { |
||||
|
const datasources = this.latestChartWidgetConfigForm.get('datasources').value; |
||||
|
return datasourcesHasAggregation(datasources); |
||||
|
} |
||||
|
|
||||
|
public onlyHistoryTimewindow(): boolean { |
||||
|
const datasources = this.latestChartWidgetConfigForm.get('datasources').value; |
||||
|
return datasourcesHasOnlyComparisonAggregation(datasources); |
||||
|
} |
||||
|
|
||||
|
doughnutLayouts = doughnutLayouts; |
||||
|
|
||||
|
doughnutLayoutTranslationMap = doughnutLayoutTranslations; |
||||
|
|
||||
|
doughnutHorizontal = false; |
||||
|
|
||||
|
doughnutLayoutImageMap: Map<DoughnutLayout, string>; |
||||
|
|
||||
|
pieChartLabelPositions = pieChartLabelPositions; |
||||
|
|
||||
|
pieChartLabelPositionTranslationMap = pieChartLabelPositionTranslations; |
||||
|
|
||||
|
radarChartShapes = radarChartShapes; |
||||
|
|
||||
|
radarChartShapeTranslations = radarChartShapeTranslations; |
||||
|
|
||||
|
chartLineTypes = chartLineTypes; |
||||
|
|
||||
|
chartLineTypeTranslations = chartLineTypeTranslations; |
||||
|
|
||||
|
chartShapes = chartShapes; |
||||
|
|
||||
|
chartShapeTranslations = chartShapeTranslations; |
||||
|
|
||||
|
chartLabelPositions = chartLabelPositions; |
||||
|
|
||||
|
chartLabelPositionTranslations = chartLabelPositionTranslations; |
||||
|
|
||||
|
legendPositions = legendPositions; |
||||
|
|
||||
|
legendPositionTranslationMap = legendPositionTranslationMap; |
||||
|
|
||||
|
latestChartTooltipValueTypes = latestChartTooltipValueTypes; |
||||
|
|
||||
|
latestChartTooltipValueTypeTranslationMap = latestChartTooltipValueTypeTranslations; |
||||
|
|
||||
|
latestChartWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
valuePreviewFn = this._valuePreviewFn.bind(this); |
||||
|
|
||||
|
tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); |
||||
|
|
||||
|
get doughnutTotalEnabled(): boolean { |
||||
|
const layout: DoughnutLayout = this.latestChartWidgetConfigForm.get('layout').value; |
||||
|
return layout === DoughnutLayout.with_total; |
||||
|
} |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected widgetConfigComponent: WidgetConfigComponent, |
||||
|
protected fb: UntypedFormBuilder) { |
||||
|
super(store, widgetConfigComponent); |
||||
|
} |
||||
|
|
||||
|
protected configForm(): UntypedFormGroup { |
||||
|
return this.latestChartWidgetConfigForm; |
||||
|
} |
||||
|
|
||||
|
protected setupConfig(widgetConfig: WidgetConfigComponentData) { |
||||
|
const params = widgetConfig.typeParameters as any; |
||||
|
this.doughnutHorizontal = isDefinedAndNotNull(params.horizontal) ? params.horizontal : false; |
||||
|
this.doughnutLayoutImageMap = this.doughnutHorizontal ? horizontalDoughnutLayoutImages : doughnutLayoutImages; |
||||
|
super.setupConfig(widgetConfig); |
||||
|
} |
||||
|
|
||||
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
||||
|
const settings: S = mergeDeep<S>({} as S, |
||||
|
this.defaultSettings(), configData.config.settings as S); |
||||
|
|
||||
|
this.latestChartWidgetConfigForm = this.fb.group({ |
||||
|
timewindowConfig: [getTimewindowConfig(configData.config), []], |
||||
|
datasources: [configData.config.datasources, []], |
||||
|
|
||||
|
series: [this.getSeries(configData.config.datasources), []], |
||||
|
|
||||
|
showTitle: [configData.config.showTitle, []], |
||||
|
title: [configData.config.title, []], |
||||
|
titleFont: [configData.config.titleFont, []], |
||||
|
titleColor: [configData.config.titleColor, []], |
||||
|
showTitleIcon: [configData.config.showTitleIcon, []], |
||||
|
titleIcon: [configData.config.titleIcon, []], |
||||
|
iconColor: [configData.config.iconColor, []], |
||||
|
|
||||
|
sortSeries: [settings.sortSeries, []], |
||||
|
|
||||
|
units: [configData.config.units, []], |
||||
|
decimals: [configData.config.decimals, []], |
||||
|
|
||||
|
animation: [settings.animation, []], |
||||
|
|
||||
|
showLegend: [settings.showLegend, []], |
||||
|
legendPosition: [settings.legendPosition, []], |
||||
|
legendLabelFont: [settings.legendLabelFont, []], |
||||
|
legendLabelColor: [settings.legendLabelColor, []], |
||||
|
legendValueFont: [settings.legendValueFont, []], |
||||
|
legendValueColor: [settings.legendValueColor, []], |
||||
|
|
||||
|
showTooltip: [settings.showTooltip, []], |
||||
|
tooltipValueType: [settings.tooltipValueType, []], |
||||
|
tooltipValueDecimals: [settings.tooltipValueDecimals, []], |
||||
|
tooltipValueFont: [settings.tooltipValueFont, []], |
||||
|
tooltipValueColor: [settings.tooltipValueColor, []], |
||||
|
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []], |
||||
|
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []], |
||||
|
|
||||
|
background: [settings.background, []], |
||||
|
|
||||
|
cardButtons: [this.getCardButtons(configData.config), []], |
||||
|
borderRadius: [configData.config.borderRadius, []], |
||||
|
|
||||
|
actions: [configData.config.actions || {}, []] |
||||
|
}); |
||||
|
this.setupLatestChartControls(this.latestChartWidgetConfigForm, settings); |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
||||
|
setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig); |
||||
|
this.widgetConfig.config.datasources = config.datasources; |
||||
|
this.setSeries(config.series, this.widgetConfig.config.datasources); |
||||
|
|
||||
|
this.widgetConfig.config.showTitle = config.showTitle; |
||||
|
this.widgetConfig.config.title = config.title; |
||||
|
this.widgetConfig.config.titleFont = config.titleFont; |
||||
|
this.widgetConfig.config.titleColor = config.titleColor; |
||||
|
|
||||
|
this.widgetConfig.config.showTitleIcon = config.showTitleIcon; |
||||
|
this.widgetConfig.config.titleIcon = config.titleIcon; |
||||
|
this.widgetConfig.config.iconColor = config.iconColor; |
||||
|
|
||||
|
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
||||
|
|
||||
|
this.widgetConfig.config.settings.sortSeries = config.sortSeries; |
||||
|
|
||||
|
this.widgetConfig.config.units = config.units; |
||||
|
this.widgetConfig.config.decimals = config.decimals; |
||||
|
|
||||
|
this.widgetConfig.config.settings.animation = config.animation; |
||||
|
|
||||
|
this.widgetConfig.config.settings.showLegend = config.showLegend; |
||||
|
this.widgetConfig.config.settings.legendPosition = config.legendPosition; |
||||
|
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.showTooltip = config.showTooltip; |
||||
|
this.widgetConfig.config.settings.tooltipValueType = config.tooltipValueType; |
||||
|
this.widgetConfig.config.settings.tooltipValueDecimals = config.tooltipValueDecimals; |
||||
|
this.widgetConfig.config.settings.tooltipValueFont = config.tooltipValueFont; |
||||
|
this.widgetConfig.config.settings.tooltipValueColor = config.tooltipValueColor; |
||||
|
this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor; |
||||
|
this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur; |
||||
|
|
||||
|
this.widgetConfig.config.settings.background = config.background; |
||||
|
|
||||
|
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
||||
|
this.widgetConfig.config.borderRadius = config.borderRadius; |
||||
|
|
||||
|
this.widgetConfig.config.actions = config.actions; |
||||
|
|
||||
|
this.prepareOutputLatestChartConfig(config); |
||||
|
|
||||
|
return this.widgetConfig; |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showTitle', 'showTitleIcon', 'showLegend', 'showTooltip'].concat(this.latestChartValidatorTriggers()); |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
||||
|
const showTitle: boolean = this.latestChartWidgetConfigForm.get('showTitle').value; |
||||
|
const showTitleIcon: boolean = this.latestChartWidgetConfigForm.get('showTitleIcon').value; |
||||
|
const showLegend: boolean = this.latestChartWidgetConfigForm.get('showLegend').value; |
||||
|
const showTooltip: boolean = this.latestChartWidgetConfigForm.get('showTooltip').value; |
||||
|
|
||||
|
if (showTitle) { |
||||
|
this.latestChartWidgetConfigForm.get('title').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('titleFont').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('titleColor').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false}); |
||||
|
if (showTitleIcon) { |
||||
|
this.latestChartWidgetConfigForm.get('titleIcon').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('iconColor').enable(); |
||||
|
} else { |
||||
|
this.latestChartWidgetConfigForm.get('titleIcon').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
} else { |
||||
|
this.latestChartWidgetConfigForm.get('title').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('titleFont').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('titleColor').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false}); |
||||
|
this.latestChartWidgetConfigForm.get('titleIcon').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
|
||||
|
if (showLegend) { |
||||
|
this.latestChartWidgetConfigForm.get('legendPosition').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('legendLabelFont').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('legendLabelColor').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('legendValueFont').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('legendValueColor').enable(); |
||||
|
} else { |
||||
|
this.latestChartWidgetConfigForm.get('legendPosition').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('legendLabelFont').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('legendLabelColor').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('legendValueFont').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('legendValueColor').disable(); |
||||
|
} |
||||
|
if (showTooltip) { |
||||
|
this.latestChartWidgetConfigForm.get('tooltipValueType').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('tooltipValueDecimals').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('tooltipValueFont').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('tooltipValueColor').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('tooltipBackgroundColor').enable(); |
||||
|
this.latestChartWidgetConfigForm.get('tooltipBackgroundBlur').enable(); |
||||
|
} else { |
||||
|
this.latestChartWidgetConfigForm.get('tooltipValueType').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('tooltipValueDecimals').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('tooltipValueFont').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('tooltipValueColor').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('tooltipBackgroundColor').disable(); |
||||
|
this.latestChartWidgetConfigForm.get('tooltipBackgroundBlur').disable(); |
||||
|
} |
||||
|
this.updateLatestChartValidators(this.latestChartWidgetConfigForm, emitEvent, trigger); |
||||
|
} |
||||
|
|
||||
|
protected setupLatestChartControls(latestChartWidgetConfigForm: UntypedFormGroup, settings: S) {} |
||||
|
|
||||
|
protected prepareOutputLatestChartConfig(config: any) {} |
||||
|
|
||||
|
protected latestChartValidatorTriggers(): string[] { |
||||
|
return []; |
||||
|
} |
||||
|
|
||||
|
protected updateLatestChartValidators(latestChartWidgetConfigForm: UntypedFormGroup, emitEvent: boolean, trigger?: string) { |
||||
|
} |
||||
|
|
||||
|
protected abstract defaultSettings(): S; |
||||
|
|
||||
|
public abstract latestChartConfigTemplate(): TemplateRef<any>; |
||||
|
|
||||
|
private getSeries(datasources?: Datasource[]): DataKey[] { |
||||
|
if (datasources && datasources.length) { |
||||
|
return datasources[0].dataKeys || []; |
||||
|
} |
||||
|
return []; |
||||
|
} |
||||
|
|
||||
|
private setSeries(series: DataKey[], datasources?: Datasource[]) { |
||||
|
if (datasources && datasources.length) { |
||||
|
datasources[0].dataKeys = series; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private getCardButtons(config: WidgetConfig): string[] { |
||||
|
const buttons: string[] = []; |
||||
|
if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { |
||||
|
buttons.push('fullscreen'); |
||||
|
} |
||||
|
return buttons; |
||||
|
} |
||||
|
|
||||
|
private setCardButtons(buttons: string[], config: WidgetConfig) { |
||||
|
config.enableFullscreen = buttons.includes('fullscreen'); |
||||
|
} |
||||
|
|
||||
|
private _valuePreviewFn(): string { |
||||
|
const units: string = this.latestChartWidgetConfigForm.get('units').value; |
||||
|
const decimals: number = this.latestChartWidgetConfigForm.get('decimals').value; |
||||
|
return formatValue(110, decimals, units, false); |
||||
|
} |
||||
|
|
||||
|
private _tooltipValuePreviewFn(): string { |
||||
|
const tooltipValueType: LatestChartTooltipValueType = this.configForm().get('tooltipValueType').value; |
||||
|
const decimals: number = this.latestChartWidgetConfigForm.get('tooltipValueDecimals').value; |
||||
|
if (tooltipValueType === LatestChartTooltipValueType.percentage) { |
||||
|
return formatValue(35, decimals, '%', false); |
||||
|
} else { |
||||
|
const units: string = this.latestChartWidgetConfigForm.get('units').value; |
||||
|
return formatValue(110, decimals, units, false); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -1,276 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 The Thingsboard Authors |
|
||||
|
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
|
||||
you may not use this file except in compliance with the License. |
|
||||
You may obtain a copy of the License at |
|
||||
|
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
|
|
||||
Unless required by applicable law or agreed to in writing, software |
|
||||
distributed under the License is distributed on an "AS IS" BASIS, |
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||
See the License for the specific language governing permissions and |
|
||||
limitations under the License. |
|
||||
|
|
||||
--> |
|
||||
<ng-container [formGroup]="pieChartWidgetConfigForm"> |
|
||||
<tb-timewindow-config-panel *ngIf="displayTimewindowConfig" |
|
||||
[onlyHistoryTimewindow]="onlyHistoryTimewindow()" |
|
||||
formControlName="timewindowConfig"> |
|
||||
</tb-timewindow-config-panel> |
|
||||
<tb-datasources |
|
||||
[configMode]="basicMode" |
|
||||
hideDatasourceLabel |
|
||||
hideDataKeys |
|
||||
forceSingleDatasource |
|
||||
formControlName="datasources"> |
|
||||
</tb-datasources> |
|
||||
<tb-data-keys-panel |
|
||||
panelTitle="{{ 'widgets.chart.series' | translate }}" |
|
||||
addKeyTitle="{{ 'widgets.chart.add-series' | translate }}" |
|
||||
keySettingsTitle="{{ 'widgets.chart.series-settings' | translate }}" |
|
||||
removeKeyTitle="{{ 'widgets.chart.remove-series' | translate }}" |
|
||||
noKeysText="{{ 'widgets.chart.no-series' | translate }}" |
|
||||
requiredKeysText="{{ 'widgets.chart.no-series-error' | translate }}" |
|
||||
hideUnits |
|
||||
hideDecimals |
|
||||
hideDataKeyUnits |
|
||||
hideDataKeyDecimals |
|
||||
[datasourceType]="datasource?.type" |
|
||||
[deviceId]="datasource?.deviceId" |
|
||||
[entityAliasId]="datasource?.entityAliasId" |
|
||||
formControlName="series"> |
|
||||
</tb-data-keys-panel> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel"> |
|
||||
{{ 'widgets.pie-chart.label' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="labelPosition"> |
|
||||
<mat-option *ngFor="let position of pieChartLabelPositions" [value]="position"> |
|
||||
{{ pieChartLabelPositionTranslationMap.get(position) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="labelFont" |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
[previewText]="'Wind<br/>55%'"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="labelColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.pie-chart.border' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="borderColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.pie-chart.radius' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="radius" type="number" min="0" max="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>%</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle"> |
|
||||
{{ 'widget-config.card-title' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="titleFont" |
|
||||
clearButton |
|
||||
[previewText]="pieChartWidgetConfigForm.get('title').value" |
|
||||
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="titleColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon"> |
|
||||
{{ 'widget-config.card-icon' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-material-icon-select asBoxInput |
|
||||
iconClearButton |
|
||||
[color]="pieChartWidgetConfigForm.get('iconColor').value" |
|
||||
formControlName="titleIcon"> |
|
||||
</tb-material-icon-select> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="iconColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="clockwise"> |
|
||||
{{ 'widgets.latest-chart.clockwise-layout' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
|
||||
{{ 'widgets.latest-chart.sort-series' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widget-config.units-short</div> |
|
||||
<tb-unit-input |
|
||||
formControlName="units"> |
|
||||
</tb-unit-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widget-config.decimals-short</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="pieChartWidgetConfigForm.get('showLegend').value" [disabled]="!pieChartWidgetConfigForm.get('showLegend').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.legend' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.position' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="legendPosition"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
|
||||
{{ legendPositionTranslationMap.get(pos) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.label' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="legendLabelFont" |
|
||||
previewText="Wind"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendLabelColor"> |
|
||||
</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" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="pieChartWidgetConfigForm.get('showTooltip').value" [disabled]="!pieChartWidgetConfigForm.get('showTooltip').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.tooltip' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div>{{ 'tooltip.value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="tooltipValueType"> |
|
||||
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
|
||||
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="tooltipValueFont" |
|
||||
[previewText]="tooltipValuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-color' | translate }}</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipBackgroundColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-blur' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<tb-chart-animation-settings |
|
||||
formControlName="animation"> |
|
||||
</tb-chart-animation-settings> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.background.background' | translate }}</div> |
|
||||
<tb-background-settings formControlName="background"> |
|
||||
</tb-background-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-lt-md"> |
|
||||
<div translate>widget-config.show-card-buttons</div> |
|
||||
<mat-chip-listbox multiple formControlName="cardButtons"> |
|
||||
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
|
||||
</mat-chip-listbox> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<tb-widget-actions-panel |
|
||||
formControlName="actions"> |
|
||||
</tb-widget-actions-panel> |
|
||||
</ng-container> |
|
||||
@ -1,268 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 The Thingsboard Authors |
|
||||
|
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
|
||||
you may not use this file except in compliance with the License. |
|
||||
You may obtain a copy of the License at |
|
||||
|
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
|
|
||||
Unless required by applicable law or agreed to in writing, software |
|
||||
distributed under the License is distributed on an "AS IS" BASIS, |
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||
See the License for the specific language governing permissions and |
|
||||
limitations under the License. |
|
||||
|
|
||||
--> |
|
||||
<ng-container [formGroup]="polarAreaChartWidgetConfigForm"> |
|
||||
<tb-timewindow-config-panel *ngIf="displayTimewindowConfig" |
|
||||
[onlyHistoryTimewindow]="onlyHistoryTimewindow()" |
|
||||
formControlName="timewindowConfig"> |
|
||||
</tb-timewindow-config-panel> |
|
||||
<tb-datasources |
|
||||
[configMode]="basicMode" |
|
||||
hideDatasourceLabel |
|
||||
hideDataKeys |
|
||||
forceSingleDatasource |
|
||||
formControlName="datasources"> |
|
||||
</tb-datasources> |
|
||||
<tb-data-keys-panel |
|
||||
panelTitle="{{ 'widgets.chart.series' | translate }}" |
|
||||
addKeyTitle="{{ 'widgets.chart.add-series' | translate }}" |
|
||||
keySettingsTitle="{{ 'widgets.chart.series-settings' | translate }}" |
|
||||
removeKeyTitle="{{ 'widgets.chart.remove-series' | translate }}" |
|
||||
noKeysText="{{ 'widgets.chart.no-series' | translate }}" |
|
||||
requiredKeysText="{{ 'widgets.chart.no-series-error' | translate }}" |
|
||||
hideUnits |
|
||||
hideDecimals |
|
||||
hideDataKeyUnits |
|
||||
hideDataKeyDecimals |
|
||||
[datasourceType]="datasource?.type" |
|
||||
[deviceId]="datasource?.deviceId" |
|
||||
[entityAliasId]="datasource?.entityAliasId" |
|
||||
formControlName="series"> |
|
||||
</tb-data-keys-panel> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|
||||
<div class="tb-form-row column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle"> |
|
||||
{{ 'widget-config.card-title' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="titleFont" |
|
||||
clearButton |
|
||||
[previewText]="polarAreaChartWidgetConfigForm.get('title').value" |
|
||||
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="titleColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon"> |
|
||||
{{ 'widget-config.card-icon' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-material-icon-select asBoxInput |
|
||||
iconClearButton |
|
||||
[color]="polarAreaChartWidgetConfigForm.get('iconColor').value" |
|
||||
formControlName="titleIcon"> |
|
||||
</tb-material-icon-select> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="iconColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
|
||||
{{ 'widgets.latest-chart.sort-series' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widget-config.units-short</div> |
|
||||
<tb-unit-input |
|
||||
formControlName="units"> |
|
||||
</tb-unit-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widget-config.decimals-short</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div> |
|
||||
<tb-chart-bar-settings |
|
||||
formControlName="barSettings" |
|
||||
pieLabelPosition |
|
||||
[series]="false"> |
|
||||
</tb-chart-bar-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-axis</div> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div translate>widgets.chart.chart-axis.scale</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="axisMin" |
|
||||
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-max</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="axisMax" |
|
||||
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="axisTickLabelFont" |
|
||||
clearButton |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
previewText="100"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="axisTickLabelColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widgets.polar-area-chart.start-angle</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="angleAxisStartAngle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="polarAreaChartWidgetConfigForm.get('showLegend').value" [disabled]="!polarAreaChartWidgetConfigForm.get('showLegend').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.legend' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.position' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="legendPosition"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
|
||||
{{ legendPositionTranslationMap.get(pos) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.label' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="legendLabelFont" |
|
||||
previewText="Wind"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendLabelColor"> |
|
||||
</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" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="polarAreaChartWidgetConfigForm.get('showTooltip').value" [disabled]="!polarAreaChartWidgetConfigForm.get('showTooltip').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.tooltip' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div>{{ 'tooltip.value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="tooltipValueType"> |
|
||||
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
|
||||
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="tooltipValueFont" |
|
||||
[previewText]="tooltipValuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-color' | translate }}</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipBackgroundColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-blur' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<tb-chart-animation-settings |
|
||||
formControlName="animation"> |
|
||||
</tb-chart-animation-settings> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.background.background' | translate }}</div> |
|
||||
<tb-background-settings formControlName="background"> |
|
||||
</tb-background-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-lt-md"> |
|
||||
<div translate>widget-config.show-card-buttons</div> |
|
||||
<mat-chip-listbox multiple formControlName="cardButtons"> |
|
||||
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
|
||||
</mat-chip-listbox> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<tb-widget-actions-panel |
|
||||
formControlName="actions"> |
|
||||
</tb-widget-actions-panel> |
|
||||
</ng-container> |
|
||||
@ -1,340 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 The Thingsboard Authors |
|
||||
|
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
|
||||
you may not use this file except in compliance with the License. |
|
||||
You may obtain a copy of the License at |
|
||||
|
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
|
|
||||
Unless required by applicable law or agreed to in writing, software |
|
||||
distributed under the License is distributed on an "AS IS" BASIS, |
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||
See the License for the specific language governing permissions and |
|
||||
limitations under the License. |
|
||||
|
|
||||
--> |
|
||||
<ng-container [formGroup]="radarChartWidgetConfigForm"> |
|
||||
<tb-timewindow-config-panel *ngIf="displayTimewindowConfig" |
|
||||
[onlyHistoryTimewindow]="onlyHistoryTimewindow()" |
|
||||
formControlName="timewindowConfig"> |
|
||||
</tb-timewindow-config-panel> |
|
||||
<tb-datasources |
|
||||
[configMode]="basicMode" |
|
||||
hideDatasourceLabel |
|
||||
hideDataKeys |
|
||||
forceSingleDatasource |
|
||||
formControlName="datasources"> |
|
||||
</tb-datasources> |
|
||||
<tb-data-keys-panel |
|
||||
panelTitle="{{ 'widgets.chart.series' | translate }}" |
|
||||
addKeyTitle="{{ 'widgets.chart.add-series' | translate }}" |
|
||||
keySettingsTitle="{{ 'widgets.chart.series-settings' | translate }}" |
|
||||
removeKeyTitle="{{ 'widgets.chart.remove-series' | translate }}" |
|
||||
noKeysText="{{ 'widgets.chart.no-series' | translate }}" |
|
||||
requiredKeysText="{{ 'widgets.chart.no-series-error' | translate }}" |
|
||||
hideUnits |
|
||||
hideDecimals |
|
||||
hideDataKeyUnits |
|
||||
hideDataKeyDecimals |
|
||||
[datasourceType]="datasource?.type" |
|
||||
[deviceId]="datasource?.deviceId" |
|
||||
[entityAliasId]="datasource?.entityAliasId" |
|
||||
formControlName="series"> |
|
||||
</tb-data-keys-panel> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|
||||
<div class="tb-form-row column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle"> |
|
||||
{{ 'widget-config.card-title' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="titleFont" |
|
||||
clearButton |
|
||||
[previewText]="radarChartWidgetConfigForm.get('title').value" |
|
||||
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="titleColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon"> |
|
||||
{{ 'widget-config.card-icon' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-material-icon-select asBoxInput |
|
||||
iconClearButton |
|
||||
[color]="radarChartWidgetConfigForm.get('iconColor').value" |
|
||||
formControlName="titleIcon"> |
|
||||
</tb-material-icon-select> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="iconColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
|
||||
{{ 'widgets.latest-chart.sort-series' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widget-config.units-short</div> |
|
||||
<tb-unit-input |
|
||||
formControlName="units"> |
|
||||
</tb-unit-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widget-config.decimals-short</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-appearance</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.radar-chart.shape' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="shape"> |
|
||||
<mat-option *ngFor="let shape of radarChartShapes" [value]="shape"> |
|
||||
{{ radarChartShapeTranslations.get(shape) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widgets.radar-chart.color</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="color"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLine"> |
|
||||
{{ 'widgets.radar-chart.line' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="lineType"> |
|
||||
<mat-option *ngFor="let type of chartLineTypes" [value]="type"> |
|
||||
{{ chartLineTypeTranslations.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="lineWidth" |
|
||||
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showPoints"> |
|
||||
{{ 'widgets.radar-chart.points' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="pointShape"> |
|
||||
<mat-option *ngFor="let shape of chartShapes" [value]="shape"> |
|
||||
{{ chartShapeTranslations.get(shape) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="pointSize" |
|
||||
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-lt-md"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLabel"> |
|
||||
{{ 'widgets.radar-chart.points-label' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="labelPosition"> |
|
||||
<mat-option *ngFor="let position of chartLabelPositions" [value]="position"> |
|
||||
{{ chartLabelPositionTranslations.get(position) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="labelFont" |
|
||||
clearButton |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="labelColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<tb-chart-fill-settings |
|
||||
formControlName="fillAreaSettings"> |
|
||||
</tb-chart-fill-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-axis</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="axisShowLabel"> |
|
||||
{{ 'widgets.radar-chart.axis-label' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<tb-font-settings formControlName="axisLabelFont" |
|
||||
clearButton |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
previewText="Wind"> |
|
||||
</tb-font-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels"> |
|
||||
{{ 'widgets.radar-chart.ticks-label' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="axisTickLabelFont" |
|
||||
clearButton |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
previewText="100"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="axisTickLabelColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="radarChartWidgetConfigForm.get('showLegend').value" [disabled]="!radarChartWidgetConfigForm.get('showLegend').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.legend' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.position' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="legendPosition"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
|
||||
{{ legendPositionTranslationMap.get(pos) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.label' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="legendLabelFont" |
|
||||
previewText="Wind"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendLabelColor"> |
|
||||
</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" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="radarChartWidgetConfigForm.get('showTooltip').value" [disabled]="!radarChartWidgetConfigForm.get('showTooltip').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.tooltip' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div>{{ 'tooltip.value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="tooltipValueType"> |
|
||||
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
|
||||
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="tooltipValueFont" |
|
||||
[previewText]="tooltipValuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-color' | translate }}</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipBackgroundColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-blur' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<tb-chart-animation-settings |
|
||||
formControlName="animation"> |
|
||||
</tb-chart-animation-settings> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.background.background' | translate }}</div> |
|
||||
<tb-background-settings formControlName="background"> |
|
||||
</tb-background-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-lt-md"> |
|
||||
<div translate>widget-config.show-card-buttons</div> |
|
||||
<mat-chip-listbox multiple formControlName="cardButtons"> |
|
||||
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
|
||||
</mat-chip-listbox> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<tb-widget-actions-panel |
|
||||
formControlName="actions"> |
|
||||
</tb-widget-actions-panel> |
|
||||
</ng-container> |
|
||||
@ -1,169 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 The Thingsboard Authors |
|
||||
|
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
|
||||
you may not use this file except in compliance with the License. |
|
||||
You may obtain a copy of the License at |
|
||||
|
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
|
|
||||
Unless required by applicable law or agreed to in writing, software |
|
||||
distributed under the License is distributed on an "AS IS" BASIS, |
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||
See the License for the specific language governing permissions and |
|
||||
limitations under the License. |
|
||||
|
|
||||
--> |
|
||||
<ng-container [formGroup]="barChartWidgetSettingsForm"> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-chart-style</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
|
||||
{{ 'widgets.latest-chart.sort-series' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div> |
|
||||
<tb-chart-bar-settings |
|
||||
formControlName="barSettings" |
|
||||
[series]="false"> |
|
||||
</tb-chart-bar-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-axis</div> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div translate>widgets.chart.chart-axis.scale</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="axisMin" |
|
||||
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-max</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="axisMax" |
|
||||
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="axisTickLabelFont" |
|
||||
clearButton |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
previewText="100"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="axisTickLabelColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetSettingsForm.get('showLegend').value" [disabled]="!barChartWidgetSettingsForm.get('showLegend').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.legend' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.position' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="legendPosition"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
|
||||
{{ legendPositionTranslationMap.get(pos) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.label' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="legendLabelFont" |
|
||||
previewText="Wind power"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendLabelColor"> |
|
||||
</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" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!barChartWidgetSettingsForm.get('showTooltip').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.tooltip' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div>{{ 'tooltip.value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="tooltipValueType"> |
|
||||
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
|
||||
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="tooltipValueFont" |
|
||||
[previewText]="tooltipValuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-color' | translate }}</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipBackgroundColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-blur' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<tb-chart-animation-settings |
|
||||
formControlName="animation"> |
|
||||
</tb-chart-animation-settings> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.background.background' | translate }}</div> |
|
||||
<tb-background-settings formControlName="background"> |
|
||||
</tb-background-settings> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
@ -1,166 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 The Thingsboard Authors |
|
||||
|
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
|
||||
you may not use this file except in compliance with the License. |
|
||||
You may obtain a copy of the License at |
|
||||
|
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
|
|
||||
Unless required by applicable law or agreed to in writing, software |
|
||||
distributed under the License is distributed on an "AS IS" BASIS, |
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||
See the License for the specific language governing permissions and |
|
||||
limitations under the License. |
|
||||
|
|
||||
--> |
|
||||
<ng-container [formGroup]="doughnutWidgetSettingsForm"> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.doughnut.doughnut-card-style</div> |
|
||||
<tb-image-cards-select rowHeight="{{ horizontal ? '8:5' : '5:4' }}" |
|
||||
[cols]="{columns: 2, |
|
||||
breakpoints: { |
|
||||
'lt-sm': 1 |
|
||||
}}" |
|
||||
label="{{ 'widgets.doughnut.layout' | translate }}" formControlName="layout"> |
|
||||
<tb-image-cards-select-option *ngFor="let layout of doughnutLayouts" |
|
||||
[value]="layout" |
|
||||
[image]="doughnutLayoutImageMap.get(layout)"> |
|
||||
{{ doughnutLayoutTranslationMap.get(layout) | translate }} |
|
||||
</tb-image-cards-select-option> |
|
||||
</tb-image-cards-select> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="autoScale"> |
|
||||
{{ 'widgets.latest-chart.auto-scale' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="clockwise"> |
|
||||
{{ 'widgets.latest-chart.clockwise-layout' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
|
||||
{{ 'widgets.latest-chart.sort-series' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div [fxShow]="totalEnabled" class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.doughnut.central-total-value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="totalValueFont" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-settings formControlName="totalValueColor" settingsKey="{{'widgets.doughnut.central-total-value' | translate }}"> |
|
||||
</tb-color-settings> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="doughnutWidgetSettingsForm.get('showLegend').value" [disabled]="!doughnutWidgetSettingsForm.get('showLegend').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.legend' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.position' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="legendPosition"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
|
||||
{{ legendPositionTranslationMap.get(pos) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.label' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="legendLabelFont" |
|
||||
previewText="Wind power"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendLabelColor"> |
|
||||
</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" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="doughnutWidgetSettingsForm.get('showTooltip').value" [disabled]="!doughnutWidgetSettingsForm.get('showTooltip').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.tooltip' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div>{{ 'tooltip.value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="tooltipValueType"> |
|
||||
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
|
||||
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="tooltipValueFont" |
|
||||
[previewText]="tooltipValuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-color' | translate }}</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipBackgroundColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-blur' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<tb-chart-animation-settings |
|
||||
formControlName="animation"> |
|
||||
</tb-chart-animation-settings> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.background.background' | translate }}</div> |
|
||||
<tb-background-settings formControlName="background"> |
|
||||
</tb-background-settings> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
@ -0,0 +1,463 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="latestChartWidgetSettingsForm"> |
||||
|
<ng-container *ngTemplateOutlet="latestChartConfigTemplate()"></ng-container> |
||||
|
<div class="tb-form-panel tb-slide-toggle"> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetSettingsForm.get('showLegend').value" [disabled]="!latestChartWidgetSettingsForm.get('showLegend').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widget-config.legend' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'legend.position' | translate }}</div> |
||||
|
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="legendPosition"> |
||||
|
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
||||
|
{{ legendPositionTranslationMap.get(pos) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'legend.label' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="legendLabelFont" |
||||
|
previewText="Wind power"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="legendLabelColor"> |
||||
|
</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" |
||||
|
[previewText]="valuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="legendValueColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</div> |
||||
|
<div class="tb-form-panel tb-slide-toggle"> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!latestChartWidgetSettingsForm.get('showTooltip').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widget-config.tooltip' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<div>{{ 'tooltip.value' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="tooltipValueType"> |
||||
|
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
||||
|
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="tooltipValueFont" |
||||
|
[previewText]="tooltipValuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="tooltipValueColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'tooltip.background-color' | translate }}</div> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="tooltipBackgroundColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'tooltip.background-blur' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix>px</div> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</div> |
||||
|
<tb-chart-animation-settings |
||||
|
formControlName="animation"> |
||||
|
</tb-chart-animation-settings> |
||||
|
<div class="tb-form-panel no-padding"> |
||||
|
<div class="tb-form-row no-border space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-background-settings formControlName="background"> |
||||
|
</tb-background-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-template #pieChart> |
||||
|
<ng-container [formGroup]="latestChartWidgetSettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.pie-chart.pie-chart-card-style</div> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel"> |
||||
|
{{ 'widgets.pie-chart.label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="labelPosition"> |
||||
|
<mat-option *ngFor="let position of pieChartLabelPositions" [value]="position"> |
||||
|
{{ pieChartLabelPositionTranslationMap.get(position) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="labelFont" |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
[previewText]="'Wind<br/>55%'"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="labelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.pie-chart.border' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix>px</div> |
||||
|
</mat-form-field> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="borderColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.pie-chart.radius' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="radius" type="number" min="0" max="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix>%</div> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="clockwise"> |
||||
|
{{ 'widgets.latest-chart.clockwise-layout' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
||||
|
{{ 'widgets.latest-chart.sort-series' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
<ng-template #doughnutChart> |
||||
|
<ng-container [formGroup]="latestChartWidgetSettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.doughnut.doughnut-card-style</div> |
||||
|
<tb-image-cards-select rowHeight="{{ doughnutHorizontal ? '8:5' : '5:4' }}" |
||||
|
[cols]="{columns: 2, |
||||
|
breakpoints: { |
||||
|
'lt-sm': 1 |
||||
|
}}" |
||||
|
label="{{ 'widgets.doughnut.layout' | translate }}" formControlName="layout"> |
||||
|
<tb-image-cards-select-option *ngFor="let layout of doughnutLayouts" |
||||
|
[value]="layout" |
||||
|
[image]="doughnutLayoutImageMap.get(layout)"> |
||||
|
{{ doughnutLayoutTranslationMap.get(layout) | translate }} |
||||
|
</tb-image-cards-select-option> |
||||
|
</tb-image-cards-select> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="autoScale"> |
||||
|
{{ 'widgets.latest-chart.auto-scale' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="clockwise"> |
||||
|
{{ 'widgets.latest-chart.clockwise-layout' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
||||
|
{{ 'widgets.latest-chart.sort-series' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div [fxShow]="doughnutTotalEnabled" class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.doughnut.central-total-value' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="totalValueFont" |
||||
|
[previewText]="valuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-settings formControlName="totalValueColor" settingsKey="{{'widgets.doughnut.central-total-value' | translate }}"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
<ng-template #barChart> |
||||
|
<ng-container [formGroup]="latestChartWidgetSettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-chart-style</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
||||
|
{{ 'widgets.latest-chart.sort-series' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div> |
||||
|
<tb-chart-bar-settings |
||||
|
formControlName="barSettings" |
||||
|
[series]="false"> |
||||
|
</tb-chart-bar-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-axis</div> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<div translate>widgets.chart.chart-axis.scale</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="axisMin" |
||||
|
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-max</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="axisMax" |
||||
|
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="axisTickLabelFont" |
||||
|
clearButton |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
previewText="100"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="axisTickLabelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
<ng-template #polarAreaChart> |
||||
|
<ng-container [formGroup]="latestChartWidgetSettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-area-chart-style</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
||||
|
{{ 'widgets.latest-chart.sort-series' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div> |
||||
|
<tb-chart-bar-settings |
||||
|
formControlName="barSettings" |
||||
|
pieLabelPosition |
||||
|
[series]="false"> |
||||
|
</tb-chart-bar-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-axis</div> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<div translate>widgets.chart.chart-axis.scale</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="axisMin" |
||||
|
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-max</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="axisMax" |
||||
|
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="axisTickLabelFont" |
||||
|
clearButton |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
previewText="100"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="axisTickLabelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.polar-area-chart.start-angle</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="angleAxisStartAngle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
<ng-template #radarChart> |
||||
|
<ng-container [formGroup]="latestChartWidgetSettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-chart-style</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
||||
|
{{ 'widgets.latest-chart.sort-series' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-appearance</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.radar-chart.shape' | translate }}</div> |
||||
|
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="shape"> |
||||
|
<mat-option *ngFor="let shape of radarChartShapes" [value]="shape"> |
||||
|
{{ radarChartShapeTranslations.get(shape) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.radar-chart.color</div> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="color"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showLine"> |
||||
|
{{ 'widgets.radar-chart.line' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="lineType"> |
||||
|
<mat-option *ngFor="let type of chartLineTypes" [value]="type"> |
||||
|
{{ chartLineTypeTranslations.get(type) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="lineWidth" |
||||
|
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showPoints"> |
||||
|
{{ 'widgets.radar-chart.points' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="pointShape"> |
||||
|
<mat-option *ngFor="let shape of chartShapes" [value]="shape"> |
||||
|
{{ chartShapeTranslations.get(shape) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="pointSize" |
||||
|
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-lt-md"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showLabel"> |
||||
|
{{ 'widgets.radar-chart.points-label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="labelPosition"> |
||||
|
<mat-option *ngFor="let position of chartLabelPositions" [value]="position"> |
||||
|
{{ chartLabelPositionTranslations.get(position) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="labelFont" |
||||
|
clearButton |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
[previewText]="valuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="labelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-chart-fill-settings |
||||
|
formControlName="fillAreaSettings"> |
||||
|
</tb-chart-fill-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-axis</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="axisShowLabel"> |
||||
|
{{ 'widgets.radar-chart.axis-label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<tb-font-settings formControlName="axisLabelFont" |
||||
|
clearButton |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
previewText="Wind"> |
||||
|
</tb-font-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels"> |
||||
|
{{ 'widgets.radar-chart.ticks-label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="axisTickLabelFont" |
||||
|
clearButton |
||||
|
disabledLineHeight |
||||
|
forceSizeUnit="px" |
||||
|
previewText="100"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="axisTickLabelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
@ -0,0 +1,217 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Directive, TemplateRef } from '@angular/core'; |
||||
|
import { |
||||
|
LatestChartTooltipValueType, |
||||
|
latestChartTooltipValueTypes, |
||||
|
latestChartTooltipValueTypeTranslations, |
||||
|
LatestChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/latest-chart.models'; |
||||
|
import { |
||||
|
legendPositions, |
||||
|
legendPositionTranslationMap, |
||||
|
WidgetSettings, |
||||
|
WidgetSettingsComponent |
||||
|
} from '@shared/models/widget.models'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
||||
|
import { |
||||
|
DoughnutLayout, doughnutLayoutImages, |
||||
|
doughnutLayouts, |
||||
|
doughnutLayoutTranslations, horizontalDoughnutLayoutImages |
||||
|
} from '@home/components/widget/lib/chart/doughnut-widget.models'; |
||||
|
import { |
||||
|
chartLabelPositions, |
||||
|
chartLabelPositionTranslations, |
||||
|
chartLineTypes, |
||||
|
chartLineTypeTranslations, |
||||
|
chartShapes, |
||||
|
chartShapeTranslations, |
||||
|
pieChartLabelPositions, |
||||
|
pieChartLabelPositionTranslations |
||||
|
} from '@home/components/widget/lib/chart/chart.models'; |
||||
|
import { radarChartShapes, radarChartShapeTranslations } from '@home/components/widget/lib/chart/radar-chart.models'; |
||||
|
import { formatValue, isDefinedAndNotNull, mergeDeep } from '@core/utils'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
|
||||
|
@Directive() |
||||
|
// eslint-disable-next-line @angular-eslint/directive-class-suffix
|
||||
|
export abstract class LatestChartWidgetSettingsComponent<S extends LatestChartWidgetSettings> extends WidgetSettingsComponent { |
||||
|
|
||||
|
doughnutLayouts = doughnutLayouts; |
||||
|
|
||||
|
doughnutLayoutTranslationMap = doughnutLayoutTranslations; |
||||
|
|
||||
|
doughnutHorizontal = false; |
||||
|
|
||||
|
doughnutLayoutImageMap: Map<DoughnutLayout, string>; |
||||
|
|
||||
|
pieChartLabelPositions = pieChartLabelPositions; |
||||
|
|
||||
|
pieChartLabelPositionTranslationMap = pieChartLabelPositionTranslations; |
||||
|
|
||||
|
radarChartShapes = radarChartShapes; |
||||
|
|
||||
|
radarChartShapeTranslations = radarChartShapeTranslations; |
||||
|
|
||||
|
chartLineTypes = chartLineTypes; |
||||
|
|
||||
|
chartLineTypeTranslations = chartLineTypeTranslations; |
||||
|
|
||||
|
chartShapes = chartShapes; |
||||
|
|
||||
|
chartShapeTranslations = chartShapeTranslations; |
||||
|
|
||||
|
chartLabelPositions = chartLabelPositions; |
||||
|
|
||||
|
chartLabelPositionTranslations = chartLabelPositionTranslations; |
||||
|
|
||||
|
legendPositions = legendPositions; |
||||
|
|
||||
|
legendPositionTranslationMap = legendPositionTranslationMap; |
||||
|
|
||||
|
latestChartTooltipValueTypes = latestChartTooltipValueTypes; |
||||
|
|
||||
|
latestChartTooltipValueTypeTranslationMap = latestChartTooltipValueTypeTranslations; |
||||
|
|
||||
|
latestChartWidgetSettingsForm: UntypedFormGroup; |
||||
|
|
||||
|
valuePreviewFn = this._valuePreviewFn.bind(this); |
||||
|
|
||||
|
tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); |
||||
|
|
||||
|
get doughnutTotalEnabled(): boolean { |
||||
|
const layout: DoughnutLayout = this.latestChartWidgetSettingsForm.get('layout').value; |
||||
|
return layout === DoughnutLayout.with_total; |
||||
|
} |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected fb: UntypedFormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): UntypedFormGroup { |
||||
|
return this.latestChartWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected onWidgetConfigSet(widgetConfig: WidgetConfigComponentData) { |
||||
|
const params = widgetConfig.typeParameters as any; |
||||
|
this.doughnutHorizontal = isDefinedAndNotNull(params.horizontal) ? params.horizontal : false; |
||||
|
this.doughnutLayoutImageMap = this.doughnutHorizontal ? horizontalDoughnutLayoutImages : doughnutLayoutImages; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return mergeDeep<S>({} as S, this.defaultLatestChartSettings()); |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.latestChartWidgetSettingsForm = this.fb.group({ |
||||
|
|
||||
|
sortSeries: [settings.sortSeries, []], |
||||
|
|
||||
|
animation: [settings.animation, []], |
||||
|
|
||||
|
showLegend: [settings.showLegend, []], |
||||
|
legendPosition: [settings.legendPosition, []], |
||||
|
legendLabelFont: [settings.legendLabelFont, []], |
||||
|
legendLabelColor: [settings.legendLabelColor, []], |
||||
|
legendValueFont: [settings.legendValueFont, []], |
||||
|
legendValueColor: [settings.legendValueColor, []], |
||||
|
|
||||
|
showTooltip: [settings.showTooltip, []], |
||||
|
tooltipValueType: [settings.tooltipValueType, []], |
||||
|
tooltipValueDecimals: [settings.tooltipValueDecimals, []], |
||||
|
tooltipValueFont: [settings.tooltipValueFont, []], |
||||
|
tooltipValueColor: [settings.tooltipValueColor, []], |
||||
|
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []], |
||||
|
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []], |
||||
|
|
||||
|
background: [settings.background, []] |
||||
|
}); |
||||
|
this.setupLatestChartControls(this.latestChartWidgetSettingsForm, settings); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showLegend', 'showTooltip'].concat(this.latestChartValidatorTriggers()); |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
||||
|
const showLegend: boolean = this.latestChartWidgetSettingsForm.get('showLegend').value; |
||||
|
const showTooltip: boolean = this.latestChartWidgetSettingsForm.get('showTooltip').value; |
||||
|
|
||||
|
if (showLegend) { |
||||
|
this.latestChartWidgetSettingsForm.get('legendPosition').enable(); |
||||
|
this.latestChartWidgetSettingsForm.get('legendLabelFont').enable(); |
||||
|
this.latestChartWidgetSettingsForm.get('legendLabelColor').enable(); |
||||
|
this.latestChartWidgetSettingsForm.get('legendValueFont').enable(); |
||||
|
this.latestChartWidgetSettingsForm.get('legendValueColor').enable(); |
||||
|
} else { |
||||
|
this.latestChartWidgetSettingsForm.get('legendPosition').disable(); |
||||
|
this.latestChartWidgetSettingsForm.get('legendLabelFont').disable(); |
||||
|
this.latestChartWidgetSettingsForm.get('legendLabelColor').disable(); |
||||
|
this.latestChartWidgetSettingsForm.get('legendValueFont').disable(); |
||||
|
this.latestChartWidgetSettingsForm.get('legendValueColor').disable(); |
||||
|
} |
||||
|
if (showTooltip) { |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipValueType').enable(); |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipValueDecimals').enable(); |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipValueFont').enable(); |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipValueColor').enable(); |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipBackgroundColor').enable(); |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable(); |
||||
|
} else { |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipValueType').disable(); |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipValueDecimals').disable(); |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipValueFont').disable(); |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipValueColor').disable(); |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipBackgroundColor').disable(); |
||||
|
this.latestChartWidgetSettingsForm.get('tooltipBackgroundBlur').disable(); |
||||
|
} |
||||
|
this.updateLatestChartValidators(this.latestChartWidgetSettingsForm, emitEvent, trigger); |
||||
|
} |
||||
|
|
||||
|
protected setupLatestChartControls(latestChartWidgetSettingsForm: UntypedFormGroup, settings: WidgetSettings) {} |
||||
|
|
||||
|
protected latestChartValidatorTriggers(): string[] { |
||||
|
return []; |
||||
|
} |
||||
|
|
||||
|
protected updateLatestChartValidators(latestChartWidgetSettingsForm: UntypedFormGroup, emitEvent: boolean, trigger?: string) { |
||||
|
} |
||||
|
|
||||
|
protected abstract defaultLatestChartSettings(): S; |
||||
|
|
||||
|
public abstract latestChartConfigTemplate(): TemplateRef<any>; |
||||
|
|
||||
|
private _valuePreviewFn(): string { |
||||
|
const units: string = this.widgetConfig.config.units; |
||||
|
const decimals: number = this.widgetConfig.config.decimals; |
||||
|
return formatValue(110, decimals, units, false); |
||||
|
} |
||||
|
|
||||
|
private _tooltipValuePreviewFn(): string { |
||||
|
const tooltipValueType: LatestChartTooltipValueType = this.latestChartWidgetSettingsForm.get('tooltipValueType').value; |
||||
|
const decimals: number = this.latestChartWidgetSettingsForm.get('tooltipValueDecimals').value; |
||||
|
if (tooltipValueType === LatestChartTooltipValueType.percentage) { |
||||
|
return formatValue(35, decimals, '%', false); |
||||
|
} else { |
||||
|
const units: string = this.widgetConfig.config.units; |
||||
|
return formatValue(110, decimals, units, false); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -1,184 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 The Thingsboard Authors |
|
||||
|
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
|
||||
you may not use this file except in compliance with the License. |
|
||||
You may obtain a copy of the License at |
|
||||
|
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
|
|
||||
Unless required by applicable law or agreed to in writing, software |
|
||||
distributed under the License is distributed on an "AS IS" BASIS, |
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||
See the License for the specific language governing permissions and |
|
||||
limitations under the License. |
|
||||
|
|
||||
--> |
|
||||
<ng-container [formGroup]="pieChartWidgetSettingsForm"> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.pie-chart.pie-chart-card-style</div> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel"> |
|
||||
{{ 'widgets.pie-chart.label' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="labelPosition"> |
|
||||
<mat-option *ngFor="let position of pieChartLabelPositions" [value]="position"> |
|
||||
{{ pieChartLabelPositionTranslationMap.get(position) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="labelFont" |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
[previewText]="'Wind<br/>55%'"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="labelColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.pie-chart.border' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="borderColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.pie-chart.radius' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="radius" type="number" min="0" max="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>%</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="clockwise"> |
|
||||
{{ 'widgets.latest-chart.clockwise-layout' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
|
||||
{{ 'widgets.latest-chart.sort-series' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="pieChartWidgetSettingsForm.get('showLegend').value" [disabled]="!pieChartWidgetSettingsForm.get('showLegend').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.legend' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.position' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="legendPosition"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
|
||||
{{ legendPositionTranslationMap.get(pos) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.label' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="legendLabelFont" |
|
||||
previewText="Wind power"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendLabelColor"> |
|
||||
</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" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="pieChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!pieChartWidgetSettingsForm.get('showTooltip').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.tooltip' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div>{{ 'tooltip.value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="tooltipValueType"> |
|
||||
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
|
||||
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="tooltipValueFont" |
|
||||
[previewText]="tooltipValuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-color' | translate }}</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipBackgroundColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-blur' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<tb-chart-animation-settings |
|
||||
formControlName="animation"> |
|
||||
</tb-chart-animation-settings> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.background.background' | translate }}</div> |
|
||||
<tb-background-settings formControlName="background"> |
|
||||
</tb-background-settings> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
@ -1,176 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 The Thingsboard Authors |
|
||||
|
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
|
||||
you may not use this file except in compliance with the License. |
|
||||
You may obtain a copy of the License at |
|
||||
|
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
|
|
||||
Unless required by applicable law or agreed to in writing, software |
|
||||
distributed under the License is distributed on an "AS IS" BASIS, |
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||
See the License for the specific language governing permissions and |
|
||||
limitations under the License. |
|
||||
|
|
||||
--> |
|
||||
<ng-container [formGroup]="polarAreaChartWidgetSettingsForm"> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-area-chart-style</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
|
||||
{{ 'widgets.latest-chart.sort-series' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div> |
|
||||
<tb-chart-bar-settings |
|
||||
formControlName="barSettings" |
|
||||
pieLabelPosition |
|
||||
[series]="false"> |
|
||||
</tb-chart-bar-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-axis</div> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div translate>widgets.chart.chart-axis.scale</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="axisMin" |
|
||||
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-max</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="axisMax" |
|
||||
type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="axisTickLabelFont" |
|
||||
clearButton |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
previewText="100"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="axisTickLabelColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widgets.polar-area-chart.start-angle</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="angleAxisStartAngle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="polarAreaChartWidgetSettingsForm.get('showLegend').value" [disabled]="!polarAreaChartWidgetSettingsForm.get('showLegend').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.legend' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.position' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="legendPosition"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
|
||||
{{ legendPositionTranslationMap.get(pos) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.label' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="legendLabelFont" |
|
||||
previewText="Wind power"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendLabelColor"> |
|
||||
</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" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="polarAreaChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!polarAreaChartWidgetSettingsForm.get('showTooltip').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.tooltip' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div>{{ 'tooltip.value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="tooltipValueType"> |
|
||||
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
|
||||
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="tooltipValueFont" |
|
||||
[previewText]="tooltipValuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-color' | translate }}</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipBackgroundColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-blur' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<tb-chart-animation-settings |
|
||||
formControlName="animation"> |
|
||||
</tb-chart-animation-settings> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.background.background' | translate }}</div> |
|
||||
<tb-background-settings formControlName="background"> |
|
||||
</tb-background-settings> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
@ -1,248 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 The Thingsboard Authors |
|
||||
|
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
|
||||
you may not use this file except in compliance with the License. |
|
||||
You may obtain a copy of the License at |
|
||||
|
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
|
|
||||
Unless required by applicable law or agreed to in writing, software |
|
||||
distributed under the License is distributed on an "AS IS" BASIS, |
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||
See the License for the specific language governing permissions and |
|
||||
limitations under the License. |
|
||||
|
|
||||
--> |
|
||||
<ng-container [formGroup]="radarChartWidgetSettingsForm"> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-chart-style</div> |
|
||||
<div class="tb-form-row"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="sortSeries"> |
|
||||
{{ 'widgets.latest-chart.sort-series' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-appearance</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.radar-chart.shape' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="shape"> |
|
||||
<mat-option *ngFor="let shape of radarChartShapes" [value]="shape"> |
|
||||
{{ radarChartShapeTranslations.get(shape) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div translate>widgets.radar-chart.color</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="color"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLine"> |
|
||||
{{ 'widgets.radar-chart.line' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="lineType"> |
|
||||
<mat-option *ngFor="let type of chartLineTypes" [value]="type"> |
|
||||
{{ chartLineTypeTranslations.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="lineWidth" |
|
||||
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showPoints"> |
|
||||
{{ 'widgets.radar-chart.points' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="pointShape"> |
|
||||
<mat-option *ngFor="let shape of chartShapes" [value]="shape"> |
|
||||
{{ chartShapeTranslations.get(shape) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="pointSize" |
|
||||
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between column-lt-md"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLabel"> |
|
||||
{{ 'widgets.radar-chart.points-label' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="labelPosition"> |
|
||||
<mat-option *ngFor="let position of chartLabelPositions" [value]="position"> |
|
||||
{{ chartLabelPositionTranslations.get(position) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="labelFont" |
|
||||
clearButton |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="labelColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<tb-chart-fill-settings |
|
||||
formControlName="fillAreaSettings"> |
|
||||
</tb-chart-fill-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-panel"> |
|
||||
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-axis</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="axisShowLabel"> |
|
||||
{{ 'widgets.radar-chart.axis-label' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<tb-font-settings formControlName="axisLabelFont" |
|
||||
clearButton |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
previewText="Wind"> |
|
||||
</tb-font-settings> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels"> |
|
||||
{{ 'widgets.radar-chart.ticks-label' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="axisTickLabelFont" |
|
||||
clearButton |
|
||||
disabledLineHeight |
|
||||
forceSizeUnit="px" |
|
||||
previewText="100"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="axisTickLabelColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="radarChartWidgetSettingsForm.get('showLegend').value" [disabled]="!radarChartWidgetSettingsForm.get('showLegend').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.legend' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.position' | translate }}</div> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="legendPosition"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos"> |
|
||||
{{ legendPositionTranslationMap.get(pos) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'legend.label' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<tb-font-settings formControlName="legendLabelFont" |
|
||||
previewText="Wind power"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendLabelColor"> |
|
||||
</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" |
|
||||
[previewText]="valuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="legendValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<div class="tb-form-panel tb-slide-toggle"> |
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="radarChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!radarChartWidgetSettingsForm.get('showTooltip').value"> |
|
||||
<mat-expansion-panel-header fxLayout="row wrap"> |
|
||||
<mat-panel-title> |
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
|
||||
fxLayoutAlign="center"> |
|
||||
{{ 'widget-config.tooltip' | translate }} |
|
||||
</mat-slide-toggle> |
|
||||
</mat-panel-title> |
|
||||
</mat-expansion-panel-header> |
|
||||
<ng-template matExpansionPanelContent> |
|
||||
<div class="tb-form-row space-between column-xs"> |
|
||||
<div>{{ 'tooltip.value' | translate }}</div> |
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="tooltipValueType"> |
|
||||
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type"> |
|
||||
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
|
||||
</mat-form-field> |
|
||||
<tb-font-settings formControlName="tooltipValueFont" |
|
||||
[previewText]="tooltipValuePreviewFn"> |
|
||||
</tb-font-settings> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipValueColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-color' | translate }}</div> |
|
||||
<tb-color-input asBoxInput |
|
||||
colorClearButton |
|
||||
formControlName="tooltipBackgroundColor"> |
|
||||
</tb-color-input> |
|
||||
</div> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'tooltip.background-blur' | translate }}</div> |
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|
||||
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
||||
<div matSuffix>px</div> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
</mat-expansion-panel> |
|
||||
</div> |
|
||||
<tb-chart-animation-settings |
|
||||
formControlName="animation"> |
|
||||
</tb-chart-animation-settings> |
|
||||
<div class="tb-form-row space-between"> |
|
||||
<div>{{ 'widgets.background.background' | translate }}</div> |
|
||||
<tb-background-settings formControlName="background"> |
|
||||
</tb-background-settings> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
Loading…
Reference in new issue