The consumption component visualizes usage data of account services. It utilizes an icon, a title, a progress bar with a value label and a description text. The bar grows as the usage increases with color indicating the service status. The value label is directly correlated with the growth of the progress bar.
<dt-consumption
[max]="max"
[value]="value"
ariaLabelProgress="Host unit consumption"
>
<dt-consumption-icon aria-label="Host">
<dt-icon name="host"></dt-icon>
</dt-consumption-icon>
<dt-consumption-title> Host units </dt-consumption-title>
<dt-consumption-count>
{{ value | dtCount }}/{{ max | dtCount }}
</dt-consumption-count>
<dt-consumption-label> Restricted host unit hours </dt-consumption-label>
<dt-consumption-overlay>
<dt-consumption [max]="max" [value]="value" class="overlay-value-panel">
<dt-consumption-title> Host units </dt-consumption-title>
<dt-consumption-subtitle> Quota </dt-consumption-subtitle>
<dt-consumption-count>
{{ value | dtCount }}/{{ max | dtCount }}
</dt-consumption-count>
</dt-consumption>
<div class="overlay-value-panel">
<div>Consumption breakdown</div>
<dt-key-value-list>
<dt-key-value-list-item *ngFor="let entry of breakdown">
<dt-key-value-list-key>{{ entry.name }}</dt-key-value-list-key>
<dt-key-value-list-value>
{{ entry.value | dtCount }}
</dt-key-value-list-value>
</dt-key-value-list-item>
</dt-key-value-list>
</div>
<dt-consumption [max]="5" [value]="0" class="overlay-value-panel">
<dt-consumption-subtitle>
Free credits (Exp. 20. Mar 2019)
</dt-consumption-subtitle>
<dt-consumption-count>
{{ 0 | dtCount }}/{{ 5 | dtCount }}
</dt-consumption-count>
</dt-consumption>
</dt-consumption-overlay>
</dt-consumption>
To set the content for a consumption component, the following tags are available:
<dt-consumption-icon>
- An icon shown right next to the title (e.g.<dt-icon name="host"></dt-icon>
)<dt-consumption-title>
- The title of the consumption component<dt-consumption-subtitle>
- The title usually shown below the actual title<dt-consumption-count>
- A formatted value label shown below the progress bar (e.g.5/20
)<dt-consumption-label>
- A more detailed description of what the progressbar and count label actually represent (e.g.Restricted host unit hours
)
Additionally an optional overlay section is supported that is only shown when the user hovers over the consumption component:
<dt-consumption-overlay>
- Content that is shown in an overlay when the user hovers over the consumption component
Imports
You have to import the DtConsumptionModule
when you want to use the
<dt-consumption>
:
@NgModule({
imports: [DtConsumptionModule],
})
class MyModule {}
Inputs
DtConsumption
Name | Type | Default | Description |
---|---|---|---|
max | number | 0 |
Largest possible value for this consumption component instance |
value | number | 0 |
The currently displayed value for this consumption component instance. The value must be within the interval [min, max] . |
color | string | 'main' |
The color scheme used for the progress bar. Only values defined in type DtConsumptionThemePalette are considered valid. |
DtConsumptionIcon
Name | Type | Default | Description |
---|---|---|---|
aria-label | string |
undefined |
Accessibility label describing the icon in the consumption component. |
To make our components accessible it is obligatory to provide either an
aria-label
or aria-labelledby
.
Accessibility
Icons defined with <dt-consumption-icon>
must be given a meaningful label via
aria-label
.
States
Overage state (warning state)
Services that are incurring overages display a full yellow bar (warning state). The yellow color specifically depicts a service in overage. This means the service has used all of its pre-paid quota and is utilizing service outside the contracted amount.
<dt-consumption
[max]="max"
[value]="value"
color="warning"
ariaLabelProgress="DEM unit consumption progress"
>
<dt-consumption-icon aria-label="User Group">
<dt-icon name="usergroup"></dt-icon>
</dt-consumption-icon>
<dt-consumption-title> DEM units </dt-consumption-title>
<dt-consumption-count>
{{ value | dtCount }}/{{ max | dtCount }}
</dt-consumption-count>
<dt-consumption-label> Flexible overages </dt-consumption-label>
<dt-consumption-overlay>
<dt-consumption
[max]="quota"
[value]="quota"
color="warning"
class="overlay-value-panel"
>
<dt-consumption-title> DEM units </dt-consumption-title>
<dt-consumption-subtitle> Quota </dt-consumption-subtitle>
<dt-consumption-count>
{{ quota | dtCount }}/{{ quota | dtCount }}
</dt-consumption-count>
</dt-consumption>
<dt-consumption
[max]="flexibleOverages"
[value]="flexibleOverages"
color="warning"
class="overlay-value-panel"
>
<dt-consumption-subtitle> Flexible overages </dt-consumption-subtitle>
<dt-consumption-count>
{{ flexibleOverages | dtCount }}/unlimited
</dt-consumption-count>
</dt-consumption>
<div class="overlay-value-panel">
<div>Consumption breakdown</div>
<dt-key-value-list>
<dt-key-value-list-item *ngFor="let entry of breakdown">
<dt-key-value-list-key>{{ entry.name }}</dt-key-value-list-key>
<dt-key-value-list-value>
{{ entry.value | dtCount }}
</dt-key-value-list-value>
</dt-key-value-list-item>
</dt-key-value-list>
</div>
<dt-consumption
[max]="free"
[value]="free"
color="warning"
class="overlay-value-panel"
>
<dt-consumption-subtitle>
Free (Exp. 20. Mar 2019)
</dt-consumption-subtitle>
<dt-consumption-count>
{{ free | dtCount }}/{{ free | dtCount }}
</dt-consumption-count>
</dt-consumption>
</dt-consumption-overlay>
</dt-consumption>
Limits reached state (error state)
Services that have used their full contracted amount display a full red bar (error state). The red color specifically depicts a service that has hit its contracted limit and the service will no longer be available until quotas are increased or renewed.
<dt-consumption
[max]="max"
[value]="value"
color="error"
ariaLabelProgress="Log analytics storage progress"
>
<dt-consumption-icon aria-label="Log file">
<dt-icon name="logfile"></dt-icon>
</dt-consumption-icon>
<dt-consumption-title> Log analytics </dt-consumption-title>
<dt-consumption-count>
{{ value | dtMegabytes }}/{{ max | dtMegabytes }}
</dt-consumption-count>
<dt-consumption-label> Restricted overages </dt-consumption-label>
<dt-consumption-overlay>
<dt-consumption [max]="max" [value]="value" color="error">
<dt-consumption-title> Log analytics </dt-consumption-title>
<dt-consumption-subtitle> Quota </dt-consumption-subtitle>
<dt-consumption-count>
{{ value | dtMegabytes }}/{{ max | dtMegabytes }}
</dt-consumption-count>
</dt-consumption>
</dt-consumption-overlay>
</dt-consumption>