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

UI: Advanced gauge settings

pull/9485/head
Artem Dzhereleiko 3 years ago
parent
384c5db084
commit
e70530e4ca
7 changed files with 584 additions and 572 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
  2. 78
      ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
  3. 291
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
  4. 42
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts
  5. 615
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
  6. 69
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
  7. 23
      ui-ngx/src/assets/locale/locale.constant-en_US.json

38
ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
View File

@ -14,8 +14,7 @@
/// limitations under the License.
///
import { ChangeDetectorRef, Component, Injector } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
@ -27,33 +26,13 @@ import {
WidgetConfig,
} from '@shared/models/widget.models';
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
import {
getTimewindowConfig,
setTimewindowConfig
} from '@home/components/widget/config/timewindow-config-panel.component';
import { formatValue, isDefinedAndNotNull, isUndefined } from '@core/utils';
import {
ColorType,
DateFormatProcessor,
DateFormatSettings,
getLabel,
setLabel
} from '@shared/models/widget-settings.models';
import {
valueCardDefaultSettings,
ValueCardLayout,
valueCardLayoutImages,
valueCardLayouts,
valueCardLayoutTranslations,
ValueCardWidgetSettings
} from '@home/components/widget/lib/cards/value-card-widget.models';
// @Component({
// selector: 'tb-radial-gauge-basic-config',
// templateUrl: './analog-gauge-basic-config.component.html',
// styleUrls: ['../basic-config.scss']
// })
import { formatValue, isUndefined } from '@core/utils';
import { ColorType } from '@shared/models/widget-settings.models';
export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
public get displayTimewindowConfig(): boolean {
@ -94,21 +73,21 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
showUnitTitle: [configData.config.settings?.showUnitTitle, []],
unitTitle: [configData.config.settings?.unitTitle, []],
titleFont: [configData.config.settings?.titleFont, []],
titleColor: [configData.config.settings?.titleFont.color, []],
titleColor: [configData.config.settings?.titleFont?.color, []],
units: [configData.config.units, []],
unitsFont: [configData.config.settings?.unitsFont, []],
unitsColor: [configData.config.settings?.unitsFont.color, []],
unitsColor: [configData.config.settings?.unitsFont?.color, []],
valueBox: [configData.config.settings?.valueBox, []],
valueInt: [configData.config.settings?.valueInt, []],
valueFont: [configData.config.settings?.valueFont, []],
valueColor: [configData.config.settings?.valueFont.color, []],
valueColor: [configData.config.settings?.valueFont?.color, []],
minValue: [configData.config.settings?.minValue, []],
maxValue: [configData.config.settings?.maxValue, []],
numbersFont: [configData.config.settings?.numbersFont, []],
numbersColor: [configData.config.settings?.numbersFont.color, []],
numbersColor: [configData.config.settings?.numbersFont?.color, []],
colorBarStroke: [configData.config.settings?.colorBarStroke, []],
@ -129,7 +108,6 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
protected prepareOutputConfig(config: any): WidgetConfigComponentData {
setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig);
this.widgetConfig.config.datasources = config.datasources;
// setLabel(config.label, this.widgetConfig.config.datasources);
this.widgetConfig.config.actions = config.actions;
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};

78
ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
View File

@ -83,47 +83,47 @@
</tb-string-items-list>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.label-style</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="majorTickFont"
disabledLineHeight>
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="majorTickColor">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.label-style</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="majorTickFont"
disabledLineHeight>
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="majorTickColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.major-ticks-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorMajorTicks">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.minor-ticks-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorMinorTicks">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedle">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.plate-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorPlate">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.major-ticks-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorMajorTicks">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.minor-ticks-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorMinorTicks">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedle">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.plate-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorPlate">
</tb-color-input>
</div>
</div>
<div class="tb-form-panel">

291
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
View File

@ -15,153 +15,127 @@
limitations under the License.
-->
<section class="tb-widget-settings" [formGroup]="analogueCompassWidgetSettingsForm" fxLayout="column">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.ticks-settings</legend>
<mat-form-field fxFlex class="mat-block" floatLabel="always">
<mat-label translate>widgets.gauge.major-ticks-names</mat-label>
<mat-chip-grid class="tb-drop-list"
#majorTicksNamesChipList
cdkDropList
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="majorTickNameDrop($event)"
formControlName="majorTicks">
<mat-chip-row class="tb-draggable" cdkDrag *ngFor="let tickName of majorTicksNamesList()"
[removable]="true" (removed)="removeMajorTickName(tickName)">
{{tickName}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip-row>
<input [matChipInputFor]="majorTicksNamesChipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
matChipInputAddOnBlur
(matChipInputTokenEnd)="addMajorTickName($event)">
</mat-chip-grid>
</mat-form-field>
<tb-color-input fxFlex
formControlName="colorMajorTicks"
icon="format_color_fill"
label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.minor-ticks-count</mat-label>
<input matInput type="number" min="0" formControlName="minorTicks">
</mat-form-field>
<tb-color-input fxFlex
formControlName="colorMinorTicks"
icon="format_color_fill"
label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
<mat-slide-toggle formControlName="showStrokeTicks" class="slide-block">
{{ 'widgets.gauge.show-stroke-ticks' | translate }}
</mat-slide-toggle>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.major-ticks-font</legend>
<tb-widget-font formControlName="majorTickFont"></tb-widget-font>
</fieldset>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.plate-settings</legend>
<tb-color-input fxFlex
formControlName="colorPlate"
icon="format_color_fill"
label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-slide-toggle formControlName="showBorder" class="slide-block">
{{ 'widgets.gauge.show-plate-border' | translate }}
</mat-slide-toggle>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<tb-color-input fxFlex
formControlName="colorBorder"
icon="format_color_fill"
label="{{ 'widgets.gauge.border-color' | translate }}" openOnInput colorClearButton>
<ng-container [formGroup]="analogueCompassWidgetSettingsForm">
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
<div class="tb-form-row">
<div class="fixed-title-width" translate>widgets.gauge.labels</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-string-items-list
style="display: flex"
fxFlex
appearance="outline"
subscriptSizing="dynamic"
editable
formControlName="majorTicks">
</tb-string-items-list>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.label-style</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="majorTickFont"
disabledLineHeight>
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="majorTickColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.major-ticks</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorMajorTicks">
</tb-color-input>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.border-width</mat-label>
<input matInput type="number" min="0" formControlName="borderOuterWidth">
</mat-form-field>
</section>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.needle-settings</legend>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.needle-circle-size</mat-label>
<input matInput type="number" min="0" formControlName="needleCircleSize">
</mat-form-field>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<tb-color-input fxFlex
formControlName="colorNeedle"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.minor-ticks</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="minorTicks">
</mat-form-field>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorMinorTicks">
</tb-color-input>
</div>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="showStrokeTicks">
{{ 'widgets.gauge.show-stroke-ticks' | translate }}
</mat-slide-toggle>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.plate-settings</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.plate-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorPlate">
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorNeedleCircle"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-circle-color' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-row space-between column-xs">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBorder">
{{ 'widgets.gauge.show-plate-border' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="number" appearance="outline" subscriptSizing="dynamic">
<input matInput min="0" formControlName="borderOuterWidth" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorBorder">
</tb-color-input>
</div>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.needle-settings</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.gauge.needle-circle</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="number" appearance="outline" subscriptSizing="dynamic">
<input matInput min="0" formControlName="needleCircleSize" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedleCircle">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedle">
</tb-color-input>
</section>
</fieldset>
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.gauge.animation-settings</legend>
</div>
</div>
<div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="analogueCompassWidgetSettingsForm.get('animation').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="animation" (click)="$event.stopPropagation()"
<mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widgets.gauge.enable-animation' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.animation-duration</mat-label>
<input matInput type="number" min="0" formControlName="animationDuration">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.animation-rule</mat-label>
<mat-select formControlName="animationRule">
<mat-option [value]="'linear'">
{{ 'widgets.gauge.animation-linear' | translate }}
</mat-option>
<mat-option [value]="'quad'">
{{ 'widgets.gauge.animation-quad' | translate }}
</mat-option>
<mat-option [value]="'quint'">
{{ 'widgets.gauge.animation-quint' | translate }}
</mat-option>
<mat-option [value]="'cycle'">
{{ 'widgets.gauge.animation-cycle' | translate }}
</mat-option>
<mat-option [value]="'bounce'">
{{ 'widgets.gauge.animation-bounce' | translate }}
</mat-option>
<mat-option [value]="'elastic'">
{{ 'widgets.gauge.animation-elastic' | translate }}
</mat-option>
<mat-option [value]="'dequad'">
{{ 'widgets.gauge.animation-dequad' | translate }}
</mat-option>
<mat-option [value]="'dequint'">
{{ 'widgets.gauge.animation-dequint' | translate }}
</mat-option>
<mat-option [value]="'decycle'">
{{ 'widgets.gauge.animation-decycle' | translate }}
</mat-option>
<mat-option [value]="'debounce'">
{{ 'widgets.gauge.animation-debounce' | translate }}
</mat-option>
<mat-option [value]="'delastic'">
{{ 'widgets.gauge.animation-delastic' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.animation-target</mat-label>
<div class="tb-form-row">
<div class="fixed-title-width" translate>widgets.gauge.animation-target</div>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="animationTarget">
<mat-option [value]="'needle'">
{{ 'widgets.gauge.animation-target-needle' | translate }}
@ -171,8 +145,53 @@
</mat-option>
</mat-select>
</mat-form-field>
</section>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.animation-duration-rule</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="animationRule">
<mat-option [value]="'linear'">
{{ 'widgets.gauge.animation-linear' | translate }}
</mat-option>
<mat-option [value]="'quad'">
{{ 'widgets.gauge.animation-quad' | translate }}
</mat-option>
<mat-option [value]="'quint'">
{{ 'widgets.gauge.animation-quint' | translate }}
</mat-option>
<mat-option [value]="'cycle'">
{{ 'widgets.gauge.animation-cycle' | translate }}
</mat-option>
<mat-option [value]="'bounce'">
{{ 'widgets.gauge.animation-bounce' | translate }}
</mat-option>
<mat-option [value]="'elastic'">
{{ 'widgets.gauge.animation-elastic' | translate }}
</mat-option>
<mat-option [value]="'dequad'">
{{ 'widgets.gauge.animation-dequad' | translate }}
</mat-option>
<mat-option [value]="'dequint'">
{{ 'widgets.gauge.animation-dequint' | translate }}
</mat-option>
<mat-option [value]="'decycle'">
{{ 'widgets.gauge.animation-decycle' | translate }}
</mat-option>
<mat-option [value]="'debounce'">
{{ 'widgets.gauge.animation-debounce' | translate }}
</mat-option>
<mat-option [value]="'delastic'">
{{ 'widgets.gauge.animation-delastic' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</ng-template>
</mat-expansion-panel>
</fieldset>
</section>
</div>
</ng-container>

42
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts
View File

@ -19,9 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { Component } from '@angular/core';
import { MatChipInputEvent } from '@angular/material/chips';
import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'tb-analogue-compass-widget-settings',
@ -81,6 +79,7 @@ export class AnalogueCompassWidgetSettingsComponent extends WidgetSettingsCompon
colorMinorTicks: [settings.colorMinorTicks, []],
showStrokeTicks: [settings.showStrokeTicks, []],
majorTickFont: [settings.majorTickFont, []],
majorTickColor: [settings.majorTickFont.color, []],
// Plate settings
colorPlate: [settings.colorPlate, []],
@ -131,41 +130,8 @@ export class AnalogueCompassWidgetSettingsComponent extends WidgetSettingsCompon
this.analogueCompassWidgetSettingsForm.get('animationTarget').updateValueAndValidity({emitEvent});
}
majorTicksNamesList(): string[] {
return this.analogueCompassWidgetSettingsForm.get('majorTicks').value;
}
removeMajorTickName(tickName: string): void {
const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value;
const index = tickNames.indexOf(tickName);
if (index >= 0) {
tickNames.splice(index, 1);
this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames);
this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty();
}
}
addMajorTickName(event: MatChipInputEvent): void {
const input = event.chipInput.inputElement;
const value = event.value;
const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value;
if ((value || '').trim()) {
tickNames.push(value.trim());
this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames);
this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty();
}
if (input) {
input.value = '';
}
}
majorTickNameDrop(event: CdkDragDrop<string[]>): void {
const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value;
moveItemInArray(tickNames, event.previousIndex, event.currentIndex);
this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames);
this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty();
protected prepareOutputSettings(settings) {
settings.majorTickFont.color = this.analogueCompassWidgetSettingsForm.get('majorTickColor').value;
return settings;
}
}

615
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<section class="tb-widget-settings" [formGroup]="analogueGaugeWidgetSettingsForm" fxLayout="column">
<ng-container [formGroup]="analogueGaugeWidgetSettingsForm">
<ng-container [ngSwitch]="gaugeType">
<ng-container *ngSwitchCase="'radial'">
<ng-container *ngTemplateOutlet="radialGauge; context: ctx "></ng-container>
@ -24,330 +24,383 @@
<ng-container *ngTemplateOutlet="linearGauge; context: ctx "></ng-container>
</ng-container>
</ng-container>
<tb-color-input
formControlName="defaultColor"
icon="format_color_fill"
label="{{ 'widgets.gauge.default-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.ticks-settings</legend>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.min-value</mat-label>
<input matInput type="number" formControlName="minValue">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.max-value</mat-label>
<input matInput type="number" formControlName="maxValue">
</mat-form-field>
</section>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.major-ticks-count</mat-label>
<input matInput type="number" min="0" formControlName="majorTicksCount">
</mat-form-field>
<tb-color-input fxFlex
formControlName="colorMajorTicks"
icon="format_color_fill"
label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.minor-ticks-count</mat-label>
<input matInput type="number" min="0" formControlName="minorTicks">
</mat-form-field>
<tb-color-input fxFlex
formControlName="colorMinorTicks"
icon="format_color_fill"
label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.tick-numbers-font</legend>
<tb-widget-font formControlName="numbersFont"></tb-widget-font>
</fieldset>
</fieldset>
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.gauge.unit-title-settings</legend>
<mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('showUnitTitle').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showUnitTitle" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widgets.gauge.show-unit-title' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.unit-title</mat-label>
<input matInput formControlName="unitTitle">
</mat-form-field>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.title-font</legend>
<tb-widget-font formControlName="titleFont"></tb-widget-font>
</fieldset>
</section>
</ng-template>
</mat-expansion-panel>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.units-settings</legend>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.units-font</legend>
<tb-widget-font formControlName="unitsFont"></tb-widget-font>
</fieldset>
</fieldset>
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.gauge.value-box-settings</legend>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.gauge.ticks</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<div class="tb-small-label" translate>widgets.gauge.max-value-short</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="maxValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-font-settings formControlName="numbersFont"
disabledLineHeight>
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="numbersColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.gauge.major-ticks-count</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="majorTicksCount" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorMajorTicks">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.gauge.minor-ticks-count</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="minorTicks" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorMinorTicks">
</tb-color-input>
</div>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.units-settings</div>
<div class="tb-form-row column-xs">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showUnitTitle">
{{ 'widgets.gauge.units-title' | translate }}
</mat-slide-toggle>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="unitTitle" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-font-settings formControlName="titleFont"
disabledLineHeight
[previewText]="analogueGaugeWidgetSettingsForm.get('unitTitle').value">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="titleColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widget-config.units-short</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="unitsFont"
disabledLineHeight>
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="unitsColor">
</tb-color-input>
</div>
</div>
</div>
<div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('valueBox').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="valueBox" (click)="$event.stopPropagation()"
<mat-slide-toggle class="mat-slide" formControlName="valueBox" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widgets.gauge.show-value-box' | translate }}
{{ 'widgets.gauge.value-box' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.value-int</mat-label>
<input matInput type="number" min="0" step="1" formControlName="valueInt">
<div class="tb-form-row space-between">
<div translate>widgets.gauge.value-int</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" min="0" step="1" formControlName="valueInt" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.value-font</legend>
<tb-widget-font formControlName="valueFont" [hasShadowColor]="true"></tb-widget-font>
</fieldset>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex
formControlName="colorValueBoxRect"
icon="format_color_fill"
label="{{ 'widgets.gauge.value-box-rect-stroke-color' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.value-text</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.value-text</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="valueFont"
disabledLineHeight>
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="valueColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.value-text-shadow</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="valueColorShadow">
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorValueBoxRectEnd"
icon="format_color_fill"
label="{{ 'widgets.gauge.value-box-rect-stroke-color-end' | translate }}" openOnInput colorClearButton>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.value-box</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.rect-stroke-color-start</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorValueBoxRect">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.rect-stroke-color-end</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorValueBoxRectEnd">
</tb-color-input>
</section>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex
formControlName="colorValueBoxBackground"
icon="format_color_fill"
label="{{ 'widgets.gauge.value-box-background-color' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.background-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorValueBoxBackground">
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorValueBoxShadow"
icon="format_color_fill"
label="{{ 'widgets.gauge.value-box-shadow-color' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.shadow-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorValueBoxShadow">
</tb-color-input>
</section>
</section>
</div>
</div>
</ng-template>
</mat-expansion-panel>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.plate-settings</legend>
<tb-color-input fxFlex
formControlName="colorPlate"
icon="format_color_fill"
label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-slide-toggle formControlName="showBorder">
{{ 'widgets.gauge.show-plate-border' | translate }}
</mat-slide-toggle>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.needle-settings</legend>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex
formControlName="colorNeedle"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.plate-settings</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.plate-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorPlate">
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorNeedleEnd"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color-end' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="showBorder">
{{ 'widgets.gauge.show-plate-border' | translate }}
</mat-slide-toggle>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.needle-settings</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-color-start</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedle">
</tb-color-input>
</section>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex
formControlName="colorNeedleShadowUp"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color-shadow-up' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-color-end</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedleEnd">
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorNeedleShadowDown"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color-shadow-down' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-color-shadow-up</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedleShadowUp">
</tb-color-input>
</section>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.highlights-settings</legend>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.highlights-width</mat-label>
<input matInput type="number" min="0" formControlName="highlightsWidth">
</mat-form-field>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.highlights</legend>
<div fxLayout="column">
<div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
(cdkDropListDropped)="highlightDrop($event)">
<div cdkDrag class="tb-draggable" *ngFor="let highlightControl of highlightsFormArray().controls; trackBy: trackByHighlightControl;
let $index = index; last as isLast;"
fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<tb-gauge-highlight [formControl]="highlightControl"
[expanded]="highlightControl.new"
(removeHighlight)="removeHighlight($index)">
</tb-gauge-highlight>
</div>
</div>
<div *ngIf="!highlightsFormArray().controls.length">
<span translate fxLayoutAlign="center center"
class="tb-prompt">widgets.gauge.no-highlights</span>
</div>
<div style="padding-top: 16px;">
<button mat-raised-button color="primary"
type="button"
(click)="addHighlight()">
<span translate>widgets.gauge.add-highlight</span>
</button>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-color-shadow-down</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedleShadowDown">
</tb-color-input>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.scale-settings</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.scale</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="highlightsWidth">
</mat-form-field>
<tb-color-settings formControlName="highlights">
<!-- [disabledColorType]="[colorType.constant, colorType.function]"-->
</tb-color-settings>
</div>
</fieldset>
</fieldset>
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.gauge.animation-settings</legend>
</div>
</div>
<div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('animation').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="animation" (click)="$event.stopPropagation()"
<mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widgets.gauge.enable-animation' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.animation-duration</mat-label>
<input matInput type="number" min="0" formControlName="animationDuration">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.animation-rule</mat-label>
<mat-select formControlName="animationRule">
<mat-option [value]="'linear'">
{{ 'widgets.gauge.animation-linear' | translate }}
</mat-option>
<mat-option [value]="'quad'">
{{ 'widgets.gauge.animation-quad' | translate }}
</mat-option>
<mat-option [value]="'quint'">
{{ 'widgets.gauge.animation-quint' | translate }}
</mat-option>
<mat-option [value]="'cycle'">
{{ 'widgets.gauge.animation-cycle' | translate }}
</mat-option>
<mat-option [value]="'bounce'">
{{ 'widgets.gauge.animation-bounce' | translate }}
</mat-option>
<mat-option [value]="'elastic'">
{{ 'widgets.gauge.animation-elastic' | translate }}
</mat-option>
<mat-option [value]="'dequad'">
{{ 'widgets.gauge.animation-dequad' | translate }}
</mat-option>
<mat-option [value]="'dequint'">
{{ 'widgets.gauge.animation-dequint' | translate }}
</mat-option>
<mat-option [value]="'decycle'">
{{ 'widgets.gauge.animation-decycle' | translate }}
</mat-option>
<mat-option [value]="'debounce'">
{{ 'widgets.gauge.animation-debounce' | translate }}
</mat-option>
<mat-option [value]="'delastic'">
{{ 'widgets.gauge.animation-delastic' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.animation-duration-rule</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="animationRule">
<mat-option [value]="'linear'">
{{ 'widgets.gauge.animation-linear' | translate }}
</mat-option>
<mat-option [value]="'quad'">
{{ 'widgets.gauge.animation-quad' | translate }}
</mat-option>
<mat-option [value]="'quint'">
{{ 'widgets.gauge.animation-quint' | translate }}
</mat-option>
<mat-option [value]="'cycle'">
{{ 'widgets.gauge.animation-cycle' | translate }}
</mat-option>
<mat-option [value]="'bounce'">
{{ 'widgets.gauge.animation-bounce' | translate }}
</mat-option>
<mat-option [value]="'elastic'">
{{ 'widgets.gauge.animation-elastic' | translate }}
</mat-option>
<mat-option [value]="'dequad'">
{{ 'widgets.gauge.animation-dequad' | translate }}
</mat-option>
<mat-option [value]="'dequint'">
{{ 'widgets.gauge.animation-dequint' | translate }}
</mat-option>
<mat-option [value]="'decycle'">
{{ 'widgets.gauge.animation-decycle' | translate }}
</mat-option>
<mat-option [value]="'debounce'">
{{ 'widgets.gauge.animation-debounce' | translate }}
</mat-option>
<mat-option [value]="'delastic'">
{{ 'widgets.gauge.animation-delastic' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</ng-template>
</mat-expansion-panel>
</fieldset>
</section>
</div>
</ng-container>
<ng-template #radialGauge let-settingsForm="settingsForm">
<fieldset class="fields-group" [formGroup]="settingsForm">
<legend class="group-title" translate>widgets.gauge.radial-gauge-settings</legend>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.start-ticks-angle</mat-label>
<input matInput type="number" min="0" max="360" formControlName="startAngle">
<div class="tb-form-panel" [formGroup]="settingsForm">
<div class="tb-form-panel-title" translate>widgets.gauge.radial-gauge-settings</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.start-ticks-angle</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="startAngle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.ticks-angle</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="ticksAngle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.ticks-angle</mat-label>
<input matInput type="number" min="0" max="360" formControlName="ticksAngle">
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-circle-size</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="needleCircleSize" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</section>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.needle-circle-size</mat-label>
<input matInput type="number" min="0" formControlName="needleCircleSize">
</mat-form-field>
</fieldset>
</div>
<ng-container *ngTemplateOutlet="arrowScaleDefaultColor"></ng-container>
</div>
</ng-template>
<ng-template #linearGauge let-settingsForm="settingsForm">
<fieldset class="fields-group" [formGroup]="settingsForm">
<legend class="group-title" translate>widgets.gauge.linear-gauge-settings</legend>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.bar-stroke-width</mat-label>
<input matInput type="number" min="0" formControlName="barStrokeWidth">
</mat-form-field>
<tb-color-input fxFlex
formControlName="colorBarStroke"
icon="format_color_fill"
label="{{ 'widgets.gauge.bar-stroke-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex
formControlName="colorBar"
icon="format_color_fill"
label="{{ 'widgets.gauge.bar-background-color' | translate }}" openOnInput colorClearButton>
<div class="tb-form-panel" [formGroup]="settingsForm">
<div class="tb-form-panel-title" translate>widgets.gauge.linear-gauge-settings</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.bar-stroke</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="barStrokeWidth" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorBar">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.bar-background-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorBar">
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorBarEnd"
icon="format_color_fill"
label="{{ 'widgets.gauge.bar-background-color-end' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.bar-background-color-end</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorBarEnd">
</tb-color-input>
</section>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex
formControlName="colorBarProgress"
icon="format_color_fill"
label="{{ 'widgets.gauge.progress-bar-color' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.progress-bar-color-start</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorBarProgress">
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorBarProgressEnd"
icon="format_color_fill"
label="{{ 'widgets.gauge.progress-bar-color-end' | translate }}" openOnInput colorClearButton>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.progress-bar-color-end</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorBarProgressEnd">
</tb-color-input>
</section>
</fieldset>
</div>
<ng-container *ngTemplateOutlet="arrowScaleDefaultColor"></ng-container>
</div>
</ng-template>
<ng-template #arrowScaleDefaultColor>
<div class="tb-form-row space-between" [formGroup]="analogueGaugeWidgetSettingsForm">
<div>{{ 'widgets.gauge.arrow-and-scale-color' | translate }}</div>
<tb-color-input asBoxInput
formControlName="defaultColor">
</tb-color-input>
</div>
</ng-template>

69
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
View File

@ -15,11 +15,10 @@
///
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { GaugeHighlight } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponent {
@ -119,19 +118,24 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
minorTicks: [settings.majorTicksCount, [Validators.min(0)]],
colorMinorTicks: [settings.colorMinorTicks, []],
numbersFont: [settings.numbersFont, []],
numbersColor: [settings.numbersFont.color, []],
// Unit title settings
showUnitTitle: [settings.showUnitTitle, []],
unitTitle: [settings.unitTitle, []],
titleFont: [settings.titleFont, []],
titleColor: [settings.titleFont.color, []],
// Units settings
unitsFont: [settings.unitsFont, []],
unitsColor: [settings.unitsFont.color, []],
// Value box settings
valueBox: [settings.valueBox, []],
valueInt: [settings.valueInt, [Validators.min(0)]],
valueFont: [settings.valueFont, []],
valueColor: [settings.valueFont.color, []],
valueColorShadow: [settings.valueFont.shadowColor, []],
colorValueBoxRect: [settings.colorValueBoxRect, []],
colorValueBoxRectEnd: [settings.colorValueBoxRectEnd, []],
colorValueBoxBackground: [settings.colorValueBoxBackground, []],
@ -149,7 +153,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
// Highlights settings
highlightsWidth: [settings.highlightsWidth, [Validators.min(0)]],
highlights: this.prepareHighlightsFormArray(settings.highlights),
highlights: this.prepareHighlights(settings.highlights),
// Animation settings
animation: [settings.animation, []],
@ -170,13 +174,16 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
if (showUnitTitle) {
this.analogueGaugeWidgetSettingsForm.get('unitTitle').enable();
this.analogueGaugeWidgetSettingsForm.get('titleFont').enable();
this.analogueGaugeWidgetSettingsForm.get('titleColor').enable();
} else {
this.analogueGaugeWidgetSettingsForm.get('unitTitle').disable();
this.analogueGaugeWidgetSettingsForm.get('titleFont').disable();
this.analogueGaugeWidgetSettingsForm.get('titleColor').disable();
}
if (valueBox) {
this.analogueGaugeWidgetSettingsForm.get('valueInt').enable();
this.analogueGaugeWidgetSettingsForm.get('valueFont').enable();
this.analogueGaugeWidgetSettingsForm.get('valueColor').enable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').enable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').enable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').enable();
@ -184,6 +191,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
} else {
this.analogueGaugeWidgetSettingsForm.get('valueInt').disable();
this.analogueGaugeWidgetSettingsForm.get('valueFont').disable();
this.analogueGaugeWidgetSettingsForm.get('valueColor').disable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').disable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').disable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').disable();
@ -198,8 +206,10 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
}
this.analogueGaugeWidgetSettingsForm.get('unitTitle').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('titleFont').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('titleColor').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('valueInt').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('valueFont').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('valueColor').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').updateValueAndValidity({emitEvent});
@ -208,50 +218,21 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
this.analogueGaugeWidgetSettingsForm.get('animationRule').updateValueAndValidity({emitEvent});
}
protected doUpdateSettings(settingsForm: UntypedFormGroup, settings: WidgetSettings) {
settingsForm.setControl('highlights', this.prepareHighlightsFormArray(settings.highlights), {emitEvent: false});
}
private prepareHighlightsFormArray(highlights: GaugeHighlight[] | undefined): UntypedFormArray {
const highlightsControls: Array<AbstractControl> = [];
if (highlights) {
highlights.forEach((highlight) => {
highlightsControls.push(this.fb.control(highlight, [Validators.required]));
});
protected prepareOutputSettings(settings) {
settings.numbersFont.color = this.analogueGaugeWidgetSettingsForm.get('numbersColor').value;
if (settings.titleFont) {
settings.titleFont.color = this.analogueGaugeWidgetSettingsForm.get('titleColor').value;
}
return this.fb.array(highlightsControls);
}
highlightsFormArray(): UntypedFormArray {
return this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray;
}
public trackByHighlightControl(index: number, highlightControl: AbstractControl): any {
return highlightControl;
}
public removeHighlight(index: number) {
(this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray).removeAt(index);
}
public addHighlight() {
const highlight: GaugeHighlight = {
from: null,
to: null,
color: null
};
const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray;
const highlightControl = this.fb.control(highlight, [Validators.required]);
(highlightControl as any).new = true;
highlightsArray.push(highlightControl);
this.analogueGaugeWidgetSettingsForm.updateValueAndValidity();
settings.unitsFont.color = this.analogueGaugeWidgetSettingsForm.get('unitsColor').value;
if (settings.valueFont) {
settings.valueFont.color = this.analogueGaugeWidgetSettingsForm.get('valueColor').value;
settings.valueFont.shadowColor = this.analogueGaugeWidgetSettingsForm.get('valueColorShadow').value;
}
return settings;
}
highlightDrop(event: CdkDragDrop<string[]>) {
const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray;
const highlight = highlightsArray.at(event.previousIndex);
highlightsArray.removeAt(event.previousIndex);
highlightsArray.insert(event.currentIndex, highlight);
private prepareHighlights(highlights: GaugeHighlight[] | undefined) {
return {type: 'range', rangeList: highlights};
}
}

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

@ -5362,8 +5362,10 @@
"max-value-short": "max",
"start-ticks-angle": "Start ticks angle",
"ticks-angle": "Ticks angle",
"major-ticks": "Major ticks",
"major-ticks-count": "Major ticks count",
"major-ticks-color": "Major ticks color",
"minor-ticks": "Minor ticks",
"minor-ticks-count": "Minor ticks count",
"minor-ticks-color": "Minor ticks color",
"tick-numbers-font": "Tick numbers font",
@ -5375,21 +5377,29 @@
"units-font": "Units text font",
"value-box-settings": "Value box settings",
"show-value-box": "Show value box",
"value-box": "Value box",
"value-int": "Digits count for integer part of value",
"value-text": "Value text",
"value-text-shadow": "Value text shadow",
"value-font": "Value text font",
"rect-stroke-color-start": "Rectangle stroke color - start gradient",
"rect-stroke-color-end": "Rectangle stroke color - end gradient",
"background-color": "Background color",
"shadow-color": "Shadow color",
"value-box-rect-stroke-color": "Value box rectangle stroke color",
"value-box-rect-stroke-color-end": "Value box rectangle stroke color - end gradient",
"value-box-background-color": "Value box background color",
"value-box-shadow-color": "Value box shadow color",
"plate-settings": "Plate settings",
"show-plate-border": "Show plate border",
"show-plate-border": "Plate border",
"plate-color": "Plate color",
"needle-settings": "Needle settings",
"needle-circle-size": "Needle circle size",
"needle-color": "Needle color",
"needle-color-start": "Needle color - start gradient",
"needle-color-end": "Needle color - end gradient",
"needle-color-shadow-up": "Upper half of the needle shadow color",
"needle-color-shadow-down": "Drop shadow needle color",
"needle-color-shadow-down": "Drop shadow",
"highlights-settings": "Highlights settings",
"highlights-width": "Highlights width",
"highlights": "Highlights",
@ -5399,7 +5409,8 @@
"no-highlights": "No highlights configured",
"add-highlight": "Add highlight",
"animation-settings": "Animation settings",
"enable-animation": "Enable animation",
"enable-animation": "Animation",
"animation-duration-rule": "Animation duration and rule",
"animation-duration": "Animation duration",
"animation-rule": "Animation rule",
"animation-linear": "Linear",
@ -5414,9 +5425,10 @@
"animation-debounce": "Debounce",
"animation-delastic": "Delastic",
"linear-gauge-settings": "Linear gauge settings",
"bar-stroke": "Bar stroke",
"bar-stroke-width": "Bar stroke width",
"bar-stroke-color": "Bar stroke color",
"bar-background-color": "Gauge bar background color",
"bar-background-color": "Bar background color - start gradient",
"bar-background-color-end": "Bar background color - end gradient",
"progress-bar-color": "Progress bar color",
"progress-bar": "Progress bar",
@ -5427,6 +5439,7 @@
"major-ticks-font": "Major ticks font",
"border-color": "Border color",
"border-width": "Border width",
"needle-circle": "Needle circle",
"needle-circle-color": "Needle circle color",
"animation-target": "Animation target",
"animation-target-needle": "Needle",
@ -5476,6 +5489,8 @@
"value": "Value",
"ticks": "Ticks",
"arrow-and-scale-color": "Arrow and scale default color",
"scale-settings": "Scale settings",
"scale": "Scale",
"scale-color": "Scale colors",
"compass-appearance": "Compass appearance",
"labels": "Labels",

Write Preview
Loading…
Cancel
Save