File
|
attributes
|
Type : Array<literal type>
|
Default value : [
{
label: gettext('Fragment'),
key: 'fragment'
},
{
label: gettext('Series'),
key: 'series'
},
{
label: gettext('Unit'),
key: 'unit'
},
{
label: gettext('Range'),
key: 'min'
},
{
label: gettext('Target'),
key: 'target'
},
{
label: gettext('Yellow range'),
labelColor: 'yellow',
key: 'yellowRangeMin'
},
{
label: gettext('Red range'),
labelColor: 'red',
key: 'redRangeMin'
}
]
|
<p class="text-medium">
<i c8yIcon="circle" [style.color]="datapoint.color"></i>
{{ datapoint.label }}
</p>
<p>{{ datapoint.description }}</p>
<ul class="list-unstyled small p-t-16">
<ng-container *ngFor="let attribute of attributes; let i = index">
<li
class="p-t-4 p-b-4 flex-row separator-bottom text-nowrap"
*ngIf="datapoint[attribute.key] !== undefined"
>
<label class="small m-b-0 m-r-8">
<i *ngIf="attribute.labelColor" c8yIcon="square" [style.color]="attribute.labelColor"></i>
{{ attribute.label | translate }}
</label>
<ng-container [ngSwitch]="attribute.key">
<span *ngSwitchCase="'min'" class="flex-item-right">
{{ datapoint['min'] }} — {{ datapoint['max'] }}
</span>
<span *ngSwitchCase="'yellowRangeMin'" class="flex-item-right">
{{ datapoint['yellowRangeMin'] }} — {{ datapoint['yellowRangeMax'] }}
</span>
<span *ngSwitchCase="'redRangeMin'" class="flex-item-right">
{{ datapoint['redRangeMin'] }} — {{ datapoint['redRangeMax'] }}
</span>
<span *ngSwitchDefault class="flex-item-right">
{{ datapoint[attribute.key] }}
</span>
</ng-container>
</li>
</ng-container>
</ul>