Aurora

Stat bar ​

A bordered horizontal band of KPI cells, usually sitting between the page header and the content it summarizes. Cells are composed from compound parts in the template — StatValue / StatLabel / StatAspect inside a StatCell — not configured through props.

ts
import { StatBar, StatCell, StatValue, StatLabel, StatAspect } from '@scaler-tech/aurora/stat'

API ​

StatBar and StatCell are slot-only containers. StatLabel is a slot-only text style.

ComponentPropTypeDefaultDescription
StatValueloadingbooleanfalseSwaps the value for a small Spinner while true
StatAspectaspect'energy' | 'emissions'—Picks the icon and color; the visible text is the slot

Examples ​

128Total assets
43/73100% data coverage
12/73Misaligned by 2030Energy
9/73Misaligned by 2030GHG
vue
<StatBar>
    <StatCell>
        <StatValue :loading="isLoading">43/73</StatValue>
        <StatLabel>100% data coverage</StatLabel>
    </StatCell>
    <StatCell>
        <StatValue :loading="isLoading">12/73</StatValue>
        <StatLabel>Misaligned by 2030</StatLabel>
        <StatAspect aspect="energy">Energy</StatAspect>
    </StatCell>
</StatBar>

Incorrect / Correct ​

Incorrect (a grid of Cards with hand-styled numbers — StatBar exists):

vue
<div class="grid grid-cols-4 gap-4">
    <Card>
        <span class="heading-3-medium text-primary">43/73</span>
        <span class="paragraph-sm text-secondary">Data coverage</span>
    </Card>
</div>

Correct (one bar owns the chrome, cells stay chrome-free):

vue
<StatBar>
    <StatCell>
        <StatValue>43/73</StatValue>
        <StatLabel>Data coverage</StatLabel>
    </StatCell>
</StatBar>

Gotchas ​

  • Loading never shows if you gate the whole bar with v-if — pass :loading to each StatValue instead; there is no bar-level loading prop, and the band keeps its layout while values spin.
  • Adding your own dividers or Separator between cells double-lines the bar — StatCell already draws an inset hairline before every cell except the first, and flips it from horizontal to vertical at the md breakpoint where the bar goes from stacked to a row.
  • Wrapping the bar in a card double-borders it — StatBar owns the border, radius, and background; cells are chrome-free by design.
  • StatAspect only knows energy and emissions — any other string is a type error, and the icon/color pair is fixed per aspect; only the slot text is yours.