A forecast dashboard should show what is known, and when

01 / Put three times beside the value

A number needs context: when the forecast was issued, which time it describes, and when the interface refreshed. A recent HTTP response may still contain an old forecast. Put the unit and product type beside the value rather than hiding them in a tooltip.

Observation, forecast and reanalysis need separate labels. If a demo uses synthetic data, place that label beside the chart. A chart with a continuous curve should not silently connect periods where the source is unavailable.

02 / An explicit response contract

This synthetic JSON illustrates field names only. Its timestamps and values are not actual observations or forecasts. A real response also needs a schema version and server-side validation.

{
  "schema_version": 1,
  "site_id": "demo-site",
  "product": "forecast",
  "issued_at": "2026-11-05T00:00:00Z",
  "valid_at": "2026-11-05T01:00:00Z",
  "fetched_at": "2026-11-05T00:05:00Z",
  "value": null,
  "unit": "MW",
  "status": "unavailable",
  "reason": "source_delayed"
}

03 / Changing a site also changes the request scope

When a reader moves from site A to site B, invalidate A’s pending request before rendering B. Check site, product, horizon and request generation before writing a response. AbortController can reduce work, but ownership checks still protect against late responses.

If retaining an older curve during refresh, label it with its original site and issue time. Do not display an old A curve under a new B title. A loading skeleton is often clearer when context has changed.

04 / Useful states and useful motion

• Loading: reserve chart height and preserve keyboard focus. Empty: explain that the time range has no records. Error: offer a retry without discarding the chosen site.
• Stale or partial: show the source and delay, and distinguish a partial response from a complete result. Missing values remain null instead of becoming zero.
• Use a short transition to explain a changed filter; respect reduced-motion settings. A textual summary and a small table make the chart usable without color or animation.

05 / The checks I would run first

Proposed checks: delay A until after B; return an old issue time in a fresh response; omit part of the series; change the horizon during loading; navigate by keyboard at phone width. The expected result should be written before the implementation.

A reliable display can help users inspect evidence. It cannot establish forecast accuracy by itself; that requires the separate evaluation protocol and prediction records.