88 lines
4.7 KiB
HTML
88 lines
4.7 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2024 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'">
|
|
<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>
|
|
<th *ngIf="legendConfig.showLatest === true">{{ 'legend.latest' | 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)"
|
|
[innerHTML]="legendKey.dataKey.label | safe: 'html'"
|
|
[ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden, 'tb-horizontal': isHorizontal }">
|
|
</td>
|
|
<td class="tb-legend-value" *ngIf="legendConfig.showMin === true"
|
|
[innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'"></td>
|
|
<td class="tb-legend-value" *ngIf="legendConfig.showMax === true"
|
|
[innerHTML]="legendData.data[legendKey.dataIndex].max | safe: 'html'"></td>
|
|
<td class="tb-legend-value" *ngIf="legendConfig.showAvg === true"
|
|
[innerHTML]="legendData.data[legendKey.dataIndex].avg | safe: 'html'"></td>
|
|
<td class="tb-legend-value" *ngIf="legendConfig.showTotal === true"
|
|
[innerHTML]="legendData.data[legendKey.dataIndex].total | safe: 'html'"></td>
|
|
<td class="tb-legend-value" *ngIf="legendConfig.showLatest === true"
|
|
[innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'"></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"
|
|
[innerHTML]="legendKey.dataKey.label | safe: 'html'"
|
|
(click)="toggleHideData(legendKey.dataIndex)"
|
|
[ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden}">
|
|
</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()"
|
|
[innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'"></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()"
|
|
[innerHTML]="legendData.data[legendKey.dataIndex].max | safe: 'html'"></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()"
|
|
[innerHTML]="legendData.data[legendKey.dataIndex].avg | safe: 'html'"></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()"
|
|
[innerHTML]="legendData.data[legendKey.dataIndex].total | safe: 'html'"></td>
|
|
</tr>
|
|
<tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showLatest === true">
|
|
<td class="tb-legend-type">{{ 'legend.latest' | translate }}</td>
|
|
<td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
|
|
[innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|