File
Description
Component for configuring history mode settings
Stateless component that emits changes immediately
Index
Properties
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
|
context
|
Type : GlobalContextState | null
|
|
settings
|
Type : Partial | null
|
Outputs
|
contextChange
|
Type : Partial<GlobalContextState>
|
|
Readonly
AGGREGATION_POPOVER
|
Type : unknown
|
Default value : gettext(
"Groups data points into larger time intervals to simplify visualization and improve performance. 'None' shows raw data, while other options combine data points into minute, hour, or day groupings."
)
|
|
Readonly
AGGREGATION_TEXTS
|
Type : unknown
|
Default value : AGGREGATION_TEXTS
|
|
currentForm
|
Type : ReturnType<unknown>
|
|
Readonly
DATE_FORMAT
|
Type : string
|
Default value : 'medium'
|
|
Readonly
dateFromErrors
|
Type : unknown
|
Default value : signal<Record<string, any> | null>(null)
|
|
Readonly
dateToErrors
|
Type : unknown
|
Default value : signal<Record<string, any> | null>(null)
|
|
Readonly
disabledAggregations
|
Type : unknown
|
Default value : signal<Partial<Record<aggregationType, boolean>>>({})
|
|
Readonly
errorMessages
|
Type : unknown
|
Default value : {
dateAfterRangeMax: gettext('This date is after the latest allowed date.'),
dateBeforeRangeMin: gettext('This date is before the earliest allowed date.'),
invalidDateTime: gettext('This date is invalid.'),
invalidDateRange: gettext('Start date must be before end date.')
} as const
|
|
Readonly
TIME_RANGE_PICKER_POPOVER
|
Type : unknown
|
Default value : gettext(
'Specify the exact start and end date/time of the time period to analyse. This provides a static view of historical data within the selected timeframe.'
)
|
Accessors
|
settings
|
getsettings()
|
setsettings(value: Partial | null)
|
Parameters :
| Name |
Type |
Optional |
| value |
Partial<GlobalContextSettings> | null
|
No
|
|
|
context
|
setcontext(value: GlobalContextState | null)
|
Parameters :
| Name |
Type |
Optional |
| value |
GlobalContextState | null
|
No
|
|
@if (currentForm) {
@let SHOW_TIME_CONTEXT = settings.showTimeContext;
@let SHOW_AGGREGATION = settings.showAggregation;
<form [formGroup]="currentForm">
<div class="content-flex-100">
<div
class="col-4"
[ngClass]="{ 'm-b-8': !SHOW_AGGREGATION }"
>
@if (SHOW_TIME_CONTEXT) {
@let dateTimeContext = currentForm.get('dateTimeContext');
@let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;
@let tempDateToValue = dateTimeContext.get('dateTo')?.value;
@let fromErrors = dateFromErrors();
@let toErrors = dateToErrors();
<fieldset class="c8y-fieldset">
<legend>
<div class="standalone btn-icon-dot__item time-context m-r-4">
<i
class=""
[c8yIcon]="'calendar'"
></i>
</div>
{{ 'Date & time range' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="TIME_RANGE_PICKER_POPOVER | translate"
placement="top"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</legend>
<c8y-form-group class="content-flex-58 d-flex a-i-center m-b-0 p-t-16">
<c8y-form-group
[class.has-error]="fromErrors"
class="form-group-sm d-flex a-i-center col-6 flex-wrap"
>
<label
class="m-b-sm-0 m-r-8 text-nowrap"
style="min-width: 30px"
[title]="'From`date`' | translate"
for="dateFrom"
translate
>
From`date`
</label>
<c8y-date-time-picker
[class.has-error]="fromErrors"
id="dateFrom"
[maxDate]="tempDateToValue"
[placeholder]="'From`date`' | translate"
[formControl]="dateTimeContext.get('dateFrom')"
></c8y-date-time-picker>
<c8y-messages [show]="fromErrors">
<c8y-message
name="dateAfterRangeMax"
[text]="errorMessages.dateAfterRangeMax | translate"
></c8y-message>
<c8y-message
name="invalidDateTime"
[text]="errorMessages.invalidDateTime | translate"
></c8y-message>
<c8y-message
name="invalidDateRange"
[text]="errorMessages.invalidDateRange | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group
[class.has-error]="toErrors"
class="form-group-sm d-flex flex-wrap col-6 a-i-center"
>
<label
class="m-b-sm-0 text-nowrap m-r-8"
style="min-width: 30px"
[title]="'To`date`' | translate"
for="dateTo"
translate
>
To`date`
</label>
<c8y-date-time-picker
[class.has-error]="toErrors"
id="dateTo"
[minDate]="tempDateFromValue"
[placeholder]="'To`date`' | translate"
[formControl]="dateTimeContext.get('dateTo')"
></c8y-date-time-picker>
<c8y-messages [show]="toErrors">
<c8y-message
name="dateBeforeRangeMin"
[text]="errorMessages.dateBeforeRangeMin | translate"
></c8y-message>
<c8y-message
name="invalidDateTime"
[text]="errorMessages.invalidDateTime | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</c8y-form-group>
</fieldset>
}
</div>
<div class="col-">
@if (SHOW_AGGREGATION) {
@let selectedAggregation = currentForm.get('aggregation')?.value;
<fieldset class="c8y-fieldset">
<legend>
<div class="standalone btn-icon-dot__item aggregation m-r-4">
<i [c8yIcon]="'input'"></i>
</div>
{{ 'Aggregation' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="AGGREGATION_POPOVER | translate"
placement="top"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</legend>
<c8y-form-group class="p-t-16 p-b-16 m-b-4">
<c8y-aggregation-picker
formControlName="aggregation"
[resetToDefault]="true"
[disabledAggregations]="disabledAggregations()"
[layout]="'radio'"
></c8y-aggregation-picker>
</c8y-form-group>
</fieldset>
}
</div>
</div>
</form>
}