Skip to content Herbst UI beta

Component

Meter group

A segmented meter that splits a total into labelled, coloured parts. Feed it an array of items, scale them against a min/max range, lay them out horizontally or vertically, and override the labels, meters, icons, or surrounding content with templates.

Segmented breakdown

  1. Photos42%
  2. Videos28%
  3. Notes14%
  4. Free16%
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbMeterGroupImports, type HbMeterItem } from '@herbst/ui';

@Component({
  selector: 'hb-demo-meter-group-basic',
  imports: [HbMeterGroupImports],
  template: ` <hb-meter-group class="w-full max-w-md" [hbValue]="items" /> `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoMeterGroupBasicComponent {
  protected readonly items: HbMeterItem[] = [
    { label: 'Photos', value: 42, color: '#6B7A55' },
    { label: 'Videos', value: 28, color: '#A64B2A' },
    { label: 'Notes', value: 14, color: '#B98A3E' },
    { label: 'Free', value: 16, color: '#3E4C3A' },
  ];
}

Vertical, icons & label position

  1. Oak38%
  2. Beech30%
  3. Maple18%

Custom meter & footer

  1. Oak37%
  2. Beech27%
  3. Maple15%

3 categories · 78% of quota used

API reference

hb-meter-group

PropertyDescriptionTypeDefault
[hbValue] The segments. Each item is { label, value, color?, icon? }. HbMeterItem[] []
[hbMin] / [hbMax] The value range each segment is measured against; a segment fills (value / (max − min)) of the track. number 0 / 100
[hbOrientation] Lay the track out as a horizontal bar or a vertical column. 'horizontal' | 'vertical' 'horizontal'
[hbLabelPosition] Whether the labels list sits before or after the track. 'start' | 'end' 'end'
[hbLabelOrientation] Flow the labels in a wrapping row or a stacked column. 'horizontal' | 'vertical' 'horizontal'

Template slots

PropertyDescriptionTypeDefault
ng-template[hbMeterGroupMeter] Replace each meter segment. Context: $implicit = item, index, orientation, size (percent), totalPercent. template —
ng-template[hbMeterGroupLabel] Replace the entire labels list. Context: $implicit = items, totalPercent, percentages. template —
ng-template[hbMeterGroupIcon] Replace the per-label icon. Context: $implicit = item, icon. template —
ng-template[hbMeterGroupStart] / [hbMeterGroupEnd] Insert custom content before or after the whole group (totals, legends). Context = the label context. template —