HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TrendView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorAn indicator that shows which way a measurement moved, and whether the change is good.StableSince 0.1.0ChartsUsageimport'@fusion.dev/helix/trend'import'@fusion.dev/helix-headless/trend'Preview
API ReferenceRoothelix-trendAn indicator that shows which way a measurement moved, and whether the change is good.
PropTypeDescriptionbetterLabelstringDefault"better"The word read out after the direction when the move is an improvement,
{betterLabel} in judgment-label.colorBy"judgment"|"movement"What the color says: judgment, success or danger by good, or
movement, --helix-color-rise for a move up and --helix-color-fall
for a move down.direction"down"|"neutral"|"up"Which way the measurement moved, as movement says it.downLabelstringDefault"Down"The word read out for a move down.formatOptionsIntl.NumberFormatOptionsIntl.NumberFormat options value is written with, as React Aria's
NumberField takes them: a percent, a currency, a unit or a number of
decimals. Written as JSON in the attribute.good"down"|"up"Which movement counts as an improvement for this metric.judgmentLabelstringDefault"{judgment, select, better {{direction}, {betterLabel}} worse {{direction}, {worseLabel}} other {{direction}}}"What the direction part says. {direction} is the word for the
movement, up-label, down-label or unchanged-label, and
{judgment} is better or worse where good judges the move, so a
language whose words agree with the movement writes each phrase whole:
{judgment, select, better {...} worse {...} other {...}}.
{betterLabel} and {worseLabel} are better-label and worse-label.localestringDefault""The locale the words and value are in, such as de for 1.234,5.movement"down"|"neutral"|"up"Which way the measurement moved.unchangedLabelstringDefault"Unchanged"The word read out for no move, or for a direction that is not one of the
three.upLabelstringDefault"Up"The word read out for a move up.valuenumberThe change as a signed number, such as 0.12 or -8, which sets the
movement by its sign and is written as the metric.worseLabelstringDefault"worse"The word read out after the direction when the move is a setback,
{worseLabel} in judgment-label.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The metric that moved. Not needed with value, which writes it.down-iconReplaces the arrow while movement is down. Hidden from screen readers.iconReplaces the arrow for every movement, such as with a glyph of your own set. Hidden from screen readers, since the movement is also a word.labelThe period the metric moved over.neutral-iconReplaces the bar while the trend has not moved. Hidden from screen readers.up-iconReplaces the arrow while movement is up. Hidden from screen readers.
PartDescriptiondirectionThe movement as a word, for people who cannot see the arrow.iconThe arrow.valueThe change written from value, hidden while value is no number.
CSS PropertyDescription--trend-better-colorColor of a move that good says is an improvement.--trend-colorColor of the arrow and the metric. Setting it overrides the color that good or color-by sets.--trend-down-colorColor of a move down under color-by="movement".--trend-gapSpace between the arrow, the metric and the label.--trend-icon-sizeSize of the arrow, or of a glyph in one of the icon slots.--trend-label-colorColor of the label.--trend-neutral-colorColor of a trend that did not move, or of one that good does not judge while the color follows the judgment.--trend-up-colorColor of a move up under color-by="movement".--trend-worse-colorColor of a move that good says is a setback.
Custom stateDescriptionbetterThe trend moved the way good names.downThe trend moved down, as movement, the old direction, or the sign of value says.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.upThe trend moved up, as movement, the old direction, or the sign of value says.worseThe trend moved against the way good names.
Roothelix-headless-trendAn indicator that shows which way a measurement moved, and whether the change is good.
PropTypeDescriptionbetterLabelstringDefault"better"The word read out after the direction when the move is an improvement,
{betterLabel} in judgment-label.direction"down"|"neutral"|"up"Which way the measurement moved, as movement says it.downLabelstringDefault"Down"The word read out for a move down.formatOptionsIntl.NumberFormatOptionsIntl.NumberFormat options value is written with, as React Aria's
NumberField takes them: a percent, a currency, a unit or a number of
decimals. Written as JSON in the attribute.good"down"|"up"Which movement counts as an improvement for this metric.judgmentLabelstringDefault"{judgment, select, better {{direction}, {betterLabel}} worse {{direction}, {worseLabel}} other {{direction}}}"What the direction part says. {direction} is the word for the
movement, up-label, down-label or unchanged-label, and
{judgment} is better or worse where good judges the move, so a
language whose words agree with the movement writes each phrase whole:
{judgment, select, better {...} worse {...} other {...}}.
{betterLabel} and {worseLabel} are better-label and worse-label.localestringDefault""The locale the words and value are in, such as de for 1.234,5.movement"down"|"neutral"|"up"Which way the measurement moved.unchangedLabelstringDefault"Unchanged"The word read out for no move, or for a direction that is not one of the
three.upLabelstringDefault"Up"The word read out for a move up.valuenumberThe change as a signed number, such as 0.12 or -8, which sets the
movement by its sign and is written as the metric.worseLabelstringDefault"worse"The word read out after the direction when the move is a setback,
{worseLabel} in judgment-label.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The metric that moved. Not needed with value, which writes it.down-iconReplaces the arrow while movement is down. Hidden from screen readers.iconReplaces the arrow for every movement, such as with a glyph of your own set. Hidden from screen readers, since the movement is also a word.labelThe period the metric moved over.neutral-iconReplaces the bar while the trend has not moved. Hidden from screen readers.up-iconReplaces the arrow while movement is up. Hidden from screen readers.
PartDescriptiondirectionThe movement as a word, for people who cannot see the arrow.iconThe arrow.valueThe change written from value, hidden while value is no number.
Custom stateDescriptionbetterThe trend moved the way good names.downThe trend moved down, as movement, the old direction, or the sign of value says.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.upThe trend moved up, as movement, the old direction, or the sign of value says.worseThe trend moved against the way good names.
Examples
NameDescriptionGood DirectionThe same fall three times, shown as unjudged, good news, and bad news by good.MarketPrices colored by which way they moved, in a market that draws a rise in red and a fall in green.PreviewRises and falls judged as good and bad, in all four combinations.PreviewRises and falls judged as good and bad, in all four combinations.ValueTrends given the change as a number in value, which sets the movement by its sign and writes the figure with format-options.