Charts: Extract common legend container logic into shared helper

[annacmc]

Proposed changes:

• Add shared CSS module (chart-container.module.scss) for chart container flex layout using BEM convention
• Create useLegendLayout hook to centralize chart height and margin adjustment calculations for legend positioning
• Refactor BarChart to use shared legend layout utilities, removing duplicated inline styles
• Refactor LineChart to use shared legend layout utilities, removing duplicated inline styles
• Refactor PieChart to use shared legend layout utilities, removing duplicated inline styles
• Refactor PieSemiCircleChart to use shared legend layout utilities, removing duplicated inline styles
• Refactor LeaderboardChart to use shared container layout CSS classes
• Export useLegendLayout from hooks index

This refactoring eliminates ~20 lines of duplicated legend positioning logic across 5 chart components, improving maintainability and ensuring consistent behavior.

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Does this pull request change what data or activity we track or use?

No, it does not.

Testing instructions:

Automated Tests

• Run pnpm test - all 530 tests should pass
• Run pnpm lint - no linting errors should be present

Manual Testing - Legend Positioning

For each chart type (BarChart, LineChart, PieChart, PieSemiCircleChart, LeaderboardChart):

1. Test Bottom Legend (default):

   • Set showLegend={true} and legendPosition="bottom"
   • Verify legend appears below the chart
   • Verify chart height is correctly adjusted
   • Verify no layout issues or overlap

2. Test Top Legend:

   • Set showLegend={true} and legendPosition="top"
   • Verify legend appears above the chart (using column-reverse flex direction)
   • Verify chart height is reduced by legend height
   • Verify chart margin top is increased by legend height
   • Verify no layout issues or overlap

3. Test No Legend:

   • Set showLegend={false}
   • Verify chart uses full height
   • Verify no margin adjustments applied

Visual Regression Testing

• Compare chart rendering before/after changes in Storybook
• Verify tooltips, interactive legends, and keyboard navigation still work
• Check that all chart variants (horizontal bars, with patterns, etc.) render correctly
• Ensure no visual differences in chart appearance or legend styling

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the charts-41-legends-extract-common-container-logic-into-a-shared-helper branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack charts-41-legends-extract-common-container-logic-into-a-shared-helper

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

Coverage changed in 2 files.

File	Coverage	Δ%	Δ Uncovered
projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx	81/87 (93.10%)	0.08%	0 💚
projects/js-packages/charts/src/components/line-chart/line-chart.tsx	133/141 (94.33%)	0.04%	0 💚

1 file is newly checked for coverage.

File	Coverage
projects/js-packages/charts/src/hooks/use-legend-layout.ts	6/6 (100.00%) 💚

Full summary · PHP report · JS report

[Copilot]

Pull Request Overview

This PR extracts duplicated legend positioning logic from multiple chart components into a shared helper hook and CSS module, improving code maintainability and consistency.

Key Changes:

• Created useLegendLayout hook to centralize chart height and margin calculations for legend positioning
• Added shared chart-container.module.scss for flex layout styling using BEM convention
• Refactored 5 chart components to use the shared utilities, eliminating ~20 lines of duplicated code

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
chart-container.module.scss	New shared CSS module defining flex layout classes for legend positioning
use-legend-layout.ts	New hook that calculates adjusted chart height, margin, and container class based on legend position
hooks/index.ts	Exports the new useLegendLayout hook
pie-semi-circle-chart.tsx	Refactored to use shared hook and CSS classes instead of inline styles
pie-chart.tsx	Refactored to use shared hook and CSS classes instead of inline styles
line-chart.tsx	Refactored to use shared hook and CSS classes instead of inline styles
leaderboard-chart.tsx	Refactored to use shared CSS classes for container layout
bar-chart.tsx	Refactored to use shared hook and CSS classes instead of inline styles
bar-chart.module.scss	Updated class name to use BEM convention and removed redundant display/flex-direction properties
changelog	Added changelog entry for this refactoring

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull Request Overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.