Charts: Add TimeSeriesForecastChart component by annacmc · Pull Request #46844 · Automattic/jetpack

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

Related: CHARTS-145

Note: Testes & Docs added for this in followup #47152

Proposed changes:

Add new TimeSeriesForecastChart component for visualizing time series data with forecast periods
Add type definitions for forecast chart props and data structures
Add useForecastData hook for splitting data into historical and forecast segments
Add ForecastDivider component to visually separate historical from forecast data
Add SCSS styles for forecast-specific visual treatments (dashed lines, opacity changes)
Export component and types from the charts package
Add comprehensive Storybook stories demonstrating various configurations

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:

Checkout add/time-series-forecast-chart branch
Navigate to /jetpack/projects/js-packages/storybook
Run pnpm run storybook:dev
It will tell you which port it's running on, eg. http://localhost:50240/ and it should also auto load storybook into your browser
Go to Storybook -> Charts -> Types -> Time Series Forecast Chart
Verify the chart renders with both historical (solid) and forecast (dashed) line segments
Test the forecast divider appears at the correct date boundary
Test with different forecastStartDate values to ensure proper data splitting
Verify legend displays both "Historical" and "Forecast" series
Test responsive behavior at various container widths
Verify tooltips work correctly for both historical and forecast data points
Ensure no TypeScript errors in the component or stories

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

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

bin/jetpack-downloader test jetpack add/time-series-forecast-chart

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:18:07Z

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!

Copilot

Pull request overview

This PR adds a new TimeSeriesForecastChart component to the charts package for visualizing time series data with forecast periods and uncertainty bands. The component provides a generic, type-safe way to display historical data alongside forecasted values with optional confidence intervals.

Changes:

New chart component with support for historical and forecast data visualization
Data transformation hook to split and process time series data
Comprehensive Storybook stories demonstrating various use cases
Package exports configuration for the new component

Reviewed changes

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

Show a summary per file

File	Description
projects/js-packages/charts/src/index.ts	Exports the new TimeSeriesForecastChart component and its types
projects/js-packages/charts/src/charts/time-series-forecast-chart/types.ts	Type definitions for the component including props, accessors, and data structures
projects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.tsx	Main component implementation with responsive wrapper
projects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.module.scss	Component styling including tooltip, legend, and animation styles
projects/js-packages/charts/src/charts/time-series-forecast-chart/stories/index.stories.tsx	Storybook stories showcasing different configurations and use cases
projects/js-packages/charts/src/charts/time-series-forecast-chart/stories/config.tsx	Story configuration, sample data, and helper functions
projects/js-packages/charts/src/charts/time-series-forecast-chart/private/use-forecast-data.ts	Data transformation hook that splits data into historical/forecast portions
projects/js-packages/charts/src/charts/time-series-forecast-chart/private/index.ts	Internal exports for private utilities
projects/js-packages/charts/src/charts/time-series-forecast-chart/private/forecast-divider.tsx	Visual divider component marking the forecast start point
projects/js-packages/charts/src/charts/time-series-forecast-chart/index.ts	Public exports for the chart component and types
projects/js-packages/charts/package.json	Package exports configuration for the new component
projects/js-packages/charts/changelog/add-time-series-forecast-chart	Changelog entry documenting the new feature

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

...packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.module.scss

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

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

projects/js-packages/charts/src/charts/time-series-forecast-chart/private/forecast-divider.tsx

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

jp-launch-control · 2026-01-29T23:32:57Z

Code Coverage Summary

6 files are newly checked for coverage. Only the first 5 are listed here.

File	Coverage
projects/js-packages/charts/src/charts/time-series-forecast-chart/private/forecast-divider.tsx	0/10 (0.00%) 💔
projects/js-packages/charts/src/charts/time-series-forecast-chart/private/use-forecast-data.ts	0/27 (0.00%) 💔
projects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.tsx	0/70 (0.00%) 💔
projects/js-packages/charts/src/charts/time-series-forecast-chart/index.ts	0/0 (—%) 🤷

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
.}

Copilot

Pull request overview

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

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

...packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.module.scss

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

Copilot

Pull request overview

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

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

…Chart

…ecastChart

annacmc · 2026-02-17T03:08:08Z

Thanks so much for taking a look @adamwoodnz ! I have addressed your comments inline.

It would be great to have some docs generated as part of this, and an API reference. I know you have a follow up PR in progress but I don't see docs in that either

Yep totally. I think this PR (and the followup) are just a bit big, so creating another PR right now to generate docs + API reference.

That PR is here: #47152

adamwoodnz · 2026-02-19T04:36:42Z

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

+	const { color: bandColor } = getElementStyles( {
+		index: 1,
+		data: { group: 'primary', label: seriesKeys.band, data: [] },
+	} );
+	const { lineStyles: forecastLineStyles, shapeStyles: forecastShapeStyles } = getElementStyles( {
+		index: 1,
+		data: { group: 'primary', label: seriesKeys.forecast, data: [], options: {} },
+	} );


I think these could be combined? Not sure if the label makes any difference...

Suggested change

const { color: bandColor } = getElementStyles( {

index: 1,

data: { group: 'primary', label: seriesKeys.band, data: [] },

} );

const { lineStyles: forecastLineStyles, shapeStyles: forecastShapeStyles } = getElementStyles( {

index: 1,

data: { group: 'primary', label: seriesKeys.forecast, data: [], options: {} },

} );

const { color: bandColor, lineStyles: forecastLineStyles, shapeStyles: forecastShapeStyles } = getElementStyles( {

index: 1,

data: { group: 'primary', label: seriesKeys.band, data: [] },

} );

adamwoodnz · 2026-02-19T04:38:23Z

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

+	// Create mock series data for theme hook
+	const mockSeriesData = useMemo(
+		() => [
+			{ label: seriesKeys.historical, data: [] },
+			{ label: seriesKeys.forecast, data: [] },
+		],
+		[ seriesKeys ]
+	);
+	const theme = useXYChartTheme( mockSeriesData );


?

Code smell - why do we need a mock in production code?

adamwoodnz · 2026-02-19T04:59:41Z

The tooltip box shadow needs to fade to transparent, it's currently fading to white, which is visible over the background and chart elements

adamwoodnz · 2026-02-20T03:05:30Z

projects/js-packages/charts/src/charts/time-series-forecast-chart/stories/index.stories.tsx

+export const CustomYDomain: StoryObj< StoryArgs > = Template.bind( {} );
+CustomYDomain.args = {
+	...timeSeriesForecastChartStoryArgs,
+	yDomain: [ 0, 200 ],
+};
+
+CustomYDomain.parameters = {
+	docs: {
+		description: {
+			story: 'Override the auto-calculated Y domain with a fixed range using the yDomain prop.',
+		},
+	},
+};


This story displays exactly the same as the Default story. I see the instruction to alter the yDomain prop, but I think it should be set differently from Default, otherwise it's not clear what effect it has.

adamwoodnz · 2026-02-20T03:09:35Z

projects/js-packages/charts/src/charts/time-series-forecast-chart/stories/index.stories.tsx

+				story: 'Different grid visibility options: y (default), x, xy, or none.',
+			},
+		},
+	},


Best to make the container taller for this so that the story isn't cut off

Suggested change

},

},

args: {

containerHeight: 600,

},

adamwoodnz · 2026-02-20T03:11:30Z

projects/js-packages/charts/src/charts/time-series-forecast-chart/stories/index.stories.tsx

+					'The chart supports generic data types via accessor functions. ' +
+					'This example uses a custom datum shape with timestamp (number) instead of Date, ' +
+					'and differently named fields for values and bounds.',


Why is this being concatenated?

adamwoodnz · 2026-02-20T03:13:59Z

projects/js-packages/charts/src/charts/time-series-forecast-chart/stories/index.stories.tsx

+/**
+ * Legend at Top
+ */
+export const LegendAtTop: StoryObj< StoryArgs > = Template.bind( {} );


Vertical legend orientation doesn't seem to work

adamwoodnz · 2026-02-20T03:14:34Z

...packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.module.scss

+	}
+
+	svg {
+		overflow: visible;


Is this for tooltips?

adamwoodnz · 2026-02-20T03:21:34Z

projects/js-packages/charts/src/charts/time-series-forecast-chart/types.ts

+/**
+ * Main component props (generic over datum type D)
+ */
+export interface TimeSeriesForecastChartProps< D > {


I think this should extend BaseChartProps like other charts

adamwoodnz · 2026-02-20T03:22:36Z

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

+	const providerTheme = useGlobalChartsTheme();
+	const { getElementStyles } = useGlobalChartsContext();


Suggested change

const providerTheme = useGlobalChartsTheme();

const { getElementStyles } = useGlobalChartsContext();

const { getElementStyles, theme: providerTheme } = useGlobalChartsContext();

adamwoodnz

Second pass done 🙂

A bit of cleanup to do. The only major is the resizing behaviour still isn't right.

kangzj · 2026-03-02T21:57:47Z

Screenshots from Visual Testing

1. Default Story

Chart renders with historical (solid line) and forecast (dashed line) segments:

2. With Legend

Legend displays "Historical" and "Forecast" series labels:

3. Fixed Dimensions

Chart respects explicit width/height props (600x300):

4. Empty Data

Proper handling with "No data available" message:

5. Tooltip Functionality

Tooltips work correctly across all data points:

adamwoodnz · 2026-03-17T03:58:48Z

Noting that we have a shared ChartLayout component for charts which support legends now, see #47554

Copilot AI review requested due to automatic review settings January 29, 2026 23:17

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

annacmc self-assigned this Jan 29, 2026

annacmc mentioned this pull request Jan 29, 2026

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

Open

3 tasks

Copilot started reviewing on behalf of annacmc January 29, 2026 23:17 View session

github-actions bot added [JS Package] Charts RNA [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

Copilot AI reviewed Jan 29, 2026

View reviewed changes

annacmc mentioned this pull request Jan 30, 2026

Charts: Add TimeSeriesForecastChart component #46817

Closed

annacmc changed the title ~~Add TimeSeriesForecastChart component~~ Charts: Add TimeSeriesForecastChart component 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 [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 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

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

annacmc requested a review from Copilot January 30, 2026 02:16

Copilot started reviewing on behalf of annacmc January 30, 2026 02:16 View session

Copilot AI reviewed Jan 30, 2026

View reviewed changes

annacmc requested a review from Copilot January 30, 2026 03:33

Copilot started reviewing on behalf of annacmc January 30, 2026 03:33 View session

Copilot AI reviewed Jan 30, 2026

View reviewed changes

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

Copilot AI mentioned this pull request Jan 30, 2026

Add missing allPoints property in useForecastData empty data case #46848

Closed

annacmc requested a review from adamwoodnz January 30, 2026 05:43

annacmc added 12 commits February 17, 2026 13:39

Add changelog entry for TimeSeriesForecastChart component

5bbc4c3

Address Copilot review feedback

ad6dd44

Fix TimeSeriesForecastChart API consistency and minor issues

7d5505b

Address Copilot feedback on array concat and RTL padding

0faf448

Fix tooltip snapping to band instead of data lines

70667b9

Fix tooltip to work across all data points using hidden series

22ef013

Add missing allPoints property in empty data case

5ea808b

Adopt new responsive layout pattern for TimeSeriesForecastChart

164b2aa

Use getElementStyles for theme color resolution in TimeSeriesForecast…

330dcf9

…Chart

Remove unnecessary fallback on ForecastDivider color prop

1e5391a

Make forecast strokeDasharray configurable via theme in TimeSeriesFor…

09e1669

…ecastChart

Make band fillOpacity configurable via bandFillOpacity prop

5ec636d

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

annacmc requested a review from adamwoodnz February 17, 2026 03:07

annacmc mentioned this pull request Feb 17, 2026

Charts: Add documentation and tests for TimeSeriesForecastChart #47152

Open

3 tasks

adamwoodnz reviewed Feb 19, 2026

View reviewed changes

adamwoodnz reviewed Feb 20, 2026

View reviewed changes

This comment was marked as duplicate.

Sign in to view

-	},
+	},
+	args: {
+		containerHeight: 600,
+	},

		const providerTheme = useGlobalChartsTheme();
		const { getElementStyles } = useGlobalChartsContext();

	const providerTheme = useGlobalChartsTheme();
	const { getElementStyles } = useGlobalChartsContext();
	const { getElementStyles, theme: providerTheme } = useGlobalChartsContext();

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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamwoodnz commented Feb 19, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamwoodnz left a comment

Choose a reason for hiding this comment

Uh oh!

This comment was marked as duplicate.

Uh oh!

kangzj commented Mar 2, 2026

Screenshots from Visual Testing

1. Default Story

2. With Legend

3. Fixed Dimensions

4. Empty Data

5. Tooltip Functionality

Uh oh!

adamwoodnz commented Mar 17, 2026

Uh oh!

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

annacmc commented Feb 17, 2026 •

edited

Loading