tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Implement Radar chart widget.

pull/10678/head
Igor Kulikov 2 years ago
parent
aecf654d65
commit
27af61eb6a
32 changed files with 2035 additions and 143 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      application/src/main/data/json/system/widget_bundles/charts.json
  2. 33
      application/src/main/data/json/system/widget_types/radar.json
  3. 25
      application/src/main/data/json/system/widget_types/radar_deprecated.json
  4. 12
      ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
  5. 340
      ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.html
  6. 414
      ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts
  7. 4
      ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
  8. 17
      ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
  9. 11
      ui-ngx/src/app/modules/home/components/widget/lib/chart/bars-chart.ts
  10. 45
      ui-ngx/src/app/modules/home/components/widget/lib/chart/chart.models.ts
  11. 10
      ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts
  12. 85
      ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts
  13. 27
      ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts
  14. 10
      ui-ngx/src/app/modules/home/components/widget/lib/chart/pie-chart.ts
  15. 75
      ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.component.ts
  16. 142
      ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.models.ts
  17. 122
      ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.models.ts
  18. 172
      ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.ts
  19. 9
      ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
  20. 26
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
  21. 11
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
  22. 248
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/radar-chart-widget-settings.component.html
  23. 244
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/radar-chart-widget-settings.component.ts
  24. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
  25. 17
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
  26. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
  27. 10
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.ts
  28. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
  29. 13
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.ts
  30. 12
      ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
  31. 7
      ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
  32. 20
      ui-ngx/src/assets/locale/locale.constant-en_US.json

5
application/src/main/data/json/system/widget_bundles/charts.json
View File

@ -21,7 +21,7 @@
"doughnut", "doughnut",
"horizontal_doughnut", "horizontal_doughnut",
"polar_area", "polar_area",
"charts.radar_chart_js", "radar",
"charts.basic_timeseries", "charts.basic_timeseries",
"charts.state_chart", "charts.state_chart",
"charts.timeseries_bars_flot", "charts.timeseries_bars_flot",
@ -29,6 +29,7 @@
"charts.pie", "charts.pie",
"charts.pie_chart_js", "charts.pie_chart_js",
"charts.doughnut_chart_js", "charts.doughnut_chart_js",
"charts.polar_area_chart_js" "charts.polar_area_chart_js",
"charts.radar_chart_js"
] ]
} }

33
application/src/main/data/json/system/widget_types/radar.json
View File

File diff suppressed because one or more lines are too long

25
application/src/main/data/json/system/widget_types/radar_deprecated.json
View File

File diff suppressed because one or more lines are too long

12
ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
View File

@ -126,6 +126,9 @@ import {
import { import {
PolarAreaChartBasicConfigComponent PolarAreaChartBasicConfigComponent
} from '@home/components/widget/config/basic/chart/polar-area-chart-basic-config.component'; } from '@home/components/widget/config/basic/chart/polar-area-chart-basic-config.component';
import {
RadarChartBasicConfigComponent
} from '@home/components/widget/config/basic/chart/radar-chart-basic-config.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -167,7 +170,8 @@ import {
StatusWidgetBasicConfigComponent, StatusWidgetBasicConfigComponent,
PieChartBasicConfigComponent, PieChartBasicConfigComponent,
BarChartBasicConfigComponent, BarChartBasicConfigComponent,
PolarAreaChartBasicConfigComponent PolarAreaChartBasicConfigComponent,
RadarChartBasicConfigComponent
], ],
imports: [ imports: [
CommonModule, CommonModule,
@ -211,7 +215,8 @@ import {
StatusWidgetBasicConfigComponent, StatusWidgetBasicConfigComponent,
PieChartBasicConfigComponent, PieChartBasicConfigComponent,
BarChartBasicConfigComponent, BarChartBasicConfigComponent,
PolarAreaChartBasicConfigComponent PolarAreaChartBasicConfigComponent,
RadarChartBasicConfigComponent
] ]
}) })
export class BasicWidgetConfigModule { export class BasicWidgetConfigModule {
@ -249,5 +254,6 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type<IBasicWidgetCo
'tb-status-widget-basic-config': StatusWidgetBasicConfigComponent, 'tb-status-widget-basic-config': StatusWidgetBasicConfigComponent,
'tb-pie-chart-basic-config': PieChartBasicConfigComponent, 'tb-pie-chart-basic-config': PieChartBasicConfigComponent,
'tb-bar-chart-basic-config': BarChartBasicConfigComponent, 'tb-bar-chart-basic-config': BarChartBasicConfigComponent,
'tb-polar-area-chart-basic-config': PolarAreaChartBasicConfigComponent 'tb-polar-area-chart-basic-config': PolarAreaChartBasicConfigComponent,
'tb-radar-chart-basic-config': RadarChartBasicConfigComponent
}; };

340
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.html
View File

@ -0,0 +1,340 @@
<!--
Copyright © 2016-2024 The Thingsboard Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<ng-container [formGroup]="radarChartWidgetConfigForm">
<tb-timewindow-config-panel *ngIf="displayTimewindowConfig"
[onlyHistoryTimewindow]="onlyHistoryTimewindow()"
formControlName="timewindowConfig">
</tb-timewindow-config-panel>
<tb-datasources
[configMode]="basicMode"
hideDatasourceLabel
hideDataKeys
forceSingleDatasource
formControlName="datasources">
</tb-datasources>
<tb-data-keys-panel
panelTitle="{{ 'widgets.chart.series' | translate }}"
addKeyTitle="{{ 'widgets.chart.add-series' | translate }}"
keySettingsTitle="{{ 'widgets.chart.series-settings' | translate }}"
removeKeyTitle="{{ 'widgets.chart.remove-series' | translate }}"
noKeysText="{{ 'widgets.chart.no-series' | translate }}"
requiredKeysText="{{ 'widgets.chart.no-series-error' | translate }}"
hideUnits
hideDecimals
hideDataKeyUnits
hideDataKeyDecimals
[datasourceType]="datasource?.type"
[deviceId]="datasource?.deviceId"
[entityAliasId]="datasource?.entityAliasId"
formControlName="series">
</tb-data-keys-panel>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
<div class="tb-form-row column-xs">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
{{ 'widget-config.card-title' | translate }}
</mat-slide-toggle>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-font-settings formControlName="titleFont"
clearButton
[previewText]="radarChartWidgetConfigForm.get('title').value"
[initialPreviewStyle]="widgetConfig.config.titleStyle">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="titleColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon">
{{ 'widget-config.card-icon' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-material-icon-select asBoxInput
iconClearButton
[color]="radarChartWidgetConfigForm.get('iconColor').value"
formControlName="titleIcon">
</tb-material-icon-select>
<tb-color-input asBoxInput
colorClearButton
formControlName="iconColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="sortSeries">
{{ 'widgets.latest-chart.sort-series' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row space-between">
<div translate>widget-config.units-short</div>
<tb-unit-input
formControlName="units">
</tb-unit-input>
</div>
<div class="tb-form-row space-between">
<div translate>widget-config.decimals-short</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-appearance</div>
<div class="tb-form-row space-between">
<div>{{ 'widgets.radar-chart.shape' | translate }}</div>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="shape">
<mat-option *ngFor="let shape of radarChartShapes" [value]="shape">
{{ radarChartShapeTranslations.get(shape) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.radar-chart.color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="color">
</tb-color-input>
</div>
<div class="tb-form-row space-between column-xs">
<mat-slide-toggle class="mat-slide" formControlName="showLine">
{{ 'widgets.radar-chart.line' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="lineType">
<mat-option *ngFor="let type of chartLineTypes" [value]="type">
{{ chartLineTypeTranslations.get(type) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic">
<input matInput formControlName="lineWidth"
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
</div>
<div class="tb-form-row space-between column-xs">
<mat-slide-toggle class="mat-slide" formControlName="showPoints">
{{ 'widgets.radar-chart.points' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="pointShape">
<mat-option *ngFor="let shape of chartShapes" [value]="shape">
{{ chartShapeTranslations.get(shape) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic">
<input matInput formControlName="pointSize"
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
</div>
<div class="tb-form-row space-between column-lt-md">
<mat-slide-toggle class="mat-slide" formControlName="showLabel">
{{ 'widgets.radar-chart.points-label' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="labelPosition">
<mat-option *ngFor="let position of chartLabelPositions" [value]="position">
{{ chartLabelPositionTranslations.get(position) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<tb-font-settings formControlName="labelFont"
clearButton
disabledLineHeight
forceSizeUnit="px"
[previewText]="valuePreviewFn">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="labelColor">
</tb-color-input>
</div>
</div>
<tb-chart-fill-settings
formControlName="fillAreaSettings">
</tb-chart-fill-settings>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-axis</div>
<div class="tb-form-row space-between">
<mat-slide-toggle class="mat-slide" formControlName="axisShowLabel">
{{ 'widgets.radar-chart.axis-label' | translate }}
</mat-slide-toggle>
<tb-font-settings formControlName="axisLabelFont"
clearButton
disabledLineHeight
forceSizeUnit="px"
previewText="Wind">
</tb-font-settings>
</div>
<div class="tb-form-row space-between">
<mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels">
{{ 'widgets.radar-chart.ticks-label' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="axisTickLabelFont"
clearButton
disabledLineHeight
forceSizeUnit="px"
previewText="100">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="axisTickLabelColor">
</tb-color-input>
</div>
</div>
</div>
<div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="radarChartWidgetConfigForm.get('showLegend').value" [disabled]="!radarChartWidgetConfigForm.get('showLegend').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widget-config.legend' | translate }}
</mat-slide-toggle>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="tb-form-row space-between">
<div>{{ 'legend.position' | translate }}</div>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="legendPosition">
<mat-option *ngFor="let pos of legendPositions" [value]="pos">
{{ legendPositionTranslationMap.get(pos) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="tb-form-row space-between">
<div>{{ 'legend.label' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="legendLabelFont"
previewText="Wind">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="legendLabelColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div>{{ 'legend.value' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="legendValueFont"
[previewText]="valuePreviewFn">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="legendValueColor">
</tb-color-input>
</div>
</div>
</ng-template>
</mat-expansion-panel>
</div>
<div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="radarChartWidgetConfigForm.get('showTooltip').value" [disabled]="!radarChartWidgetConfigForm.get('showTooltip').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widget-config.tooltip' | translate }}
</mat-slide-toggle>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="tb-form-row space-between column-xs">
<div>{{ 'tooltip.value' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="tooltipValueType">
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type">
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
</mat-form-field>
<tb-font-settings formControlName="tooltipValueFont"
[previewText]="tooltipValuePreviewFn">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="tooltipValueColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div>{{ 'tooltip.background-color' | translate }}</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="tooltipBackgroundColor">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div>{{ 'tooltip.background-blur' | translate }}</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<div matSuffix>px</div>
</mat-form-field>
</div>
</ng-template>
</mat-expansion-panel>
</div>
<tb-chart-animation-settings
formControlName="animation">
</tb-chart-animation-settings>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
<div class="tb-form-row space-between">
<div>{{ 'widgets.background.background' | translate }}</div>
<tb-background-settings formControlName="background">
</tb-background-settings>
</div>
<div class="tb-form-row space-between column-lt-md">
<div translate>widget-config.show-card-buttons</div>
<mat-chip-listbox multiple formControlName="cardButtons">
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
</mat-chip-listbox>
</div>
<div class="tb-form-row space-between">
<div>{{ 'widget-config.card-border-radius' | translate }}</div>
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
</div>
<tb-widget-actions-panel
formControlName="actions">
</tb-widget-actions-panel>
</ng-container>

414
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts
View File

@ -0,0 +1,414 @@
///
/// 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 {
radarChartWidgetDefaultSettings,
RadarChartWidgetSettings
} from '@home/components/widget/lib/chart/radar-chart-widget.models';
import { radarChartShapes, radarChartShapeTranslations } from '@home/components/widget/lib/chart/radar-chart.models';
import {
chartLabelPositions,
chartLabelPositionTranslations,
chartLineTypes,
chartLineTypeTranslations,
chartShapes,
chartShapeTranslations
} from '@home/components/widget/lib/chart/chart.models';
@Component({
selector: 'tb-radar-chart-basic-config',
templateUrl: './radar-chart-basic-config.component.html',
styleUrls: ['../basic-config.scss']
})
export class RadarChartBasicConfigComponent extends BasicWidgetConfigComponent {
public get datasource(): Datasource {
const datasources: Datasource[] = this.radarChartWidgetConfigForm.get('datasources').value;
if (datasources && datasources.length) {
return datasources[0];
} else {
return null;
}
}
public get displayTimewindowConfig(): boolean {
const datasources = this.radarChartWidgetConfigForm.get('datasources').value;
return datasourcesHasAggregation(datasources);
}
public onlyHistoryTimewindow(): boolean {
const datasources = this.radarChartWidgetConfigForm.get('datasources').value;
return datasourcesHasOnlyComparisonAggregation(datasources);
}
radarChartShapes = radarChartShapes;
radarChartShapeTranslations = radarChartShapeTranslations;
chartLineTypes = chartLineTypes;
chartLineTypeTranslations = chartLineTypeTranslations;
chartShapes = chartShapes;
chartShapeTranslations = chartShapeTranslations;
chartLabelPositions = chartLabelPositions;
chartLabelPositionTranslations = chartLabelPositionTranslations;
legendPositions = legendPositions;
legendPositionTranslationMap = legendPositionTranslationMap;
latestChartTooltipValueTypes = latestChartTooltipValueTypes;
latestChartTooltipValueTypeTranslationMap = latestChartTooltipValueTypeTranslations;
radarChartWidgetConfigForm: 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.radarChartWidgetConfigForm;
}
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: RadarChartWidgetSettings = mergeDeep<RadarChartWidgetSettings>({} as RadarChartWidgetSettings,
radarChartWidgetDefaultSettings, configData.config.settings as RadarChartWidgetSettings);
this.radarChartWidgetConfigForm = 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, []],
shape: [settings.shape, []],
color: [settings.color, []],
showLine: [settings.showLine, []],
lineType: [settings.lineType, []],
lineWidth: [settings.lineWidth, [Validators.min(0)]],
showPoints: [settings.showPoints, []],
pointShape: [settings.pointShape, []],
pointSize: [settings.pointSize, [Validators.min(0)]],
showLabel: [settings.showLabel, []],
labelPosition: [settings.labelPosition, []],
labelFont: [settings.labelFont, []],
labelColor: [settings.labelColor, []],
fillAreaSettings: [settings.fillAreaSettings, []],
axisShowLabel: [settings.axisShowLabel, []],
axisLabelFont: [settings.axisLabelFont, []],
axisShowTickLabels: [settings.axisShowTickLabels, []],
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.shape = config.shape;
this.widgetConfig.config.settings.color = config.color;
this.widgetConfig.config.settings.showLine = config.showLine;
this.widgetConfig.config.settings.lineType = config.lineType;
this.widgetConfig.config.settings.lineWidth = config.lineWidth;
this.widgetConfig.config.settings.showPoints = config.showPoints;
this.widgetConfig.config.settings.pointShape = config.pointShape;
this.widgetConfig.config.settings.pointSize = config.pointSize;
this.widgetConfig.config.settings.showLabel = config.showLabel;
this.widgetConfig.config.settings.labelPosition = config.labelPosition;
this.widgetConfig.config.settings.labelFont = config.labelFont;
this.widgetConfig.config.settings.labelColor = config.labelColor;
this.widgetConfig.config.settings.fillAreaSettings = config.fillAreaSettings;
this.widgetConfig.config.settings.axisShowLabel = config.axisShowLabel;
this.widgetConfig.config.settings.axisLabelFont = config.axisLabelFont;
this.widgetConfig.config.settings.axisShowTickLabels = config.axisShowTickLabels;
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', 'showLine', 'showPoints', 'showLabel', 'axisShowLabel',
'axisShowTickLabels', 'showLegend', 'showTooltip'];
}
protected updateValidators(emitEvent: boolean, trigger?: string) {
const showTitle: boolean = this.radarChartWidgetConfigForm.get('showTitle').value;
const showTitleIcon: boolean = this.radarChartWidgetConfigForm.get('showTitleIcon').value;
const showLine: boolean = this.radarChartWidgetConfigForm.get('showLine').value;
const showPoints: boolean = this.radarChartWidgetConfigForm.get('showPoints').value;
const showLabel: boolean = this.radarChartWidgetConfigForm.get('showLabel').value;
const axisShowLabel: boolean = this.radarChartWidgetConfigForm.get('axisShowLabel').value;
const axisShowTickLabels: boolean = this.radarChartWidgetConfigForm.get('axisShowTickLabels').value;
const showLegend: boolean = this.radarChartWidgetConfigForm.get('showLegend').value;
const showTooltip: boolean = this.radarChartWidgetConfigForm.get('showTooltip').value;
if (showTitle) {
this.radarChartWidgetConfigForm.get('title').enable();
this.radarChartWidgetConfigForm.get('titleFont').enable();
this.radarChartWidgetConfigForm.get('titleColor').enable();
this.radarChartWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false});
if (showTitleIcon) {
this.radarChartWidgetConfigForm.get('titleIcon').enable();
this.radarChartWidgetConfigForm.get('iconColor').enable();
} else {
this.radarChartWidgetConfigForm.get('titleIcon').disable();
this.radarChartWidgetConfigForm.get('iconColor').disable();
}
} else {
this.radarChartWidgetConfigForm.get('title').disable();
this.radarChartWidgetConfigForm.get('titleFont').disable();
this.radarChartWidgetConfigForm.get('titleColor').disable();
this.radarChartWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false});
this.radarChartWidgetConfigForm.get('titleIcon').disable();
this.radarChartWidgetConfigForm.get('iconColor').disable();
}
if (showLine) {
this.radarChartWidgetConfigForm.get('lineType').enable();
this.radarChartWidgetConfigForm.get('lineWidth').enable();
} else {
this.radarChartWidgetConfigForm.get('lineType').disable();
this.radarChartWidgetConfigForm.get('lineWidth').disable();
}
if (showPoints) {
this.radarChartWidgetConfigForm.get('pointShape').enable();
this.radarChartWidgetConfigForm.get('pointSize').enable();
} else {
this.radarChartWidgetConfigForm.get('pointShape').disable();
this.radarChartWidgetConfigForm.get('pointSize').disable();
}
if (showLabel) {
this.radarChartWidgetConfigForm.get('labelPosition').enable();
this.radarChartWidgetConfigForm.get('labelFont').enable();
this.radarChartWidgetConfigForm.get('labelColor').enable();
} else {
this.radarChartWidgetConfigForm.get('labelPosition').disable();
this.radarChartWidgetConfigForm.get('labelFont').disable();
this.radarChartWidgetConfigForm.get('labelColor').disable();
}
if (axisShowLabel) {
this.radarChartWidgetConfigForm.get('axisLabelFont').enable();
} else {
this.radarChartWidgetConfigForm.get('axisLabelFont').disable();
}
if (axisShowTickLabels) {
this.radarChartWidgetConfigForm.get('axisTickLabelFont').enable();
this.radarChartWidgetConfigForm.get('axisTickLabelColor').enable();
} else {
this.radarChartWidgetConfigForm.get('axisTickLabelFont').disable();
this.radarChartWidgetConfigForm.get('axisTickLabelColor').disable();
}
if (showLegend) {
this.radarChartWidgetConfigForm.get('legendPosition').enable();
this.radarChartWidgetConfigForm.get('legendLabelFont').enable();
this.radarChartWidgetConfigForm.get('legendLabelColor').enable();
this.radarChartWidgetConfigForm.get('legendValueFont').enable();
this.radarChartWidgetConfigForm.get('legendValueColor').enable();
} else {
this.radarChartWidgetConfigForm.get('legendPosition').disable();
this.radarChartWidgetConfigForm.get('legendLabelFont').disable();
this.radarChartWidgetConfigForm.get('legendLabelColor').disable();
this.radarChartWidgetConfigForm.get('legendValueFont').disable();
this.radarChartWidgetConfigForm.get('legendValueColor').disable();
}
if (showTooltip) {
this.radarChartWidgetConfigForm.get('tooltipValueType').enable();
this.radarChartWidgetConfigForm.get('tooltipValueDecimals').enable();
this.radarChartWidgetConfigForm.get('tooltipValueFont').enable();
this.radarChartWidgetConfigForm.get('tooltipValueColor').enable();
this.radarChartWidgetConfigForm.get('tooltipBackgroundColor').enable();
this.radarChartWidgetConfigForm.get('tooltipBackgroundBlur').enable();
} else {
this.radarChartWidgetConfigForm.get('tooltipValueType').disable();
this.radarChartWidgetConfigForm.get('tooltipValueDecimals').disable();
this.radarChartWidgetConfigForm.get('tooltipValueFont').disable();
this.radarChartWidgetConfigForm.get('tooltipValueColor').disable();
this.radarChartWidgetConfigForm.get('tooltipBackgroundColor').disable();
this.radarChartWidgetConfigForm.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.radarChartWidgetConfigForm.get('units').value;
const decimals: number = this.radarChartWidgetConfigForm.get('decimals').value;
return formatValue(110, decimals, units, false);
}
private _tooltipValuePreviewFn(): string {
const tooltipValueType: LatestChartTooltipValueType = this.radarChartWidgetConfigForm.get('tooltipValueType').value;
const decimals: number = this.radarChartWidgetConfigForm.get('tooltipValueDecimals').value;
if (tooltipValueType === LatestChartTooltipValueType.percentage) {
return formatValue(35, decimals, '%', false);
} else {
const units: string = this.radarChartWidgetConfigForm.get('units').value;
return formatValue(110, decimals, units, false);
}
}
}

4
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
View File

@ -157,8 +157,8 @@
<div translate>widgets.time-series-chart.line-type</div> <div translate>widgets.time-series-chart.line-type</div>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="lineType"> <mat-select formControlName="lineType">
<mat-option *ngFor="let lineType of timeSeriesLineTypes" [value]="lineType"> <mat-option *ngFor="let lineType of chartLineTypes" [value]="lineType">
{{ timeSeriesLineTypeTranslations.get(lineType) | translate }} {{ chartLineTypeTranslations.get(lineType) | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>

17
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
View File

@ -46,11 +46,16 @@ import {
} from '@home/components/widget/lib/chart/range-chart-widget.models'; } from '@home/components/widget/lib/chart/range-chart-widget.models';
import { import {
lineSeriesStepTypes, lineSeriesStepTypes,
lineSeriesStepTypeTranslations, lineSeriesStepTypeTranslations
timeSeriesLineTypes,
timeSeriesLineTypeTranslations
} from '@home/components/widget/lib/chart/time-series-chart.models'; } from '@home/components/widget/lib/chart/time-series-chart.models';
import { chartLabelPositions, chartLabelPositionTranslations, chartShapes, chartShapeTranslations } from '@home/components/widget/lib/chart/chart.models'; import {
chartLabelPositions,
chartLabelPositionTranslations,
chartLineTypes,
chartLineTypeTranslations,
chartShapes,
chartShapeTranslations
} from '@home/components/widget/lib/chart/chart.models';
@Component({ @Component({
selector: 'tb-range-chart-basic-config', selector: 'tb-range-chart-basic-config',
@ -72,9 +77,9 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
lineSeriesStepTypeTranslations = lineSeriesStepTypeTranslations; lineSeriesStepTypeTranslations = lineSeriesStepTypeTranslations;
timeSeriesLineTypes = timeSeriesLineTypes; chartLineTypes = chartLineTypes;
timeSeriesLineTypeTranslations = timeSeriesLineTypeTranslations; chartLineTypeTranslations = chartLineTypeTranslations;
chartLabelPositions = chartLabelPositions; chartLabelPositions = chartLabelPositions;

11
ui-ngx/src/app/modules/home/components/widget/lib/chart/bars-chart.ts
View File

@ -30,7 +30,7 @@ import {
ChartFillType, ChartFillType,
ChartLabelPosition, ChartLabelPosition,
createChartTextStyle, createChartTextStyle,
createLinearOpacityGradient createLinearOpacityGradient, toAnimationOption
} from '@home/components/widget/lib/chart/chart.models'; } from '@home/components/widget/lib/chart/chart.models';
import { ValueAxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes'; import { ValueAxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes';
import { RadiusAxisOption, YAXisOption } from 'echarts/types/dist/shared'; import { RadiusAxisOption, YAXisOption } from 'echarts/types/dist/shared';
@ -82,14 +82,7 @@ export class TbBarsChart extends TbLatestChart<BarsChartSettings> {
}, },
coordinateSystem: this.settings.polar ? 'polar' : 'cartesian2d', coordinateSystem: this.settings.polar ? 'polar' : 'cartesian2d',
label: labelOption, label: labelOption,
animation: this.settings.animation.animation, ...toAnimationOption(this.ctx, this.settings.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
} }
]; ];

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

@ -19,10 +19,11 @@ import { TbColorScheme } from '@shared/models/color.models';
import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient'; import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import { ComponentStyle, Font, textStyle } from '@shared/models/widget-settings.models'; import { ComponentStyle, Font, textStyle } from '@shared/models/widget-settings.models';
import { LabelFormatterCallback } from 'echarts'; import { LabelFormatterCallback, RadialGradientObject } from 'echarts';
import { LabelLayoutOption } from 'echarts/types/src/util/types'; import { AnimationOptionMixin, LabelLayoutOption } from 'echarts/types/src/util/types';
import { LabelLayoutOptionCallback } from 'echarts/types/dist/shared'; import { LabelLayoutOptionCallback } from 'echarts/types/dist/shared';
import { BuiltinTextPosition } from 'zrender/src/core/types'; import { BuiltinTextPosition } from 'zrender/src/core/types';
import { WidgetContext } from '@home/models/widget-component.models';
export const chartColorScheme: TbColorScheme = { export const chartColorScheme: TbColorScheme = {
'threshold.line': { 'threshold.line': {
@ -87,6 +88,22 @@ export const chartShapeTranslations = new Map<ChartShape, string>(
] ]
); );
export enum ChartLineType {
solid = 'solid',
dashed = 'dashed',
dotted = 'dotted'
}
export const chartLineTypes = Object.keys(ChartLineType) as ChartLineType[];
export const chartLineTypeTranslations = new Map<ChartLineType, string>(
[
[ChartLineType.solid, 'widgets.chart.line-type-solid'],
[ChartLineType.dashed, 'widgets.chart.line-type-dashed'],
[ChartLineType.dotted, 'widgets.chart.line-type-dotted']
]
);
export enum ChartAnimationEasing { export enum ChartAnimationEasing {
linear = 'linear', linear = 'linear',
quadraticIn = 'quadraticIn', quadraticIn = 'quadraticIn',
@ -287,6 +304,19 @@ export const createLinearOpacityGradient = (color: string, gradient: {start: num
global: false global: false
}); });
export const createRadialOpacityGradient = (color: string, gradient: {start: number; end: number}): RadialGradientObject => ({
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: tinycolor(color).setAlpha(gradient.end / 100).toRgbString() // color at 0%
}, {
offset: 1, color: tinycolor(color).setAlpha(gradient.start / 100).toRgbString() // color at 100%
}],
global: false
});
export const createChartTextStyle = (font: Font, color: string, darkMode: boolean, colorKey?: string, fill = false): ComponentStyle => { export const createChartTextStyle = (font: Font, color: string, darkMode: boolean, colorKey?: string, fill = false): ComponentStyle => {
const style = textStyle(font); const style = textStyle(font);
delete style.lineHeight; delete style.lineHeight;
@ -314,3 +344,14 @@ export const prepareChartThemeColor = (color: string, darkMode: boolean, colorKe
} }
return color; return color;
}; };
export const toAnimationOption = (ctx: WidgetContext, settings: ChartAnimationSettings): AnimationOptionMixin => ({
animation: settings.animation,
animationThreshold: settings.animationThreshold,
animationDuration: settings.animationDuration,
animationEasing: settings.animationEasing,
animationDelay: settings.animationDelay,
animationDurationUpdate: settings.animationDurationUpdate,
animationEasingUpdate: settings.animationEasingUpdate,
animationDelayUpdate: settings.animationDelayUpdate
});

10
ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts
View File

@ -26,6 +26,8 @@ import {
MarkLineComponentOption, MarkLineComponentOption,
PolarComponent, PolarComponent,
PolarComponentOption, PolarComponentOption,
RadarComponent,
RadarComponentOption,
TooltipComponent, TooltipComponent,
TooltipComponentOption, TooltipComponentOption,
VisualMapComponent, VisualMapComponent,
@ -39,7 +41,9 @@ import {
LineChart, LineChart,
LineSeriesOption, LineSeriesOption,
PieChart, PieChart,
PieSeriesOption PieSeriesOption,
RadarChart,
RadarSeriesOption
} from 'echarts/charts'; } from 'echarts/charts';
import { LabelLayout } from 'echarts/features'; import { LabelLayout } from 'echarts/features';
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'; import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
@ -62,9 +66,11 @@ class EChartsModule {
DataZoomComponent, DataZoomComponent,
MarkLineComponent, MarkLineComponent,
PolarComponent, PolarComponent,
RadarComponent,
LineChart, LineChart,
BarChart, BarChart,
PieChart, PieChart,
RadarChart,
CustomChart, CustomChart,
LabelLayout, LabelLayout,
CanvasRenderer, CanvasRenderer,
@ -84,10 +90,12 @@ export type EChartsOption = echarts.ComposeOption<
| DataZoomComponentOption | DataZoomComponentOption
| MarkLineComponentOption | MarkLineComponentOption
| PolarComponentOption | PolarComponentOption
| RadarComponentOption
| LineSeriesOption | LineSeriesOption
| CustomSeriesOption | CustomSeriesOption
| BarSeriesOption | BarSeriesOption
| PieSeriesOption | PieSeriesOption
| RadarSeriesOption
>; >;
export type ECharts = echarts.ECharts; export type ECharts = echarts.ECharts;

85
ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts
View File

@ -143,32 +143,83 @@ export const latestChartTooltipFormatter = (renderer: Renderer2,
settings: LatestChartTooltipSettings, settings: LatestChartTooltipSettings,
params: CallbackDataParams, params: CallbackDataParams,
units: string, units: string,
total: number): null | HTMLElement => { total: number,
if (!params.name) { dataItems: LatestChartDataItem[]): null | HTMLElement => {
if (params.value && Array.isArray(params.value)) {
const enabledDataItems = dataItems.filter(d => d.enabled && d.hasValue);
if (enabledDataItems.length && enabledDataItems.length === params.value.length) {
const tooltipElement: HTMLElement = renderer.createElement('div');
renderer.setStyle(tooltipElement, 'display', 'flex');
renderer.setStyle(tooltipElement, 'flex-direction', 'column');
renderer.setStyle(tooltipElement, 'align-items', 'flex-start');
renderer.setStyle(tooltipElement, 'gap', '4px');
for (let i = 0; i < enabledDataItems.length; i++) {
const dataItem = enabledDataItems[i];
const value = params.value[i];
renderer.appendChild(tooltipElement,
constructTooltipSeriesElement(renderer, settings, dataItem.dataKey.label, value as number, null,
units, total, dataItem.dataKey.color));
}
return tooltipElement;
} else {
return null;
}
} else if (params.name) {
return constructTooltipSeriesElement(renderer, settings, params.name,
params.value as number, params.percent, units, total);
} else {
return null; return null;
} }
let value: string; };
const constructTooltipSeriesElement = (renderer: Renderer2,
settings: LatestChartTooltipSettings,
label: string,
value: number,
percent: number | undefined,
units: string,
total: number,
circleColor?: string): HTMLElement => {
let formattedValue: string;
if (settings.tooltipValueType === LatestChartTooltipValueType.percentage) { if (settings.tooltipValueType === LatestChartTooltipValueType.percentage) {
const percents = isDefinedAndNotNull(params.percent) ? params.percent : (params.value as number) / total * 100; const percents = isDefinedAndNotNull(percent) ? percent : value / total * 100;
value = formatValue(percents, settings.tooltipValueDecimals, '%', false); formattedValue = formatValue(percents, settings.tooltipValueDecimals, '%', false);
} else { } else {
value = formatValue(params.value, settings.tooltipValueDecimals, units, false); formattedValue = formatValue(value, settings.tooltipValueDecimals, units, false);
} }
const textElement: HTMLElement = renderer.createElement('div'); const textElement: HTMLElement = renderer.createElement('div');
renderer.setStyle(textElement, 'display', 'inline-flex'); renderer.setStyle(textElement, 'display', 'flex');
renderer.setStyle(textElement, 'flex-direction', 'row');
renderer.setStyle(textElement, 'align-items', 'center'); renderer.setStyle(textElement, 'align-items', 'center');
renderer.setStyle(textElement, 'gap', '8px'); renderer.setStyle(textElement, 'align-self', 'stretch');
renderer.setStyle(textElement, 'gap', '12px');
const labelElement: HTMLElement = renderer.createElement('div'); const labelElement: HTMLElement = renderer.createElement('div');
renderer.appendChild(labelElement, renderer.createText(params.name)); renderer.setStyle(labelElement, 'display', 'flex');
renderer.setStyle(labelElement, 'font-family', 'Roboto'); renderer.setStyle(labelElement, 'align-items', 'center');
renderer.setStyle(labelElement, 'font-size', '11px'); renderer.setStyle(labelElement, 'gap', '8px');
renderer.setStyle(labelElement, 'font-style', 'normal'); renderer.appendChild(textElement, labelElement);
renderer.setStyle(labelElement, 'font-weight', '400'); if (circleColor) {
renderer.setStyle(labelElement, 'line-height', '16px'); const circleElement: HTMLElement = renderer.createElement('div');
renderer.setStyle(labelElement, 'letter-spacing', '0.25px'); renderer.setStyle(circleElement, 'width', '8px');
renderer.setStyle(labelElement, 'color', 'rgba(0, 0, 0, 0.38)'); renderer.setStyle(circleElement, 'height', '8px');
renderer.setStyle(circleElement, 'border-radius', '50%');
renderer.setStyle(circleElement, 'background', circleColor);
renderer.appendChild(labelElement, circleElement);
}
const labelTextElement: HTMLElement = renderer.createElement('div');
renderer.appendChild(labelTextElement, renderer.createText(label));
renderer.setStyle(labelTextElement, 'font-family', 'Roboto');
renderer.setStyle(labelTextElement, 'font-size', '11px');
renderer.setStyle(labelTextElement, 'font-style', 'normal');
renderer.setStyle(labelTextElement, 'font-weight', '400');
renderer.setStyle(labelTextElement, 'line-height', '16px');
renderer.setStyle(labelTextElement, 'letter-spacing', '0.25px');
renderer.setStyle(labelTextElement, 'color', 'rgba(0, 0, 0, 0.38)');
renderer.appendChild(labelElement, labelTextElement);
const valueElement: HTMLElement = renderer.createElement('div'); const valueElement: HTMLElement = renderer.createElement('div');
renderer.appendChild(valueElement, renderer.createText(value)); renderer.appendChild(valueElement, renderer.createText(formattedValue));
renderer.setStyle(valueElement, 'flex', '1');
renderer.setStyle(valueElement, 'text-align', 'end');
renderer.setStyle(valueElement, 'font-family', settings.tooltipValueFont.family); renderer.setStyle(valueElement, 'font-family', settings.tooltipValueFont.family);
renderer.setStyle(valueElement, 'font-size', settings.tooltipValueFont.size + settings.tooltipValueFont.sizeUnit); renderer.setStyle(valueElement, 'font-size', settings.tooltipValueFont.size + settings.tooltipValueFont.sizeUnit);
renderer.setStyle(valueElement, 'font-style', settings.tooltipValueFont.style); renderer.setStyle(valueElement, 'font-style', settings.tooltipValueFont.style);

27
ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts
View File

@ -31,6 +31,7 @@ import { DataKey } from '@shared/models/widget.models';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { CallbackDataParams } from 'echarts/types/dist/shared'; import { CallbackDataParams } from 'echarts/types/dist/shared';
import { SVG, Svg } from '@svgdotjs/svg.js'; import { SVG, Svg } from '@svgdotjs/svg.js';
import { toAnimationOption } from '@home/components/widget/lib/chart/chart.models';
export abstract class TbLatestChart<S extends LatestChartSettings> { export abstract class TbLatestChart<S extends LatestChartSettings> {
@ -54,7 +55,7 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
private itemClick: ($event: Event, item: LatestChartDataItem) => void; private itemClick: ($event: Event, item: LatestChartDataItem) => void;
protected constructor(private ctx: WidgetContext, protected constructor(protected ctx: WidgetContext,
private readonly inputSettings: DeepPartial<S>, private readonly inputSettings: DeepPartial<S>,
protected chartElement: HTMLElement, protected chartElement: HTMLElement,
private renderer: Renderer2, private renderer: Renderer2,
@ -222,7 +223,7 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
this.itemClick = itemClick; this.itemClick = itemClick;
} }
private updateSeriesData(initial = false) { protected updateSeriesData(initial = false) {
this.total = 0; this.total = 0;
this.totalText = 'N/A'; this.totalText = 'N/A';
let hasValue = false; let hasValue = false;
@ -274,21 +275,14 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
appendTo: 'body', appendTo: 'body',
formatter: (params: CallbackDataParams) => formatter: (params: CallbackDataParams) =>
this.settings.showTooltip this.settings.showTooltip
? latestChartTooltipFormatter(this.renderer, this.settings, params, this.units, this.total) ? latestChartTooltipFormatter(this.renderer, this.settings, params, this.units, this.total, this.dataItems)
: undefined, : undefined,
padding: [4, 8], padding: [4, 8],
backgroundColor: this.settings.tooltipBackgroundColor, backgroundColor: this.settings.tooltipBackgroundColor,
extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);`, extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);`,
position: (pos) => [pos[0] + 10, pos[1] + 10] position: (pos) => [pos[0] + 10, pos[1] + 10]
}, },
animation: this.settings.animation.animation, ...toAnimationOption(this.ctx, this.settings.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
}; };
this.prepareLatestChartOption(); this.prepareLatestChartOption();
this.updateSeriesData(true); this.updateSeriesData(true);
@ -330,7 +324,12 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
if (width !== shapeWidth || height !== shapeHeight) { if (width !== shapeWidth || height !== shapeHeight) {
this.beforeResize(shapeWidth, shapeHeight); this.beforeResize(shapeWidth, shapeHeight);
if (!this.settings.autoScale) { if (!this.settings.autoScale) {
this.latestChart.resize(); if (this.forceRedrawOnResize()) {
this.latestChart.dispose();
this.drawChart();
} else {
this.latestChart.resize();
}
} else { } else {
let scale: number; let scale: number;
if (shapeWidth < shapeHeight) { if (shapeWidth < shapeHeight) {
@ -357,6 +356,10 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
return 100; return 100;
} }
protected forceRedrawOnResize(): boolean {
return false;
}
protected beforeResize(_shapeWidth: number, _shapeHeight: number) {}; protected beforeResize(_shapeWidth: number, _shapeHeight: number) {};
protected afterResize(_shapeWidth: number, _shapeHeight: number) {}; protected afterResize(_shapeWidth: number, _shapeHeight: number) {};

10
ui-ngx/src/app/modules/home/components/widget/lib/chart/pie-chart.ts
View File

@ -24,6 +24,7 @@ import { Text } from '@svgdotjs/svg.js';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { TbLatestChart } from '@home/components/widget/lib/chart/latest-chart'; import { TbLatestChart } from '@home/components/widget/lib/chart/latest-chart';
import { formatValue } from '@core/utils'; import { formatValue } from '@core/utils';
import { toAnimationOption } from '@home/components/widget/lib/chart/chart.models';
const shapeSize = 134; const shapeSize = 134;
const shapeSegmentWidth = 13.4; const shapeSegmentWidth = 13.4;
@ -98,14 +99,7 @@ export class TbPieChart extends TbLatestChart<PieChartSettings> {
show: this.settings.showLabel show: this.settings.showLabel
} }
}, },
animation: this.settings.animation.animation, ...toAnimationOption(this.ctx, this.settings.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
} }
]; ];
} }

75
ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.component.ts
View File

@ -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 {
radarChartWidgetDefaultSettings,
radarChartWidgetRadarChartSettings,
RadarChartWidgetSettings
} from '@home/components/widget/lib/chart/radar-chart-widget.models';
import { TbRadarChart } from '@home/components/widget/lib/chart/radar-chart';
@Component({
selector: 'tb-radar-chart-widget',
templateUrl: './latest-chart-widget.component.html',
styleUrls: [],
encapsulation: ViewEncapsulation.None
})
export class RadarChartWidgetComponent implements OnInit {
@ViewChild('latestChart')
latestChart: LatestChartComponent;
@Input()
ctx: WidgetContext;
@Input()
widgetTitlePanel: TemplateRef<any>;
settings: RadarChartWidgetSettings;
callbacks: LatestChartComponentCallbacks;
constructor(private widgetComponent: WidgetComponent,
private translate: TranslateService) {
}
ngOnInit(): void {
this.ctx.$scope.radarChartWidget = this;
this.settings = {...radarChartWidgetDefaultSettings, ...this.ctx.settings};
this.callbacks = {
createChart: (chartShape, renderer) => {
const settings = radarChartWidgetRadarChartSettings(this.settings);
return new TbRadarChart(this.ctx, settings, chartShape.nativeElement, renderer, this.translate, true);
}
};
}
public onInit() {
this.latestChart?.onInit();
}
public onDataUpdated() {
this.latestChart?.onDataUpdated();
}
}

142
ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.models.ts
View File

@ -0,0 +1,142 @@
///
/// 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 {
ChartAnimationSettings,
chartColorScheme,
ChartFillSettings,
ChartFillType,
ChartLabelPosition,
ChartLineType,
ChartShape
} from '@home/components/widget/lib/chart/chart.models';
import { Font } from '@shared/models/widget-settings.models';
import { mergeDeep } from '@core/utils';
import {
radarChartAnimationDefaultSettings,
RadarChartSettings,
RadarChartShape
} from '@home/components/widget/lib/chart/radar-chart.models';
import { DeepPartial } from '@shared/models/common';
export interface RadarChartWidgetSettings extends LatestChartWidgetSettings {
shape: RadarChartShape;
color: string;
showLine: boolean;
lineType: ChartLineType;
lineWidth: number;
showPoints: boolean;
pointShape: ChartShape;
pointSize: number;
showLabel: boolean;
labelPosition: ChartLabelPosition;
labelFont: Font;
labelColor: string;
fillAreaSettings: ChartFillSettings;
axisShowLabel: boolean;
axisLabelFont: Font;
axisShowTickLabels: boolean;
axisTickLabelFont: Font;
axisTickLabelColor: string;
}
export const radarChartWidgetDefaultSettings: RadarChartWidgetSettings = {
...latestChartWidgetDefaultSettings,
animation: mergeDeep({} as ChartAnimationSettings,
radarChartAnimationDefaultSettings),
shape: RadarChartShape.polygon,
color: '#3F52DD',
showLine: true,
lineType: ChartLineType.solid,
lineWidth: 2,
showPoints: true,
pointShape: ChartShape.circle,
pointSize: 4,
showLabel: false,
labelPosition: ChartLabelPosition.top,
labelFont: {
family: 'Roboto',
size: 11,
sizeUnit: 'px',
style: 'normal',
weight: '400',
lineHeight: '1'
},
labelColor: chartColorScheme['series.label'].light,
fillAreaSettings: {
type: ChartFillType.none,
opacity: 0.4,
gradient: {
start: 80,
end: 20
}
},
axisShowLabel: true,
axisLabelFont: {
family: 'Roboto',
size: 12,
sizeUnit: 'px',
style: 'normal',
weight: '600',
lineHeight: '1'
},
axisShowTickLabels: false,
axisTickLabelFont: {
family: 'Roboto',
size: 11,
sizeUnit: 'px',
style: 'normal',
weight: '400',
lineHeight: '1'
},
axisTickLabelColor: chartColorScheme['axis.tickLabel'].light
};
export const radarChartWidgetRadarChartSettings = (settings: RadarChartWidgetSettings): DeepPartial<RadarChartSettings> => ({
shape: settings.shape,
color: settings.color,
showLine: settings.showLine,
lineType: settings.lineType,
lineWidth: settings.lineWidth,
showPoints: settings.showPoints,
pointShape: settings.pointShape,
pointSize: settings.pointSize,
showLabel: settings.showLabel,
labelPosition: settings.labelPosition,
labelFont: settings.labelFont,
labelColor: settings.labelColor,
fillAreaSettings: settings.fillAreaSettings,
axisShowLabel: settings.axisShowLabel,
axisLabelFont: settings.axisLabelFont,
axisShowTickLabels: settings.axisShowTickLabels,
axisTickLabelFont: settings.axisTickLabelFont,
axisTickLabelColor: settings.axisTickLabelColor,
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
});

122
ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.models.ts
View File

@ -0,0 +1,122 @@
///
/// 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 {
chartAnimationDefaultSettings,
ChartAnimationSettings,
chartColorScheme,
ChartFillSettings,
ChartFillType,
ChartLabelPosition,
ChartLineType,
ChartShape
} from '@home/components/widget/lib/chart/chart.models';
import { Font } from '@shared/models/widget-settings.models';
import { mergeDeep } from '@core/utils';
export enum RadarChartShape {
polygon = 'polygon',
circle = 'circle'
}
export const radarChartShapes = Object.keys(RadarChartShape) as RadarChartShape[];
export const radarChartShapeTranslations = new Map<RadarChartShape, string>(
[
[RadarChartShape.polygon, 'widgets.radar-chart.shape-polygon'],
[RadarChartShape.circle, 'widgets.radar-chart.shape-circle']
]
);
export interface RadarChartSettings extends LatestChartSettings {
shape: RadarChartShape;
color: string;
showLine: boolean;
lineType: ChartLineType;
lineWidth: number;
showPoints: boolean;
pointShape: ChartShape;
pointSize: number;
showLabel: boolean;
labelPosition: ChartLabelPosition;
labelFont: Font;
labelColor: string;
fillAreaSettings: ChartFillSettings;
axisShowLabel: boolean;
axisLabelFont: Font;
axisShowTickLabels: boolean;
axisTickLabelFont: Font;
axisTickLabelColor: string;
}
export const radarChartAnimationDefaultSettings: ChartAnimationSettings =
mergeDeep({} as ChartAnimationSettings, chartAnimationDefaultSettings, {
animationDuration: 1000,
animationDurationUpdate: 500
} as ChartAnimationSettings);
export const radarChartDefaultSettings: RadarChartSettings = {
...latestChartDefaultSettings,
animation: mergeDeep({} as ChartAnimationSettings,
radarChartAnimationDefaultSettings),
shape: RadarChartShape.polygon,
color: '#3F52DD',
showLine: true,
lineType: ChartLineType.solid,
lineWidth: 2,
showPoints: true,
pointShape: ChartShape.circle,
pointSize: 4,
showLabel: false,
labelPosition: ChartLabelPosition.top,
labelFont: {
family: 'Roboto',
size: 11,
sizeUnit: 'px',
style: 'normal',
weight: '400',
lineHeight: '1'
},
labelColor: chartColorScheme['series.label'].light,
fillAreaSettings: {
type: ChartFillType.none,
opacity: 0.4,
gradient: {
start: 80,
end: 20
}
},
axisShowLabel: true,
axisLabelFont: {
family: 'Roboto',
size: 12,
sizeUnit: 'px',
style: 'normal',
weight: '600',
lineHeight: '1'
},
axisShowTickLabels: false,
axisTickLabelFont: {
family: 'Roboto',
size: 11,
sizeUnit: 'px',
style: 'normal',
weight: '400',
lineHeight: '1'
},
axisTickLabelColor: chartColorScheme['axis.tickLabel'].light
};

172
ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.ts
View File

@ -0,0 +1,172 @@
///
/// 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 { radarChartDefaultSettings, RadarChartSettings } from '@home/components/widget/lib/chart/radar-chart.models';
import { WidgetContext } from '@home/models/widget-component.models';
import { DeepPartial } from '@shared/models/common';
import { Renderer2 } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import {
ChartFillType,
createChartTextStyle,
createLinearOpacityGradient, createRadialOpacityGradient, toAnimationOption
} from '@home/components/widget/lib/chart/chart.models';
import { formatValue, isDefinedAndNotNull, isEqual } from '@core/utils';
import { ComponentStyle } from '@shared/models/widget-settings.models';
import { AreaStyleOption, SeriesLabelOption } from 'echarts/types/src/util/types';
import { RadarIndicatorOption } from 'echarts/types/src/coord/radar/RadarModel';
import { DataKey } from '@shared/models/widget.models';
export class TbRadarChart extends TbLatestChart<RadarChartSettings> {
constructor(ctx: WidgetContext,
inputSettings: DeepPartial<RadarChartSettings>,
chartElement: HTMLElement,
renderer: Renderer2,
translate: TranslateService,
autoResize = true) {
super(ctx, inputSettings, chartElement, renderer, translate, autoResize);
}
protected defaultSettings(): RadarChartSettings {
return radarChartDefaultSettings;
}
protected prepareLatestChartOption() {
const axisNameStyle = createChartTextStyle(this.settings.axisLabelFont,
'#000', false, 'axis.label');
const axisTickLabelStyle = createChartTextStyle(this.settings.axisTickLabelFont,
this.settings.axisTickLabelColor, false, 'axis.tickLabel');
this.latestChartOption.radar = [{
shape: this.settings.shape,
radius: '85%',
indicator: [{}],
axisName: {
show: this.settings.axisShowLabel,
fontStyle: axisNameStyle.fontStyle,
fontWeight: axisNameStyle.fontWeight,
fontFamily: axisNameStyle.fontFamily,
fontSize: axisNameStyle.fontSize
},
axisLabel: {
show: this.settings.axisShowTickLabels,
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)
}
}];
let labelStyle: ComponentStyle = {};
if (this.settings.showLabel) {
labelStyle = createChartTextStyle(this.settings.labelFont, this.settings.labelColor, false, 'series.label');
}
const labelOption: SeriesLabelOption = {
show: this.settings.showLabel,
position: this.settings.labelPosition,
formatter: (params) => {
let result = '';
if (isDefinedAndNotNull(params.value)) {
result = formatValue(params.value, this.decimals, this.units, false);
}
return `{value|${result}}`;
},
rich: {
value: labelStyle
}
};
let areaStyleOption: AreaStyleOption;
if (this.settings.fillAreaSettings.type !== ChartFillType.none) {
areaStyleOption = {};
if (this.settings.fillAreaSettings.type === ChartFillType.opacity) {
areaStyleOption.opacity = this.settings.fillAreaSettings.opacity;
} else if (this.settings.fillAreaSettings.type === ChartFillType.gradient) {
areaStyleOption.opacity = 1;
areaStyleOption.color = createRadialOpacityGradient(this.settings.color, this.settings.fillAreaSettings.gradient);
}
}
this.latestChartOption.series = [
{
type: 'radar',
data: [{
id: 1,
itemStyle: {
color: this.settings.color
},
label: labelOption,
symbol: this.settings.showPoints ? this.settings.pointShape : 'none',
symbolSize: this.settings.pointSize,
lineStyle: {
width: this.settings.showLine ? this.settings.lineWidth : 0,
type: this.settings.lineType
},
areaStyle: areaStyleOption,
value: []
}],
emphasis: {
focus: 'self'
},
...toAnimationOption(this.ctx, this.settings.animation)
}
];
}
protected doUpdateSeriesData() {
const indicator: RadarIndicatorOption[] = [];
const value: number[] = [];
for (const dataItem of this.dataItems) {
if (dataItem.enabled && dataItem.hasValue) {
indicator.push({
name: dataItem.dataKey.label,
color: dataItem.dataKey.color
});
value.push(dataItem.value);
}
}
if (!indicator.length) {
indicator.push({});
}
this.latestChartOption.radar[0].indicator = indicator;
this.latestChartOption.series[0].data[0].value = value;
}
protected forceRedrawOnResize(): boolean {
return true;
}
public keyEnter(dataKey: DataKey): void {}
public keyLeave(dataKey: DataKey): void {}
public toggleKey(dataKey: DataKey): void {
const enable = dataKey.hidden;
const dataItem = this.dataItems.find(d => d.dataKey === dataKey);
if (dataItem) {
dataItem.enabled = enable;
this.updateSeriesData();
dataKey.hidden = !enable;
}
}
}

9
ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
View File

@ -33,7 +33,6 @@ import {
timeSeriesChartGridDefaultSettings, timeSeriesChartGridDefaultSettings,
TimeSeriesChartGridSettings, TimeSeriesChartGridSettings,
TimeSeriesChartKeySettings, TimeSeriesChartKeySettings,
TimeSeriesChartLineType,
TimeSeriesChartSeriesType, TimeSeriesChartSeriesType,
TimeSeriesChartSettings, TimeSeriesChartSettings,
TimeSeriesChartThreshold, TimeSeriesChartThreshold,
@ -51,7 +50,7 @@ import {
ChartAnimationSettings, ChartAnimationSettings,
chartColorScheme, chartColorScheme,
ChartFillType, ChartFillType,
ChartLabelPosition, ChartLabelPosition, ChartLineType,
ChartShape ChartShape
} from '@home/components/widget/lib/chart/chart.models'; } from '@home/components/widget/lib/chart/chart.models';
@ -78,7 +77,7 @@ export interface RangeChartWidgetSettings extends TimeSeriesChartTooltipWidgetSe
step: boolean; step: boolean;
stepType: LineSeriesStepType; stepType: LineSeriesStepType;
smooth: boolean; smooth: boolean;
lineType: TimeSeriesChartLineType; lineType: ChartLineType;
lineWidth: number; lineWidth: number;
showPoints: boolean; showPoints: boolean;
showPointLabel: boolean; showPointLabel: boolean;
@ -118,7 +117,7 @@ export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
rangeThreshold: mergeDeep({} as Partial<TimeSeriesChartThreshold>, rangeThreshold: mergeDeep({} as Partial<TimeSeriesChartThreshold>,
timeSeriesChartThresholdDefaultSettings, timeSeriesChartThresholdDefaultSettings,
{ lineColor: '#37383b', { lineColor: '#37383b',
lineType: TimeSeriesChartLineType.dashed, lineType: ChartLineType.dashed,
startSymbol: ChartShape.circle, startSymbol: ChartShape.circle,
startSymbolSize: 5, startSymbolSize: 5,
endSymbol: ChartShape.arrow, endSymbol: ChartShape.arrow,
@ -132,7 +131,7 @@ export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
step: false, step: false,
stepType: LineSeriesStepType.start, stepType: LineSeriesStepType.start,
smooth: false, smooth: false,
lineType: TimeSeriesChartLineType.solid, lineType: ChartLineType.solid,
lineWidth: 2, lineWidth: 2,
showPoints: false, showPoints: false,
showPointLabel: false, showPointLabel: false,

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

@ -88,7 +88,7 @@ import {
chartColorScheme, chartColorScheme,
ChartFillSettings, ChartFillSettings,
ChartFillType, ChartFillType,
ChartLabelPosition, ChartLabelPosition, ChartLineType,
ChartShape, ChartShape,
createChartTextStyle, createChartTextStyle,
createLinearOpacityGradient, createLinearOpacityGradient,
@ -488,22 +488,6 @@ export const timeSeriesAxisPositionTranslations = new Map<AxisPosition, string>(
] ]
); );
export enum TimeSeriesChartLineType {
solid = 'solid',
dashed = 'dashed',
dotted = 'dotted'
}
export const timeSeriesLineTypes = Object.keys(TimeSeriesChartLineType) as TimeSeriesChartLineType[];
export const timeSeriesLineTypeTranslations = new Map<TimeSeriesChartLineType, string>(
[
[TimeSeriesChartLineType.solid, 'widgets.time-series-chart.line-type-solid'],
[TimeSeriesChartLineType.dashed, 'widgets.time-series-chart.line-type-dashed'],
[TimeSeriesChartLineType.dotted, 'widgets.time-series-chart.line-type-dotted']
]
);
export enum ThresholdLabelPosition { export enum ThresholdLabelPosition {
start = 'start', start = 'start',
middle = 'middle', middle = 'middle',
@ -765,7 +749,7 @@ export interface TimeSeriesChartThreshold {
units?: string; units?: string;
decimals?: number; decimals?: number;
lineColor: string; lineColor: string;
lineType: TimeSeriesChartLineType | number | number[]; lineType: ChartLineType | number | number[];
lineWidth: number; lineWidth: number;
startSymbol: ChartShape; startSymbol: ChartShape;
startSymbolSize: number; startSymbolSize: number;
@ -820,7 +804,7 @@ export const timeSeriesChartThresholdDefaultSettings: TimeSeriesChartThreshold =
units: null, units: null,
decimals: 0, decimals: 0,
lineColor: chartColorScheme['threshold.line'].light, lineColor: chartColorScheme['threshold.line'].light,
lineType: TimeSeriesChartLineType.solid, lineType: ChartLineType.solid,
lineWidth: 1, lineWidth: 1,
startSymbol: ChartShape.none, startSymbol: ChartShape.none,
startSymbolSize: 5, startSymbolSize: 5,
@ -1055,7 +1039,7 @@ export interface LineSeriesSettings {
step: boolean; step: boolean;
stepType: LineSeriesStepType; stepType: LineSeriesStepType;
smooth: boolean; smooth: boolean;
lineType: TimeSeriesChartLineType; lineType: ChartLineType;
lineWidth: number; lineWidth: number;
showPoints: boolean; showPoints: boolean;
showPointLabel: boolean; showPointLabel: boolean;
@ -1090,7 +1074,7 @@ export const timeSeriesChartKeyDefaultSettings: TimeSeriesChartKeySettings = {
step: false, step: false,
stepType: LineSeriesStepType.start, stepType: LineSeriesStepType.start,
smooth: false, smooth: false,
lineType: TimeSeriesChartLineType.solid, lineType: ChartLineType.solid,
lineWidth: 2, lineWidth: 2,
showPoints: false, showPoints: false,
showPointLabel: false, showPointLabel: false,

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

@ -74,7 +74,7 @@ import { DataKeySettingsFunction } from '@home/components/widget/config/data-key
import { DeepPartial } from '@shared/models/common'; import { DeepPartial } from '@shared/models/common';
import { BarRenderSharedContext } from '@home/components/widget/lib/chart/time-series-chart-bar.models'; import { BarRenderSharedContext } from '@home/components/widget/lib/chart/time-series-chart-bar.models';
import { TimeSeriesChartStateValueConverter } from '@home/components/widget/lib/chart/time-series-chart-state.models'; import { TimeSeriesChartStateValueConverter } from '@home/components/widget/lib/chart/time-series-chart-state.models';
import { ChartLabelPosition, ChartShape } from '@home/components/widget/lib/chart/chart.models'; import { ChartLabelPosition, ChartShape, toAnimationOption } from '@home/components/widget/lib/chart/chart.models';
export class TbTimeSeriesChart { export class TbTimeSeriesChart {
@ -640,14 +640,7 @@ export class TbTimeSeriesChart {
bottom: 10 bottom: 10
} }
], ],
animation: this.settings.animation.animation, ...toAnimationOption(this.ctx, this.settings.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
}; };
if (this.hasVisualMap) { if (this.hasVisualMap) {
this.timeSeriesChartOptions.visualMap = this.timeSeriesChartOptions.visualMap =

248
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/radar-chart-widget-settings.component.html
View File

@ -0,0 +1,248 @@
<!--
Copyright © 2016-2024 The Thingsboard Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<ng-container [formGroup]="radarChartWidgetSettingsForm">
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-chart-style</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="sortSeries">
{{ 'widgets.latest-chart.sort-series' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-appearance</div>
<div class="tb-form-row space-between">
<div>{{ 'widgets.radar-chart.shape' | translate }}</div>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="shape">
<mat-option *ngFor="let shape of radarChartShapes" [value]="shape">
{{ radarChartShapeTranslations.get(shape) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.radar-chart.color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="color">
</tb-color-input>
</div>
<div class="tb-form-row space-between column-xs">
<mat-slide-toggle class="mat-slide" formControlName="showLine">
{{ 'widgets.radar-chart.line' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="lineType">
<mat-option *ngFor="let type of chartLineTypes" [value]="type">
{{ chartLineTypeTranslations.get(type) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic">
<input matInput formControlName="lineWidth"
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
</div>
<div class="tb-form-row space-between column-xs">
<mat-slide-toggle class="mat-slide" formControlName="showPoints">
{{ 'widgets.radar-chart.points' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="pointShape">
<mat-option *ngFor="let shape of chartShapes" [value]="shape">
{{ chartShapeTranslations.get(shape) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="number fixed-width" subscriptSizing="dynamic">
<input matInput formControlName="pointSize"
type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
</div>
<div class="tb-form-row space-between column-lt-md">
<mat-slide-toggle class="mat-slide" formControlName="showLabel">
{{ 'widgets.radar-chart.points-label' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="labelPosition">
<mat-option *ngFor="let position of chartLabelPositions" [value]="position">
{{ chartLabelPositionTranslations.get(position) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<tb-font-settings formControlName="labelFont"
clearButton
disabledLineHeight
forceSizeUnit="px"
[previewText]="valuePreviewFn">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="labelColor">
</tb-color-input>
</div>
</div>
<tb-chart-fill-settings
formControlName="fillAreaSettings">
</tb-chart-fill-settings>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.radar-chart.radar-axis</div>
<div class="tb-form-row space-between">
<mat-slide-toggle class="mat-slide" formControlName="axisShowLabel">
{{ 'widgets.radar-chart.axis-label' | translate }}
</mat-slide-toggle>
<tb-font-settings formControlName="axisLabelFont"
clearButton
disabledLineHeight
forceSizeUnit="px"
previewText="Wind">
</tb-font-settings>
</div>
<div class="tb-form-row space-between">
<mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels">
{{ 'widgets.radar-chart.ticks-label' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="axisTickLabelFont"
clearButton
disabledLineHeight
forceSizeUnit="px"
previewText="100">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="axisTickLabelColor">
</tb-color-input>
</div>
</div>
</div>
<div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="radarChartWidgetSettingsForm.get('showLegend').value" [disabled]="!radarChartWidgetSettingsForm.get('showLegend').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widget-config.legend' | translate }}
</mat-slide-toggle>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="tb-form-row space-between">
<div>{{ 'legend.position' | translate }}</div>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="legendPosition">
<mat-option *ngFor="let pos of legendPositions" [value]="pos">
{{ legendPositionTranslationMap.get(pos) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="tb-form-row space-between">
<div>{{ 'legend.label' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="legendLabelFont"
previewText="Wind power">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="legendLabelColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div>{{ 'legend.value' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="legendValueFont"
[previewText]="valuePreviewFn">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="legendValueColor">
</tb-color-input>
</div>
</div>
</ng-template>
</mat-expansion-panel>
</div>
<div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="radarChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!radarChartWidgetSettingsForm.get('showTooltip').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widget-config.tooltip' | translate }}
</mat-slide-toggle>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="tb-form-row space-between column-xs">
<div>{{ 'tooltip.value' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="tooltipValueType">
<mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type">
{{ latestChartTooltipValueTypeTranslationMap.get(type) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
</mat-form-field>
<tb-font-settings formControlName="tooltipValueFont"
[previewText]="tooltipValuePreviewFn">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="tooltipValueColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div>{{ 'tooltip.background-color' | translate }}</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="tooltipBackgroundColor">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div>{{ 'tooltip.background-blur' | translate }}</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<div matSuffix>px</div>
</mat-form-field>
</div>
</ng-template>
</mat-expansion-panel>
</div>
<tb-chart-animation-settings
formControlName="animation">
</tb-chart-animation-settings>
<div class="tb-form-row space-between">
<div>{{ 'widgets.background.background' | translate }}</div>
<tb-background-settings formControlName="background">
</tb-background-settings>
</div>
</div>
</ng-container>

244
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/radar-chart-widget-settings.component.ts
View File

@ -0,0 +1,244 @@
///
/// 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 {
radarChartWidgetDefaultSettings,
RadarChartWidgetSettings
} from '@home/components/widget/lib/chart/radar-chart-widget.models';
import { radarChartShapes, radarChartShapeTranslations } from '@home/components/widget/lib/chart/radar-chart.models';
import {
chartLabelPositions,
chartLabelPositionTranslations,
chartLineTypes,
chartLineTypeTranslations,
chartShapes,
chartShapeTranslations
} from '@home/components/widget/lib/chart/chart.models';
@Component({
selector: 'tb-radar-chart-widget-settings',
templateUrl: './radar-chart-widget-settings.component.html',
styleUrls: []
})
export class RadarChartWidgetSettingsComponent extends WidgetSettingsComponent {
radarChartShapes = radarChartShapes;
radarChartShapeTranslations = radarChartShapeTranslations;
chartLineTypes = chartLineTypes;
chartLineTypeTranslations = chartLineTypeTranslations;
chartShapes = chartShapes;
chartShapeTranslations = chartShapeTranslations;
chartLabelPositions = chartLabelPositions;
chartLabelPositionTranslations = chartLabelPositionTranslations;
legendPositions = legendPositions;
legendPositionTranslationMap = legendPositionTranslationMap;
latestChartTooltipValueTypes = latestChartTooltipValueTypes;
latestChartTooltipValueTypeTranslationMap = latestChartTooltipValueTypeTranslations;
radarChartWidgetSettingsForm: 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.radarChartWidgetSettingsForm;
}
protected defaultSettings(): WidgetSettings {
return mergeDeep<RadarChartWidgetSettings>({} as RadarChartWidgetSettings, radarChartWidgetDefaultSettings);
}
protected onSettingsSet(settings: WidgetSettings) {
this.radarChartWidgetSettingsForm = this.fb.group({
sortSeries: [settings.sortSeries, []],
shape: [settings.shape, []],
color: [settings.color, []],
showLine: [settings.showLine, []],
lineType: [settings.lineType, []],
lineWidth: [settings.lineWidth, [Validators.min(0)]],
showPoints: [settings.showPoints, []],
pointShape: [settings.pointShape, []],
pointSize: [settings.pointSize, [Validators.min(0)]],
showLabel: [settings.showLabel, []],
labelPosition: [settings.labelPosition, []],
labelFont: [settings.labelFont, []],
labelColor: [settings.labelColor, []],
fillAreaSettings: [settings.fillAreaSettings, []],
axisShowLabel: [settings.axisShowLabel, []],
axisLabelFont: [settings.axisLabelFont, []],
axisShowTickLabels: [settings.axisShowTickLabels, []],
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 ['showLine', 'showPoints', 'showLabel', 'axisShowLabel',
'axisShowTickLabels', 'showLegend', 'showTooltip'];
}
protected updateValidators(emitEvent: boolean) {
const showLine: boolean = this.radarChartWidgetSettingsForm.get('showLine').value;
const showPoints: boolean = this.radarChartWidgetSettingsForm.get('showPoints').value;
const showLabel: boolean = this.radarChartWidgetSettingsForm.get('showLabel').value;
const axisShowLabel: boolean = this.radarChartWidgetSettingsForm.get('axisShowLabel').value;
const axisShowTickLabels: boolean = this.radarChartWidgetSettingsForm.get('axisShowTickLabels').value;
const showLegend: boolean = this.radarChartWidgetSettingsForm.get('showLegend').value;
const showTooltip: boolean = this.radarChartWidgetSettingsForm.get('showTooltip').value;
if (showLine) {
this.radarChartWidgetSettingsForm.get('lineType').enable();
this.radarChartWidgetSettingsForm.get('lineWidth').enable();
} else {
this.radarChartWidgetSettingsForm.get('lineType').disable();
this.radarChartWidgetSettingsForm.get('lineWidth').disable();
}
if (showPoints) {
this.radarChartWidgetSettingsForm.get('pointShape').enable();
this.radarChartWidgetSettingsForm.get('pointSize').enable();
} else {
this.radarChartWidgetSettingsForm.get('pointShape').disable();
this.radarChartWidgetSettingsForm.get('pointSize').disable();
}
if (showLabel) {
this.radarChartWidgetSettingsForm.get('labelPosition').enable();
this.radarChartWidgetSettingsForm.get('labelFont').enable();
this.radarChartWidgetSettingsForm.get('labelColor').enable();
} else {
this.radarChartWidgetSettingsForm.get('labelPosition').disable();
this.radarChartWidgetSettingsForm.get('labelFont').disable();
this.radarChartWidgetSettingsForm.get('labelColor').disable();
}
if (axisShowLabel) {
this.radarChartWidgetSettingsForm.get('axisLabelFont').enable();
} else {
this.radarChartWidgetSettingsForm.get('axisLabelFont').disable();
}
if (axisShowTickLabels) {
this.radarChartWidgetSettingsForm.get('axisTickLabelFont').enable();
this.radarChartWidgetSettingsForm.get('axisTickLabelColor').enable();
} else {
this.radarChartWidgetSettingsForm.get('axisTickLabelFont').disable();
this.radarChartWidgetSettingsForm.get('axisTickLabelColor').disable();
}
if (showLegend) {
this.radarChartWidgetSettingsForm.get('legendPosition').enable();
this.radarChartWidgetSettingsForm.get('legendLabelFont').enable();
this.radarChartWidgetSettingsForm.get('legendLabelColor').enable();
this.radarChartWidgetSettingsForm.get('legendValueFont').enable();
this.radarChartWidgetSettingsForm.get('legendValueColor').enable();
} else {
this.radarChartWidgetSettingsForm.get('legendPosition').disable();
this.radarChartWidgetSettingsForm.get('legendLabelFont').disable();
this.radarChartWidgetSettingsForm.get('legendLabelColor').disable();
this.radarChartWidgetSettingsForm.get('legendValueFont').disable();
this.radarChartWidgetSettingsForm.get('legendValueColor').disable();
}
if (showTooltip) {
this.radarChartWidgetSettingsForm.get('tooltipValueType').enable();
this.radarChartWidgetSettingsForm.get('tooltipValueDecimals').enable();
this.radarChartWidgetSettingsForm.get('tooltipValueFont').enable();
this.radarChartWidgetSettingsForm.get('tooltipValueColor').enable();
this.radarChartWidgetSettingsForm.get('tooltipBackgroundColor').enable();
this.radarChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable();
} else {
this.radarChartWidgetSettingsForm.get('tooltipValueType').disable();
this.radarChartWidgetSettingsForm.get('tooltipValueDecimals').disable();
this.radarChartWidgetSettingsForm.get('tooltipValueFont').disable();
this.radarChartWidgetSettingsForm.get('tooltipValueColor').disable();
this.radarChartWidgetSettingsForm.get('tooltipBackgroundColor').disable();
this.radarChartWidgetSettingsForm.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.radarChartWidgetSettingsForm.get('tooltipValueType').value;
const decimals: number = this.radarChartWidgetSettingsForm.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);
}
}
}

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
View File

@ -92,8 +92,8 @@
<div translate>widgets.time-series-chart.line-type</div> <div translate>widgets.time-series-chart.line-type</div>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="lineType"> <mat-select formControlName="lineType">
<mat-option *ngFor="let lineType of timeSeriesLineTypes" [value]="lineType"> <mat-option *ngFor="let lineType of chartLineTypes" [value]="lineType">
{{ timeSeriesLineTypeTranslations.get(lineType) | translate }} {{ chartLineTypeTranslations.get(lineType) | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>

17
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
View File

@ -33,11 +33,16 @@ import {
import { DateFormatProcessor, DateFormatSettings } from '@shared/models/widget-settings.models'; import { DateFormatProcessor, DateFormatSettings } from '@shared/models/widget-settings.models';
import { import {
lineSeriesStepTypes, lineSeriesStepTypes,
lineSeriesStepTypeTranslations, lineSeriesStepTypeTranslations
timeSeriesLineTypes,
timeSeriesLineTypeTranslations
} from '@home/components/widget/lib/chart/time-series-chart.models'; } from '@home/components/widget/lib/chart/time-series-chart.models';
import { chartLabelPositions, chartLabelPositionTranslations, chartShapes, chartShapeTranslations } from '@home/components/widget/lib/chart/chart.models'; import {
chartLabelPositions,
chartLabelPositionTranslations,
chartLineTypes,
chartLineTypeTranslations,
chartShapes,
chartShapeTranslations
} from '@home/components/widget/lib/chart/chart.models';
@Component({ @Component({
selector: 'tb-range-chart-widget-settings', selector: 'tb-range-chart-widget-settings',
@ -59,9 +64,9 @@ export class RangeChartWidgetSettingsComponent extends WidgetSettingsComponent {
lineSeriesStepTypeTranslations = lineSeriesStepTypeTranslations; lineSeriesStepTypeTranslations = lineSeriesStepTypeTranslations;
timeSeriesLineTypes = timeSeriesLineTypes; chartLineTypes = chartLineTypes;
timeSeriesLineTypeTranslations = timeSeriesLineTypeTranslations; chartLineTypeTranslations = chartLineTypeTranslations;
chartLabelPositions = chartLabelPositions; chartLabelPositions = chartLabelPositions;

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

@ -44,8 +44,8 @@
<div translate>widgets.time-series-chart.line-type</div> <div translate>widgets.time-series-chart.line-type</div>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="lineType"> <mat-select formControlName="lineType">
<mat-option *ngFor="let lineType of timeSeriesLineTypes" [value]="lineType"> <mat-option *ngFor="let lineType of chartLineTypes" [value]="lineType">
{{ timeSeriesLineTypeTranslations.get(lineType) | translate }} {{ chartLineTypeTranslations.get(lineType) | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>

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

@ -26,9 +26,7 @@ import {
LineSeriesSettings, LineSeriesSettings,
lineSeriesStepTypes, lineSeriesStepTypes,
lineSeriesStepTypeTranslations, lineSeriesStepTypeTranslations,
TimeSeriesChartType, TimeSeriesChartType
timeSeriesLineTypes,
timeSeriesLineTypeTranslations
} from '@home/components/widget/lib/chart/time-series-chart.models'; } from '@home/components/widget/lib/chart/time-series-chart.models';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
@ -38,6 +36,8 @@ import { DataKeyConfigComponent } from '@home/components/widget/config/data-key-
import { import {
chartLabelPositions, chartLabelPositions,
chartLabelPositionTranslations, chartLabelPositionTranslations,
chartLineTypes,
chartLineTypeTranslations,
chartShapes, chartShapes,
chartShapeTranslations chartShapeTranslations
} from '@home/components/widget/lib/chart/chart.models'; } from '@home/components/widget/lib/chart/chart.models';
@ -62,9 +62,9 @@ export class TimeSeriesChartLineSettingsComponent implements OnInit, ControlValu
lineSeriesStepTypeTranslations = lineSeriesStepTypeTranslations; lineSeriesStepTypeTranslations = lineSeriesStepTypeTranslations;
timeSeriesLineTypes = timeSeriesLineTypes; chartLineTypes = chartLineTypes;
timeSeriesLineTypeTranslations = timeSeriesLineTypeTranslations; chartLineTypeTranslations = chartLineTypeTranslations;
chartLabelPositions = chartLabelPositions; chartLabelPositions = chartLabelPositions;

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

@ -86,8 +86,8 @@
<div translate>widgets.time-series-chart.line-type</div> <div translate>widgets.time-series-chart.line-type</div>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="lineType"> <mat-select formControlName="lineType">
<mat-option *ngFor="let lineType of timeSeriesLineTypes" [value]="lineType"> <mat-option *ngFor="let lineType of chartLineTypes" [value]="lineType">
{{ timeSeriesLineTypeTranslations.get(lineType) | translate }} {{ chartLineTypeTranslations.get(lineType) | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>

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

@ -20,8 +20,6 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
import { import {
TimeSeriesChartThreshold, TimeSeriesChartThreshold,
TimeSeriesChartYAxisId, TimeSeriesChartYAxisId,
timeSeriesLineTypes,
timeSeriesLineTypeTranslations,
timeSeriesThresholdLabelPositions, timeSeriesThresholdLabelPositions,
timeSeriesThresholdLabelPositionTranslations timeSeriesThresholdLabelPositionTranslations
} from '@home/components/widget/lib/chart/time-series-chart.models'; } from '@home/components/widget/lib/chart/time-series-chart.models';
@ -29,7 +27,12 @@ import { merge } from 'rxjs';
import { WidgetConfig } from '@shared/models/widget.models'; import { WidgetConfig } from '@shared/models/widget.models';
import { formatValue, isDefinedAndNotNull } from '@core/utils'; import { formatValue, isDefinedAndNotNull } from '@core/utils';
import { coerceBoolean } from '@shared/decorators/coercion'; import { coerceBoolean } from '@shared/decorators/coercion';
import { ChartShape, chartShapes, chartShapeTranslations } from '@home/components/widget/lib/chart/chart.models'; import {
chartLineTypes, chartLineTypeTranslations,
ChartShape,
chartShapes,
chartShapeTranslations
} from '@home/components/widget/lib/chart/chart.models';
@Component({ @Component({
selector: 'tb-time-series-chart-threshold-settings-panel', selector: 'tb-time-series-chart-threshold-settings-panel',
@ -40,9 +43,9 @@ import { ChartShape, chartShapes, chartShapeTranslations } from '@home/component
}) })
export class TimeSeriesChartThresholdSettingsPanelComponent implements OnInit { export class TimeSeriesChartThresholdSettingsPanelComponent implements OnInit {
timeSeriesLineTypes = timeSeriesLineTypes; chartLineTypes = chartLineTypes;
timeSeriesLineTypeTranslations = timeSeriesLineTypeTranslations; chartLineTypeTranslations = chartLineTypeTranslations;
chartShapes = chartShapes; chartShapes = chartShapes;

12
ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
View File

@ -351,6 +351,9 @@ import {
import { import {
PolarAreaChartWidgetSettingsComponent PolarAreaChartWidgetSettingsComponent
} from '@home/components/widget/lib/settings/chart/polar-area-chart-widget-settings.component'; } from '@home/components/widget/lib/settings/chart/polar-area-chart-widget-settings.component';
import {
RadarChartWidgetSettingsComponent
} from '@home/components/widget/lib/settings/chart/radar-chart-widget-settings.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -476,7 +479,8 @@ import {
StatusWidgetSettingsComponent, StatusWidgetSettingsComponent,
PieChartWidgetSettingsComponent, PieChartWidgetSettingsComponent,
BarChartWidgetSettingsComponent, BarChartWidgetSettingsComponent,
PolarAreaChartWidgetSettingsComponent PolarAreaChartWidgetSettingsComponent,
RadarChartWidgetSettingsComponent
], ],
imports: [ imports: [
CommonModule, CommonModule,
@ -607,7 +611,8 @@ import {
StatusWidgetSettingsComponent, StatusWidgetSettingsComponent,
PieChartWidgetSettingsComponent, PieChartWidgetSettingsComponent,
BarChartWidgetSettingsComponent, BarChartWidgetSettingsComponent,
PolarAreaChartWidgetSettingsComponent PolarAreaChartWidgetSettingsComponent,
RadarChartWidgetSettingsComponent
] ]
}) })
export class WidgetSettingsModule { export class WidgetSettingsModule {
@ -704,5 +709,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
'tb-status-widget-settings': StatusWidgetSettingsComponent, 'tb-status-widget-settings': StatusWidgetSettingsComponent,
'tb-pie-chart-widget-settings': PieChartWidgetSettingsComponent, 'tb-pie-chart-widget-settings': PieChartWidgetSettingsComponent,
'tb-bar-chart-widget-settings': BarChartWidgetSettingsComponent, 'tb-bar-chart-widget-settings': BarChartWidgetSettingsComponent,
'tb-polar-area-chart-widget-settings': PolarAreaChartWidgetSettingsComponent 'tb-polar-area-chart-widget-settings': PolarAreaChartWidgetSettingsComponent,
'tb-radar-chart-widget-settings': RadarChartWidgetSettingsComponent
}; };

7
ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
View File

@ -91,6 +91,7 @@ import { LatestChartComponent } from '@home/components/widget/lib/chart/latest-c
import { PieChartWidgetComponent } from '@home/components/widget/lib/chart/pie-chart-widget.component'; import { PieChartWidgetComponent } from '@home/components/widget/lib/chart/pie-chart-widget.component';
import { BarChartWidgetComponent } from '@home/components/widget/lib/chart/bar-chart-widget.component'; import { BarChartWidgetComponent } from '@home/components/widget/lib/chart/bar-chart-widget.component';
import { PolarAreaWidgetComponent } from '@home/components/widget/lib/chart/polar-area-widget.component'; import { PolarAreaWidgetComponent } from '@home/components/widget/lib/chart/polar-area-widget.component';
import { RadarChartWidgetComponent } from '@home/components/widget/lib/chart/radar-chart-widget.component';
@NgModule({ @NgModule({
declarations: declarations:
@ -148,7 +149,8 @@ import { PolarAreaWidgetComponent } from '@home/components/widget/lib/chart/pola
LatestChartComponent, LatestChartComponent,
PieChartWidgetComponent, PieChartWidgetComponent,
BarChartWidgetComponent, BarChartWidgetComponent,
PolarAreaWidgetComponent PolarAreaWidgetComponent,
RadarChartWidgetComponent
], ],
imports: [ imports: [
CommonModule, CommonModule,
@ -209,7 +211,8 @@ import { PolarAreaWidgetComponent } from '@home/components/widget/lib/chart/pola
StatusWidgetComponent, StatusWidgetComponent,
PieChartWidgetComponent, PieChartWidgetComponent,
BarChartWidgetComponent, BarChartWidgetComponent,
PolarAreaWidgetComponent PolarAreaWidgetComponent,
RadarChartWidgetComponent
], ],
providers: [ providers: [
{provide: WIDGET_COMPONENTS_MODULE_TOKEN, useValue: WidgetComponentsModule } {provide: WIDGET_COMPONENTS_MODULE_TOKEN, useValue: WidgetComponentsModule }

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

@ -5628,6 +5628,9 @@
"shape-pin": "Pin", "shape-pin": "Pin",
"shape-arrow": "Arrow", "shape-arrow": "Arrow",
"shape-none": "None", "shape-none": "None",
"line-type-solid": "Solid",
"line-type-dashed": "Dashed",
"line-type-dotted": "Dotted",
"label-position-top": "Top", "label-position-top": "Top",
"label-position-bottom": "Bottom", "label-position-bottom": "Bottom",
"label-position-outside": "Outside", "label-position-outside": "Outside",
@ -6802,6 +6805,20 @@
"radius": "Radius", "radius": "Radius",
"pie-chart-card-style": "Pie chart card style" "pie-chart-card-style": "Pie chart card style"
}, },
"radar-chart": {
"radar-appearance": "Radar appearance",
"shape": "Shape",
"shape-polygon": "Polygon",
"shape-circle": "Circle",
"color": "Color",
"line": "Line",
"points": "Points",
"points-label": "Points label",
"radar-axis": "Radar axis",
"axis-label": "Axis label",
"ticks-label": "Ticks label",
"radar-chart-style": "Radar chart style"
},
"time-series-chart": { "time-series-chart": {
"chart": "Chart", "chart": "Chart",
"chart-style": "Chart style", "chart-style": "Chart style",
@ -6811,9 +6828,6 @@
"axes": "Axes", "axes": "Axes",
"y-axes": "Y axes", "y-axes": "Y axes",
"line-type": "Line type", "line-type": "Line type",
"line-type-solid": "Solid",
"line-type-dashed": "Dashed",
"line-type-dotted": "Dotted",
"line-width": "Line width", "line-width": "Line width",
"type-line": "Line", "type-line": "Line",
"type-bar": "Bar", "type-bar": "Bar",

Write Preview
Loading…
Cancel
Save