DataPercentBar

components/data/PercentBar.vue

Wraps UxPercentBar with compact-formatted total text and percent-width bar.

2.4M
840K
120K
Scenarios
Default
2.1K
860
84
Compact — dense panel rows (c59 SurfacePanel)
2.1K
860
84
components/data/PercentBar.vue

Usage

<DataPercentBar :total = "0" :percent = "0" :compact = "false" />

Props

PropTypeDefaultDescription
totalNumber0Total value, formatted with compact notation
percentNumber0Bar width percentage (0–100)
compactBooleanfalseDense layout mode passed through to UxPercentBar (9px label, tighter padding) — distinct from the always-on compact number notation

Related

Qpoint Brand Style Guide