Trends screen

What this screen does

A person wants to know whether something is moving. Usually they arrive with a specific question, such as whether their resting heart rate is coming down or whether they are sleeping less than they were. Occasionally they arrive to browse.

The screen answers with a window, a direction, a magnitude and a caveat, for one metric at a time. Its defining constraint is that the chart is not the answer: the sentence under the chart is, because that is what the reader will remember and repeat. The chart is there to make the sentence checkable at a glance.

What this screen deliberately does not do. It does not draw a trend from too few points. Below the per-metric minimum it shows the readings and no line, and no direction word. It does not colour a line by whether the change is welcome: direction and valence stay separate (Trends and change). It does not correlate. Placing two metrics near each other invites a causal reading that the data does not support, so any comparison is a deliberate choice with words attached. And it does not celebrate: a caption that congratulates assumes both that the reader wanted the change and that they know why it happened.

Composition

Rungs are given by position; they are named in The ladder.

TrendsScreen                           page ground
├── Header                             page ground
│   ├── Title                          the metric, in the reader's words
│   └── MetricSelector                 one metric at a time, not a grid of charts
├── WindowControl                      page ground
│   └── …                              7 days · 30 days · 12 months, and the
│                                      window appears in the caption too
├── TrendCard                          one rung above the page
│   ├── Value                          the latest reading, formatted once
│   ├── RelativeTime                   when the window ends
│   ├── TrendSparkline
│   │   ├── Series                     category colour, constant, gaps drawn
│   │   ├── Axis                       stated baseline, never truncated
│   │   └── ReferenceBand              neutral, behind, optional, described
│   └── Caption                        what changed · over what window · what it
│                                      does not mean
├── DataTable                          page ground, always reachable
│   └── Row …                          date, value, unit. The numbers themselves
├── RelatedMetrics                     page ground
│   └── MetricTile …                   glance-level, no captions, no claims
└── MethodNote                         page ground, lowest emphasis
    └── …                              how many readings, over what period

Three composition rules this screen demonstrates:

One chart is lifted at a time. The metric in question sits a rung above the page; the related tiles sit on the ground. A screen of six equally weighted charts has no subject, and the reader supplies one by guessing.

The caption is inside the card, not under it. Chart and sentence are one artefact. If they can be screenshotted apart, they will be, and the chart travels without its caveat.

The data table is a peer, not a disclosure. It is on the page, reachable without opening anything, because for a large number of readers it is the more useful representation. Accessible charts makes the case.

Preview

Safety notes

• The minimum number of readings is enforced per metric, and below it the screen shows points with no line and no direction word. A line through three points is a claim about continuity that the measurements do not support.
• The window is in the caption, not only on the axis. Readers do not read axes, and "down 4 bpm" with no window is not a statement.
• The y-axis baseline is stable and defensible, never fitted to dramatise a small change. Chart anatomy covers it.
• Gaps are drawn as gaps. Nothing is interpolated across a missing day, and the method note says how many readings the summary is based on.
• Absolute change leads; relative change follows if at all. A percentage of a small number is how a trivial change is made to sound decisive. See Risk and statistics.
• No causal language anywhere. A trend shows association with time. Not with the new medication, the holiday, or anything else on the same axis.
• A reference band is context, not a verdict. Crossing it is a position, and the rules for saying so are in Show a value against a reference range.
• The series colour is the category's and never changes with the data. The two colour axes is the rule. If a clinical rule assigned a status, it appears in words beside the chart and does not recolour the line.

Accessibility

Landmarks and headings. One main, one H1 naming the metric. The trend, the table, related metrics and the method note are H2s.

Focus on entry. Focus lands on the main content at the heading naming the metric. Changing the metric or the window updates the caption and announces the new summary politely. It does not move focus, because a reader who has just changed a control has not asked to be relocated.

The text summary is always present. Direction, magnitude, unit, window and the number of readings, available without opening a disclosure. A reader who cannot perceive the chart loses speed and nothing else.

The data table is a real table with header cells and a caption, reachable by keyboard, and it survives being printed. A reviewer reading on paper gets numbers rather than an empty box where a canvas was.

Series are distinguishable without colour. One series per chart by default; where there are two, they are directly labelled and differ in shape. Colour independence sets it out.

No motion carries meaning. There is no draw-on animation whose completion is the signal that the data is complete. Under prefers-reduced-motion the chart is present, finished, immediately. See Reduced motion.

Contrast. The series against the ground, the points against the series, and the reference band against both, measured in both themes. Contrast conformance sets the floor.

Text at 200%. The caption and the summary stay legible and unclipped; the chart may shrink or be replaced by the table; the sentence may never be truncated. Text resizing and zoom covers it.

Touch and pointer are not the only route to a value. If reading an individual point requires hovering or dragging on the chart, the same value is in the table without gesture. See Target size and motor accessibility.

Status