File
Description
Usage component displays usage information in a form of e.g. "51% used".
It can be used in two ways:
- By providing
count and limit inputs, it will calculate the usage percentage.
- By providing
percentage input, it will use the provided percentage value.
Note: percentage input takes precedence over count and limit inputs.
|
count
|
Default value : input<number | null>(null)
|
|
limit
|
Default value : input<number | null>(null)
|
|
percentage
|
Default value : input<number | null>(null)
|
Percentage of usage. Value range is from 0 to 100 (or more).
For example, if 10% is used, this value should be provided as 10 (not 0.1).
|
|
status
|
Default value : computed(() => this.getStatus(this.usage()))
|
|
statusMap
|
Type : object
|
Default value : {
danger: ['tag--danger'],
warning: ['tag--warning'],
success: ['tag--success']
}
|
|
usage
|
Default value : computed(() =>
this.percentage() != null ? this.percentage() / 100 : this.getUsage(this.count(), this.limit())
)
|
Usage as a fraction (e.g. if 50% is used, usage value will be 0.5)
|
|
usageToDisplay
|
Default value : gettext('{{ percentageOfQuota }} used')
|
<div
class="tag no-pointer"
[ngClass]="statusMap[status()]"
*ngIf="usage() !== null"
>
<i
class="text-danger m-r-4 text-12"
c8yIcon="exclamation-circle"
*ngIf="status() === 'danger'"
></i>
<span>
{{ usageToDisplay | translate: { percentageOfQuota: (usage() | percent: '1.0-2') } }}
</span>
</div>