Update/charts 52 barchart revision #44515

annacmc · 2025-07-29T12:25:09Z

Fixes #

Proposed changes:

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)?

Jetpack product discussion

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

Testing instructions:

Go to '..'

github-actions · 2025-07-29T12:26:00Z

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 update/charts-52-barchart-revision branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/charts-52-barchart-revision

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 · 2025-07-29T12:26:06Z

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:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
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!

Copilot

Pull Request Overview

This pull request implements a composition API for the BarChart component, allowing for cleaner syntax when adding legends using child components (e.g., <BarChart.Legend />). The changes maintain backward compatibility while providing a more modern and flexible approach to chart configuration.

Introduces a composition API that enables <BarChart.Legend /> syntax instead of prop-based legend configuration
Adds chart ID context providers for automatic data sharing between parent charts and child components
Maintains full backward compatibility with existing prop-based legend APIs

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
create-chart-composition.ts	Utility function for attaching subcomponents to create composition API
chart-id-context.tsx	Context provider for sharing chart IDs between parent and child components
chart-legend.tsx	New ChartLegend component that works with composition API
bar-chart.tsx	Updated to support composition API with ChartLegend as a subcomponent
*.test.tsx	Test coverage for composition API functionality
legend.stories.tsx	Updated Storybook examples showcasing both composition and legacy APIs

Comments suppressed due to low confidence (1)

projects/js-packages/charts/src/components/bar-chart/test/bar-chart.test.tsx:462

The test expectation has changed from '1/1/2024' to 'Custom: 01/01/2024', but this change is not explained in the PR description and appears unrelated to the composition API implementation. This could indicate an unintended side effect or should be documented as a separate change.

			expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( 'Custom: 01/01/2024' );

Copilot · 2025-07-29T12:37:30Z

projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx

@@ -30,7 +37,7 @@ const validateData = ( data: SeriesData[] ) => {

 	const hasInvalidData = data.some( series =>
 		series.data.some(
-			point =>
+			( point: DataPointDate ) =>


[nitpick] The explicit type annotation for the point parameter is redundant since TypeScript can infer this from the series.data.some() context. This change appears unrelated to the composition API feature being added.

Suggested change

( point: DataPointDate ) =>

( point ) =>

Copilot · 2025-07-29T12:37:31Z

projects/js-packages/charts/src/components/legend/chart-legend.tsx

+	const contextChartId = useChartIdFromContext();
+
+	// Use provided chartId, fall back to context chartId
+	const effectiveChartId = props.chartId || contextChartId;


The fallback logic uses || which will use contextChartId even if props.chartId is an empty string. Consider using nullish coalescing (??) if you want to distinguish between explicitly passed empty strings and undefined values.

Suggested change

const effectiveChartId = props.chartId || contextChartId;

const effectiveChartId = props.chartId ?? contextChartId;

jp-launch-control · 2025-07-29T12:48:39Z

Code Coverage Summary

Coverage changed in 3 files.

File	Coverage	Δ%	Δ Uncovered
projects/js-packages/charts/src/components/legend/base-legend.tsx	15/15 (100.00%)	0.00%	0 💚
projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx	76/81 (93.83%)	1.62%	-1 💚
projects/js-packages/charts/src/components/legend/legend.tsx	9/9 (100.00%)	12.50%	-1 💚

3 files are newly checked for coverage.

File	Coverage
projects/js-packages/charts/src/components/legend/chart-legend.tsx	5/5 (100.00%) 💚
projects/js-packages/charts/src/providers/chart-context/chart-id-context.tsx	6/6 (100.00%) 💚
projects/js-packages/charts/src/utils/create-chart-composition.ts	4/4 (100.00%) 💚

Full summary · PHP report · JS report

annacmc · 2025-08-11T03:58:01Z

Closing this up in favour of the progress happening in #44691

annacmc added 10 commits July 29, 2025 22:00

Add ChartIdProvider for chart composition API

3325b76

Add utility for creating chart composition API

7fced9b

Add ChartLegend component for composition API

508ddb0

Add displayName to legend components

cebd310

Export ChartLegend from legend module

7c94f9b

Export ChartIdProvider from chart-context

c023185

Add composition API to BarChart component

6de5ad7

Add composition API tests for BarChart

53cbf40

Fix tooltip test expectation in line-chart

9d1ac15

changelog

50a3181

github-actions bot added [JS Package] Charts [Status] In Progress [Tests] Includes Tests RNA labels Jul 29, 2025

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Jul 29, 2025

revert unintentional change to linechart tests

312faf1

annacmc requested a review from Copilot July 29, 2025 12:36

Copilot AI reviewed Jul 29, 2025

View reviewed changes

annacmc self-assigned this Jul 30, 2025

Fix TypeScript displayName error for withResponsive HOC

3fd724e

kangzj mentioned this pull request Aug 8, 2025

Charts: Add composition Legend for Line Chart #44691

Merged

3 tasks

annacmc closed this Aug 11, 2025

github-actions bot removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. [Status] In Progress labels Aug 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update/charts 52 barchart revision #44515

Update/charts 52 barchart revision #44515

Uh oh!

annacmc commented Jul 29, 2025

Uh oh!

github-actions bot commented Jul 29, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 29, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 29, 2025

Uh oh!

Copilot AI Jul 29, 2025

Uh oh!

jp-launch-control bot commented Jul 29, 2025 •

edited

Loading

Uh oh!

annacmc commented Aug 11, 2025

Uh oh!

Uh oh!

	const effectiveChartId = props.chartId \|\| contextChartId;
	const effectiveChartId = props.chartId ?? contextChartId;

Update/charts 52 barchart revision #44515

Update/charts 52 barchart revision #44515

Uh oh!

Conversation

annacmc commented Jul 29, 2025

Proposed changes:

Other information:

Jetpack product discussion

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

Testing instructions:

Uh oh!

github-actions bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

jp-launch-control bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

annacmc commented Aug 11, 2025

Uh oh!

Uh oh!

github-actions bot commented Jul 29, 2025 •

edited

Loading

github-actions bot commented Jul 29, 2025 •

edited

Loading

jp-launch-control bot commented Jul 29, 2025 •

edited

Loading