Skip to content
EspañolEnglish
All components (204)

Trend

Surfaces · Trend

What it is and when to use it

The small line of a dashboard: how something has gone over the last seven days. What matters is not the drawing, it is that it is not a mute drawing: it carries a written summary and, below it, a real data table.

When to use it

  • Next to a figure (Stat) to show the shape: whether it goes up, goes down, or stays the same.
  • points names each value (days, months) in the table; without it, they are numbered.
  • format writes the values your own way (euros, units); by default, the number in the active language.
  • tableVisible also shows the table, for those who prefer to read the numbers.
  • padding shades below the line; markLast (on by default) marks the last value with a dot.

When not to

  • Comparing categories or reading exact values: BarChart.
  • The split of a total: DonutChart.
  • Day-by-day activity over a whole year: ActivityMap.

Keyboard: it is not focusable.

Accessibility: the drawing is role="img" and is named with the label and a written summary ("From 120 to 180: goes up by 50%. Minimum 96, maximum 180."). Below there is a table with caption and row and column headers, always available to the screen reader and hidden from view except with tableVisible. The visible label, if needed, is provided by whoever places it. With all values equal the line runs through the middle: a streak with no change is not a maximum.

Fine-tuning: no variables of its own: it is adjusted with the classes amset-trend and amset-trend--<tone>. The line, the fill and the dot use currentColor. The width is set by the container; the height, by height (40 px by default).

Context: without format, numbers are written in the language of LocaleProvider (or AmsetProvider).

What it looks like

This week's ordersFrom 18 to 36: goes up by 100%. Minimum 18, maximum 42.
This week's orders
PointValue
Mon 518
Tue 622
Wed 719
Thu 827
Fri 931
Sat 1042
Sun 1136
Sales this weekFrom 1240 € to 1860 €: goes up by 50%. Minimum 1180 €, maximum 1860 €.
Sales this week
PointValue
Mon 51240 €
Tue 61180 €
Wed 71390 €
Thu 81310 €
Fri 91520 €
Sat 101740 €
Sun 111860 €
Returns this weekFrom 3 to 8: goes up by 167%. Minimum 2, maximum 8.
Returns this week
PointValue
Mon 53
Tue 62
Wed 74
Thu 83
Fri 95
Sat 107
Sun 118

<Trend label="This week's orders" values={[18, 22, 19, 27, 31, 42, 36]} points={dias} markLast />
<Trend label="Sales this week" values={ventas} format={enEuros} padding tone="success" />
<Trend label="Returns this week" values={[3, 2, 4, 3, 5, 7, 8]} tone="error" />

Props

Import it with import { Trend } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
labelrequiredstringWhat is being measured. Required: a line without a name says nothing.
valuesrequiredreadonly number[]—
classNamestringMerged with the library classes; it does not replace them.
format(value: number) => stringHow values are written. By default, the number in the active language.
heightnumber—
markLastbooleanA thick dot on the last value.
paddingbooleanShades below the line.
pointsreadonly string[]What each point is called (dates, months). It appears in the data table.
tableVisiblebooleanAlso shows the table. For the screen reader it is always there.
tone"neutral" | "accent" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error"The color of the line. `neutral` is the gray of the secondary ink. Defaults to `accent`.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: