Lay out the Data Graph label and reading as one wrapping row

[mairas]

Reported over Discord against vertical graphs. It is a width problem that vertical tiles hit every time: a wide horizontal tile with a long label collided too.

The label and the reading were two independent Chart.js plugin blocks — a 32 px title at align: 'end' and a 22 px subtitle at align: 'start', forced onto one row by padding.top: -35. Neither block can see the other's width and Chart.js never clips or ellipsizes title text, so the two drew through each other whenever label + window + reading exceeded the tile. A vertical graph is normally three or four grid columns wide.

The header moves out of the canvas into the template as a flex row with flex-wrap: wrap, the label at min-width: 0 and the reading at margin-left: auto. That gives the three behaviors in order, from CSS rather than from measurement code:

• both fit → unchanged arrangement, label left and reading right on one row
• they do not fit → the reading wraps to its own row, still right-aligned
• the label alone does not fit → it ellipsizes instead of running off the widget

The window suffix now rides with the label, so Show Label off leaves no bare "(30 s)" behind — the second half of the report. The reading became a signal the template renders, which also drops a chart.options.plugins.title.text write and a chart.update from the emission path.

Verified against a production build on the mock Signal K server, measuring in the browser rather than by eye: on a 265 px header the label measures 250 px and the reading 44 px, so it wraps; on the same header a 105 px label stays on one row; a 400 px label in a 114 px box ellipsizes (scrollWidth 400 vs clientWidth 114). All four cases rendered and checked. Specs move from asserting plugin state to asserting the rendered header, plus one new case pinning that the two are siblings and both plugins are off. npm run ci green: lint, snc, 2115 tests, MCP schema.

widget-windtrends-graph uses the same overlay trick with a fixed three-character subtitle and is left alone.

VERSION stays 1.5.0 — the cycle is already open at minor level and this is a fix.

Closes #602

🤖 Generated with Claude Code

• The Data Graph header renders as a wrapping flex row.
• The label and window suffix stay together, while the reading stays right-aligned.
• The reading wraps to a second row when the tile is too narrow.
• The label uses ellipsis when space is limited.
• The window suffix hides when Show Label is disabled.
• Header colors follow the widget theme.
• The graph canvas re-layouts when the header wraps.
• Chart.js title and subtitle rendering are removed.
• Tests verify the rendered header layout and label visibility behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 9b32109e-d637-4d9b-a538-6c38a96c7c45

📥 Commits

Reviewing files that changed from the base of the PR and between f4334ff and 565dacb.

📒 Files selected for processing (4)

• src/app/widgets/widget-data-graph/widget-data-graph.component.html
• src/app/widgets/widget-data-graph/widget-data-graph.component.scss
• src/app/widgets/widget-data-graph/widget-data-graph.component.spec.ts
• src/app/widgets/widget-data-graph/widget-data-graph.component.ts

---

📝 Walkthrough

Walkthrough

The data graph now renders its label and reading in a responsive header outside the Chart.js canvas. The component uses reactive signals for header state, while CSS wrapping prevents overlap and tests validate label, reading, unit, and fallback behavior.

Changes

Data graph header

Layer / File(s)	Summary
Reactive header state src/app/widgets/widget-data-graph/widget-data-graph.component.ts	The component formats the label and time window, exposes theme colors, clears readings during rebuilds, and updates the reading signal instead of Chart.js title text.
Responsive header rendering src/app/widgets/widget-data-graph/widget-data-graph.component.html, src/app/widgets/widget-data-graph/widget-data-graph.component.scss, src/app/widgets/widget-data-graph/widget-data-graph.component.spec.ts	The template renders the header outside the canvas. Styles wrap the reading, ellipsize long labels, and preserve right alignment. Tests validate label visibility, units, fallback labels, and non-overlapping siblings.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 565da

This localized graph-header layout change has no actionable merge-blocking risk remaining and is merge-ready after normal checks and review.

Possibly related PRs

• halos-org/skip#593: This PR builds on the renamed WidgetDataGraphComponent.
• halos-org/skip#600: Both PRs modify Data Graph reading presentation.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title describes the header layout change but omits the required Conventional Commit type and scope prefix.	Rename it to a Conventional Commit, such as feat(widget-data-graph): lay out the label and reading in one wrapping row.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	For [#602], the template flex header, wrapping, ellipsis, suffix hiding, canvas re-layout, theme colors, and Chart.js plugin removal satisfy the stated requirements.
Out of Scope Changes check	✅ Passed	All changes are limited to the Data Graph template, styles, component code, and tests required by [#602]; no unrelated code path is modified.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/graph-header-layout

---

_{Comment @coderabbitai help to get the list of available commands.}