Build: Smooth Month-to-Month Updates

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

motion.js

The small file in src/utils/ that decides how much motion a chart may use: one place for the reduced-motion rule.

ready

The promise the chart returns for its first draw, so code can wait for the animation to finish.

reduced

A chart option: true for no motion, or the person's own setting when it is left out.

stagger

A delay that grows by a small step from one row to the next, so the list appears in order.

taken back

A leaving row whose station returns before it was removed: the join matches it again and its fade-out is interrupted.

1. 1

   Slow it down

   In main.js pass { duration: 1500 } to drawStationsBar. The bars take 1.5 seconds. Past about a second the motion starts to feel slow, which is the lesson of Topic 9.2.

2. 2

   Switch the setting

   With the developer tools set to "prefers-reduced-motion: reduce", reload. The line has no reveal and the bars jump. In the first example change reduced: true to reduced: false for the right chart to see it move.

Your lumen-dashboard project after this topic. Click a file to see it in full.

// Motion rules in one place, so every chart treats "reduce motion" the same way.

/** True when the person asked their device for less motion (an accessibility setting on every major system). */
export function prefersReducedMotion() {
  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
}

/** The length of one movement in milliseconds: the base length, or 0 when motion should be reduced. */
export function ms(base, reduced = prefersReducedMotion()) {
  return reduced ? 0 : base;
}

/** The delay between neighbours so that a whole group has started within `total` ms, however many there are (never more than `cap`). */
export function stagger(count, total = 240, cap = 40) {
  return count > 1 ? Math.min(cap, total / (count - 1)) : 0;
}

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: when Tomás switches the month, the bars redraw in one frame and he cannot tell which station moved. Today that is fixed. When he switches the month from January to July, the 21 stations no longer rewrite themselves. Lantern's bar (fifth in January) slides up to first place, bars grow or shrink to their new length, the numbers count to their new values, and the four stations that opened in May fade in at the bottom. His need is met: he can say, out loud, "Lantern overtook Quay." Meera's cousin, and everyone else who has asked their device for less motion, gets the same final picture at once, with no sliding.

2. 2

   How it plugs into what exists. You start from the Phase 8 project (the tooltip, the brush and the linked bars). src/utils/motion.js is new and has three small functions: prefersReducedMotion(), ms(base) (the duration, or 0 for reduced motion) and stagger(count) (a step that keeps a group's start within 240 ms). stations-bar.js and rides-line.js import it. main.js and every other file stay as they are: the charts keep the same function names and signatures, and update now returns a promise.

3. 3

   The checks inside the charts. update is safe to call again and again: each call interrupts the previous movement and resolves its promise with false, and the last one resolves with true. A row that was still fading out when the month changed back is taken back by the join. The numbers count from the value on screen, not from the last finished one. The screen-reader text and the tooltips change at once, never half-way. The line reveals only on the first draw, clears its dashes when it ends or is interrupted, and does nothing for empty data or a single day (their path has length 0).

4. 4

   What the dashboard can do now that it could not before: follow a station across months, see the line arrive, and respect the reader's motion setting in one place. Still missing: the bars use fixed colours that do not follow the dark theme or colour-blind-safe palettes, and the line's text does not adapt to small screens (Phase 10); Canvas for very large drawings (Phase 11); maps and layouts that animate (Phase 13); React versions of the charts (Phase 14); a full screen-reader story for the changing numbers (Phase 15).

• ↔

  Moving every row on each update costs a few hundred small writes, fine for 25 rows. For thousands of rows, animate only the first screen or switch to Canvas (Phase 11).

• My project has src/utils/motion.js and the new stations-bar.js and rides-line.js.

• Switching the month slides the bars, and the four May stations fade in.

• With reduced motion emulated, the same switch is instant.

• I clicked the month quickly and saw no snapping.

• I can say what the dashboard still lacks and which phase adds it.