widgets/implementations/info-gauge/info-gauge-widget-config/preset-preview/preset-preview.component.ts
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PresetPreviewComponent), multi: true
}
|
| selector | c8y-preset-preview |
| standalone | true |
| imports |
CommonModule
RadialGaugeViewComponent
|
| templateUrl | ./preset-preview.component.html |
Properties |
Methods |
Inputs |
Outputs |
| ALL_GAUGE_PRESETS |
Type : GaugeOptions[]
|
| onPresetChange |
Type : EventEmitter
|
| emitPresetChange | ||||||
emitPresetChange(presetId: string)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: (value: string) => void)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: () => void)
|
||||||
|
Parameters :
Returns :
void
|
| writeValue | ||||||
writeValue(value: string)
|
||||||
|
Parameters :
Returns :
void
|
| activeDatapointGauge |
Type : object
|
Default value : {
fragment: 'c8y_Kpi',
series: 'preview',
unit: 'ºC',
min: 0,
max: 10,
yellowRangeMax: 8,
yellowRangeMin: 5,
redRangeMin: 8,
redRangeMax: 10
}
|
| measurement |
Type : object
|
Default value : {
value: Math.floor(Math.random() * 9) + 1,
unit: 'ºC',
date: '2025-04-22T20:07:49.354Z'
}
|
| selectedPresetId |
Type : string | null
|
Default value : null
|
<div class="d-grid grid__col--4-4-4 gap-4">
<button
class="c8y-radial-gauge__preset preset-{{ preset.id }}"
[class.selected]="preset.id === selectedPresetId"
[attr.aria-label]="preset.name | translate"
type="button"
*ngFor="let preset of ALL_GAUGE_PRESETS"
(click)="emitPresetChange(preset.id)"
>
<c8y-radial-gauge
class="c8y-radial-gauge--square"
*ngIf="preset.id !== 'custom'"
[activeDatapointGauge]="activeDatapointGauge"
[measurement]="measurement"
[fractionSize]="2"
[selectedPresetId]="preset.id"
[gaugeOptions]="preset"
></c8y-radial-gauge>
<span>{{ preset.name | translate }}</span>
</button>
</div>