Consumption

The consumption component visualizes service usage data combining an icon, a title, a progress bar and some description text.

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. To set the content for a consumption component, the following tags are available:

´ Loading interactive demo...
<dt-consumption [max]="max" [value]="value"> <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> export class ConsumptionDefaultExample { max = 20; value = 5; breakdown = [ { name: 'Cloud infrastructure', value: 2 }, { name: 'Full stack', value: 2 }, { name: 'Cloud app platform', value: 1 }, ]; } <dt-consumption [max]="max" [value]="value"> <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> export class ConsumptionDefaultExample { max = 20; value = 5; breakdown = [ { name: 'Cloud infrastructure', value: 2 }, { name: 'Full stack', value: 2 }, { name: 'Cloud app platform', value: 1 }, ]; }
  • <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.

Overage view (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.

´ Loading interactive demo...
<dt-consumption [max]="max" [value]="value" color="warning"> <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 [min]="0" [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> export class ConsumptionWarningExample { max = 120_000_000; value = 130_500_000; free = 20_000_000; quota = 100_000_000; flexibleOverages = 10_500_000; breakdown = [ { name: 'Synthetic actions', value: 36_500_000 }, { name: 'Sessions', value: 37_400_000 }, { name: 'Sessions w/ replay data', value: 36_600_000 }, ]; } <dt-consumption [max]="max" [value]="value" color="warning"> <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 [min]="0" [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> export class ConsumptionWarningExample { max = 120_000_000; value = 130_500_000; free = 20_000_000; quota = 100_000_000; flexibleOverages = 10_500_000; breakdown = [ { name: 'Synthetic actions', value: 36_500_000 }, { name: 'Sessions', value: 37_400_000 }, { name: 'Sessions w/ replay data', value: 36_600_000 }, ]; }

Limits reached view (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.

´ Loading interactive demo...
<dt-consumption [max]="max" [value]="value" color="error"> <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> export class ConsumptionErrorExample { max = 8000000000; value = 8000000000; } <dt-consumption [max]="max" [value]="value" color="error"> <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> export class ConsumptionErrorExample { max = 8000000000; value = 8000000000; }

Accessibility

Icons defined with <dt-consumption-icon> must be given a meaningful label via aria-label.