Igor Kulikov
7 years ago
12 changed files with 765 additions and 41 deletions
@ -0,0 +1,107 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-table-widget tb-absolute-fill"> |
||||
|
<div fxFlex fxLayout="column" class="tb-absolute-fill"> |
||||
|
<mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode"> |
||||
|
<div class="mat-toolbar-tools"> |
||||
|
<button mat-button mat-icon-button |
||||
|
matTooltip="{{ 'action.search' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>search</mat-icon> |
||||
|
</button> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label> </mat-label> |
||||
|
<input #searchInput matInput |
||||
|
[(ngModel)]="textSearch" |
||||
|
placeholder="{{ 'widget.search-data' | translate }}"/> |
||||
|
</mat-form-field> |
||||
|
<button mat-button mat-icon-button (click)="exitFilterMode()" |
||||
|
matTooltip="{{ 'action.close' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>close</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-toolbar> |
||||
|
<mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex |
||||
|
[(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()"> |
||||
|
<mat-tab *ngFor="let source of sources" label="{{ source.datasource.name }}"> |
||||
|
<div fxFlex class="table-container"> |
||||
|
<mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowIndex" |
||||
|
matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="(source.pageLink.sortOrder.direction + '').toLowerCase()" matSortDisableClear> |
||||
|
<ng-container *ngIf="showTimestamp" [matColumnDef]="'0'"> |
||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let row;" |
||||
|
[innerHTML]="cellContent(source, 0, row, row[0])" |
||||
|
[ngStyle]="cellStyle(source, 0, row[0])"> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container [matColumnDef]="h.index + ''" *ngFor="let h of source.header; trackBy: trackByColumnIndex;"> |
||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ h.dataKey.label }} </mat-header-cell> |
||||
|
<mat-cell *matCellDef="let row;" |
||||
|
[innerHTML]="cellContent(source, h.index, row, row[h.index])" |
||||
|
[ngStyle]="cellStyle(source, h.index, row[h.index])"> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container matColumnDef="actions" stickyEnd> |
||||
|
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }"> |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }"> |
||||
|
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> |
||||
|
<button mat-button mat-icon-button [disabled]="isLoading$ | async" |
||||
|
*ngFor="let actionDescriptor of actionCellDescriptors" |
||||
|
matTooltip="{{ actionDescriptor.displayName }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="onActionButtonClick($event, row, actionDescriptor)"> |
||||
|
<mat-icon>{{actionDescriptor.icon}}</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div fxHide fxShow.lt-lg> |
||||
|
<button mat-button mat-icon-button |
||||
|
(click)="$event.stopPropagation(); ctx.detectChanges();" |
||||
|
[matMenuTriggerFor]="cellActionsMenu"> |
||||
|
<mat-icon class="material-icons">more_vert</mat-icon> |
||||
|
</button> |
||||
|
<mat-menu #cellActionsMenu="matMenu" xPosition="before"> |
||||
|
<button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors" |
||||
|
[disabled]="isLoading$ | async" |
||||
|
(click)="onActionButtonClick($event, row, actionDescriptor)"> |
||||
|
<mat-icon>{{actionDescriptor.icon}}</mat-icon> |
||||
|
<span>{{ actionDescriptor.displayName }}</span> |
||||
|
</button> |
||||
|
</mat-menu> |
||||
|
</div> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<mat-header-row *matHeaderRowDef="source.displayedColumns; sticky: true"></mat-header-row> |
||||
|
<mat-row *matRowDef="let row; columns: source.displayedColumns;" |
||||
|
(click)="onRowClick($event, row)"></mat-row> |
||||
|
</mat-table> |
||||
|
<span [fxShow]="source.timeseriesDatasource.isEmpty() | async" |
||||
|
fxLayoutAlign="center center" |
||||
|
class="no-data-found" translate>widget.no-data-found</span> |
||||
|
</div> |
||||
|
<mat-divider *ngIf="displayPagination"></mat-divider> |
||||
|
<mat-paginator *ngIf="displayPagination" |
||||
|
[length]="source.timeseriesDatasource.total() | async" |
||||
|
[pageIndex]="source.pageLink.page" |
||||
|
[pageSize]="source.pageLink.pageSize" |
||||
|
[pageSizeOptions]="pageSizeOptions"></mat-paginator> |
||||
|
</mat-tab> |
||||
|
</mat-tab-group> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,48 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2019 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.tb-table-widget { |
||||
|
mat-footer-row, mat-row { |
||||
|
min-height: 38px; |
||||
|
} |
||||
|
mat-header-row { |
||||
|
min-height: 40px; |
||||
|
} |
||||
|
mat-toolbar { |
||||
|
z-index: 10; |
||||
|
} |
||||
|
span.no-data-found { |
||||
|
height: calc(100% - 44px); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.tb-table-widget { |
||||
|
.mat-tab-group { |
||||
|
height: 100%; |
||||
|
} |
||||
|
.mat-tab-body-wrapper { |
||||
|
height: 100%; |
||||
|
} |
||||
|
.mat-tab-body-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,554 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
AfterViewInit, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
Input, |
||||
|
NgZone, |
||||
|
OnInit, |
||||
|
QueryList, |
||||
|
ViewChild, |
||||
|
ViewChildren, |
||||
|
ViewContainerRef |
||||
|
} from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { WidgetAction, WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { |
||||
|
DataKey, |
||||
|
Datasource, |
||||
|
DatasourceData, |
||||
|
DatasourceType, |
||||
|
WidgetActionDescriptor, |
||||
|
WidgetConfig |
||||
|
} from '@shared/models/widget.models'; |
||||
|
import { UtilsService } from '@core/services/utils.service'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { isDefined, isNumber } from '@core/utils'; |
||||
|
import cssjs from '@core/css/css'; |
||||
|
import { PageLink } from '@shared/models/page/page-link'; |
||||
|
import { Direction, SortOrder, sortOrderFromString } from '@shared/models/page/sort-order'; |
||||
|
import { DataSource } from '@angular/cdk/typings/collections'; |
||||
|
import { CollectionViewer } from '@angular/cdk/collections'; |
||||
|
import { BehaviorSubject, fromEvent, merge, Observable, of } from 'rxjs'; |
||||
|
import { emptyPageData, PageData } from '@shared/models/page/page-data'; |
||||
|
import { catchError, debounceTime, distinctUntilChanged, map, tap } from 'rxjs/operators'; |
||||
|
import { MatPaginator } from '@angular/material/paginator'; |
||||
|
import { MatSort } from '@angular/material/sort'; |
||||
|
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; |
||||
|
import { |
||||
|
CellContentInfo, |
||||
|
CellStyleInfo, |
||||
|
constructTableCssString, |
||||
|
getCellContentInfo, |
||||
|
getCellStyleInfo, |
||||
|
TableWidgetDataKeySettings |
||||
|
} from '@home/components/widget/lib/table-widget.models'; |
||||
|
import { Overlay } from '@angular/cdk/overlay'; |
||||
|
import { SubscriptionEntityInfo } from '@core/api/widget-api.models'; |
||||
|
import { DatePipe } from '@angular/common'; |
||||
|
|
||||
|
interface TimeseriesTableWidgetSettings { |
||||
|
showTimestamp: boolean; |
||||
|
showMilliseconds: boolean; |
||||
|
displayPagination: boolean; |
||||
|
defaultPageSize: number; |
||||
|
hideEmptyLines: boolean; |
||||
|
} |
||||
|
|
||||
|
interface TimeseriesTableDataKeySettings extends TableWidgetDataKeySettings { |
||||
|
} |
||||
|
|
||||
|
interface TimeseriesRow { |
||||
|
[col: number]: any; |
||||
|
formattedTs: string; |
||||
|
} |
||||
|
|
||||
|
interface TimeseriesHeader { |
||||
|
index: number; |
||||
|
dataKey: DataKey; |
||||
|
} |
||||
|
|
||||
|
interface TimeseriesTableSource { |
||||
|
keyStartIndex: number; |
||||
|
keyEndIndex: number; |
||||
|
datasource: Datasource; |
||||
|
rawData: Array<DatasourceData>; |
||||
|
data: TimeseriesRow[]; |
||||
|
pageLink: PageLink; |
||||
|
displayedColumns: string[]; |
||||
|
timeseriesDatasource: TimeseriesDatasource; |
||||
|
header: TimeseriesHeader[], |
||||
|
stylesInfo: CellStyleInfo[], |
||||
|
contentsInfo: CellContentInfo[], |
||||
|
rowDataTemplate: {[key: string]: any} |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-timeseries-table-widget', |
||||
|
templateUrl: './timeseries-table-widget.component.html', |
||||
|
styleUrls: ['./timeseries-table-widget.component.scss', './table-widget.scss'] |
||||
|
}) |
||||
|
export class TimeseriesTableWidgetComponent extends PageComponent implements OnInit, AfterViewInit { |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@ViewChild('searchInput', {static: false}) searchInputField: ElementRef; |
||||
|
@ViewChildren(MatPaginator) paginators: QueryList<MatPaginator>; |
||||
|
@ViewChildren(MatSort) sorts: QueryList<MatSort>; |
||||
|
|
||||
|
public displayPagination = true; |
||||
|
public pageSizeOptions; |
||||
|
public textSearchMode = false; |
||||
|
public textSearch: string = null; |
||||
|
public actionCellDescriptors: WidgetActionDescriptor[]; |
||||
|
public sources: TimeseriesTableSource[]; |
||||
|
public sourceIndex: number; |
||||
|
|
||||
|
private settings: TimeseriesTableWidgetSettings; |
||||
|
private widgetConfig: WidgetConfig; |
||||
|
private data: Array<DatasourceData>; |
||||
|
private datasources: Array<Datasource>; |
||||
|
|
||||
|
private defaultPageSize = 10; |
||||
|
private defaultSortOrder = '-0'; |
||||
|
private hideEmptyLines = false; |
||||
|
private showTimestamp = true; |
||||
|
private dateFormatFilter: string; |
||||
|
|
||||
|
private searchAction: WidgetAction = { |
||||
|
name: 'action.search', |
||||
|
show: true, |
||||
|
icon: 'search', |
||||
|
onAction: () => { |
||||
|
this.enterFilterMode(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private elementRef: ElementRef, |
||||
|
private ngZone: NgZone, |
||||
|
private overlay: Overlay, |
||||
|
private viewContainerRef: ViewContainerRef, |
||||
|
private utils: UtilsService, |
||||
|
private translate: TranslateService, |
||||
|
private domSanitizer: DomSanitizer, |
||||
|
private datePipe: DatePipe) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.timeseriesTableWidget = this; |
||||
|
this.settings = this.ctx.settings; |
||||
|
this.widgetConfig = this.ctx.widgetConfig; |
||||
|
this.data = this.ctx.data; |
||||
|
this.datasources = this.ctx.datasources; |
||||
|
this.initialize(); |
||||
|
this.ctx.updateWidgetParams(); |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
fromEvent(this.searchInputField.nativeElement, 'keyup') |
||||
|
.pipe( |
||||
|
debounceTime(150), |
||||
|
distinctUntilChanged(), |
||||
|
tap(() => { |
||||
|
if (this.displayPagination) { |
||||
|
this.paginators.forEach((paginator) => { |
||||
|
paginator.pageIndex = 0; |
||||
|
}); |
||||
|
} |
||||
|
this.sources.forEach((source) => { |
||||
|
source.pageLink.textSearch = this.textSearch; |
||||
|
}); |
||||
|
this.updateAllData(); |
||||
|
}) |
||||
|
) |
||||
|
.subscribe(); |
||||
|
|
||||
|
if (this.displayPagination) { |
||||
|
this.sorts.forEach((sort, index) => { |
||||
|
sort.sortChange.subscribe(() => this.paginators.toArray()[index].pageIndex = 0); |
||||
|
}); |
||||
|
} |
||||
|
this.sorts.forEach((sort, index) => { |
||||
|
const paginator = this.displayPagination ? this.paginators.toArray()[index] : null; |
||||
|
sort.sortChange.subscribe(() => this.paginators.toArray()[index].pageIndex = 0); |
||||
|
(this.displayPagination ? merge(sort.sortChange, paginator.page) : sort.sortChange) |
||||
|
.pipe( |
||||
|
tap(() => this.updateData(sort, paginator, index)) |
||||
|
) |
||||
|
.subscribe(); |
||||
|
}); |
||||
|
this.updateAllData(); |
||||
|
} |
||||
|
|
||||
|
public onDataUpdated() { |
||||
|
this.ngZone.run(() => { |
||||
|
this.sources.forEach((source) => { |
||||
|
source.timeseriesDatasource.dataUpdated(this.data); |
||||
|
}); |
||||
|
this.ctx.detectChanges(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private initialize() { |
||||
|
this.ctx.widgetActions = [this.searchAction ]; |
||||
|
|
||||
|
this.actionCellDescriptors = this.ctx.actionsApi.getActionDescriptors('actionCellButton'); |
||||
|
|
||||
|
this.displayPagination = isDefined(this.settings.displayPagination) ? this.settings.displayPagination : true; |
||||
|
this.hideEmptyLines = isDefined(this.settings.hideEmptyLines) ? this.settings.hideEmptyLines : false; |
||||
|
this.showTimestamp = this.settings.showTimestamp !== false; |
||||
|
this.dateFormatFilter = (this.settings.showMilliseconds !== true) ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd HH:mm:ss.sss'; |
||||
|
|
||||
|
const pageSize = this.settings.defaultPageSize; |
||||
|
if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { |
||||
|
this.defaultPageSize = pageSize; |
||||
|
} |
||||
|
this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize*2, this.defaultPageSize*3]; |
||||
|
|
||||
|
let cssString = constructTableCssString(this.widgetConfig); |
||||
|
|
||||
|
const origBackgroundColor = this.widgetConfig.backgroundColor || 'rgb(255, 255, 255)'; |
||||
|
cssString += '.tb-table-widget mat-toolbar.mat-table-toolbar:not([color=primary]) {\n'+ |
||||
|
'background-color: ' + origBackgroundColor + ' !important;\n'+ |
||||
|
'}\n'; |
||||
|
|
||||
|
const cssParser = new cssjs(); |
||||
|
cssParser.testMode = false; |
||||
|
const namespace = 'ts-table-' + this.utils.hashCode(cssString); |
||||
|
cssParser.cssPreviewNamespace = namespace; |
||||
|
cssParser.createStyleElement(namespace, cssString); |
||||
|
$(this.elementRef.nativeElement).addClass(namespace); |
||||
|
this.updateDatasources(); |
||||
|
} |
||||
|
|
||||
|
private updateDatasources() { |
||||
|
this.sources = []; |
||||
|
this.sourceIndex = 0; |
||||
|
let keyOffset = 0; |
||||
|
const pageSize = this.displayPagination ? this.defaultPageSize : Number.POSITIVE_INFINITY; |
||||
|
if (this.datasources) { |
||||
|
for (const datasource of this.datasources) { |
||||
|
const sortOrder: SortOrder = sortOrderFromString(this.defaultSortOrder); |
||||
|
const source = {} as TimeseriesTableSource; |
||||
|
source.keyStartIndex = keyOffset; |
||||
|
keyOffset += datasource.dataKeys.length; |
||||
|
source.keyEndIndex = keyOffset; |
||||
|
source.datasource = datasource; |
||||
|
source.data = []; |
||||
|
source.rawData = []; |
||||
|
source.displayedColumns = []; |
||||
|
source.pageLink = new PageLink(pageSize, 0, null, sortOrder); |
||||
|
source.header = []; |
||||
|
source.stylesInfo = []; |
||||
|
source.contentsInfo = []; |
||||
|
source.rowDataTemplate = {}; |
||||
|
source.rowDataTemplate['Timestamp'] = null; |
||||
|
if (this.showTimestamp) { |
||||
|
source.displayedColumns.push('0'); |
||||
|
} |
||||
|
for (let a = 0; a < datasource.dataKeys.length; a++ ) { |
||||
|
const dataKey = datasource.dataKeys[a]; |
||||
|
const keySettings: TimeseriesTableDataKeySettings = dataKey.settings; |
||||
|
const index = a + 1; |
||||
|
source.header.push({ |
||||
|
index, |
||||
|
dataKey |
||||
|
}); |
||||
|
source.displayedColumns.push(index + ''); |
||||
|
source.rowDataTemplate[dataKey.label] = null; |
||||
|
source.stylesInfo.push(getCellStyleInfo(keySettings)); |
||||
|
const cellContentInfo = getCellContentInfo(keySettings, 'value, rowData, ctx'); |
||||
|
cellContentInfo.units = dataKey.units; |
||||
|
cellContentInfo.decimals = dataKey.decimals; |
||||
|
source.contentsInfo.push(cellContentInfo); |
||||
|
} |
||||
|
source.displayedColumns.push('actions'); |
||||
|
const tsDatasource = new TimeseriesDatasource(source, this.hideEmptyLines, this.dateFormatFilter, this.datePipe); |
||||
|
tsDatasource.dataUpdated(this.data); |
||||
|
this.sources.push(source); |
||||
|
} |
||||
|
} |
||||
|
this.updateActiveEntityInfo(); |
||||
|
} |
||||
|
|
||||
|
private updateActiveEntityInfo() { |
||||
|
const source = this.sources[this.sourceIndex]; |
||||
|
let activeEntityInfo: SubscriptionEntityInfo = null; |
||||
|
if (source) { |
||||
|
const datasource = source.datasource; |
||||
|
if (datasource.type === DatasourceType.entity && |
||||
|
datasource.entityType && datasource.entityId) { |
||||
|
activeEntityInfo = { |
||||
|
entityId: { |
||||
|
entityType: datasource.entityType, |
||||
|
id: datasource.entityId |
||||
|
}, |
||||
|
entityName: datasource.entityName |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
this.ctx.activeEntityInfo = activeEntityInfo; |
||||
|
} |
||||
|
|
||||
|
onSourceIndexChanged() { |
||||
|
this.updateActiveEntityInfo(); |
||||
|
} |
||||
|
|
||||
|
private enterFilterMode() { |
||||
|
this.textSearchMode = true; |
||||
|
this.textSearch = ''; |
||||
|
this.sources.forEach((source) => { |
||||
|
source.pageLink.textSearch = this.textSearch; |
||||
|
}); |
||||
|
this.ctx.hideTitlePanel = true; |
||||
|
this.ctx.detectChanges(true); |
||||
|
setTimeout(() => { |
||||
|
this.searchInputField.nativeElement.focus(); |
||||
|
this.searchInputField.nativeElement.setSelectionRange(0, 0); |
||||
|
}, 10); |
||||
|
} |
||||
|
|
||||
|
exitFilterMode() { |
||||
|
this.textSearchMode = false; |
||||
|
this.textSearch = null; |
||||
|
this.sources.forEach((source, index) => { |
||||
|
source.pageLink.textSearch = this.textSearch; |
||||
|
const sort = this.sorts.toArray()[index]; |
||||
|
let paginator = null; |
||||
|
if (this.displayPagination) { |
||||
|
paginator = this.paginators.toArray()[index]; |
||||
|
paginator.pageIndex = 0; |
||||
|
} |
||||
|
this.updateData(sort, paginator, index); |
||||
|
}); |
||||
|
this.ctx.hideTitlePanel = false; |
||||
|
this.ctx.detectChanges(true); |
||||
|
} |
||||
|
|
||||
|
private updateAllData() { |
||||
|
this.sources.forEach((source, index) => { |
||||
|
const sort = this.sorts.toArray()[index]; |
||||
|
const paginator = this.displayPagination ? this.paginators.toArray()[index] : null; |
||||
|
this.updateData(sort, paginator, index); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private updateData(sort: MatSort, paginator: MatPaginator, index: number) { |
||||
|
const source = this.sources[index]; |
||||
|
if (this.displayPagination) { |
||||
|
source.pageLink.page = paginator.pageIndex; |
||||
|
source.pageLink.pageSize = paginator.pageSize; |
||||
|
} else { |
||||
|
source.pageLink.page = 0; |
||||
|
} |
||||
|
source.pageLink.sortOrder.property = sort.active; |
||||
|
source.pageLink.sortOrder.direction = Direction[sort.direction.toUpperCase()]; |
||||
|
source.timeseriesDatasource.loadRows(); |
||||
|
this.ctx.detectChanges(); |
||||
|
} |
||||
|
|
||||
|
public trackByColumnIndex(index, header: TimeseriesHeader) { |
||||
|
return header.index; |
||||
|
} |
||||
|
|
||||
|
public trackByRowIndex(index: number, row: TimeseriesRow) { |
||||
|
return index; |
||||
|
} |
||||
|
|
||||
|
public cellStyle(source: TimeseriesTableSource, index: number, value: any): any { |
||||
|
let style: any = {}; |
||||
|
if (index > 0) { |
||||
|
const styleInfo = source.stylesInfo[index-1]; |
||||
|
if (styleInfo.useCellStyleFunction && styleInfo.cellStyleFunction) { |
||||
|
try { |
||||
|
style = styleInfo.cellStyleFunction(value); |
||||
|
} catch (e) { |
||||
|
style = {}; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return style; |
||||
|
} |
||||
|
|
||||
|
public cellContent(source: TimeseriesTableSource, index: number, row: TimeseriesRow, value: any): SafeHtml { |
||||
|
if (index === 0) { |
||||
|
return row.formattedTs; |
||||
|
} else { |
||||
|
let content = ''; |
||||
|
const contentInfo = source.contentsInfo[index-1]; |
||||
|
if (contentInfo.useCellContentFunction && contentInfo.cellContentFunction) { |
||||
|
try { |
||||
|
const rowData = source.rowDataTemplate; |
||||
|
rowData['Timestamp'] = row[0]; |
||||
|
for (let h=0; h < source.header.length; h++) { |
||||
|
const headerInfo = source.header[h]; |
||||
|
rowData[headerInfo.dataKey.name] = row[headerInfo.index]; |
||||
|
} |
||||
|
content = contentInfo.cellContentFunction(value, rowData, this.ctx); |
||||
|
} catch (e) { |
||||
|
content = '' + value; |
||||
|
} |
||||
|
} else { |
||||
|
const decimals = (contentInfo.decimals || contentInfo.decimals === 0) ? contentInfo.decimals : this.ctx.widgetConfig.decimals; |
||||
|
const units = contentInfo.units || this.ctx.widgetConfig.units; |
||||
|
content = this.ctx.utils.formatValue(value, decimals, units, true); |
||||
|
} |
||||
|
return isDefined(content) ? this.domSanitizer.bypassSecurityTrustHtml(content) : ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public onRowClick($event: Event, row: TimeseriesRow) { |
||||
|
const descriptors = this.ctx.actionsApi.getActionDescriptors('rowClick'); |
||||
|
if (descriptors.length) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
let entityId; |
||||
|
let entityName; |
||||
|
if (this.ctx.activeEntityInfo) { |
||||
|
entityId = this.ctx.activeEntityInfo.entityId; |
||||
|
entityName = this.ctx.activeEntityInfo.entityName; |
||||
|
} |
||||
|
this.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName, row); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public onActionButtonClick($event: Event, row: TimeseriesRow, actionDescriptor: WidgetActionDescriptor) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
let entityId; |
||||
|
let entityName; |
||||
|
if (this.ctx.activeEntityInfo) { |
||||
|
entityId = this.ctx.activeEntityInfo.entityId; |
||||
|
entityName = this.ctx.activeEntityInfo.entityName; |
||||
|
} |
||||
|
this.ctx.actionsApi.handleWidgetAction($event, actionDescriptor, entityId, entityName, row); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
class TimeseriesDatasource implements DataSource<TimeseriesRow> { |
||||
|
|
||||
|
private rowsSubject = new BehaviorSubject<TimeseriesRow[]>([]); |
||||
|
private pageDataSubject = new BehaviorSubject<PageData<TimeseriesRow>>(emptyPageData<TimeseriesRow>()); |
||||
|
|
||||
|
private allRowsSubject = new BehaviorSubject<TimeseriesRow[]>([]); |
||||
|
private allRows$: Observable<Array<TimeseriesRow>> = this.allRowsSubject.asObservable(); |
||||
|
|
||||
|
constructor( |
||||
|
private source: TimeseriesTableSource, |
||||
|
private hideEmptyLines: boolean, |
||||
|
private dateFormatFilter: string, |
||||
|
private datePipe: DatePipe |
||||
|
) { |
||||
|
this.source.timeseriesDatasource = this; |
||||
|
} |
||||
|
|
||||
|
connect(collectionViewer: CollectionViewer): Observable<TimeseriesRow[] | ReadonlyArray<TimeseriesRow>> { |
||||
|
return this.rowsSubject.asObservable(); |
||||
|
} |
||||
|
|
||||
|
disconnect(collectionViewer: CollectionViewer): void { |
||||
|
this.rowsSubject.complete(); |
||||
|
this.pageDataSubject.complete(); |
||||
|
} |
||||
|
|
||||
|
loadRows() { |
||||
|
this.fetchRows(this.source.pageLink).pipe( |
||||
|
catchError(() => of(emptyPageData<TimeseriesRow>())), |
||||
|
).subscribe( |
||||
|
(pageData) => { |
||||
|
this.rowsSubject.next(pageData.data); |
||||
|
this.pageDataSubject.next(pageData); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
dataUpdated(data: DatasourceData[]) { |
||||
|
this.source.rawData = data.slice(this.source.keyStartIndex, this.source.keyEndIndex); |
||||
|
this.updateSourceData(); |
||||
|
} |
||||
|
|
||||
|
private updateSourceData() { |
||||
|
this.source.data = this.convertData(this.source.rawData); |
||||
|
this.allRowsSubject.next(this.source.data); |
||||
|
} |
||||
|
|
||||
|
private convertData(data: DatasourceData[]): TimeseriesRow[] { |
||||
|
const rowsMap: {[timestamp: number]: TimeseriesRow} = {}; |
||||
|
for (let d = 0; d < data.length; d++) { |
||||
|
const columnData = data[d].data; |
||||
|
for (let i = 0; i < columnData.length; i++) { |
||||
|
const cellData = columnData[i]; |
||||
|
const timestamp = cellData[0]; |
||||
|
let row = rowsMap[timestamp]; |
||||
|
if (!row) { |
||||
|
row = { |
||||
|
formattedTs: this.datePipe.transform(timestamp, this.dateFormatFilter) |
||||
|
}; |
||||
|
row[0] = timestamp; |
||||
|
for (let c = 0; c < data.length; c++) { |
||||
|
row[c+1] = undefined; |
||||
|
} |
||||
|
rowsMap[timestamp] = row; |
||||
|
} |
||||
|
row[d+1] = cellData[1]; |
||||
|
} |
||||
|
} |
||||
|
const rows: TimeseriesRow[] = []; |
||||
|
for (const t of Object.keys(rowsMap)) { |
||||
|
if (this.hideEmptyLines) { |
||||
|
let hideLine = true; |
||||
|
for (let _c = 0; (_c < data.length) && hideLine; _c++) { |
||||
|
if (rowsMap[t][_c+1]) |
||||
|
hideLine = false; |
||||
|
} |
||||
|
if (!hideLine) { |
||||
|
rows.push(rowsMap[t]); |
||||
|
} |
||||
|
} else { |
||||
|
rows.push(rowsMap[t]); |
||||
|
} |
||||
|
} |
||||
|
return rows; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
isEmpty(): Observable<boolean> { |
||||
|
return this.rowsSubject.pipe( |
||||
|
map((rows) => !rows.length) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
total(): Observable<number> { |
||||
|
return this.pageDataSubject.pipe( |
||||
|
map((pageData) => pageData.totalElements) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private fetchRows(pageLink: PageLink): Observable<PageData<TimeseriesRow>> { |
||||
|
return this.allRows$.pipe( |
||||
|
map((data) => pageLink.filterData(data)) |
||||
|
); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue