Bar indicator

Bar-indicators are used to compare values with each other.

The bar-indicator functions as a semantic alternative to the progress bar. It should display not a progress, but rather a ratio between multiple bar-indicators or something like "passed time" to put some visual perspective between connected bar-indicators.

´ Loading interactive demo...
<dt-bar-indicator value="60"></dt-bar-indicator> export class BarIndicatorDefaultExample {} <dt-bar-indicator value="60"></dt-bar-indicator> export class BarIndicatorDefaultExample {}

A basic bar-indicator would follow this structure:

<dt-bar-indicator value="10"></dt-bar-indicator>

Imports

You have to import the DtBarIndicatorModule to use the dt-bar-indicator:

@NgModule({
  imports: [DtBarIndicatorModule],
})
class MyModule {}

Inputs

Name Type Default Description
align 'start' | 'end' start Alignment of the bar-indicator defining if increasing percentage values let the bar grow to the left or the right.
color 'main' | 'recovered' | 'error' main Current variation of the theme color which is applied to the color of the bar-indicator .
max number 100 Sets the maximum value of the bar-indicator. Inherited from HasProgressValues.
min number 0 Sets the minimum value of the bar-indicator. Inherited from HasProgressValues.
value number - Sets the current value of the bar-indicator. Inherited from HasProgressValues.

Outputs

Name Type Description
valueChange EventEmitter<DtBarIndicatorChange> Event emitted when the value of the bar-indicator cahnges.

Properties

Name Type Description
percent number Returns the percentage value for the current value between min and max. Inherited from HasProgressValues.

Variants

The bar indicator is mostly used within table rows with the table column header as a label. It can also be used as a standalone component, which requires labels next to the bars then. As the bar indicator is not used to show total percentages of a number, but rather to compare ratios, it can't be used as a single, separated bar.
The indicator is themeable and can also show problems.

´ Loading interactive demo...
<dt-bar-indicator value="60" [color]="color"></dt-bar-indicator> <dt-button-group [value]="color" (valueChange)="changed($event)" style="margin-top: 16px" > <dt-button-group-item value="main">main</dt-button-group-item> <dt-button-group-item value="error">error</dt-button-group-item> <dt-button-group-item value="recovered">recovered</dt-button-group-item> </dt-button-group> export class BarIndicatorColorExample { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } } <dt-bar-indicator value="60" [color]="color"></dt-bar-indicator> <dt-button-group [value]="color" (valueChange)="changed($event)" style="margin-top: 16px" > <dt-button-group-item value="main">main</dt-button-group-item> <dt-button-group-item value="error">error</dt-button-group-item> <dt-button-group-item value="recovered">recovered</dt-button-group-item> </dt-button-group> export class BarIndicatorColorExample { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } }

Bar indicator in use

Bar-indicators are often used in tables. bar-indicator in tables

Theming and validation

Depending on the context, the bar-indicator can be colored according to the page's theme or use the validation colors.

´ Loading interactive demo...
<dt-bar-indicator value="60" [color]="color"></dt-bar-indicator> <dt-button-group [value]="color" (valueChange)="changed($event)" style="margin-top: 16px" > <dt-button-group-item value="main">main</dt-button-group-item> <dt-button-group-item value="error">error</dt-button-group-item> <dt-button-group-item value="recovered">recovered</dt-button-group-item> </dt-button-group> export class BarIndicatorColorExample { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } } <dt-bar-indicator value="60" [color]="color"></dt-bar-indicator> <dt-button-group [value]="color" (valueChange)="changed($event)" style="margin-top: 16px" > <dt-button-group-item value="main">main</dt-button-group-item> <dt-button-group-item value="error">error</dt-button-group-item> <dt-button-group-item value="recovered">recovered</dt-button-group-item> </dt-button-group> export class BarIndicatorColorExample { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } }

Alignment

It's possible to set the alignment to end. This is used when a bar-indicator is part of a table row with right-alignment.

´ Loading interactive demo...
<dt-bar-indicator value="30" [align]="alignment"></dt-bar-indicator> <dt-button-group [value]="alignment" (valueChange)="changed($event)" style="margin-top: 16px" > <dt-button-group-item value="start">start</dt-button-group-item> <dt-button-group-item value="end">end</dt-button-group-item> </dt-button-group> export class BarIndicatorAlignmentExample { alignment = 'end'; changed(alignValue: string): void { this.alignment = alignValue; } } <dt-bar-indicator value="30" [align]="alignment"></dt-bar-indicator> <dt-button-group [value]="alignment" (valueChange)="changed($event)" style="margin-top: 16px" > <dt-button-group-item value="start">start</dt-button-group-item> <dt-button-group-item value="end">end</dt-button-group-item> </dt-button-group> export class BarIndicatorAlignmentExample { alignment = 'end'; changed(alignValue: string): void { this.alignment = alignValue; } }

Value bindings

Bar-indicator with variable min, max and value bindings.

´ Loading interactive demo...
<dt-bar-indicator [value]="value" [min]="min" [max]="max" (valueChange)="changed($event)" ></dt-bar-indicator> <div style="margin-top: 16px;"> <button dt-button (click)="value = value - 10"> decrease value by 10 </button> <button dt-button (click)="value = value + 10"> increase value by 10 </button> </div> <div style="margin-top: 16px;"> <button dt-button (click)="min = min - 10">decrease min by 10</button> <button dt-button (click)="min = min + 10">increase min by 10</button> </div> <div style="margin-top: 16px;"> <button dt-button (click)="max = max - 10">decrease max by 10</button> <button dt-button (click)="max = max + 10">increase max by 10</button> </div> <p> Current value: {{ value }} <br /> Current min: {{ min }} <br /> Current max: {{ max }} <br /> </p> <p *ngIf="oldValue !== null"> Event: OldValue: {{ oldValue }} <br /> NewValue: {{ newValue }} </p> export class BarIndicatorDynamicExample { min = 0; max = 100; value = 50; oldValue: number | null = null; newValue: number | null = null; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } } <dt-bar-indicator [value]="value" [min]="min" [max]="max" (valueChange)="changed($event)" ></dt-bar-indicator> <div style="margin-top: 16px;"> <button dt-button (click)="value = value - 10"> decrease value by 10 </button> <button dt-button (click)="value = value + 10"> increase value by 10 </button> </div> <div style="margin-top: 16px;"> <button dt-button (click)="min = min - 10">decrease min by 10</button> <button dt-button (click)="min = min + 10">increase min by 10</button> </div> <div style="margin-top: 16px;"> <button dt-button (click)="max = max - 10">decrease max by 10</button> <button dt-button (click)="max = max + 10">increase max by 10</button> </div> <p> Current value: {{ value }} <br /> Current min: {{ min }} <br /> Current max: {{ max }} <br /> </p> <p *ngIf="oldValue !== null"> Event: OldValue: {{ oldValue }} <br /> NewValue: {{ newValue }} </p> export class BarIndicatorDynamicExample { min = 0; max = 100; value = 50; oldValue: number | null = null; newValue: number | null = null; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } }