HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
StatView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorOne measurement, with a label that names what it measures.StableSince 0.1.0DataUsageimport'@fusion.dev/helix/stat'import'@fusion.dev/helix-headless/stat'Preview
API ReferenceRoothelix-statOne measurement, with a label that names what it measures.
PropTypeDescriptiondirection"column-reverse"|"row"|"row-reverse"Which way the label and the value are arranged.formatOptionsIntl.NumberFormatOptionsIntl.NumberFormat options value is written with, such as
{"notation":"compact"} for 1.2M or {"style":"percent"} for 98%,
written as JSON in the attribute.localestringDefault""The locale value is written in, such as de for 1.234.567.valuenumberThe figure as a number, written with format-options in locale in
place of a slotted value.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The value.labelWhat the value measures, which also names the stat for a screen reader.trendHow the value moved, usually a Trend, read after the value inside the stat's group.unitThe unit, shown beside the value.
PartDescriptionlabelThe slot the label arrives through, drawing no box, as value does.trendThe slot the trend arrives through, drawing no box, as value does.unitThe slot the unit arrives through, drawing no box, as value does.valueThe slot the value is written in. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
CSS PropertyDescription--stat-gapSpace between the label and the value, and between the value and the unit in a row.--stat-label-colorColor of the label.--stat-label-sizeSize of the label.--stat-unit-colorColor of the unit.--stat-unit-sizeSize of the unit.--stat-value-colorColor of the figure.--stat-value-sizeSize of the figure.
Custom stateDescriptionhas-labelSomething is slotted into label.has-trendSomething is slotted into trend.has-unitSomething is slotted into unit.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Grouphelix-stat-groupA row of related measurements.
PropTypeDescriptioncolumnsnumberA fixed number of equal columns, from 2 to 6. Unset, the stats wrap as they fit.dividedbooleanDefaultfalseDraws a rule between the figures, in addition to the space.labelstringDefault""Accessible name for the group, which makes it a group.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The stats.
CSS PropertyDescription--stat-group-columnsAn explicit track list while columns is set, such as one column below a width.--stat-group-gapSpace between figures.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-statOne measurement, with a label that names what it measures.
PropTypeDescriptiondirection"column-reverse"|"row"|"row-reverse"Which way the label and the value are arranged.formatOptionsIntl.NumberFormatOptionsIntl.NumberFormat options value is written with, such as
{"notation":"compact"} for 1.2M or {"style":"percent"} for 98%,
written as JSON in the attribute.localestringDefault""The locale value is written in, such as de for 1.234.567.valuenumberThe figure as a number, written with format-options in locale in
place of a slotted value.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The value.labelWhat the value measures, which also names the stat for a screen reader.trendHow the value moved, usually a Trend, read after the value inside the stat's group.unitThe unit, shown beside the value.
PartDescriptionlabelThe slot the label arrives through, drawing no box, as value does.trendThe slot the trend arrives through, drawing no box, as value does.unitThe slot the unit arrives through, drawing no box, as value does.valueThe slot the value is written in, or the figure value writes. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
Custom stateDescriptionhas-labelSomething is slotted into label.has-trendSomething is slotted into trend.has-unitSomething is slotted into unit.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Grouphelix-headless-stat-groupA row of related measurements.
PropTypeDescriptionlabelstringDefault""Accessible name for the group, which makes it a group.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The stats.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionDirectionsA figure laid out three ways: the number above its label, in a row, and in a reversed row.PreviewFigures in a row with rules between them.PreviewFigures in a row with rules between them.TrendA figure with the trend that qualifies it, read as one group named by the label.