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

Propagate UI changes.

Browse Source
This commit is contained in:
Igor Kulikov 2020-02-26 12:36:34 +02:00
parent a122563619
commit cf175acaa4
4 changed files with 73 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.ts
View File

@ -91,22 +91,9 @@ export class LegendConfigPanelComponent extends PageComponent implements OnInit
}
this.legendConfigForm.patchValue(
{
position,
showMin: false,
showMax: false,
showAvg: false,
showTotal: false
position
}, {emitEvent: false}
);
this.legendConfigForm.get('showMin').disable({emitEvent: false});
this.legendConfigForm.get('showMax').disable({emitEvent: false});
this.legendConfigForm.get('showAvg').disable({emitEvent: false});
this.legendConfigForm.get('showTotal').disable({emitEvent: false});
} else {
this.legendConfigForm.get('showMin').enable({emitEvent: false});
this.legendConfigForm.get('showMax').enable({emitEvent: false});
this.legendConfigForm.get('showAvg').enable({emitEvent: false});
this.legendConfigForm.get('showTotal').enable({emitEvent: false});
}
}

64
ui-ngx/src/app/modules/home/components/widget/legend.component.html
View File

@ -15,7 +15,8 @@
limitations under the License.
-->
<table class="tb-legend">
<table class="tb-legend" [ngClass]="isRowDirection ? 'tb-legend-row' : 'tb-legend-column'"
[ngStyle]="{ marginRight: isRowDirection && !displayHeader ? 'auto' : '20px' }">
<thead>
<tr class="tb-legend-header" *ngIf="!isRowDirection">
<th colspan="2"></th>
@ -26,17 +27,54 @@
</tr>
</thead>
<tbody>
<tr class="tb-legend-keys" *ngFor="let legendKey of legendKeys()" [ngClass]="{ 'tb-row-direction': isRowDirection }">
<td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
<td class="tb-legend-label"
(click)="toggleHideData(legendKey.dataIndex)"
[ngClass]="{ 'tb-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden, 'tb-horizontal': isHorizontal }">
{{ legendKey.dataKey.label }}
</td>
<td class="tb-legend-value" *ngIf="legendConfig.showMin === true">{{ legendData.data[legendKey.dataIndex].min }}</td>
<td class="tb-legend-value" *ngIf="legendConfig.showMax === true">{{ legendData.data[legendKey.dataIndex].max }}</td>
<td class="tb-legend-value" *ngIf="legendConfig.showAvg === true">{{ legendData.data[legendKey.dataIndex].avg }}</td>
<td class="tb-legend-value" *ngIf="legendConfig.showTotal === true">{{ legendData.data[legendKey.dataIndex].total }}</td>
</tr>
<ng-container *ngIf="!isRowDirection">
<tr class="tb-legend-keys" *ngFor="let legendKey of legendKeys()">
<td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
<td class="tb-legend-label"
(click)="toggleHideData(legendKey.dataIndex)"
[ngClass]="{ 'tb-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden, 'tb-horizontal': isHorizontal }">
{{ legendKey.dataKey.label }}
</td>
<td class="tb-legend-value" *ngIf="legendConfig.showMin === true">{{ legendData.data[legendKey.dataIndex].min }}</td>
<td class="tb-legend-value" *ngIf="legendConfig.showMax === true">{{ legendData.data[legendKey.dataIndex].max }}</td>
<td class="tb-legend-value" *ngIf="legendConfig.showAvg === true">{{ legendData.data[legendKey.dataIndex].avg }}</td>
<td class="tb-legend-value" *ngIf="legendConfig.showTotal === true">{{ legendData.data[legendKey.dataIndex].total }}</td>
</tr>
</ng-container>
<tr *ngIf="isRowDirection" class="tb-legend-keys" [ngClass]="{ 'tb-row-direction': !displayHeader }">
<td></td>
<td *ngFor="let legendKey of legendKeys()">
<span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span>
<span class="tb-legend-label"
(click)="toggleHideData(legendKey.dataIndex)"
[ngClass]="{ 'tb-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden}">
{{ legendKey.dataKey.label }}
</span>
</td>
</tr>
<tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMin === true">
<td class="tb-legend-type">{{ 'legend.min' | translate }}</td>
<td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
{{ legendData.data[legendKey.dataIndex].min }}
</td>
</tr>
<tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMax === true">
<td class="tb-legend-type">{{ 'legend.max' | translate }}</td>
<td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
{{ legendData.data[legendKey.dataIndex].max }}
</td>
</tr>
<tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showAvg === true">
<td class="tb-legend-type">{{ 'legend.avg' | translate }}</td>
<td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
{{ legendData.data[legendKey.dataIndex].avg }}
</td>
</tr>
<tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showTotal === true">
<td class="tb-legend-type">{{ 'legend.total' | translate }}</td>
<td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
{{ legendData.data[legendKey.dataIndex].total }}
</td>
</tr>
</tbody>
</table>

21
ui-ngx/src/app/modules/home/components/widget/legend.component.scss
View File

@ -15,9 +15,17 @@
*/
:host {
table.tb-legend {
width: 100%;
font-size: 12px;
&.tb-legend-column {
width: 100%;
}
&.tb-legend-row {
width: auto;
margin-left: auto;
}
.tb-legend-header,
.tb-legend-value {
text-align: right;
@ -42,6 +50,15 @@
white-space: nowrap;
}
.tb-legend-type {
min-width: 50px;
padding: 0 10px 1px 0;
font-weight: 700;
color: rgb(255, 110, 64);
text-align: right;
white-space: nowrap;
}
.tb-legend-line {
display: inline-block;
width: 15px;
@ -50,7 +67,9 @@
}
.tb-legend-label {
padding: 2px 10px;
text-align: left;
white-space: nowrap;
outline: none;
&.tb-horizontal {

1
ui-ngx/src/app/modules/home/components/widget/widget.component.scss
View File

@ -46,5 +46,6 @@
#widget-container {
min-height: 0;
min-width: 0;
}
}