widgets/implementations/datapoints-table/datapoints-table-view/datapoints-table-view.component.ts
OnInit
OnDestroy
host | { |
selector | c8y-datapoints-table-view |
standalone | true |
imports |
CommonModule
DatapointsReloadComponent
DatapointsTableComponent
DateRangePickerComponent
ReactiveFormsModule
|
templateUrl | ./datapoints-table-view.component.html |
Properties |
Methods |
Inputs |
constructor(datapointsTableConfigService: DatapointsTableService, datapointsTableViewService: DatapointsTableViewService, formBuilder: FormBuilder, translateService: TranslateService)
|
|||||||||||||||
Parameters :
|
config |
Type : DatapointsTableConfig
|
Data points table widget config. |
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
Async ngOnInit |
ngOnInit()
|
Returns :
Promise<void>
|
Async onCountdownEnded |
onCountdownEnded()
|
Returns :
Promise<void>
|
onDateChange | ||||||
onDateChange(data: literal type)
|
||||||
Parameters :
Returns :
void
|
onExportModalOpen | ||||||
onExportModalOpen(isOpened: boolean)
|
||||||
Parameters :
Returns :
void
|
onScrolling | ||||||
onScrolling(value: boolean)
|
||||||
Parameters :
Returns :
void
|
activeDatapoints |
Type : KPIDetails[]
|
Default value : []
|
Represents the data points where __active property is set to true. |
alerts |
Type : DynamicComponentAlertAggregator
|
datapointsTableItems |
Type : GroupedDatapointTableItem[]
|
Default value : []
|
An array of |
datapointsWithValues |
Type : DatapointWithValues[]
|
An array of objects representing datapoints with their corresponding values. Used to populate the CSV/Excel file with data. |
devicesColumnHeaders |
Type : TableColumnHeader[]
|
formGroup |
Type : ReturnType<>
|
Represents a configuration options used by a c8y-datapoints-export-selector. |
hasMultipleDatapoints |
Type : boolean
|
Indicates whether there is more than one data point. If is true, then a column 'Device' will be displayed in the table. |
isDisabled |
Default value : false
|
isExportModalOpen |
Default value : false
|
isInitialRequest |
Default value : true
|
Indicates whether the component is in the initial request state where data for a table structure is being prepared. |
isLoading |
Default value : signal(true)
|
Current isLoading state. Indicates whether the data is being loaded. |
isScrolling |
Default value : signal(false)
|
seriesWithoutPermissionToRead |
Type : literal type[]
|
<div class="d-flex gap-16 p-l-16 p-r-16 flex-wrap">
<ng-container *ngIf="config.displayDateSelection">
<form [formGroup]="formGroup">
<c8y-date-range-picker
class="d-contents"
[isEmittingDateChange]="true"
[showLabel]="true"
(updatedDate)="onDateChange($event)"
></c8y-date-range-picker>
</form>
</ng-container>
<!-- TODO: temporarily commented out, will be enabled when MTM-59689 is integrated -->
<!-- <c8y-datapoints-export-selector
class="d-contents"
[exportConfig]="exportConfig"
(isExportModalOpen)="onExportModalOpen($event)"
></c8y-datapoints-export-selector> -->
<!-- TODO: below div is just a temp fix, it will be removed when MTM-59689 is integrated -->
<div class="input-group p-t-4 p-b-4 max-width-fit m-l-auto"></div>
<ng-container *ngIf="config.datapoints.length > 0">
<c8y-datapoints-reload
class="d-contents"
[isAutoRefreshEnabled]="config.isAutoRefreshEnabled"
[refreshInterval]="config.refreshInterval"
[isDisabled]="isDisabled"
[isLoading]="isLoading"
[isScrolling]="isScrolling()"
[isExportModalOpen]="isExportModalOpen"
(onCountdownEnded)="onCountdownEnded()"
></c8y-datapoints-reload>
</ng-container>
</div>
<ng-container *ngIf="devicesColumnHeaders">
<c8y-datapoints-table
[aggregationType]="config.aggregation"
[datapointsTableItems]="datapointsTableItems"
[decimalPlaces]="config.decimalPlaces"
[devicesColumnHeaders]="devicesColumnHeaders"
[hasMultipleDatapoints]="hasMultipleDatapoints"
[isLoading]="isLoading()"
[seriesWithoutPermissionToReadCount]="seriesWithoutPermissionToRead?.length"
(isScrolling)="onScrolling($event)"
></c8y-datapoints-table>
</ng-container>