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>