widgets/implementations/datapoints-table/datapoints-table-config/datapoints-table-config.component.ts
OnInit
OnDestroy
| selector | c8y-datapoints-table-view-config |
| standalone | true |
| imports |
CoreModule
DatapointSelectorModule
DateRangePickerComponent
PopoverModule
ReactiveFormsModule
|
| templateUrl | ./datapoints-table-config.component.html |
Properties |
|
Methods |
Inputs |
constructor(datapointsTableService: DatapointsTableService, datapointsTableConfigService: DatapointsTableConfigService, formBuilder: FormBuilder, form: NgForm, widgetConfig: WidgetConfigComponent)
|
||||||||||||||||||
|
Parameters :
|
| config |
Type : DatapointsTableConfig
|
|
Data points table widget config. |
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onBeforeSave | ||||||
onBeforeSave(config?: DatapointsTableConfig)
|
||||||
|
Parameters :
Returns :
void
|
| toggleRefreshIntervalControl |
toggleRefreshIntervalControl()
|
|
Returns :
void
|
| Readonly AGGREGATION_LABELS |
Default value : AGGREGATION_LABELS
|
| Readonly AGGREGATION_VALUES_ARR |
Default value : AGGREGATION_VALUES_ARR
|
| datapointSelectionConfig |
Type : Partial<DatapointSelectorModalOptions>
|
Default value : {}
|
| Readonly DATE_SELECTION_LABELS |
Default value : DATE_SELECTION_LABELS
|
| Readonly DATE_SELECTION_VALUES_ARR |
Default value : DATE_SELECTION_VALUES_ARR
|
| Readonly DEFAULT_DATE_SELECTOR_VALUE |
Default value : DATE_SELECTION_VALUES.config
|
| Readonly DEFAULT_INTERVAL_VALUE |
Default value : TIME_RANGE_INTERVAL_UNITS_VALUES.hours
|
| defaultFormOptions |
Type : Partial<DatapointAttributesFormConfig>
|
Default value : {
showDisplay: true,
showRedRange: true,
showYellowRange: true
}
|
| disabledAggregationOptions |
Type : AggregationOptionStatus
|
Default value : {}
|
| formGroup |
Type : ReturnType<>
|
| Readonly INTERVAL_VALUES_ARR |
Default value : INTERVAL_VALUES_ARR
|
| isWidgetLinkedToGlobalTimeContext |
Type : boolean
|
| Readonly REFRESH_INTERVAL_VALUES_ARR |
Default value : REFRESH_INTERVAL_VALUES_ARR
|
| Readonly TIME_RANGE_INTERVAL_LABELS |
Default value : TIME_RANGE_INTERVAL_LABELS
|
<div class="p-l-24 p-r-24">
<form
class="no-card-context"
[formGroup]="formGroup"
>
<!-- <datapoints-selector> -->
<div class="col-md-6">
<div class="row">
<!-- global-time-context-selector -->
<div class="form-group m-b-0 p-b-16 separator-bottom">
<label
class="d-flex a-i-center p-t-4"
for="dateSelection"
>
{{ 'Date selection' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="popoverTemplate"
placement="right"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</label>
<ng-template #popoverTemplate>
<span translate>
Choose how to select a date range, the available options are:
<ul class="m-l-0 p-l-8 m-t-8 m-b-0">
<!-- Will be re-enabled in MTM-61920 -->
<!-- <li>
<b>Dashboard time range:</b>
restricts date selection to the global dashboard configuration only
</li> -->
<li>
<b>Widget configuration:</b>
restricts the date selection only to the widget configuration
</li>
<li>
<b>Widget and widget configuration:</b>
restricts the date selection to the widget view and widget configuration only
</li>
</ul>
</span>
</ng-template>
<div class="c8y-select-wrapper">
<select
class="form-control text-12"
[title]="'Date selection' | translate"
[attr.aria-label]="'Date selection' | translate"
id="globalDateSelector"
formControlName="globalDateSelector"
>
<option
*ngFor="let dataSelectionValue of DATE_SELECTION_VALUES_ARR"
[ngValue]="dataSelectionValue"
>
{{ DATE_SELECTION_LABELS[dataSelectionValue] | translate }}
</option>
</select>
</div>
</div>
</div>
<div class="row">
<c8y-datapoint-selection-list
class="bg-inherit separator-top p-t-16 d-block"
listTitle="{{ 'Data points' | translate }}"
name="datapoints"
[defaultFormOptions]="defaultFormOptions"
[config]="datapointSelectionConfig"
[minActiveCount]="1"
formControlName="datapoints"
></c8y-datapoint-selection-list>
</div>
</div>
<div class="col-md-6">
<div class="row">
<ng-container *ngIf="!isWidgetLinkedToGlobalTimeContext">
<div class="col-md-6">
<!-- interval selector -->
<fieldset class="c8y-fieldset">
<legend class="d-flex a-i-center">
{{ 'Auto refresh' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="
'Change the state of interval automatic refresh and set the refresh frequency.'
| translate
"
placement="top"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</legend>
<c8y-form-group class="m-b-16 form-group-sm">
<div class="d-flex gap-4 m-t-8 m-b-8 a-i-center">
<label class="c8y-switch">
<input
id="refreshToggle"
name="isAutoRefreshEnabled"
type="checkbox"
formControlName="isAutoRefreshEnabled"
(click)="toggleRefreshIntervalControl()"
/>
<span></span>
<span class="sr-only">{{ 'Auto refresh' | translate }}</span>
</label>
<label
class="m-b-0"
for="refreshInterval"
>
{{ 'Interval' | translate }}
</label>
<div class="c8y-select-wrapper">
<select
class="form-control text-12"
[title]="'Refresh interval in seconds' | translate"
id="refreshInterval"
formControlName="refreshInterval"
>
<option
*ngFor="let refreshInterval of REFRESH_INTERVAL_VALUES_ARR"
[ngValue]="refreshInterval"
>
{{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}
</option>
</select>
</div>
</div>
</c8y-form-group>
</fieldset>
</div>
</ng-container>
<!-- decimal input -->
<div class="col-md-6">
<fieldset class="c8y-fieldset">
<legend>
{{ 'Decimal places' | translate }}
</legend>
<c8y-form-group class="p-t-8">
<input
class="form-control"
name="decimalPlaces"
type="number"
formControlName="decimalPlaces"
step="1"
/>
</c8y-form-group>
</fieldset>
</div>
</div>
<!-- aggregation selector -->
<ng-container *ngIf="!isWidgetLinkedToGlobalTimeContext">
<div class="row">
<div class="col-md-6">
<fieldset class="c8y-fieldset">
<legend>
{{ 'Aggregation' | translate }}
</legend>
<c8y-form-group class="p-t-8">
<div class="c8y-select-wrapper">
<!-- Setting below [attr.disabled] ensures that the control is visually disabled and user interaction is prevented,
while still allowing the value to be updated and saved correctly in the form.
This solution covers the case where the user enables auto-refresh, in which case aggregation must be set to NONE. -->
<select
class="form-control text-12"
[title]="'Aggregation' | translate"
id="aggregation"
formControlName="aggregation"
[attr.disabled]="formGroup.value.isAutoRefreshEnabled ? true : null"
>
<option
*ngFor="let aggregationValue of AGGREGATION_VALUES_ARR"
[ngValue]="aggregationValue"
[disabled]="disabledAggregationOptions[aggregationValue]"
>
{{ AGGREGATION_LABELS[aggregationValue] | translate }}
</option>
</select>
</div>
</c8y-form-group>
</fieldset>
</div>
<!-- time interval selector -->
<div class="col-md-6">
<fieldset class="c8y-fieldset">
<legend>
{{ 'Time interval' | translate }}
</legend>
<c8y-form-group class="p-t-8">
<div class="c8y-select-wrapper">
<select
class="form-control text-12"
[title]="'Interval' | translate"
id="interval"
formControlName="interval"
>
<option
*ngFor="let intervalValue of INTERVAL_VALUES_ARR"
[ngValue]="intervalValue"
>
{{ TIME_RANGE_INTERVAL_LABELS[intervalValue] | translate }}
</option>
</select>
</div>
</c8y-form-group>
</fieldset>
</div>
</div>
<!-- date pickers -->
<fieldset class="c8y-fieldset">
<legend>
{{ 'Date range' | translate }}
</legend>
<c8y-date-range-picker></c8y-date-range-picker>
</fieldset>
</ng-container>
</div>
</form>
</div>