Skip to content

Add opt-in placement="block" to <Legend> (fixes #7)#21

Open
KyleKreuter wants to merge 1 commit into
Boring-Software-Inc:mainfrom
KyleKreuter:legend-block-placement
Open

Add opt-in placement="block" to <Legend> (fixes #7)#21
KyleKreuter wants to merge 1 commit into
Boring-Software-Inc:mainfrom
KyleKreuter:legend-block-placement

Conversation

@KyleKreuter

@KyleKreuter KyleKreuter commented Jul 16, 2026

Copy link
Copy Markdown

What

Adds an opt-in placement prop to <Legend>. The default "overlay" is unchanged; placement="block" renders the same legend in normal flow above the plot, so it reserves its own height and can't overlap the chart at any width.

<PieChart data={data} config={config} dataKey="v" nameKey="name" innerRadius={0.6}>
  <Legend placement="block" align="center" isClickable />
  <Pie />
</PieChart>

Closes #7.

Why

<Legend> is an absolute overlay pinned to the top of the plot, so it reserves no layout space. Past ~3 entries (or in a narrow card) flex-wrap pushes rows onto the plot, and the wrap count changes with width — a chart that looks fine at one size overlaps at another. BlockLegend already exists as a separate, config-fed component; this is the lighter Legend placement="block" the issue floated (direction 2), keeping the same composed API, chart context, and isClickable / align / hover-spotlight behavior.

How

  • legend.tsx — add placement?: "overlay" | "block" (default "overlay"); the wrapper is absolute inset-x-0 top-0 for overlay, in-flow (w-full pb-2) for block.
  • cartesian-root.tsx / polar-root.tsx — a block-placement legend routes to a flow slot: the root becomes a flex flex-col, the legend sits above a flex-1 plot area that holds the canvas/svg/overlay chrome. Pure flexbox reservation — no measurement, no feedback loop.

Non-breaking: with no block legend the flow slot is empty and the layout is identical to before. No changes to the controllers or the shared context. Most of the root diff is one level of added indentation from the new wrapper.

Tests

tests/legend-placement.test.tsx asserts the overlay legend renders inside the plot (absolute), and the block legend renders outside/above it. Full suite: 30 passing. Registry regenerated with npm run build:registry (r/core.json).

Summary by Comp AI

No blocking issues found.

Written for commit 8cd45ee. New commits will trigger a re-review. Generated by Comp AI.

@tripwire-sh

tripwire-sh Bot commented Jul 16, 2026

Copy link
Copy Markdown

passed — nothing tripped. good to merge.

View on Tripwire

@comp-ai-code-review

comp-ai-code-review Bot commented Jul 16, 2026

Copy link
Copy Markdown

Comp AI code review complete — no issues found.

Reviewed commit 8cd45ee.

Posted by Comp AI Code Reviews.

@KyleKreuter

Copy link
Copy Markdown
Author
grafik

@comp-ai-code-review comp-ai-code-review Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No blocking issues found across the changed files.

Posted by Comp AI Code Reviews.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Overlay <Legend> wraps into the plot when entries exceed one row

1 participant