Period Field V1

  • 1 minute(s) read

This field allows selecting a period for data filtering.

Deprecated Widget

This page control is deprecated and no longer maintained. Use the Period Field V2 component instead.

Template Syntax

Below you can find some examples of how to use the component within a template.


<period-field id="my-period" opensOption="right"></period-field>

Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

Period Field <period-field>

Default Loading Period

The default date and time filtering period applied when entering the page.

Name: defaultPeriodValue

Type: ENUM | Optional

Values: TODAY, YESTERDAY, LAST_1_HOUR, LAST_6_HOURS, LAST_12_HOURS, LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS, THIS_MONTH, LAST_MONTH, LAST_6_MONTHS, LAST_12_MONTHS, THIS_WEEK, LAST_WEEK, LAST_FULL_7_DAYS, LAST_FULL_30_DAYS, LAST_FULL_12_MONTHS

defaultPeriodValue="TODAY"

Enabled Periods

The list of periods which can be selected from the embedded period filter.

Name: periods

Type: ENUM (multiple) | Optional

Values: TODAY, YESTERDAY, LAST_1_HOUR, LAST_6_HOURS, LAST_12_HOURS, LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS, THIS_MONTH, LAST_MONTH, LAST_6_MONTHS, LAST_12_MONTHS, THIS_WEEK, LAST_WEEK, LAST_FULL_7_DAYS, LAST_FULL_30_DAYS, LAST_FULL_12_MONTHS, CUSTOM

[periods]="['TODAY', 'YESTERDAY']"

End Variable

The name of the context variable holding the selected period end date.

Name: endVariable

Type: STRING | Optional

endVariable="endTime"

Id

The id used by other page widgets to retrieve the selected period, and update the data in case the period is changed.

Name: id

Type: STRING | Required

Default Value: period

id="abc"

Label

The field label.

Name: label

Type: STRING | Optional

label="Period"

Name/

The name used by other page widgets to retrieve the selected period, and update the data in case the period is changed.

Name: name

Type: STRING | Optional

DEPRECATED

Use the Id property.

name="abc"

Popup Opening Option

The position where the selection menu is opened (left, center, right [default]).

Name: opensOption

Type: ENUM | Optional

Values: left, center, right

Default Value: right

opensOption="left"

Start Variable

The name of the context variable holding the selected period start date.

Name: startVariable

Type: STRING | Optional

startVariable="startTime"

Rendering

CSS Class

The name(s) of the CSS class used to customize the widget layout.

Name: class

Type: STRING | Optional

class="my-custom-class"

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Name: *ngIf

Type: STRING | Optional

*ngIf="getUser().organizationId != null"