Skip to content

Charts 47 line chart custom annotations #44131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 12 commits into
base: trunk
Choose a base branch
from
Draft

Charts 47 line chart custom annotations #44131

wants to merge 12 commits into from
+657 −240

Conversation

adamwoodnz
Copy link
Contributor

Fixes CHARTS-47: Line Chart: Custom annotations

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

@adamwoodnz adamwoodnz self-assigned this Jun 30, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 30, 2025 •
edited
Loading

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!

@github-actions 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 Jun 30, 2025
@adamwoodnz adamwoodnz added [Type] Feature Development of a new feature and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Jun 30, 2025
@jp-launch-control JP Launch Control
Copy link

jp-launch-control bot commented Jun 30, 2025 •
edited
Loading

Code Coverage Summary

Cannot generate coverage summary while tests are failing. 🤐

Please fix the tests, or re-run the Code coverage job if it was something being flaky.

Full summary · PHP report · JS report

adamwoodnz added 8 commits July 1, 2025 12:07
@adamwoodnz
Enhance LineChartAnnotation component with custom label support and i…
82fd240 
…mproved label positioning

* Refactor LineChartAnnotation to accept custom label rendering via renderLabel prop.
* Update label positioning logic to accommodate custom dx and dy values.
* Modify annotation props to include additional label positioning options.
* Adjust LineChart component to pass down annotation props more efficiently.
* Add a new story for custom label rendering in annotation stories.
@adamwoodnz
Add changelog
c29ccd0
@adamwoodnz
Fix regression on default annotation positioning
c000e98
@adamwoodnz
Fix react popover attr naming
dbeca75
@adamwoodnz
Configure bottom custom annotation in story
7e9ed47
@adamwoodnz
Wrap annotations in svg
15b36dd
@adamwoodnz
Refactor LineChart component to support forwarding refs and expose sc…
34ea492 
…ale data

* Introduced LineChartRef interface to provide methods for accessing chart scales and dimensions.
* Refactored LineChart to use forwardRef, allowing parent components to interact with the chart's internal state.
* Created LineChartInternal component to manage data context and provide scale data via ref.
* Updated chart rendering logic to maintain existing functionality while enhancing flexibility.
@adamwoodnz
Use an overlay for positioning annotations above the interaction layer
c4bf347
@adamwoodnz adamwoodnz force-pushed the charts-47-line-chart-custom-annotations branch from 0cb5041 to c4bf347 Compare July 1, 2025 00:14
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 1, 2025 •
edited
Loading

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-47-line-chart-custom-annotations branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack charts-47-line-chart-custom-annotations

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

adamwoodnz added 4 commits July 1, 2025 12:35
@adamwoodnz
Remove debug annotations
c57f98d
@adamwoodnz
Fix positioning issues
09c8110
@adamwoodnz
Refactor LineChartAnnotation and LineChartAnnotations components to r…
35103c9 
…emove external positioning logic and utilize DataContext for scale management. Simplified annotation rendering by directly passing props without calculating chart bounds.
@adamwoodnz
Improve data context types
616847f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@adamwoodnz adamwoodnz

Labels
[JS Package] Charts RNA [Status] In Progress [Type] Feature Development of a new feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@adamwoodnz