File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
showChart
|
Type : boolean
|
Default value : true
|
Responsible for displaying the chart section in a form.
Form contains display selector, so if this flag is true
then the form won't be shown alone (the state of the showDisplay flag won't be taken into account).
|
|
showDisplay
|
Type : boolean
|
Default value : false
|
|
showFormIfTemplateWasSelected
|
Type : boolean
|
Default value : false
|
|
showRange
|
Type : boolean
|
Default value : true
|
|
showRedRange
|
Type : boolean
|
Default value : true
|
|
showTarget
|
Type : boolean
|
Default value : true
|
|
showYellowRange
|
Type : boolean
|
Default value : true
|
Methods
|
registerOnChange
|
registerOnChange(fn: any)
|
Parameters :
| Name |
Type |
Optional |
| fn |
any
|
No
|
|
|
registerOnTouched
|
registerOnTouched(fn: any)
|
Parameters :
| Name |
Type |
Optional |
| fn |
any
|
No
|
|
|
setDisabledState
|
setDisabledState(isDisabled: boolean)
|
Parameters :
| Name |
Type |
Optional |
| isDisabled |
boolean
|
No
|
|
|
validate
|
validate(_control: AbstractControl)
|
Parameters :
| Name |
Type |
Optional |
| _control |
AbstractControl
|
No
|
Returns : ValidationErrors
|
|
writeValue
|
writeValue(obj: any)
|
Parameters :
| Name |
Type |
Optional |
| obj |
any
|
No
|
|
|
AXIS_TYPES
|
Default value : AXIS_TYPES
|
|
CHART_LINE_TYPES
|
Default value : CHART_LINE_TYPES
|
|
CHART_RENDER_TYPES
|
Default value : CHART_RENDER_TYPES
|
|
customValidationErrorMessages
|
Type : literal type
|
Default value : {}
|
|
formGroup
|
Type : FormGroup
|
|
rawValue
|
Type : any
|
Default value : {}
|
|
redRange
|
Type : FormGroup
|
|
shouldForceInitialValidation
|
Default value : true
|
|
yellowRange
|
Type : FormGroup
|
<div [formGroup]="formGroup">
<ng-container *ngIf="!rawValue?.__template || showFormIfTemplateWasSelected">
<fieldset
class="c8y-fieldset"
*ngIf="formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target"
>
<legend translate>Details</legend>
<div class="row">
<div
class="col-md-6"
*ngIf="formGroup.controls?.label"
>
<c8y-form-group>
<label translate>Label</label>
<input
class="form-control"
name="label"
formControlName="label"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'Temperature' }"
/>
<c8y-messages
[show]="formGroup.controls.label.touched && formGroup.controls.label.errors"
>
<c8y-message
*ngFor="let item of customValidationErrorMessages['label'] | keyvalue"
[name]="item.key"
[text]="item.value"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
<div
class="col-md-6"
*ngIf="formGroup.controls?.unit"
>
<c8y-form-group>
<label translate>Unit</label>
<input
class="form-control"
name="unit"
formControlName="unit"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'ºC' }"
/>
<c8y-messages
[show]="formGroup.controls.unit.touched && formGroup.controls.unit.errors"
>
<c8y-message
*ngFor="let item of customValidationErrorMessages['unit'] | keyvalue"
[name]="item.key"
[text]="item.value"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
<div
class="col-md-6"
*ngIf="formGroup.controls?.target && showTarget"
>
<c8y-form-group
[ngClass]="{
'has-error':
(range?.touched || formGroup.controls.target.touched) &&
formGroup.controls?.target?.errors
}"
>
<label translate>Target</label>
<input
class="form-control"
name="target"
type="number"
formControlName="target"
[placeholder]="'e.g. {{ example }}' | translate: { example: 25 }"
/>
<c8y-messages
[show]="
(range?.touched || formGroup.controls.target.touched) &&
formGroup.controls.target.errors
"
>
<c8y-message
*ngFor="let item of customValidationErrorMessages['target'] | keyvalue"
[name]="item.key"
[text]="item.value"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
<fieldset
class="c8y-fieldset"
*ngIf="range && showRange"
>
<legend translate>Range</legend>
<div
class="row"
formGroupName="range"
>
<div class="col-md-6">
<c8y-form-group
[ngClass]="{ 'has-error': range?.touched && range?.controls?.min?.errors }"
>
<label translate>Min</label>
<input
class="form-control"
name="min"
type="number"
formControlName="min"
[placeholder]="'e.g. {{ example }}' | translate: { example: 0 }"
/>
<c8y-messages [show]="range?.touched && range.controls?.min?.errors"></c8y-messages>
</c8y-form-group>
</div>
<div class="col-md-6">
<c8y-form-group
[ngClass]="{ 'has-error': range?.touched && range?.controls?.max?.errors }"
>
<label translate>Max</label>
<input
class="form-control"
name="max"
type="number"
formControlName="max"
[placeholder]="'e.g. {{ example }}' | translate: { example: 100 }"
/>
<c8y-messages [show]="range?.touched && range.controls?.max?.errors">
<c8y-message
*ngFor="let item of customValidationErrorMessages['max'] | keyvalue"
[name]="item.key"
[text]="item.value"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
<fieldset
class="c8y-fieldset"
formGroupName="yellowRange"
*ngIf="yellowRange && showYellowRange"
>
<legend translate>Yellow range</legend>
<div class="row">
<div class="col-md-6">
<c8y-form-group
[ngClass]="{
'has-error':
(range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors
}"
>
<label translate>Min</label>
<input
class="form-control"
name="min"
type="number"
formControlName="min"
[placeholder]="'e.g. {{ example }}' | translate: { example: 50 }"
/>
<c8y-messages
[show]="(range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors"
></c8y-messages>
</c8y-form-group>
</div>
<div class="col-md-6">
<c8y-form-group
[ngClass]="{
'has-error':
(range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors
}"
>
<label translate>Max</label>
<input
class="form-control"
name="max"
type="number"
formControlName="max"
[placeholder]="'e.g. {{ example }}' | translate: { example: 75 }"
/>
<c8y-messages
[show]="(range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors"
></c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
<fieldset
class="c8y-fieldset"
formGroupName="redRange"
*ngIf="redRange && showRedRange"
>
<legend translate>Red range</legend>
<div class="row">
<div class="col-md-6">
<c8y-form-group
[ngClass]="{
'has-error': (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors
}"
>
<label translate>Min</label>
<input
class="form-control"
name="min"
type="number"
formControlName="min"
[placeholder]="'e.g. {{ example }}' | translate: { example: 75 }"
/>
<c8y-messages
[show]="(range?.touched || redRange?.touched) && redRange.controls?.min?.errors"
></c8y-messages>
</c8y-form-group>
</div>
<div class="col-md-6">
<c8y-form-group
[ngClass]="{
'has-error': (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors
}"
>
<label translate>Max</label>
<input
class="form-control"
name="max"
type="number"
formControlName="max"
[placeholder]="'e.g. {{ example }}' | translate : { example: 100 }"
/>
<c8y-messages
[show]="(range?.touched || redRange?.touched) && redRange.controls?.max?.errors"
></c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
</ng-container>
<fieldset
class="c8y-fieldset"
*ngIf="chart && showChart"
formGroupName="chart"
>
<legend translate>Chart</legend>
<div class="tight-grid">
<div class="col-xs-6 col-sm-4">
<c8y-form-group>
<label for="display">
{{ 'Display' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{ 'Value displayed when data is aggregated' | translate }}"
triggers="focus"
type="button"
[placement]="'right'"
[container]="'body'"
></button>
</label>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="renderType"
>
<option
*ngFor="let type of CHART_RENDER_TYPES"
[ngValue]="type.val"
>
{{ type.text | translate }}
</option>
</select>
</div>
</c8y-form-group>
</div>
<div class="col-xs-6 col-sm-4">
<c8y-form-group>
<label
for="chartType"
translate
>
Chart type
</label>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="lineType"
>
<option
*ngFor="let type of CHART_LINE_TYPES"
[ngValue]="type.val"
>
{{ type.text | translate }}
</option>
</select>
<span></span>
</div>
</c8y-form-group>
</div>
<div class="col-xs-6 col-sm-4">
<c8y-form-group>
<label
for="yAxis"
translate
>
Y-axis
</label>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="yAxisType"
>
<option
*ngFor="let type of AXIS_TYPES"
[ngValue]="type.val"
>
{{ type.text | translate }}
</option>
</select>
<span></span>
</div>
</c8y-form-group>
</div>
</div>
</fieldset>
<fieldset
class="c8y-fieldset"
*ngIf="showDisplay"
formGroupName="display"
>
<legend translate>Display</legend>
<div class="tight-grid">
<div class="col-xs-6 col-sm-4">
<c8y-form-group>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="renderType"
>
<option
*ngFor="let type of CHART_RENDER_TYPES"
[ngValue]="type.val"
>
{{ type.text | translate }}
</option>
</select>
</div>
</c8y-form-group>
</div>
</div>
</fieldset>
</div>