[Frontend] — Interactive Chart Empty and Loading States

[Olowodarey]

Problem
interactive-chart renders axes even with no data, showing a misleading empty plot.

Requirements

• Explicit loading skeleton and empty ("no data yet") states.
• Guard against single-point series that break scaling.
• Accessible summary text of the series for screen readers.
• Tests: empty and single-point inputs render safe states.

Acceptance Criteria

• The chart degrades gracefully with little or no data. Covered by tests.

Files

• frontend/src/component/ui/interactive-chart.tsx
• frontend/src/component/ui/skeleton.tsx
• frontend/src/component/ui/empty-state.tsx

[bilhokista]

I have opened #1793 for this issue.

The root cause turned out to be a single expression. Math.max() of an empty list is -Infinity, and maxValue was computed that way, so with no data the y-axis rendered the literal text -Infinity over a full set of grid lines. Three related failures came from the same place:

• An all-zero series gives a legitimate max of 0, so every bar height became (0 / 0) * 100, i.e. NaN%.
• Math.min(index, series[0]?.data.length - 1) evaluates undefined - 1 on an empty series, producing NaN as the hovered index.
• With a single point the x-axis labels resolve to indices 0, 0 and 0, printing the same label three times as though it were a range.

The PR keeps the change inside interactive-chart.tsx; skeleton.tsx and empty-state.tsx already existed and are used as they are. Three pure helpers are exported (computeMaxValue, pickAxisLabels, describeSeries) so the edge cases can be tested directly instead of through the DOM, with computeMaxValue returning null to mean "nothing to scale against".

One design decision I would like your view on: I keyed the empty state on the whole series prop rather than on the currently visible subset. Keying it on the visible subset would mean that hiding the last series from the legend replaces the card with an empty state, removing the legend needed to turn it back on. Instead the legend stays and an inline status message explains why the plot is gone. If you would rather it collapse entirely in that case, it is a small change.

Tests cover the two inputs named in the issue plus the all-zero and hidden-legend cases, and assert directly that no NaN or Infinity reaches a rendered height.