81 lines
4.0 KiB
HTML
81 lines
4.0 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2021 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.
|
|
|
|
-->
|
|
<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>
|
|
<th *ngIf="legendConfig.showMin === true">{{ 'legend.min' | translate }}</th>
|
|
<th *ngIf="legendConfig.showMax === true">{{ 'legend.max' | translate }}</th>
|
|
<th *ngIf="legendConfig.showAvg === true">{{ 'legend.avg' | translate }}</th>
|
|
<th *ngIf="legendConfig.showTotal === true">{{ 'legend.total' | translate }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<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': legendKey.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': legendKey.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>
|