dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Fixed show/hide action and style timeseries table widgets

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-08-28 13:10:40 +03:00
parent bff3297c56
commit f8e491790e
4 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui-ngx/src/app/core/utils.ts
View File

@ -414,18 +414,19 @@ export const createLabelFromDatasource = (datasource: Datasource, pattern: strin
export const hasDatasourceLabelsVariables = (pattern: string): boolean => varsRegex.test(pattern) !== null; export const hasDatasourceLabelsVariables = (pattern: string): boolean => varsRegex.test(pattern) !== null;
export function formattedDataFormDatasourceData(input: DatasourceData[], dataIndex?: number): FormattedData[] { export function formattedDataFormDatasourceData(input: DatasourceData[], dataIndex?: number, ts?: number): FormattedData[] {
return _(input).groupBy(el => el.datasource.entityName + el.datasource.entityType) return _(input).groupBy(el => el.datasource.entityName + el.datasource.entityType)
.values().value().map((entityArray, i) => { .values().value().map((entityArray, i) => {
const datasource = entityArray[0].datasource; const datasource = entityArray[0].datasource;
const obj = formattedDataFromDatasource(datasource, i); const obj = formattedDataFromDatasource(datasource, i);
entityArray.filter(el => el.data.length).forEach(el => { entityArray.filter(el => el.data.length).forEach(el => {
const index = isDefined(dataIndex) ? dataIndex : el.data.length - 1; const index = isDefined(dataIndex) ? dataIndex : el.data.length - 1;
if (!obj.hasOwnProperty(el.dataKey.label) || el.data[index][1] !== '') { const dataSet = isDefined(ts) ? el.data.find(data => data[0] === ts) : el.data[index];
obj[el.dataKey.label] = el.data[index][1]; if (dataSet !== undefined && (!obj.hasOwnProperty(el.dataKey.label) || dataSet[1] !== '')) {
obj[el.dataKey.label + '|ts'] = el.data[index][0]; obj[el.dataKey.label] = dataSet[1];
obj[el.dataKey.label + '|ts'] = dataSet[0];
if (el.dataKey.label.toLowerCase() === 'type') { if (el.dataKey.label.toLowerCase() === 'type') {
obj.deviceType = el.data[index][1]; obj.deviceType = dataSet[1];
} }
} }
}); });

24
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
View File

@ -60,36 +60,38 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction"> <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px', <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px', maxWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }"> width: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px' }">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(source, entity, row)" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px', <mat-cell *matCellDef="let row; let rowIndex = index" [style]="rowStyle(source, row, rowIndex)" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px', maxWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }"> width: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px' }">
<div [fxHide]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div [fxHide]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
<ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId"> <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
<span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span> <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
<button *ngIf="actionDescriptor.icon" <button *ngIf="actionDescriptor.icon"
class="tb-mat-40"
mat-icon-button [disabled]="isLoading$ | async" mat-icon-button [disabled]="isLoading$ | async"
matTooltip="{{ actionDescriptor.displayName }}" matTooltip="{{ actionDescriptor.displayName }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="onActionButtonClick($event, entity, actionDescriptor)"> (click)="onActionButtonClick($event, row, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <mat-icon>{{actionDescriptor.icon}}</mat-icon>
</button> </button>
</ng-container> </ng-container>
</div> </div>
<div fxHide [fxShow.lt-lg]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="entity.hasActions"> <div fxHide [fxShow.lt-lg]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="row.hasActions">
<button mat-icon-button <button mat-icon-button
class="tb-mat-40"
(click)="$event.stopPropagation(); ctx.detectChanges();" (click)="$event.stopPropagation(); ctx.detectChanges();"
[matMenuTriggerFor]="cellActionsMenu"> [matMenuTriggerFor]="cellActionsMenu">
<mat-icon class="material-icons">more_vert</mat-icon> <mat-icon class="material-icons">more_vert</mat-icon>
</button> </button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before"> <mat-menu #cellActionsMenu="matMenu" xPosition="before">
<ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId"> <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
<button mat-menu-item *ngIf="actionDescriptor.icon" <button mat-menu-item *ngIf="actionDescriptor.icon"
[disabled]="isLoading$ | async" [disabled]="isLoading$ | async"
(click)="onActionButtonClick($event, entity, actionDescriptor)"> (click)="onActionButtonClick($event, row, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <mat-icon>{{actionDescriptor.icon}}</mat-icon>
<span>{{ actionDescriptor.displayName }}</span> <span>{{ actionDescriptor.displayName }}</span>
</button> </button>

4
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
View File

@ -870,7 +870,7 @@ class TimeseriesDatasource implements DataSource<TimeseriesRow> {
const rowsMap: {[timestamp: number]: TimeseriesRow} = {}; const rowsMap: {[timestamp: number]: TimeseriesRow} = {};
for (let d = 0; d < data.length; d++) { for (let d = 0; d < data.length; d++) {
const columnData = data[d].data; const columnData = data[d].data;
columnData.forEach((cellData, index) => { columnData.forEach((cellData) => {
const timestamp = cellData[0]; const timestamp = cellData[0];
let row = rowsMap[timestamp]; let row = rowsMap[timestamp];
if (!row) { if (!row) {
@ -879,7 +879,7 @@ class TimeseriesDatasource implements DataSource<TimeseriesRow> {
}; };
if (this.cellButtonActions.length) { if (this.cellButtonActions.length) {
if (this.usedShowCellActionFunction) { if (this.usedShowCellActionFunction) {
const parsedData = formattedDataFormDatasourceData(data, index); const parsedData = formattedDataFormDatasourceData(data, undefined, timestamp);
row.actionCellButtons = prepareTableCellButtonActions(this.widgetContext, this.cellButtonActions, row.actionCellButtons = prepareTableCellButtonActions(this.widgetContext, this.cellButtonActions,
parsedData[0], this.reserveSpaceForHiddenAction); parsedData[0], this.reserveSpaceForHiddenAction);
row.hasActions = checkHasActions(row.actionCellButtons); row.hasActions = checkHasActions(row.actionCellButtons);

4
ui-ngx/src/styles.scss
View File

@ -694,6 +694,10 @@ mat-label {
.tb-table-widget { .tb-table-widget {
.mat-mdc-table { .mat-mdc-table {
.mat-mdc-row {
font-size: 13px;
}
.mat-mdc-cell { .mat-mdc-cell {
background: inherit; background: inherit;
color: inherit; color: inherit;