Period Details

Prev Next

Displays the reference period of the page data in a box.

Period Details

Configuration

Design View

In the template editor, you can find the Period Details icon under the Analysis and Reporting component palette group.

Code View

Component Reference

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

Period Details <period-details-widget>

Background Class

Name: config.bgClass

Type: STRING | Optional

Default Value: bg-info

[config]="{bgClass: 'abc'}"

Default Loading Period

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

Name: config.defaultPeriod

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

Default Value:

[config]="{defaultPeriod: 'TODAY'}"

Period Variable

The id of the page's variable providing the date range filtering period, for instance the id of a <period-filter-field>.

Name: inputs.period

Type: STRING | Optional

[inputs]="{period: 'period'}"

Title

The title displayed on the top part of the widget box.

Name: title

Type: STRING | Optional

[title]="'Details'"

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"