feat(chart-provider): add component to wrap charts #4236
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
🦋 Changeset detectedLatest commit: 6a90b9c The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
krisantrobus
commented
Feb 7, 2025
| { | ||
| "name": "@twilio-paste/chart-provider", | ||
| "version": "0.0.0", | ||
| "category": "data display", |
There was a problem hiding this comment.
Not sure exactly what category we want to use for these charting components. What do you all think?
There was a problem hiding this comment.
unless we are adding a new category related to visualisation, data display looks good
|
View your CI Pipeline Execution ↗ for commit 6a90b9c.
☁️ Nx Cloud last updated this comment at |
|
View your CI Pipeline Execution ↗ for commit 6a90b9c.
☁️ Nx Cloud last updated this comment at |
krisantrobus
commented
Feb 7, 2025
Comment on lines
+27
to
+31
| highchartsOptions: Highcharts.Options; | ||
| pasteOptions?: never; | ||
| } | ||
|
|
||
| export type ChartProviderProps = HighchartsOptions; |
There was a problem hiding this comment.
A bit redundant at this point as there is only one type but sets the groundwork for union types that will only allow users to either set pasteOptions or highchartsOptions
krisantrobus
commented
Feb 7, 2025
Comment on lines
+51
to
+52
| // eslint-disable-next-line object-shorthand | ||
| redraw: function (this) { |
There was a problem hiding this comment.
When using highcharts you have to use these verbose functions and this syntax. Tried it other ways but just doesn't work :/
|
Size Change: +255 B (0%) Total Size: 1.12 MB
ℹ️ View Unchanged
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 6a90b9c:
|
Paste
|
||||||||||||||||||||||||||||
| Project |
Paste
|
| Branch Review |
feat-chart-context-provider
|
| Run status |
|
| Run duration | 01m 59s |
| Commit |
|
| Committer | Kristian Antrobus |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
67
|
| View all changes introduced in this branch ↗︎ | |
PixeledCode
reviewed
Feb 11, 2025
| { | ||
| "name": "@twilio-paste/chart-provider", | ||
| "version": "0.0.0", | ||
| "category": "data display", |
There was a problem hiding this comment.
unless we are adding a new category related to visualisation, data display looks good
Comment on lines
+45
to
+50
| * The current chart type. Used to trigger rerenders of other components inside ChartProvider. | ||
| * | ||
| * @type {string} | ||
| * @memberof ChartContextProps | ||
| */ | ||
| chartType?: string; |
There was a problem hiding this comment.
how will this string be used to trigger re-renders or other components?
There was a problem hiding this comment.
When working on the sandbox I found that custom components that rendered based on nested elements could not pick up changes to re-render.
Specifically for this I had a legend that would look at the current series and see if there was a marker symbol used to show the correct marker in the legend. When switching between chart types it would no cause a re-render due to react only shallow comparing the chart context object. Picking up the change in the chart type options and listening for that fixed the issue.
It is not needed for this release so I'm happy to leave out and investigate further if there is a better way to capture this to avoid a breaking change in future.
Comment on lines
+27
to
+31
| highchartsOptions: Highcharts.Options; | ||
| pasteOptions?: never; | ||
| } | ||
|
|
||
| export type ChartProviderProps = HighchartsOptions; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds the new component
ChartProviderused to manage state for the child chart implementations.Added additional typedocs to the context attributes so developer understand the usage correctly when creating their own context providers or when using them in the custom components.
Added some storybooks and unit tests to be sure the callbacks and hooks function correctly.
Storybooks I am implementing a chart to fully test the context functions but the chart component is not included with this provider.