Consumption

The <dt-consumption> is a data visualization box with an icon, a title, a progress bar with a value label and a description text. To set the content for a consumption component, the following tags are available:

´ Loading interactive demo...
<dt-consumption [min]="min" [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 [min]="0" [max]="100000000" [value]="100000000" 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 [min]="0" [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 { min = 0; max = 20; value = 5; breakdown = [ { name: 'SAAS', value: 2 }, { name: 'Full stack', value: 2 }, { name: 'PAAS', value: 1 }, ]; } <dt-consumption [min]="min" [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 [min]="0" [max]="100000000" [value]="100000000" 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 [min]="0" [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 { min = 0; max = 20; value = 5; breakdown = [ { name: 'SAAS', value: 2 }, { name: 'Full stack', value: 2 }, { name: 'PAAS', 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 {}

Options & Properties

Name Type Default Description
min number 0 Smallest possible value for this consumption component instance
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.

Accessibility

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

Examples

Warning mode

´ Loading interactive demo...
<dt-consumption [min]="min" [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 [min]="0" [max]="100000000" [value]="100000000" color="warning" class="overlay-value-panel" > <dt-consumption-title> DEM units </dt-consumption-title> <dt-consumption-subtitle> Quota </dt-consumption-subtitle> <dt-consumption-count> {{ 100000000 | dtCount }}/{{ 100000000 | dtCount }} </dt-consumption-count> </dt-consumption> <dt-consumption [min]="0" [max]="10500000" [value]="10500000" color="warning" class="overlay-value-panel" > <dt-consumption-subtitle> Flexible overages </dt-consumption-subtitle> <dt-consumption-count> {{ 10500000 | 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 [min]="0" [max]="20000000" [value]="20000000" color="warning" class="overlay-value-panel" > <dt-consumption-subtitle> Free (Exp. 20. Mar 2019) </dt-consumption-subtitle> <dt-consumption-count> {{ 20000000 | dtCount }}/{{ 20000000 | dtCount }} </dt-consumption-count> </dt-consumption> </dt-consumption-overlay> </dt-consumption> export class ConsumptionWarningExample { min = 0; max = 20; value = 5; 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 [min]="min" [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 [min]="0" [max]="100000000" [value]="100000000" color="warning" class="overlay-value-panel" > <dt-consumption-title> DEM units </dt-consumption-title> <dt-consumption-subtitle> Quota </dt-consumption-subtitle> <dt-consumption-count> {{ 100000000 | dtCount }}/{{ 100000000 | dtCount }} </dt-consumption-count> </dt-consumption> <dt-consumption [min]="0" [max]="10500000" [value]="10500000" color="warning" class="overlay-value-panel" > <dt-consumption-subtitle> Flexible overages </dt-consumption-subtitle> <dt-consumption-count> {{ 10500000 | 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 [min]="0" [max]="20000000" [value]="20000000" color="warning" class="overlay-value-panel" > <dt-consumption-subtitle> Free (Exp. 20. Mar 2019) </dt-consumption-subtitle> <dt-consumption-count> {{ 20000000 | dtCount }}/{{ 20000000 | dtCount }} </dt-consumption-count> </dt-consumption> </dt-consumption-overlay> </dt-consumption> export class ConsumptionWarningExample { min = 0; max = 20; value = 5; breakdown = [ { name: 'Synthetic actions', value: 36_500_000 }, { name: 'Sessions', value: 37_400_000 }, { name: 'Sessions w/ replay data', value: 36_600_000 }, ]; }

Error mode

´ Loading interactive demo...
<dt-consumption [min]="min" [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 host unit hours </dt-consumption-label> <dt-consumption-overlay> <dt-consumption [min]="min" [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 { min = 0; max = 20; value = 5; } <dt-consumption [min]="min" [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 host unit hours </dt-consumption-label> <dt-consumption-overlay> <dt-consumption [min]="min" [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 { min = 0; max = 20; value = 5; }