52 lines
2.6 KiB
Markdown
52 lines
2.6 KiB
Markdown
# 111 — Legend must scroll instead of overflowing the panel
|
|
|
|
## Summary
|
|
|
|
`PanelChart`'s recharts `<Legend>` (`webapp/src/components/
|
|
PanelChart.tsx:134`, `:190`) has no height constraint or scroll
|
|
container. A panel with many series (e.g. a high-cardinality PromQL
|
|
query, or the post-`squashRows` `MAX_KEPT_SERIES` = 7 kept rows plus
|
|
"Other") wraps the legend across as many lines as it needs, growing
|
|
the panel's rendered height and pushing surrounding dashboard layout
|
|
around rather than staying within the chart's fixed footprint.
|
|
|
|
## Where
|
|
|
|
- `webapp/src/components/PanelChart.tsx:117`, `:154`, `:176` — each
|
|
chart type wraps its `<ResponsiveContainer>` at a fixed `height={220}`,
|
|
but the `<Legend>` inside it (`:134`, `:190`) isn't given its own
|
|
bounded, scrollable region — recharts lays it out in the space left
|
|
after the plot area, which can push the container's effective
|
|
rendered height past 220 when the legend wraps to multiple rows.
|
|
- `webapp/src/components/Dashboards.tsx:46-92` (`PanelPreview`) is the
|
|
only caller of `PanelChart` today — worth checking that whatever
|
|
fixed-height/scroll wrapper gets added here doesn't fight with
|
|
`PanelPreview`'s own loading/error states (`:85-90`), which render
|
|
outside `PanelChart` at a different fixed height (`h-48`).
|
|
|
|
## Direction
|
|
|
|
- recharts' `<Legend>` supports a `wrapperStyle` prop (already used
|
|
for `fontSize`, `:134`/`:190`) — extending it with a fixed
|
|
`maxHeight` and `overflowY: 'auto'` is the natural fix and avoids
|
|
building a custom legend renderer just for this.
|
|
- Verify this doesn't conflict with the click-to-focus work in
|
|
[[110-legend-click-to-focus-series]] — that ticket also touches the
|
|
`<Legend>` props (`onClick`, `formatter`) on these same two call
|
|
sites, so land whichever lands second by rebasing onto the other's
|
|
`<Legend>` props rather than both independently restructuring it.
|
|
- Decide a concrete max height (e.g. two or three legend rows' worth)
|
|
that keeps the panel's total footprint predictable in a dashboard
|
|
grid; check `Dashboards.tsx`'s panel grid/card layout for whatever
|
|
existing panel height convention should inform the number.
|
|
|
|
## Scope
|
|
|
|
- Line and pie charts only, matching where `<Legend>` already
|
|
renders — same boundary as [[110-legend-click-to-focus-series]].
|
|
- Out of scope: virtualizing the legend list for very large series
|
|
counts — `squashRows` (`PanelChart.tsx:50-57`) already caps bar/pie
|
|
series at `MAX_KEPT_SERIES` (7) + "Other", and line charts have no
|
|
equivalent cap today, but adding one is a separate concern from
|
|
making the legend scrollable.
|