Igor Kulikov
2 years ago
67 changed files with 3738 additions and 1247 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,29 @@ |
|||||
|
{ |
||||
|
"fqn": "charts.bars", |
||||
|
"name": "Bars", |
||||
|
"deprecated": true, |
||||
|
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACgCAMAAAB+IdObAAAA8FBMVEUhlvNMr1Bqamp5eXl7e3t8fHx9fX1+fn5/f3+AgICCgoKDg4OEhISGhoaHh4eKioqMjIyNjY2Ojo6QkJCRkZGSkpKWlpaXl5ebm5udnZ2enp6goKChoaGkpKSnp6epqamsrKyurq6xsbGzs7O1tbW2tra3t7e4uLi7u7u9vb3BwcHCwsLDw8PGxsbKysrNzc3Ozs7R0dHS0tLT09PZ2dna2trc3Nzd3d3e3t7g4ODh4eHj4+Pk5OTm5ubn5+fo6Ojp6enu7u7w8PDz8/P0Qzb09PT29vb39/f5+fn6+vr7+/v8/Pz9/f3+/v7/wQf///+dc+aLAAAAAWJLR0RPbmZBSQAAAcFJREFUeNrt3ds2AgEYhuHsaSOZbAvZi0r2YYjCJOW7/7txZhkcDNbM6h/vdwfPmlX/ybtmEorJErGCeJLadz3rkKPpZamaLTp925DHdFvSpKelU9uQ/cLKhtcdk7YqtiHruevtojch7ZZtQ0o1dcdfRqXNqm1IbVU3OaVamm/YhvQW5zIXOknnC5JUt7qEpE5fUv/5HVePy2UHAgQIECBAgAABAgQIECBxgrwGHBAgQIAAAQIECBAgQIAAAQIECJC/QRIBN0iQ+66voDMLuRp2fQWdVUhvNun6CjqrkJ0Dx/UVdEYhzXzfcX0FnVFIrlSZ2mx/LOiMQuqHh6k972NBZ/fv13G/KeiCQkIu4358EL8UdBafSGwuOxAgQIAAAQIECJDYQB4CDggQIECAAAECBAgQIECAAAECBAgQIECA/BrSufn0DjqjkEZmLXkWaUEXEmThXMeFSAu68H4j5b1IC7rQILfZTqQFXViQ1nRTL1EWdCFBnmYuJUVZ0IUEWR1xHKcXZUEXFDLwBR2XHQgQIECAAAEC5H9ChgIOCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgxiBmv+L6Bl9pkxYph15gAAAAAElFTkSuQmCC", |
||||
|
"description": "Displays latest values of the attributes or time-series data for multiple entities as separate bars.", |
||||
|
"descriptor": { |
||||
|
"type": "latest", |
||||
|
"sizeX": 7, |
||||
|
"sizeY": 5, |
||||
|
"resources": [ |
||||
|
{ |
||||
|
"url": "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js" |
||||
|
} |
||||
|
], |
||||
|
"templateHtml": "<canvas id=\"barChart\"></canvas>\n", |
||||
|
"templateCss": "", |
||||
|
"controllerScript": "self.onInit = function() {\n $scope = self.ctx.$scope;\n utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n settings = utils.deepClone(self.ctx.settings) || {};\n settings.showTooltip = utils.defaultValue(settings.showTooltip, true);\n \n Chart.defaults.global.tooltips.enabled = settings.showTooltip;\n \n var barData = {\n labels: [],\n datasets: []\n };\n \n for (var i = 0; i < self.ctx.datasources.length; i++) {\n var datasource = self.ctx.datasources[i];\n for (var d = 0; d < datasource.dataKeys.length; d++) {\n var dataKey = datasource.dataKeys[d];\n var units = dataKey.units && dataKey.units.length ? dataKey.units : self.ctx.units;\n units = units ? (' (' + units + ')') : '';\n var dataset = {\n label: dataKey.label + units,\n data: [0],\n backgroundColor: [dataKey.color],\n borderColor: [dataKey.color],\n borderWidth: 1\n }\n barData.datasets.push(dataset);\n }\n }\n\n var ctx = $('#barChart', self.ctx.$container);\n self.ctx.chart = new Chart(ctx, {\n type: 'bar',\n data: barData,\n options: {\n responsive: false,\n maintainAspectRatio: false,\n scales: {\n yAxes: [{\n ticks: {\n beginAtZero:true\n }\n }]\n }\n }\n });\n \n self.onResize();\n}\n\nself.onDataUpdated = function() {\n var c = 0;\n for (var i = 0; i < self.ctx.chart.data.datasets.length; i++) {\n var dataset = self.ctx.chart.data.datasets[i];\n var cellData = self.ctx.data[i]; \n if (cellData.data.length > 0) {\n var decimals;\n if (typeof cellData.dataKey.decimals !== 'undefined' \n && cellData.dataKey.decimals !== null ) {\n decimals = cellData.dataKey.decimals; \n } else {\n decimals = self.ctx.decimals;\n }\n var tvPair = cellData.data[cellData.data.length - 1];\n var value = self.ctx.utils.formatValue(tvPair[1], decimals);\n dataset.data[0] = parseFloat(value);\n }\n }\n self.ctx.chart.update();\n}\n\nself.onResize = function() {\n self.ctx.chart.resize();\n}\n\nself.onDestroy = function() {\n self.ctx.chart.destroy();\n self.ctx.chart = null;\n}\n", |
||||
|
"settingsSchema": "", |
||||
|
"dataKeySettingsSchema": "{}\n", |
||||
|
"settingsDirective": "tb-chart-widget-settings", |
||||
|
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.545701115289893,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.2592906835158064,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.12880275585455747,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Bars\"}" |
||||
|
}, |
||||
|
"externalId": null, |
||||
|
"tags": [ |
||||
|
"bar", |
||||
|
"bar chart" |
||||
|
] |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,261 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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> |
||||
@ -0,0 +1,316 @@ |
|||||
|
///
|
||||
|
/// 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 { Component } from '@angular/core'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
import { |
||||
|
DataKey, |
||||
|
Datasource, |
||||
|
datasourcesHasAggregation, |
||||
|
datasourcesHasOnlyComparisonAggregation, |
||||
|
legendPositions, |
||||
|
legendPositionTranslationMap, |
||||
|
WidgetConfig |
||||
|
} from '@shared/models/widget.models'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { formatValue, isUndefined, mergeDeep } from '@core/utils'; |
||||
|
import { |
||||
|
getTimewindowConfig, |
||||
|
setTimewindowConfig |
||||
|
} from '@home/components/widget/config/timewindow-config-panel.component'; |
||||
|
import { |
||||
|
LatestChartTooltipValueType, |
||||
|
latestChartTooltipValueTypes, |
||||
|
latestChartTooltipValueTypeTranslations |
||||
|
} from '@home/components/widget/lib/chart/latest-chart.models'; |
||||
|
import { |
||||
|
barChartWidgetDefaultSettings, |
||||
|
BarChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/bar-chart-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-bar-chart-basic-config', |
||||
|
templateUrl: './bar-chart-basic-config.component.html', |
||||
|
styleUrls: ['../basic-config.scss'] |
||||
|
}) |
||||
|
export class BarChartBasicConfigComponent extends BasicWidgetConfigComponent { |
||||
|
|
||||
|
public get datasource(): Datasource { |
||||
|
const datasources: Datasource[] = this.barChartWidgetConfigForm.get('datasources').value; |
||||
|
if (datasources && datasources.length) { |
||||
|
return datasources[0]; |
||||
|
} else { |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public get displayTimewindowConfig(): boolean { |
||||
|
const datasources = this.barChartWidgetConfigForm.get('datasources').value; |
||||
|
return datasourcesHasAggregation(datasources); |
||||
|
} |
||||
|
|
||||
|
public onlyHistoryTimewindow(): boolean { |
||||
|
const datasources = this.barChartWidgetConfigForm.get('datasources').value; |
||||
|
return datasourcesHasOnlyComparisonAggregation(datasources); |
||||
|
} |
||||
|
|
||||
|
legendPositions = legendPositions; |
||||
|
|
||||
|
legendPositionTranslationMap = legendPositionTranslationMap; |
||||
|
|
||||
|
latestChartTooltipValueTypes = latestChartTooltipValueTypes; |
||||
|
|
||||
|
latestChartTooltipValueTypeTranslationMap = latestChartTooltipValueTypeTranslations; |
||||
|
|
||||
|
barChartWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
valuePreviewFn = this._valuePreviewFn.bind(this); |
||||
|
|
||||
|
tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected widgetConfigComponent: WidgetConfigComponent, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store, widgetConfigComponent); |
||||
|
} |
||||
|
|
||||
|
protected configForm(): UntypedFormGroup { |
||||
|
return this.barChartWidgetConfigForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultDataKeys(configData: WidgetConfigComponentData): DataKey[] { |
||||
|
return [{ name: 'windPower', label: 'Wind', type: DataKeyType.timeseries, units: '', decimals: 0, color: '#08872B' }, |
||||
|
{ name: 'solarPower', label: 'Solar', type: DataKeyType.timeseries, units: '', decimals: 0, color: '#FF4D5A' }, |
||||
|
{ name: 'hydroelectricPower', label: 'Hydroelectric', type: DataKeyType.timeseries, units: '', decimals: 0, color: '#FFDE30' }]; |
||||
|
} |
||||
|
|
||||
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
||||
|
const settings: BarChartWidgetSettings = mergeDeep<BarChartWidgetSettings>({} as BarChartWidgetSettings, |
||||
|
barChartWidgetDefaultSettings, configData.config.settings as BarChartWidgetSettings); |
||||
|
this.barChartWidgetConfigForm = 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, []], |
||||
|
|
||||
|
barSettings: [settings.barSettings, []], |
||||
|
|
||||
|
axisMin: [settings.axisMin, []], |
||||
|
axisMax: [settings.axisMax, []], |
||||
|
axisTickLabelFont: [settings.axisTickLabelFont, []], |
||||
|
axisTickLabelColor: [settings.axisTickLabelColor, []], |
||||
|
|
||||
|
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 || {}, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
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.barSettings = config.barSettings; |
||||
|
|
||||
|
this.widgetConfig.config.settings.axisMin = config.axisMin; |
||||
|
this.widgetConfig.config.settings.axisMax = config.axisMax; |
||||
|
this.widgetConfig.config.settings.axisTickLabelFont = config.axisTickLabelFont; |
||||
|
this.widgetConfig.config.settings.axisTickLabelColor = config.axisTickLabelColor; |
||||
|
|
||||
|
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; |
||||
|
|
||||
|
return this.widgetConfig; |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showTitle', 'showTitleIcon', 'showLegend', 'showTooltip']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
||||
|
const showTitle: boolean = this.barChartWidgetConfigForm.get('showTitle').value; |
||||
|
const showTitleIcon: boolean = this.barChartWidgetConfigForm.get('showTitleIcon').value; |
||||
|
const showLegend: boolean = this.barChartWidgetConfigForm.get('showLegend').value; |
||||
|
const showTooltip: boolean = this.barChartWidgetConfigForm.get('showTooltip').value; |
||||
|
|
||||
|
if (showTitle) { |
||||
|
this.barChartWidgetConfigForm.get('title').enable(); |
||||
|
this.barChartWidgetConfigForm.get('titleFont').enable(); |
||||
|
this.barChartWidgetConfigForm.get('titleColor').enable(); |
||||
|
this.barChartWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false}); |
||||
|
if (showTitleIcon) { |
||||
|
this.barChartWidgetConfigForm.get('titleIcon').enable(); |
||||
|
this.barChartWidgetConfigForm.get('iconColor').enable(); |
||||
|
} else { |
||||
|
this.barChartWidgetConfigForm.get('titleIcon').disable(); |
||||
|
this.barChartWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
} else { |
||||
|
this.barChartWidgetConfigForm.get('title').disable(); |
||||
|
this.barChartWidgetConfigForm.get('titleFont').disable(); |
||||
|
this.barChartWidgetConfigForm.get('titleColor').disable(); |
||||
|
this.barChartWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false}); |
||||
|
this.barChartWidgetConfigForm.get('titleIcon').disable(); |
||||
|
this.barChartWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
if (showLegend) { |
||||
|
this.barChartWidgetConfigForm.get('legendPosition').enable(); |
||||
|
this.barChartWidgetConfigForm.get('legendLabelFont').enable(); |
||||
|
this.barChartWidgetConfigForm.get('legendLabelColor').enable(); |
||||
|
this.barChartWidgetConfigForm.get('legendValueFont').enable(); |
||||
|
this.barChartWidgetConfigForm.get('legendValueColor').enable(); |
||||
|
} else { |
||||
|
this.barChartWidgetConfigForm.get('legendPosition').disable(); |
||||
|
this.barChartWidgetConfigForm.get('legendLabelFont').disable(); |
||||
|
this.barChartWidgetConfigForm.get('legendLabelColor').disable(); |
||||
|
this.barChartWidgetConfigForm.get('legendValueFont').disable(); |
||||
|
this.barChartWidgetConfigForm.get('legendValueColor').disable(); |
||||
|
} |
||||
|
if (showTooltip) { |
||||
|
this.barChartWidgetConfigForm.get('tooltipValueType').enable(); |
||||
|
this.barChartWidgetConfigForm.get('tooltipValueDecimals').enable(); |
||||
|
this.barChartWidgetConfigForm.get('tooltipValueFont').enable(); |
||||
|
this.barChartWidgetConfigForm.get('tooltipValueColor').enable(); |
||||
|
this.barChartWidgetConfigForm.get('tooltipBackgroundColor').enable(); |
||||
|
this.barChartWidgetConfigForm.get('tooltipBackgroundBlur').enable(); |
||||
|
} else { |
||||
|
this.barChartWidgetConfigForm.get('tooltipValueType').disable(); |
||||
|
this.barChartWidgetConfigForm.get('tooltipValueDecimals').disable(); |
||||
|
this.barChartWidgetConfigForm.get('tooltipValueFont').disable(); |
||||
|
this.barChartWidgetConfigForm.get('tooltipValueColor').disable(); |
||||
|
this.barChartWidgetConfigForm.get('tooltipBackgroundColor').disable(); |
||||
|
this.barChartWidgetConfigForm.get('tooltipBackgroundBlur').disable(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
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.barChartWidgetConfigForm.get('units').value; |
||||
|
const decimals: number = this.barChartWidgetConfigForm.get('decimals').value; |
||||
|
return formatValue(110, decimals, units, false); |
||||
|
} |
||||
|
|
||||
|
private _tooltipValuePreviewFn(): string { |
||||
|
const tooltipValueType: LatestChartTooltipValueType = this.barChartWidgetConfigForm.get('tooltipValueType').value; |
||||
|
const decimals: number = this.barChartWidgetConfigForm.get('tooltipValueDecimals').value; |
||||
|
if (tooltipValueType === LatestChartTooltipValueType.percentage) { |
||||
|
return formatValue(35, decimals, '%', false); |
||||
|
} else { |
||||
|
const units: string = this.barChartWidgetConfigForm.get('units').value; |
||||
|
return formatValue(110, decimals, units, false); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,268 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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> |
||||
@ -0,0 +1,318 @@ |
|||||
|
///
|
||||
|
/// 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 { Component } from '@angular/core'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
import { |
||||
|
DataKey, |
||||
|
Datasource, |
||||
|
datasourcesHasAggregation, |
||||
|
datasourcesHasOnlyComparisonAggregation, |
||||
|
legendPositions, |
||||
|
legendPositionTranslationMap, |
||||
|
WidgetConfig |
||||
|
} from '@shared/models/widget.models'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { formatValue, isUndefined, mergeDeep } from '@core/utils'; |
||||
|
import { |
||||
|
getTimewindowConfig, |
||||
|
setTimewindowConfig |
||||
|
} from '@home/components/widget/config/timewindow-config-panel.component'; |
||||
|
import { |
||||
|
LatestChartTooltipValueType, |
||||
|
latestChartTooltipValueTypes, |
||||
|
latestChartTooltipValueTypeTranslations |
||||
|
} from '@home/components/widget/lib/chart/latest-chart.models'; |
||||
|
import { |
||||
|
polarAreaChartWidgetDefaultSettings, |
||||
|
PolarAreaChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/polar-area-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-polar-area-chart-basic-config', |
||||
|
templateUrl: './polar-area-chart-basic-config.component.html', |
||||
|
styleUrls: ['../basic-config.scss'] |
||||
|
}) |
||||
|
export class PolarAreaChartBasicConfigComponent extends BasicWidgetConfigComponent { |
||||
|
|
||||
|
public get datasource(): Datasource { |
||||
|
const datasources: Datasource[] = this.polarAreaChartWidgetConfigForm.get('datasources').value; |
||||
|
if (datasources && datasources.length) { |
||||
|
return datasources[0]; |
||||
|
} else { |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public get displayTimewindowConfig(): boolean { |
||||
|
const datasources = this.polarAreaChartWidgetConfigForm.get('datasources').value; |
||||
|
return datasourcesHasAggregation(datasources); |
||||
|
} |
||||
|
|
||||
|
public onlyHistoryTimewindow(): boolean { |
||||
|
const datasources = this.polarAreaChartWidgetConfigForm.get('datasources').value; |
||||
|
return datasourcesHasOnlyComparisonAggregation(datasources); |
||||
|
} |
||||
|
|
||||
|
legendPositions = legendPositions; |
||||
|
|
||||
|
legendPositionTranslationMap = legendPositionTranslationMap; |
||||
|
|
||||
|
latestChartTooltipValueTypes = latestChartTooltipValueTypes; |
||||
|
|
||||
|
latestChartTooltipValueTypeTranslationMap = latestChartTooltipValueTypeTranslations; |
||||
|
|
||||
|
polarAreaChartWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
valuePreviewFn = this._valuePreviewFn.bind(this); |
||||
|
|
||||
|
tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected widgetConfigComponent: WidgetConfigComponent, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store, widgetConfigComponent); |
||||
|
} |
||||
|
|
||||
|
protected configForm(): UntypedFormGroup { |
||||
|
return this.polarAreaChartWidgetConfigForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultDataKeys(configData: WidgetConfigComponentData): DataKey[] { |
||||
|
return [{ name: 'windPower', label: 'Wind', type: DataKeyType.timeseries, units: '', decimals: 0, color: '#08872B' }, |
||||
|
{ name: 'solarPower', label: 'Solar', type: DataKeyType.timeseries, units: '', decimals: 0, color: '#FF4D5A' }, |
||||
|
{ name: 'hydroelectricPower', label: 'Hydroelectric', type: DataKeyType.timeseries, units: '', decimals: 0, color: '#FFDE30' }]; |
||||
|
} |
||||
|
|
||||
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
||||
|
const settings: PolarAreaChartWidgetSettings = mergeDeep<PolarAreaChartWidgetSettings>({} as PolarAreaChartWidgetSettings, |
||||
|
polarAreaChartWidgetDefaultSettings, configData.config.settings as PolarAreaChartWidgetSettings); |
||||
|
this.polarAreaChartWidgetConfigForm = 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, []], |
||||
|
|
||||
|
barSettings: [settings.barSettings, []], |
||||
|
|
||||
|
axisMin: [settings.axisMin, []], |
||||
|
axisMax: [settings.axisMax, []], |
||||
|
axisTickLabelFont: [settings.axisTickLabelFont, []], |
||||
|
axisTickLabelColor: [settings.axisTickLabelColor, []], |
||||
|
angleAxisStartAngle: [settings.angleAxisStartAngle, [Validators.min(0), Validators.max(360)]], |
||||
|
|
||||
|
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 || {}, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
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.barSettings = config.barSettings; |
||||
|
|
||||
|
this.widgetConfig.config.settings.axisMin = config.axisMin; |
||||
|
this.widgetConfig.config.settings.axisMax = config.axisMax; |
||||
|
this.widgetConfig.config.settings.axisTickLabelFont = config.axisTickLabelFont; |
||||
|
this.widgetConfig.config.settings.axisTickLabelColor = config.axisTickLabelColor; |
||||
|
this.widgetConfig.config.settings.angleAxisStartAngle = config.angleAxisStartAngle; |
||||
|
|
||||
|
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; |
||||
|
|
||||
|
return this.widgetConfig; |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showTitle', 'showTitleIcon', 'showLegend', 'showTooltip']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
||||
|
const showTitle: boolean = this.polarAreaChartWidgetConfigForm.get('showTitle').value; |
||||
|
const showTitleIcon: boolean = this.polarAreaChartWidgetConfigForm.get('showTitleIcon').value; |
||||
|
const showLegend: boolean = this.polarAreaChartWidgetConfigForm.get('showLegend').value; |
||||
|
const showTooltip: boolean = this.polarAreaChartWidgetConfigForm.get('showTooltip').value; |
||||
|
|
||||
|
if (showTitle) { |
||||
|
this.polarAreaChartWidgetConfigForm.get('title').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('titleFont').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('titleColor').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false}); |
||||
|
if (showTitleIcon) { |
||||
|
this.polarAreaChartWidgetConfigForm.get('titleIcon').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('iconColor').enable(); |
||||
|
} else { |
||||
|
this.polarAreaChartWidgetConfigForm.get('titleIcon').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
} else { |
||||
|
this.polarAreaChartWidgetConfigForm.get('title').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('titleFont').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('titleColor').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false}); |
||||
|
this.polarAreaChartWidgetConfigForm.get('titleIcon').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
if (showLegend) { |
||||
|
this.polarAreaChartWidgetConfigForm.get('legendPosition').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('legendLabelFont').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('legendLabelColor').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('legendValueFont').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('legendValueColor').enable(); |
||||
|
} else { |
||||
|
this.polarAreaChartWidgetConfigForm.get('legendPosition').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('legendLabelFont').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('legendLabelColor').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('legendValueFont').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('legendValueColor').disable(); |
||||
|
} |
||||
|
if (showTooltip) { |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipValueType').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipValueDecimals').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipValueFont').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipValueColor').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipBackgroundColor').enable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipBackgroundBlur').enable(); |
||||
|
} else { |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipValueType').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipValueDecimals').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipValueFont').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipValueColor').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipBackgroundColor').disable(); |
||||
|
this.polarAreaChartWidgetConfigForm.get('tooltipBackgroundBlur').disable(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
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.polarAreaChartWidgetConfigForm.get('units').value; |
||||
|
const decimals: number = this.polarAreaChartWidgetConfigForm.get('decimals').value; |
||||
|
return formatValue(110, decimals, units, false); |
||||
|
} |
||||
|
|
||||
|
private _tooltipValuePreviewFn(): string { |
||||
|
const tooltipValueType: LatestChartTooltipValueType = this.polarAreaChartWidgetConfigForm.get('tooltipValueType').value; |
||||
|
const decimals: number = this.polarAreaChartWidgetConfigForm.get('tooltipValueDecimals').value; |
||||
|
if (tooltipValueType === LatestChartTooltipValueType.percentage) { |
||||
|
return formatValue(35, decimals, '%', false); |
||||
|
} else { |
||||
|
const units: string = this.polarAreaChartWidgetConfigForm.get('units').value; |
||||
|
return formatValue(110, decimals, units, false); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,75 @@ |
|||||
|
///
|
||||
|
/// 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 { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { WidgetComponent } from '@home/components/widget/widget.component'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { |
||||
|
LatestChartComponent, |
||||
|
LatestChartComponentCallbacks |
||||
|
} from '@home/components/widget/lib/chart/latest-chart.component'; |
||||
|
import { |
||||
|
barChartWidgetBarsChartSettings, |
||||
|
barChartWidgetDefaultSettings, |
||||
|
BarChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/bar-chart-widget.models'; |
||||
|
import { TbBarsChart } from '@home/components/widget/lib/chart/bars-chart'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-bar-chart-widget', |
||||
|
templateUrl: './latest-chart-widget.component.html', |
||||
|
styleUrls: [], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class BarChartWidgetComponent implements OnInit { |
||||
|
|
||||
|
@ViewChild('latestChart') |
||||
|
latestChart: LatestChartComponent; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@Input() |
||||
|
widgetTitlePanel: TemplateRef<any>; |
||||
|
|
||||
|
settings: BarChartWidgetSettings; |
||||
|
|
||||
|
callbacks: LatestChartComponentCallbacks; |
||||
|
|
||||
|
constructor(private widgetComponent: WidgetComponent, |
||||
|
private translate: TranslateService) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.barChartWidget = this; |
||||
|
this.settings = {...barChartWidgetDefaultSettings, ...this.ctx.settings}; |
||||
|
this.callbacks = { |
||||
|
createChart: (chartShape, renderer) => { |
||||
|
const settings = barChartWidgetBarsChartSettings(this.settings); |
||||
|
return new TbBarsChart(this.ctx, settings, chartShape.nativeElement, renderer, this.translate, true); |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
public onInit() { |
||||
|
this.latestChart?.onInit(); |
||||
|
} |
||||
|
|
||||
|
public onDataUpdated() { |
||||
|
this.latestChart?.onDataUpdated(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,78 @@ |
|||||
|
///
|
||||
|
/// 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 { |
||||
|
latestChartWidgetDefaultSettings, |
||||
|
LatestChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/latest-chart.models'; |
||||
|
import { mergeDeep } from '@core/utils'; |
||||
|
import { |
||||
|
barsChartAnimationDefaultSettings, |
||||
|
BarsChartSettings |
||||
|
} from '@home/components/widget/lib/chart/bars-chart.models'; |
||||
|
import { Font } from '@shared/models/widget-settings.models'; |
||||
|
import { DeepPartial } from '@shared/models/common'; |
||||
|
import { |
||||
|
ChartAnimationSettings, |
||||
|
chartBarDefaultSettings, |
||||
|
ChartBarSettings, |
||||
|
chartColorScheme |
||||
|
} from '@home/components/widget/lib/chart/chart.models'; |
||||
|
|
||||
|
export interface BarChartWidgetSettings extends LatestChartWidgetSettings { |
||||
|
axisMin?: number; |
||||
|
axisMax?: number; |
||||
|
axisTickLabelFont: Font; |
||||
|
axisTickLabelColor: string; |
||||
|
barSettings: ChartBarSettings; |
||||
|
} |
||||
|
|
||||
|
export const barChartWidgetDefaultSettings: BarChartWidgetSettings = { |
||||
|
...latestChartWidgetDefaultSettings, |
||||
|
animation: mergeDeep({} as ChartAnimationSettings, |
||||
|
barsChartAnimationDefaultSettings), |
||||
|
axisTickLabelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '1' |
||||
|
}, |
||||
|
axisTickLabelColor: chartColorScheme['axis.tickLabel'].light, |
||||
|
barSettings: mergeDeep({} as ChartBarSettings, chartBarDefaultSettings, |
||||
|
{barWidth: 80, showLabel: true} as ChartBarSettings) |
||||
|
}; |
||||
|
|
||||
|
export const barChartWidgetBarsChartSettings = (settings: BarChartWidgetSettings): DeepPartial<BarsChartSettings> => ({ |
||||
|
polar: false, |
||||
|
axisMin: settings.axisMin, |
||||
|
axisMax: settings.axisMax, |
||||
|
axisTickLabelFont: settings.axisTickLabelFont, |
||||
|
axisTickLabelColor: settings.axisTickLabelColor, |
||||
|
barSettings: settings.barSettings, |
||||
|
sortSeries: settings.sortSeries, |
||||
|
showTotal: false, |
||||
|
animation: settings.animation, |
||||
|
showLegend: settings.showLegend, |
||||
|
showTooltip: settings.showTooltip, |
||||
|
tooltipValueType: settings.tooltipValueType, |
||||
|
tooltipValueDecimals: settings.tooltipValueDecimals, |
||||
|
tooltipValueFont: settings.tooltipValueFont, |
||||
|
tooltipValueColor: settings.tooltipValueColor, |
||||
|
tooltipBackgroundColor: settings.tooltipBackgroundColor, |
||||
|
tooltipBackgroundBlur: settings.tooltipBackgroundBlur |
||||
|
}); |
||||
@ -0,0 +1,61 @@ |
|||||
|
///
|
||||
|
/// 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 { latestChartDefaultSettings, LatestChartSettings } from '@home/components/widget/lib/chart/latest-chart.models'; |
||||
|
import { mergeDeep } from '@core/utils'; |
||||
|
import { |
||||
|
chartAnimationDefaultSettings, |
||||
|
ChartAnimationSettings, |
||||
|
chartBarDefaultSettings, |
||||
|
ChartBarSettings, |
||||
|
chartColorScheme |
||||
|
} from '@home/components/widget/lib/chart/chart.models'; |
||||
|
import { Font } from '@shared/models/widget-settings.models'; |
||||
|
|
||||
|
export interface BarsChartSettings extends LatestChartSettings { |
||||
|
polar: boolean; |
||||
|
axisMin?: number | string; |
||||
|
axisMax?: number | string; |
||||
|
axisTickLabelFont: Font; |
||||
|
axisTickLabelColor: string; |
||||
|
angleAxisStartAngle?: number; |
||||
|
barSettings: ChartBarSettings; |
||||
|
} |
||||
|
|
||||
|
export const barsChartAnimationDefaultSettings: ChartAnimationSettings = |
||||
|
mergeDeep({} as ChartAnimationSettings, chartAnimationDefaultSettings, { |
||||
|
animationDuration: 1000, |
||||
|
animationDurationUpdate: 500 |
||||
|
} as ChartAnimationSettings); |
||||
|
|
||||
|
export const barsChartDefaultSettings: BarsChartSettings = { |
||||
|
...latestChartDefaultSettings, |
||||
|
animation: mergeDeep({} as ChartAnimationSettings, |
||||
|
barsChartAnimationDefaultSettings), |
||||
|
polar: false, |
||||
|
axisTickLabelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '1' |
||||
|
}, |
||||
|
axisTickLabelColor: chartColorScheme['axis.tickLabel'].light, |
||||
|
angleAxisStartAngle: 0, |
||||
|
barSettings: mergeDeep({} as ChartBarSettings, chartBarDefaultSettings, |
||||
|
{barWidth: 80, showLabel: true} as ChartBarSettings) |
||||
|
}; |
||||
@ -0,0 +1,173 @@ |
|||||
|
///
|
||||
|
/// 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 { TbLatestChart } from '@home/components/widget/lib/chart/latest-chart'; |
||||
|
import { barsChartDefaultSettings, BarsChartSettings } from '@home/components/widget/lib/chart/bars-chart.models'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { DeepPartial } from '@shared/models/common'; |
||||
|
import { PieChartSettings } from '@home/components/widget/lib/chart/pie-chart.models'; |
||||
|
import { Renderer2 } from '@angular/core'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { ComponentStyle } from '@shared/models/widget-settings.models'; |
||||
|
import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient'; |
||||
|
import tinycolor from 'tinycolor2'; |
||||
|
import { BarDataItemOption, BarSeriesLabelOption } from 'echarts/types/src/chart/bar/BarSeries'; |
||||
|
import { formatValue, isDefinedAndNotNull } from '@core/utils'; |
||||
|
import { |
||||
|
ChartFillType, |
||||
|
ChartLabelPosition, |
||||
|
createChartTextStyle, |
||||
|
createLinearOpacityGradient |
||||
|
} from '@home/components/widget/lib/chart/chart.models'; |
||||
|
import { ValueAxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes'; |
||||
|
import { RadiusAxisOption, YAXisOption } from 'echarts/types/dist/shared'; |
||||
|
|
||||
|
export class TbBarsChart extends TbLatestChart<BarsChartSettings> { |
||||
|
|
||||
|
constructor(ctx: WidgetContext, |
||||
|
inputSettings: DeepPartial<PieChartSettings>, |
||||
|
chartElement: HTMLElement, |
||||
|
renderer: Renderer2, |
||||
|
translate: TranslateService, |
||||
|
autoResize = true) { |
||||
|
|
||||
|
super(ctx, inputSettings, chartElement, renderer, translate, autoResize); |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): BarsChartSettings { |
||||
|
return barsChartDefaultSettings; |
||||
|
} |
||||
|
|
||||
|
protected prepareLatestChartOption() { |
||||
|
let labelStyle: ComponentStyle = {}; |
||||
|
if (this.settings.barSettings.showLabel) { |
||||
|
labelStyle = createChartTextStyle(this.settings.barSettings.labelFont, |
||||
|
this.settings.barSettings.labelColor, false, 'series.label', false); |
||||
|
} |
||||
|
const labelOption: BarSeriesLabelOption = { |
||||
|
show: this.settings.barSettings.showLabel, |
||||
|
position: this.settings.barSettings.labelPosition, |
||||
|
formatter: (params) => `{label|${params.name}}`, |
||||
|
rich: { |
||||
|
label: labelStyle |
||||
|
} |
||||
|
}; |
||||
|
if (this.settings.barSettings.enableLabelBackground) { |
||||
|
labelOption.backgroundColor = this.settings.barSettings.labelBackground; |
||||
|
labelOption.padding = [4, 5]; |
||||
|
labelOption.borderRadius = 4; |
||||
|
} |
||||
|
this.latestChartOption.series = [ |
||||
|
{ |
||||
|
type: 'bar', |
||||
|
barWidth: isDefinedAndNotNull(this.settings.barSettings.barWidth) ? this.settings.barSettings.barWidth + '%' : undefined, |
||||
|
itemStyle: { |
||||
|
borderWidth: this.settings.barSettings.showBorder ? this.settings.barSettings.borderWidth : 0 |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'self' |
||||
|
}, |
||||
|
coordinateSystem: this.settings.polar ? 'polar' : 'cartesian2d', |
||||
|
label: labelOption, |
||||
|
animation: this.settings.animation.animation, |
||||
|
animationThreshold: this.settings.animation.animationThreshold, |
||||
|
animationDuration: this.settings.animation.animationDuration, |
||||
|
animationEasing: this.settings.animation.animationEasing, |
||||
|
animationDelay: this.settings.animation.animationDelay, |
||||
|
animationDurationUpdate: this.settings.animation.animationDurationUpdate, |
||||
|
animationEasingUpdate: this.settings.animation.animationEasingUpdate, |
||||
|
animationDelayUpdate: this.settings.animation.animationDelayUpdate |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
const axisTickLabelStyle = createChartTextStyle(this.settings.axisTickLabelFont, |
||||
|
this.settings.axisTickLabelColor, false, 'axis.tickLabel'); |
||||
|
const valueAxis: ValueAxisBaseOption = { |
||||
|
type: 'value', |
||||
|
min: this.settings.axisMin, |
||||
|
max: this.settings.axisMax, |
||||
|
axisLabel: { |
||||
|
color: axisTickLabelStyle.color, |
||||
|
fontStyle: axisTickLabelStyle.fontStyle, |
||||
|
fontWeight: axisTickLabelStyle.fontWeight, |
||||
|
fontFamily: axisTickLabelStyle.fontFamily, |
||||
|
fontSize: axisTickLabelStyle.fontSize, |
||||
|
formatter: (value: any) => formatValue(value, this.decimals, this.units, false) |
||||
|
} |
||||
|
}; |
||||
|
if (this.settings.polar) { |
||||
|
this.latestChartOption.polar = { |
||||
|
radius: '100%' |
||||
|
}; |
||||
|
this.latestChartOption.radiusAxis = valueAxis as RadiusAxisOption; |
||||
|
this.latestChartOption.angleAxis = { |
||||
|
type: 'category', |
||||
|
data: [], |
||||
|
startAngle: this.settings.angleAxisStartAngle |
||||
|
}; |
||||
|
} else { |
||||
|
let minTop = 0; |
||||
|
let minBottom = 0; |
||||
|
if (this.settings.barSettings.showLabel) { |
||||
|
if (this.settings.barSettings.labelPosition === ChartLabelPosition.top) { |
||||
|
minTop = this.settings.barSettings.labelFont.size; |
||||
|
} else if (this.settings.barSettings.labelPosition === ChartLabelPosition.bottom) { |
||||
|
minBottom = this.settings.barSettings.labelFont.size; |
||||
|
} |
||||
|
} |
||||
|
this.latestChartOption.grid = [{ |
||||
|
containLabel: true, |
||||
|
top: minTop, |
||||
|
bottom: minBottom, |
||||
|
left: 0, |
||||
|
right: 0 |
||||
|
}]; |
||||
|
this.latestChartOption.xAxis = { |
||||
|
type: 'category', |
||||
|
data: [] |
||||
|
}; |
||||
|
this.latestChartOption.yAxis = valueAxis as YAXisOption; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected doUpdateSeriesData() { |
||||
|
const seriesData: BarDataItemOption[] = []; |
||||
|
for (const dataItem of this.dataItems) { |
||||
|
if (dataItem.enabled && dataItem.hasValue) { |
||||
|
const barSettings = this.settings.barSettings; |
||||
|
let borderRadius: number[]; |
||||
|
if (dataItem.value < 0) { |
||||
|
borderRadius = [0, 0, barSettings.borderRadius, barSettings.borderRadius]; |
||||
|
} else { |
||||
|
borderRadius = [barSettings.borderRadius, barSettings.borderRadius, 0, 0]; |
||||
|
} |
||||
|
let barColor: string | LinearGradientObject; |
||||
|
if (barSettings.backgroundSettings.type === ChartFillType.none) { |
||||
|
barColor = dataItem.dataKey.color; |
||||
|
} else if (barSettings.backgroundSettings.type === ChartFillType.opacity) { |
||||
|
barColor = tinycolor(dataItem.dataKey.color).setAlpha(barSettings.backgroundSettings.opacity).toRgbString(); |
||||
|
} else { |
||||
|
barColor = createLinearOpacityGradient(dataItem.dataKey.color, barSettings.backgroundSettings.gradient); |
||||
|
} |
||||
|
seriesData.push( |
||||
|
{id: dataItem.id, value: dataItem.value, name: dataItem.dataKey.label, |
||||
|
itemStyle: {color: barColor, borderColor: dataItem.dataKey.color, borderRadius}} |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
this.latestChartOption.series[0].data = seriesData; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,316 @@ |
|||||
|
///
|
||||
|
/// 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 { isNumber } from '@core/utils'; |
||||
|
import { TbColorScheme } from '@shared/models/color.models'; |
||||
|
import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient'; |
||||
|
import tinycolor from 'tinycolor2'; |
||||
|
import { ComponentStyle, Font, textStyle } from '@shared/models/widget-settings.models'; |
||||
|
import { LabelFormatterCallback } from 'echarts'; |
||||
|
import { LabelLayoutOption } from 'echarts/types/src/util/types'; |
||||
|
import { LabelLayoutOptionCallback } from 'echarts/types/dist/shared'; |
||||
|
import { BuiltinTextPosition } from 'zrender/src/core/types'; |
||||
|
|
||||
|
export const chartColorScheme: TbColorScheme = { |
||||
|
'threshold.line': { |
||||
|
light: 'rgba(0, 0, 0, 0.76)', |
||||
|
dark: '#eee' |
||||
|
}, |
||||
|
'threshold.label': { |
||||
|
light: 'rgba(0, 0, 0, 0.76)', |
||||
|
dark: '#eee' |
||||
|
}, |
||||
|
'axis.line': { |
||||
|
light: 'rgba(0, 0, 0, 0.54)', |
||||
|
dark: '#B9B8CE' |
||||
|
}, |
||||
|
'axis.label': { |
||||
|
light: 'rgba(0, 0, 0, 0.54)', |
||||
|
dark: '#B9B8CE' |
||||
|
}, |
||||
|
'axis.ticks': { |
||||
|
light: 'rgba(0, 0, 0, 0.54)', |
||||
|
dark: '#B9B8CE' |
||||
|
}, |
||||
|
'axis.tickLabel': { |
||||
|
light: 'rgba(0, 0, 0, 0.54)', |
||||
|
dark: '#B9B8CE' |
||||
|
}, |
||||
|
'axis.splitLine': { |
||||
|
light: 'rgba(0, 0, 0, 0.12)', |
||||
|
dark: '#484753' |
||||
|
}, |
||||
|
'series.label': { |
||||
|
light: 'rgba(0, 0, 0, 0.76)', |
||||
|
dark: '#eee' |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export enum ChartShape { |
||||
|
emptyCircle = 'emptyCircle', |
||||
|
circle = 'circle', |
||||
|
rect = 'rect', |
||||
|
roundRect = 'roundRect', |
||||
|
triangle = 'triangle', |
||||
|
diamond = 'diamond', |
||||
|
pin = 'pin', |
||||
|
arrow = 'arrow', |
||||
|
none = 'none' |
||||
|
} |
||||
|
|
||||
|
export const chartShapes = Object.keys(ChartShape) as ChartShape[]; |
||||
|
|
||||
|
export const chartShapeTranslations = new Map<ChartShape, string>( |
||||
|
[ |
||||
|
[ChartShape.emptyCircle, 'widgets.chart.shape-empty-circle'], |
||||
|
[ChartShape.circle, 'widgets.chart.shape-circle'], |
||||
|
[ChartShape.rect, 'widgets.chart.shape-rect'], |
||||
|
[ChartShape.roundRect, 'widgets.chart.shape-round-rect'], |
||||
|
[ChartShape.triangle, 'widgets.chart.shape-triangle'], |
||||
|
[ChartShape.diamond, 'widgets.chart.shape-diamond'], |
||||
|
[ChartShape.pin, 'widgets.chart.shape-pin'], |
||||
|
[ChartShape.arrow, 'widgets.chart.shape-arrow'], |
||||
|
[ChartShape.none, 'widgets.chart.shape-none'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export enum ChartAnimationEasing { |
||||
|
linear = 'linear', |
||||
|
quadraticIn = 'quadraticIn', |
||||
|
quadraticOut = 'quadraticOut', |
||||
|
quadraticInOut = 'quadraticInOut', |
||||
|
cubicIn = 'cubicIn', |
||||
|
cubicOut = 'cubicOut', |
||||
|
cubicInOut = 'cubicInOut', |
||||
|
quarticIn = 'quarticIn', |
||||
|
quarticOut = 'quarticOut', |
||||
|
quarticInOut = 'quarticInOut', |
||||
|
quinticIn = 'quinticIn', |
||||
|
quinticOut = 'quinticOut', |
||||
|
quinticInOut = 'quinticInOut', |
||||
|
sinusoidalIn = 'sinusoidalIn', |
||||
|
sinusoidalOut = 'sinusoidalOut', |
||||
|
sinusoidalInOut = 'sinusoidalInOut', |
||||
|
exponentialIn = 'exponentialIn', |
||||
|
exponentialOut = 'exponentialOut', |
||||
|
exponentialInOut = 'exponentialInOut', |
||||
|
circularIn = 'circularIn', |
||||
|
circularOut = 'circularOut', |
||||
|
circularInOut = 'circularInOut', |
||||
|
elasticIn = 'elasticIn', |
||||
|
elasticOut = 'elasticOut', |
||||
|
elasticInOut = 'elasticInOut', |
||||
|
backIn = 'backIn', |
||||
|
backOut = 'backOut', |
||||
|
backInOut = 'backInOut', |
||||
|
bounceIn = 'bounceIn', |
||||
|
bounceOut = 'bounceOut', |
||||
|
bounceInOut = 'bounceInOut' |
||||
|
} |
||||
|
|
||||
|
export const chartAnimationEasings = Object.keys(ChartAnimationEasing) as ChartAnimationEasing[]; |
||||
|
|
||||
|
export enum ChartFillType { |
||||
|
none = 'none', |
||||
|
opacity = 'opacity', |
||||
|
gradient = 'gradient' |
||||
|
} |
||||
|
|
||||
|
export const chartFillTypes = Object.keys(ChartFillType) as ChartFillType[]; |
||||
|
|
||||
|
export const chartFillTypeTranslations = new Map<ChartFillType, string>( |
||||
|
[ |
||||
|
[ChartFillType.none, 'widgets.chart.fill-type-none'], |
||||
|
[ChartFillType.opacity, 'widgets.chart.fill-type-opacity'], |
||||
|
[ChartFillType.gradient, 'widgets.chart.fill-type-gradient'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export enum ChartLabelPosition { |
||||
|
top = 'top', |
||||
|
bottom = 'bottom' |
||||
|
} |
||||
|
|
||||
|
export const chartLabelPositions = Object.keys(ChartLabelPosition) as ChartLabelPosition[]; |
||||
|
|
||||
|
export const chartLabelPositionTranslations = new Map<ChartLabelPosition, string>( |
||||
|
[ |
||||
|
[ChartLabelPosition.top, 'widgets.chart.label-position-top'], |
||||
|
[ChartLabelPosition.bottom, 'widgets.chart.label-position-bottom'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export enum PieChartLabelPosition { |
||||
|
inside = 'inside', |
||||
|
outside = 'outside' |
||||
|
} |
||||
|
|
||||
|
export const pieChartLabelPositions = Object.keys(PieChartLabelPosition) as PieChartLabelPosition[]; |
||||
|
|
||||
|
export const pieChartLabelPositionTranslations = new Map<PieChartLabelPosition, string>( |
||||
|
[ |
||||
|
[PieChartLabelPosition.inside, 'widgets.chart.label-position-inside'], |
||||
|
[PieChartLabelPosition.outside, 'widgets.chart.label-position-outside'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export interface ChartAnimationSettings { |
||||
|
animation: boolean; |
||||
|
animationThreshold: number; |
||||
|
animationDuration: number; |
||||
|
animationEasing: ChartAnimationEasing; |
||||
|
animationDelay: number; |
||||
|
animationDurationUpdate: number; |
||||
|
animationEasingUpdate: ChartAnimationEasing; |
||||
|
animationDelayUpdate: number; |
||||
|
} |
||||
|
|
||||
|
export const chartAnimationDefaultSettings: ChartAnimationSettings = { |
||||
|
animation: true, |
||||
|
animationThreshold: 2000, |
||||
|
animationDuration: 500, |
||||
|
animationEasing: ChartAnimationEasing.cubicOut, |
||||
|
animationDelay: 0, |
||||
|
animationDurationUpdate: 300, |
||||
|
animationEasingUpdate: ChartAnimationEasing.cubicOut, |
||||
|
animationDelayUpdate: 0 |
||||
|
}; |
||||
|
|
||||
|
export interface ChartFillSettings { |
||||
|
type: ChartFillType; |
||||
|
opacity: number; |
||||
|
gradient: { |
||||
|
start: number; |
||||
|
end: number; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export interface ChartBarSettings { |
||||
|
showBorder: boolean; |
||||
|
borderWidth: number; |
||||
|
borderRadius: number; |
||||
|
barWidth?: number; |
||||
|
showLabel: boolean; |
||||
|
labelPosition: ChartLabelPosition | PieChartLabelPosition | BuiltinTextPosition; |
||||
|
labelFont: Font; |
||||
|
labelColor: string; |
||||
|
enableLabelBackground: boolean; |
||||
|
labelBackground: string; |
||||
|
labelFormatter?: string | LabelFormatterCallback; |
||||
|
labelLayout?: LabelLayoutOption | LabelLayoutOptionCallback; |
||||
|
additionalLabelOption?: {[key: string]: any}; |
||||
|
backgroundSettings: ChartFillSettings; |
||||
|
} |
||||
|
|
||||
|
export const chartBarDefaultSettings: ChartBarSettings = { |
||||
|
showBorder: false, |
||||
|
borderWidth: 2, |
||||
|
borderRadius: 0, |
||||
|
showLabel: false, |
||||
|
labelPosition: ChartLabelPosition.top, |
||||
|
labelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 11, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '1' |
||||
|
}, |
||||
|
labelColor: chartColorScheme['series.label'].light, |
||||
|
enableLabelBackground: false, |
||||
|
labelBackground: 'rgba(255,255,255,0.56)', |
||||
|
backgroundSettings: { |
||||
|
type: ChartFillType.none, |
||||
|
opacity: 0.4, |
||||
|
gradient: { |
||||
|
start: 100, |
||||
|
end: 0 |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
type ChartShapeOffsetFunction = (size: number) => number; |
||||
|
|
||||
|
const chartShapeOffsetFunctions = new Map<ChartShape, ChartShapeOffsetFunction>( |
||||
|
[ |
||||
|
[ChartShape.emptyCircle, size => size / 2 + 1], |
||||
|
[ChartShape.circle, size => size / 2], |
||||
|
[ChartShape.rect, size => size / 2], |
||||
|
[ChartShape.roundRect, size => size / 2], |
||||
|
[ChartShape.triangle, size => size / 2], |
||||
|
[ChartShape.diamond, size => size / 2], |
||||
|
[ChartShape.pin, size => size], |
||||
|
[ChartShape.arrow, () => 0], |
||||
|
[ChartShape.none, () => 0], |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export const measureSymbolOffset = (symbol: string, symbolSize: any): number => { |
||||
|
if (isNumber(symbolSize)) { |
||||
|
if (symbol) { |
||||
|
const offsetFunction = chartShapeOffsetFunctions.get(symbol as ChartShape); |
||||
|
if (offsetFunction) { |
||||
|
return offsetFunction(symbolSize); |
||||
|
} else { |
||||
|
return symbolSize / 2; |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
return 0; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export const createLinearOpacityGradient = (color: string, gradient: {start: number; end: number}): LinearGradientObject => ({ |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [{ |
||||
|
offset: 0, color: tinycolor(color).setAlpha(gradient.start / 100).toRgbString() // color at 0%
|
||||
|
}, { |
||||
|
offset: 1, color: tinycolor(color).setAlpha(gradient.end / 100).toRgbString() // color at 100%
|
||||
|
}], |
||||
|
global: false |
||||
|
}); |
||||
|
|
||||
|
export const createChartTextStyle = (font: Font, color: string, darkMode: boolean, colorKey?: string, fill = false): ComponentStyle => { |
||||
|
const style = textStyle(font); |
||||
|
delete style.lineHeight; |
||||
|
style.fontSize = font.size; |
||||
|
if (fill) { |
||||
|
style.fill = prepareChartThemeColor(color, darkMode, colorKey); |
||||
|
} else { |
||||
|
style.color = prepareChartThemeColor(color, darkMode, colorKey); |
||||
|
} |
||||
|
return style; |
||||
|
}; |
||||
|
|
||||
|
export const prepareChartThemeColor = (color: string, darkMode: boolean, colorKey?: string): string => { |
||||
|
if (darkMode) { |
||||
|
let colorInstance = tinycolor(color); |
||||
|
if (colorInstance.isDark()) { |
||||
|
if (colorKey && chartColorScheme[colorKey]) { |
||||
|
return chartColorScheme[colorKey].dark; |
||||
|
} else { |
||||
|
const rgb = colorInstance.toRgb(); |
||||
|
colorInstance = tinycolor({r: 255 - rgb.r, g: 255 - rgb.g, b: 255 - rgb.b, a: rgb.a}); |
||||
|
return colorInstance.toRgbString(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return color; |
||||
|
}; |
||||
@ -0,0 +1,75 @@ |
|||||
|
///
|
||||
|
/// 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 { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { WidgetComponent } from '@home/components/widget/widget.component'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { |
||||
|
LatestChartComponent, |
||||
|
LatestChartComponentCallbacks |
||||
|
} from '@home/components/widget/lib/chart/latest-chart.component'; |
||||
|
import { TbBarsChart } from '@home/components/widget/lib/chart/bars-chart'; |
||||
|
import { |
||||
|
polarAreaChartWidgetBarsChartSettings, |
||||
|
polarAreaChartWidgetDefaultSettings, |
||||
|
PolarAreaChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/polar-area-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-polar-area-chart-widget', |
||||
|
templateUrl: './latest-chart-widget.component.html', |
||||
|
styleUrls: [], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class PolarAreaWidgetComponent implements OnInit { |
||||
|
|
||||
|
@ViewChild('latestChart') |
||||
|
latestChart: LatestChartComponent; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@Input() |
||||
|
widgetTitlePanel: TemplateRef<any>; |
||||
|
|
||||
|
settings: PolarAreaChartWidgetSettings; |
||||
|
|
||||
|
callbacks: LatestChartComponentCallbacks; |
||||
|
|
||||
|
constructor(private widgetComponent: WidgetComponent, |
||||
|
private translate: TranslateService) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.polarAreaChartWidget = this; |
||||
|
this.settings = {...polarAreaChartWidgetDefaultSettings, ...this.ctx.settings}; |
||||
|
this.callbacks = { |
||||
|
createChart: (chartShape, renderer) => { |
||||
|
const settings = polarAreaChartWidgetBarsChartSettings(this.settings); |
||||
|
return new TbBarsChart(this.ctx, settings, chartShape.nativeElement, renderer, this.translate, true); |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
public onInit() { |
||||
|
this.latestChart?.onInit(); |
||||
|
} |
||||
|
|
||||
|
public onDataUpdated() { |
||||
|
this.latestChart?.onDataUpdated(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,82 @@ |
|||||
|
///
|
||||
|
/// 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 { |
||||
|
latestChartWidgetDefaultSettings, |
||||
|
LatestChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/latest-chart.models'; |
||||
|
import { Font } from '@shared/models/widget-settings.models'; |
||||
|
import { |
||||
|
ChartAnimationSettings, |
||||
|
chartBarDefaultSettings, |
||||
|
ChartBarSettings, |
||||
|
chartColorScheme, |
||||
|
PieChartLabelPosition |
||||
|
} from '@home/components/widget/lib/chart/chart.models'; |
||||
|
import { mergeDeep } from '@core/utils'; |
||||
|
import { |
||||
|
barsChartAnimationDefaultSettings, |
||||
|
BarsChartSettings |
||||
|
} from '@home/components/widget/lib/chart/bars-chart.models'; |
||||
|
import { DeepPartial } from '@shared/models/common'; |
||||
|
|
||||
|
export interface PolarAreaChartWidgetSettings extends LatestChartWidgetSettings { |
||||
|
axisMin?: number; |
||||
|
axisMax?: number; |
||||
|
axisTickLabelFont: Font; |
||||
|
axisTickLabelColor: string; |
||||
|
angleAxisStartAngle?: number; |
||||
|
barSettings: ChartBarSettings; |
||||
|
} |
||||
|
|
||||
|
export const polarAreaChartWidgetDefaultSettings: PolarAreaChartWidgetSettings = { |
||||
|
...latestChartWidgetDefaultSettings, |
||||
|
animation: mergeDeep({} as ChartAnimationSettings, |
||||
|
barsChartAnimationDefaultSettings), |
||||
|
axisTickLabelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '1' |
||||
|
}, |
||||
|
axisTickLabelColor: chartColorScheme['axis.tickLabel'].light, |
||||
|
angleAxisStartAngle: 90, |
||||
|
barSettings: mergeDeep({} as ChartBarSettings, chartBarDefaultSettings, |
||||
|
{barWidth: 100, showLabel: true, labelPosition: PieChartLabelPosition.outside} as ChartBarSettings) |
||||
|
}; |
||||
|
|
||||
|
export const polarAreaChartWidgetBarsChartSettings = (settings: PolarAreaChartWidgetSettings): DeepPartial<BarsChartSettings> => ({ |
||||
|
polar: true, |
||||
|
axisMin: settings.axisMin, |
||||
|
axisMax: settings.axisMax, |
||||
|
axisTickLabelFont: settings.axisTickLabelFont, |
||||
|
axisTickLabelColor: settings.axisTickLabelColor, |
||||
|
angleAxisStartAngle: settings.angleAxisStartAngle, |
||||
|
barSettings: settings.barSettings, |
||||
|
sortSeries: settings.sortSeries, |
||||
|
showTotal: false, |
||||
|
animation: settings.animation, |
||||
|
showLegend: settings.showLegend, |
||||
|
showTooltip: settings.showTooltip, |
||||
|
tooltipValueType: settings.tooltipValueType, |
||||
|
tooltipValueDecimals: settings.tooltipValueDecimals, |
||||
|
tooltipValueFont: settings.tooltipValueFont, |
||||
|
tooltipValueColor: settings.tooltipValueColor, |
||||
|
tooltipBackgroundColor: settings.tooltipBackgroundColor, |
||||
|
tooltipBackgroundBlur: settings.tooltipBackgroundBlur |
||||
|
}); |
||||
@ -0,0 +1,169 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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> |
||||
@ -0,0 +1,160 @@ |
|||||
|
///
|
||||
|
/// 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 { Component } from '@angular/core'; |
||||
|
import { |
||||
|
legendPositions, |
||||
|
legendPositionTranslationMap, |
||||
|
WidgetSettings, |
||||
|
WidgetSettingsComponent |
||||
|
} from '@shared/models/widget.models'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { formatValue, mergeDeep } from '@core/utils'; |
||||
|
import { |
||||
|
LatestChartTooltipValueType, |
||||
|
latestChartTooltipValueTypes, |
||||
|
latestChartTooltipValueTypeTranslations |
||||
|
} from '@home/components/widget/lib/chart/latest-chart.models'; |
||||
|
import { |
||||
|
barChartWidgetDefaultSettings, |
||||
|
BarChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/bar-chart-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-bar-chart-widget-settings', |
||||
|
templateUrl: './bar-chart-widget-settings.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class BarChartWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
legendPositions = legendPositions; |
||||
|
|
||||
|
legendPositionTranslationMap = legendPositionTranslationMap; |
||||
|
|
||||
|
latestChartTooltipValueTypes = latestChartTooltipValueTypes; |
||||
|
|
||||
|
latestChartTooltipValueTypeTranslationMap = latestChartTooltipValueTypeTranslations; |
||||
|
|
||||
|
barChartWidgetSettingsForm: UntypedFormGroup; |
||||
|
|
||||
|
valuePreviewFn = this._valuePreviewFn.bind(this); |
||||
|
|
||||
|
tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): UntypedFormGroup { |
||||
|
return this.barChartWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return mergeDeep<BarChartWidgetSettings>({} as BarChartWidgetSettings, barChartWidgetDefaultSettings); |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.barChartWidgetSettingsForm = this.fb.group({ |
||||
|
|
||||
|
sortSeries: [settings.sortSeries, []], |
||||
|
|
||||
|
barSettings: [settings.barSettings, []], |
||||
|
|
||||
|
axisMin: [settings.axisMin, []], |
||||
|
axisMax: [settings.axisMax, []], |
||||
|
axisTickLabelFont: [settings.axisTickLabelFont, []], |
||||
|
axisTickLabelColor: [settings.axisTickLabelColor, []], |
||||
|
|
||||
|
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, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showLegend', 'showTooltip']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const showLegend: boolean = this.barChartWidgetSettingsForm.get('showLegend').value; |
||||
|
const showTooltip: boolean = this.barChartWidgetSettingsForm.get('showTooltip').value; |
||||
|
|
||||
|
if (showLegend) { |
||||
|
this.barChartWidgetSettingsForm.get('legendPosition').enable(); |
||||
|
this.barChartWidgetSettingsForm.get('legendLabelFont').enable(); |
||||
|
this.barChartWidgetSettingsForm.get('legendLabelColor').enable(); |
||||
|
this.barChartWidgetSettingsForm.get('legendValueFont').enable(); |
||||
|
this.barChartWidgetSettingsForm.get('legendValueColor').enable(); |
||||
|
} else { |
||||
|
this.barChartWidgetSettingsForm.get('legendPosition').disable(); |
||||
|
this.barChartWidgetSettingsForm.get('legendLabelFont').disable(); |
||||
|
this.barChartWidgetSettingsForm.get('legendLabelColor').disable(); |
||||
|
this.barChartWidgetSettingsForm.get('legendValueFont').disable(); |
||||
|
this.barChartWidgetSettingsForm.get('legendValueColor').disable(); |
||||
|
} |
||||
|
if (showTooltip) { |
||||
|
this.barChartWidgetSettingsForm.get('tooltipValueType').enable(); |
||||
|
this.barChartWidgetSettingsForm.get('tooltipValueDecimals').enable(); |
||||
|
this.barChartWidgetSettingsForm.get('tooltipValueFont').enable(); |
||||
|
this.barChartWidgetSettingsForm.get('tooltipValueColor').enable(); |
||||
|
this.barChartWidgetSettingsForm.get('tooltipBackgroundColor').enable(); |
||||
|
this.barChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable(); |
||||
|
} else { |
||||
|
this.barChartWidgetSettingsForm.get('tooltipValueType').disable(); |
||||
|
this.barChartWidgetSettingsForm.get('tooltipValueDecimals').disable(); |
||||
|
this.barChartWidgetSettingsForm.get('tooltipValueFont').disable(); |
||||
|
this.barChartWidgetSettingsForm.get('tooltipValueColor').disable(); |
||||
|
this.barChartWidgetSettingsForm.get('tooltipBackgroundColor').disable(); |
||||
|
this.barChartWidgetSettingsForm.get('tooltipBackgroundBlur').disable(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
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.barChartWidgetSettingsForm.get('tooltipValueType').value; |
||||
|
const decimals: number = this.barChartWidgetSettingsForm.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); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,176 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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> |
||||
@ -0,0 +1,161 @@ |
|||||
|
///
|
||||
|
/// 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 { Component } from '@angular/core'; |
||||
|
import { |
||||
|
legendPositions, |
||||
|
legendPositionTranslationMap, |
||||
|
WidgetSettings, |
||||
|
WidgetSettingsComponent |
||||
|
} from '@shared/models/widget.models'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { formatValue, mergeDeep } from '@core/utils'; |
||||
|
import { |
||||
|
LatestChartTooltipValueType, |
||||
|
latestChartTooltipValueTypes, |
||||
|
latestChartTooltipValueTypeTranslations |
||||
|
} from '@home/components/widget/lib/chart/latest-chart.models'; |
||||
|
import { |
||||
|
polarAreaChartWidgetDefaultSettings, |
||||
|
PolarAreaChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/polar-area-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-polar-area-chart-widget-settings', |
||||
|
templateUrl: './polar-area-chart-widget-settings.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class PolarAreaChartWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
legendPositions = legendPositions; |
||||
|
|
||||
|
legendPositionTranslationMap = legendPositionTranslationMap; |
||||
|
|
||||
|
latestChartTooltipValueTypes = latestChartTooltipValueTypes; |
||||
|
|
||||
|
latestChartTooltipValueTypeTranslationMap = latestChartTooltipValueTypeTranslations; |
||||
|
|
||||
|
polarAreaChartWidgetSettingsForm: UntypedFormGroup; |
||||
|
|
||||
|
valuePreviewFn = this._valuePreviewFn.bind(this); |
||||
|
|
||||
|
tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): UntypedFormGroup { |
||||
|
return this.polarAreaChartWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return mergeDeep<PolarAreaChartWidgetSettings>({} as PolarAreaChartWidgetSettings, polarAreaChartWidgetDefaultSettings); |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.polarAreaChartWidgetSettingsForm = this.fb.group({ |
||||
|
|
||||
|
sortSeries: [settings.sortSeries, []], |
||||
|
|
||||
|
barSettings: [settings.barSettings, []], |
||||
|
|
||||
|
axisMin: [settings.axisMin, []], |
||||
|
axisMax: [settings.axisMax, []], |
||||
|
axisTickLabelFont: [settings.axisTickLabelFont, []], |
||||
|
axisTickLabelColor: [settings.axisTickLabelColor, []], |
||||
|
angleAxisStartAngle: [settings.angleAxisStartAngle, [Validators.min(0), Validators.max(360)]], |
||||
|
|
||||
|
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, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showLegend', 'showTooltip']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const showLegend: boolean = this.polarAreaChartWidgetSettingsForm.get('showLegend').value; |
||||
|
const showTooltip: boolean = this.polarAreaChartWidgetSettingsForm.get('showTooltip').value; |
||||
|
|
||||
|
if (showLegend) { |
||||
|
this.polarAreaChartWidgetSettingsForm.get('legendPosition').enable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('legendLabelFont').enable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('legendLabelColor').enable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('legendValueFont').enable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('legendValueColor').enable(); |
||||
|
} else { |
||||
|
this.polarAreaChartWidgetSettingsForm.get('legendPosition').disable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('legendLabelFont').disable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('legendLabelColor').disable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('legendValueFont').disable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('legendValueColor').disable(); |
||||
|
} |
||||
|
if (showTooltip) { |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipValueType').enable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipValueDecimals').enable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipValueFont').enable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipValueColor').enable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipBackgroundColor').enable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable(); |
||||
|
} else { |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipValueType').disable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipValueDecimals').disable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipValueFont').disable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipValueColor').disable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipBackgroundColor').disable(); |
||||
|
this.polarAreaChartWidgetSettingsForm.get('tooltipBackgroundBlur').disable(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
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.polarAreaChartWidgetSettingsForm.get('tooltipValueType').value; |
||||
|
const decimals: number = this.polarAreaChartWidgetSettingsForm.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); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue