MeterGroup
Parts of a whole.
About
Stacked composition bar with a legend for parts of one whole: aging buckets, budget mix, seat usage. Segment widths follow value, the legend and assistive tech read display, and colors walk the brand viz ramp, as a chart's series do; the accent is a flag a segment asks for through its color. Pass segments and totalLabel as properties.
Usage
<sui-meter-group></sui-meter-group>
<script type="module">
import { defineCustomElements } from "@shineui/core/loader";
import "@shineui/core/shineui.css";
defineCustomElements();
const el = document.querySelector("sui-meter-group");
el.segments = [
{ label: "Current", value: 47630, display: "$47,630.00" },
{ label: "1 to 30 days", value: 22480, display: "$22,480.00" },
{ label: "31 to 60 days", value: 12890, display: "$12,890.45" },
{ label: "61+ days", value: 7740, display: "$7,740.00", color: "var(--accent)" },
]; /* SuiMeterSegment[] */
el.totalLabel = { label: "A/R aging", value: "$90,740.45 open" }; /* SuiMeterTotal | undefined */
</script>
import { SuiMeterGroup } from "@shineui/react";
import "@shineui/core/shineui.css";
export function Example() {
const segments = [
{ label: "Current", value: 47630, display: "$47,630.00" },
{ label: "1 to 30 days", value: 22480, display: "$22,480.00" },
{ label: "31 to 60 days", value: 12890, display: "$12,890.45" },
{ label: "61+ days", value: 7740, display: "$7,740.00", color: "var(--accent)" },
]; /* SuiMeterSegment[] */
const totalLabel = { label: "A/R aging", value: "$90,740.45 open" }; /* SuiMeterTotal | undefined */
return <SuiMeterGroup segments={segments} totalLabel={totalLabel} />;
}
<script setup>
import { SuiMeterGroup } from "@shineui/vue";
import "@shineui/core/shineui.css";
const segments = [
{ label: "Current", value: 47630, display: "$47,630.00" },
{ label: "1 to 30 days", value: 22480, display: "$22,480.00" },
{ label: "31 to 60 days", value: 12890, display: "$12,890.45" },
{ label: "61+ days", value: 7740, display: "$7,740.00", color: "var(--accent)" },
]; // SuiMeterSegment[]
const totalLabel = { label: "A/R aging", value: "$90,740.45 open" }; // SuiMeterTotal | undefined
</script>
<template>
<SuiMeterGroup :segments="segments" :total-label="totalLabel" />
</template>
import { Component } from "@angular/core";
import { SuiMeterGroup } from "@shineui/angular";
@Component({
standalone: true,
imports: [SuiMeterGroup],
template: `<sui-meter-group [segments]="segments" [totalLabel]="totalLabel"></sui-meter-group>`,
})
export class Example {
segments = [
{ label: "Current", value: 47630, display: "$47,630.00" },
{ label: "1 to 30 days", value: 22480, display: "$22,480.00" },
{ label: "31 to 60 days", value: 12890, display: "$12,890.45" },
{ label: "61+ days", value: 7740, display: "$7,740.00", color: "var(--accent)" },
]; // SuiMeterSegment[]
totalLabel = { label: "A/R aging", value: "$90,740.45 open" }; // SuiMeterTotal | undefined
}
Basic
Each segment renders as role="img" named "label display", so the bar reads as four figures rather than one silent graphic; the legend repeats the same figures as text. Money arrives pre-formatted in display, with two decimals and thousands separators.
<div style="max-width:420px"><sui-meter-group></sui-meter-group></div>
// setup(root): properties and events
setup(root) {
const meter = root.querySelector('sui-meter-group');
meter.totalLabel = agingTotal;
meter.segments = aging();
}
Colors and the flag
With no colors given, segments walk the brand ramp, as a chart's series do, and never take the accent. Pin one with color when a bucket needs attention; the accent is the one flag, so use it once per bar.
<div style="display:grid;gap:18px;max-width:420px">
<sui-meter-group id="mg-ramp"></sui-meter-group>
<sui-meter-group id="mg-flag"></sui-meter-group>
</div>
// setup(root): properties and events
setup(root) {
root.querySelector('#mg-ramp').segments = aging().map(({ color, ...rest }) => rest);
root.querySelector('#mg-flag').segments = aging();
}
Vertical
orientation="vertical" stands the bar up to the height you give the host, stacks the segments top to bottom in legend order, and moves the total and legend beside it. height is then the bar's width.
<div style="height:180px;max-width:420px">
<sui-meter-group id="mg-vertical" orientation="vertical" height="14"></sui-meter-group>
</div>
// setup(root): properties and events
setup(root) {
const meter = root.querySelector('#mg-vertical');
meter.totalLabel = agingTotal;
meter.segments = aging();
}
Height and legend
The bar is always a pill, so the radius follows height. Turn the legend off for a compact summary where the figures live somewhere else on the card.
Seat usage, legend suppressed
<div style="display:grid;gap:18px;max-width:420px">
<sui-meter-group id="mg-thin" height="6"></sui-meter-group>
<sui-meter-group id="mg-thick" height="20"></sui-meter-group>
<div style="display:grid;gap:6px">
<span style="font:460 12px/1.6 var(--font-sans);color:var(--ink-faint)">Seat usage, legend suppressed</span>
<sui-meter-group id="mg-bare" height="10"></sui-meter-group>
</div>
</div>
// setup(root): properties and events
setup(root) {
root.querySelector('#mg-thin').segments = aging();
root.querySelector('#mg-thick').segments = aging();
const bare = root.querySelector('#mg-bare');
bare.hideLegend = true;
bare.segments = [
{ label: 'Assigned', value: 34, display: '34 seats' },
{ label: 'Invited', value: 6, display: '6 seats' },
{ label: 'Free', value: 10, display: '10 seats' },
];
}
API
<sui-meter-group>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
height | height | number | 12 | Bar thickness in px: its height when horizontal, its width when vertical. The bar is a pill (radius = thickness / 2). |
hideLegend | hide-legend | boolean | false | Drops the legend, which stands under the bar (beside it when vertical), for a bar whose parts the page names elsewhere. Each segment keeps its own name for assistive tech. Reflected. |
orientation | orientation | "horizontal" | "vertical" | 'horizontal' | Which way the bar runs. horizontal (default) is the pill across the card with the legend under it. vertical stands the bar up as a column that fills the height of the element or of its parent (give one of them a height, e.g. style="height:180px"; 120px is the floor), stacks the segments top to bottom in legend order, and puts the total and the legend beside it. An unrecognised value falls back to horizontal. |
segments | property only | SuiMeterSegment[] | [] | Segments: { label, value, display?, color? }[]. Property, not attribute. display is the formatted figure for the legend and for assistive tech, so money arrives pre-formatted with two decimals and thousands separators; without it the legend prints value grouped in the page's locale (1,250, 1.250). Each segment renders as role="img" named "label display". color pins a segment, for example var(--accent) on the bucket that needs attention; use the flag once per bar. |
totalLabel | property only | SuiMeterTotalSuiMeterTotal | undefined | Header row: { label, value }, e.g. { label: 'Storage', value: '42 GB used' }. Property, not attribute. |
Types
SuiMeterSegment interface | |||
|---|---|---|---|
label | string | ||
value | number | ||
display? | string | ||
color? | string | ||
SuiMeterTotal interface | |||
|---|---|---|---|
label | string | ||
value | string | ||
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.
Color13
Typography1
Every name above is listed with its value and its role in Foundations.