Charts: Improve TimeSeriesForecastChart with composition pattern and legend props by annacmc · Pull Request #46845 · Automattic/jetpack

annacmc · 2026-01-29T23:17:22Z

Related: CHARTS-145

Note: This is PR 2 of 2 for the TimeSeriesForecastChart component. Depends on #46844. Tests and documentation are coming in a follow-up PR after this one.

Proposed changes:

Add compound composition pattern to TimeSeriesForecastChart for flexible component customization
Add full legend prop parity (showLegend, legendOrientation, legendValueDisplay, etc.)
Add i18n support for default series keys ("Historical", "Forecast")
Add useChartRegistration hook for dashboard integration
Add displayName to component for better debugging
Align forecast line dasharray with divider for visual consistency
Remove unused useChartLegendItems import
Remove redundant xAxisTickFormat wrapper

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:

Go to Storybook -> Charts -> Types -> Time Series Forecast Chart
Test compound composition by using TimeSeriesForecastChart.Legend, TimeSeriesForecastChart.SVG, TimeSeriesForecastChart.HTML subcomponents
Verify legend customization props work:
- showLegend: Toggle legend visibility
- legendOrientation: Test 'horizontal' and 'vertical' layouts
- legendValueDisplay: Test 'percentage', 'value', 'valueDisplay', 'none' options
Verify i18n: Series labels should be translatable
Verify forecast divider line style matches the forecast line dasharray
Ensure no TypeScript errors
Confirm no visual regressions

github-actions · 2026-01-29T23:18:15Z

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 add/area-chart-component branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/area-chart-component

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 · 2026-01-29T23:19:21Z

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 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!

jp-launch-control · 2026-01-29T23:33:14Z

Code Coverage Summary

No summary data is available for parent commit be4a64d, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for be4a64d is available.

Full summary · PHP report · JS report

_{Coverage check overridden by

Coverage tests to be added later
Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR
.}

…into add/area-chart-component # Conflicts: # projects/js-packages/charts/src/charts/time-series-forecast-chart/private/use-forecast-data.ts # projects/js-packages/charts/src/charts/time-series-forecast-chart/stories/config.tsx # projects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.module.scss # projects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.tsx # projects/js-packages/charts/src/charts/time-series-forecast-chart/types.ts

Copilot

Pull request overview

This PR enhances TimeSeriesForecastChart by expanding legend customization options, adding a compound composition API for extensibility, and integrating chart registration/i18n improvements for dashboard usage.

Changes:

Add compound composition support (.SVG, .HTML, and .Legend) and introduce SingleChartContext usage.
Add legend prop parity (orientation, alignment, max width, text overflow, item class, shape).
Add i18n defaults for series labels and register chart metadata via useChartRegistration.

Reviewed changes

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

File	Description
projects/js-packages/charts/src/charts/time-series-forecast-chart/types.ts	Extends public props with legend customization options and `children` for compound composition.
projects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.tsx	Implements composition API + legend prop pass-through, adds i18n defaults, and registers chart metadata.
projects/js-packages/charts/src/charts/time-series-forecast-chart/private/use-forecast-data.ts	Adjusts forecast split comment and changes y-domain calculation behavior.
projects/js-packages/charts/changelog/add-area-chart-component	Adds a changelog entry for the new composition + legend API behavior.

Copilot · 2026-01-30T04:30:15Z

...ects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.tsx

+const TimeSeriesForecastChart = attachSubComponents(
+	withResponsive< TimeSeriesForecastChartProps< unknown > >(
+		TimeSeriesForecastChartWithProvider as FC< TimeSeriesForecastChartProps< unknown > >
+	),
+	{
+		Legend,
+		SVG: ChartSVG,
+		HTML: ChartHTML,
 	}


The composition API attaches Legend, SVG, and HTML subcomponents, but the PR description/testing instructions mention a TimeSeriesForecastChart.Tooltip compound subcomponent. Either expose a Tooltip subcomponent here (and handle it via useChartChildren similarly to other compound parts) or update the PR description to match what’s actually shipped.

Copilot · 2026-01-30T04:30:15Z

projects/js-packages/charts/src/charts/time-series-forecast-chart/private/use-forecast-data.ts

 		// Add some padding to y domain (ensure minimum padding to avoid zero-height scales)
 		const yPadding = Math.max( ( maxY - minY ) * 0.1, 1 );
-		const yDomain: [ number, number ] = [ minY - yPadding, maxY + yPadding ];
+		const yDomain: [ number, number ] = [ Math.max( 0, minY - yPadding ), maxY + yPadding ];


Clamping the lower yDomain bound to 0 will break charts that legitimately contain negative values (they’ll be rendered off-scale). If the intent is only to prevent padding from pushing an all-positive series below zero, clamp conditionally (e.g., only clamp when minY >= 0), otherwise preserve negative ranges.

Suggested change

const yDomain: [ number, number ] = [ Math.max( 0, minY - yPadding ), maxY + yPadding ];

const yMinWithPadding = minY - yPadding;

const yDomain: [ number, number ] = [

minY >= 0 ? Math.max( 0, yMinWithPadding ) : yMinWithPadding,

maxY + yPadding,

];

Copilot · 2026-01-30T04:30:15Z

projects/js-packages/charts/changelog/add-area-chart-component

+Significance: minor
+Type: added
+
+TimeSeriesForecastChart: add compound composition pattern and full legend prop parity


Changelog entry doesn’t follow the repo’s changelog conventions: it should be user-facing, use imperative mood, start with a capital letter, and end with a period. Consider adjusting to something like “TimeSeriesForecastChart: Add compound composition pattern and full legend prop parity.”

Suggested change

TimeSeriesForecastChart: add compound composition pattern and full legend prop parity

TimeSeriesForecastChart: Add compound composition pattern and full legend prop parity.

Copilot · 2026-01-30T04:30:15Z

...ects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.tsx

+				</XYChart>
+
+				{ /* Render SVG children from TimeSeriesForecastChart.SVG */ }
+				{ svgChildren }
+


svgChildren extracted from TimeSeriesForecastChart.SVG are rendered outside of XYChart, but useChartChildren/ChartSVG are documented as content that should be rendered inside the chart’s SVG. As-is, SVG nodes like <g>, <line>, etc. will end up in the HTML flow (or be invalid) instead of inside the VisX SVG. Move the { svgChildren } rendering into the XYChart children tree (e.g., after the series/divider) so it renders within the chart SVG/context.

Suggested change

</XYChart>

{ /* Render SVG children from TimeSeriesForecastChart.SVG */ }

{ svgChildren }

{ /* Render SVG children from TimeSeriesForecastChart.SVG */ }

{ svgChildren }

</XYChart>

…t-component # Conflicts: # projects/js-packages/charts/src/charts/time-series-forecast-chart/private/use-forecast-data.ts # projects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.module.scss # projects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.tsx # projects/js-packages/charts/src/charts/time-series-forecast-chart/types.ts

…t-component

annacmc added 7 commits January 29, 2026 20:35

Add type definitions for TimeSeriesForecastChart

5a102bc

Add data transformation hook for forecast data splitting

89b33a0

Add forecast divider component

c6d6be0

Add TimeSeriesForecastChart component with styles

96845d0

Add TimeSeriesForecastChart exports to package

324f32b

Add TimeSeriesForecastChart Storybook stories

628f8d8

Add changelog entry for TimeSeriesForecastChart component

db32d18

annacmc added the [Status] Needs Review This PR is ready for review. label Jan 29, 2026

annacmc self-assigned this Jan 29, 2026

annacmc added the [Status] Needs Review This PR is ready for review. label Jan 29, 2026

github-actions bot added [JS Package] Charts RNA labels Jan 29, 2026

github-actions bot added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels Jan 29, 2026

annacmc mentioned this pull request Jan 30, 2026

Charts: Add TimeSeriesForecastChart component #46817

Closed

annacmc changed the title ~~Improve TimeSeriesForecastChart with composition pattern and legend props~~ Charts: Improve TimeSeriesForecastChart with composition pattern and legend props Jan 30, 2026

annacmc added the Enhancement Changes to an existing feature — removing, adding, or changing parts of it label Jan 30, 2026

annacmc marked this pull request as draft January 30, 2026 00:38

annacmc removed the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Jan 30, 2026

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 Jan 30, 2026

annacmc added the Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR label Jan 30, 2026

github-actions bot added the [Status] In Progress label Jan 30, 2026

annacmc added 5 commits January 30, 2026 11:53

Address Copilot review feedback

767b628

Add i18n to TimeSeriesForecastChart default series keys

642e619

Remove unused useChartLegendItems from TimeSeriesForecastChart

d8c19f3

Align forecast line dasharray with divider for visual consistency

a31a47f

Add legend prop types to TimeSeriesForecastChartProps

e2868ab

annacmc added 7 commits January 30, 2026 13:14

Add data transformation hook for forecast data splitting

48ee13b

Add forecast divider component

ffa8e08

Add TimeSeriesForecastChart component with styles

a0ec5b9

Add TimeSeriesForecastChart exports to package

c564af0

Add TimeSeriesForecastChart Storybook stories

ff05163

Add changelog entry for TimeSeriesForecastChart component

a25de79

Address Copilot review feedback

6c926a5

annacmc force-pushed the add/time-series-forecast-chart branch from 767b628 to 6c926a5 Compare January 30, 2026 02:15

annacmc added 6 commits January 30, 2026 13:32

Fix TimeSeriesForecastChart API consistency and minor issues

1e081b5

Address Copilot feedback on array concat and RTL padding

b30f774

Fix tooltip snapping to band instead of data lines

a3c249e

Fix tooltip to work across all data points using hidden series

cb85ab5

Add missing allPoints property in empty data case

5bd77ea

annacmc marked this pull request as ready for review January 30, 2026 04:25

annacmc requested a review from Copilot January 30, 2026 04:25

Copilot started reviewing on behalf of annacmc January 30, 2026 04:26 View session

Copilot AI reviewed Jan 30, 2026

View reviewed changes

annacmc and others added 2 commits January 30, 2026 16:12

Add TimeSeriesForecast Chart to changelog

f0e5b67

Address Copilot review feedback

43ea4ce

annacmc requested review from AnnaMag, adamwoodnz, grzegorz-cp and kangzj January 30, 2026 07:07

annacmc force-pushed the add/time-series-forecast-chart branch from bc9caef to 5ec636d Compare February 17, 2026 02:58

github-actions bot added the [Tests] Includes Tests label Feb 17, 2026

annacmc changed the base branch from add/time-series-forecast-chart to add/time-series-forecast-chart-docs February 17, 2026 09:33

annacmc added 2 commits February 17, 2026 20:33

Merge branch 'add/time-series-forecast-chart-docs' into add/area-char…

0fa1697

…t-component

Remove duplicate typesVersions entry in package.json

41c2314

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Charts: Improve TimeSeriesForecastChart with composition pattern and legend props#46845

Charts: Improve TimeSeriesForecastChart with composition pattern and legend props#46845
annacmc wants to merge 36 commits intoadd/time-series-forecast-chart-docsfrom
add/area-chart-component

annacmc commented Jan 29, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 29, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 29, 2026 •

edited

Loading

Uh oh!

jp-launch-control bot commented Jan 29, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-		const yDomain: [ number, number ] = [ Math.max( 0, minY - yPadding ), maxY + yPadding ];
+		const yMinWithPadding = minY - yPadding;
+		const yDomain: [ number, number ] = [
+			minY >= 0 ? Math.max( 0, yMinWithPadding ) : yMinWithPadding,
+			maxY + yPadding,
+		];

	TimeSeriesForecastChart: add compound composition pattern and full legend prop parity
	TimeSeriesForecastChart: Add compound composition pattern and full legend prop parity.

Conversation

annacmc commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

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

Testing instructions:

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

annacmc commented Jan 29, 2026 •

edited

Loading

github-actions bot commented Jan 29, 2026 •

edited

Loading

github-actions bot commented Jan 29, 2026 •

edited

Loading

jp-launch-control bot commented Jan 29, 2026 •

edited

Loading