feat(chart-provider): add component to wrap charts #4236
+1,986
−0
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: d1ec0b5 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 |
dosubot
bot
added
the
size:XXL
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
github-actions
bot
added
Area: Components
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 d1ec0b5.
☁️ 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: +513 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 d1ec0b5:
|
Paste
|
||||||||||||||||||||||||||||
| Project |
Paste
|
| Branch Review |
feat-chart-context-provider
|
| Run status |
|
| Run duration | 01m 55s |
| 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.
There was a problem hiding this comment.
I think we can leave this in since its very internal thing and probably will only cause minor change even if changed in future
There was a problem hiding this comment.
hmm I'd push for removing it until it's necessary and we're more certain
There was a problem hiding this comment.
I'll remove it for now, it's not being currently used. I will make the change in an upcoming commit.
Comment on lines
+27
to
+31
| highchartsOptions: Highcharts.Options; | ||
| pasteOptions?: never; | ||
| } | ||
|
|
||
| export type ChartProviderProps = HighchartsOptions; |
nkrantz
reviewed
Feb 12, 2025
| it("should render", () => { | ||
| const { getByText, getByTestId } = render(<TestChartProvider>test</TestChartProvider>); | ||
| expect(getByText("test")).toBeDefined(); | ||
| expect(getByTestId("chart-provider").getAttribute("data-paste-element")).toEqual("CHART_PROVIDER"); |
There was a problem hiding this comment.
question: is this assertion adding anything that's not already being tested on line 41?
There was a problem hiding this comment.
This is just making sure the children show up. A little unnecessary
nkrantz
reviewed
Feb 12, 2025
nkrantz
reviewed
Feb 12, 2025
| getByTestId("change-to-column-btn").click(); | ||
| }); | ||
|
|
||
| expect(getByTestId("chart-type-paragraph").textContent).toEqual("The chart type in the context is: column"); |
There was a problem hiding this comment.
suggestion: in addition to these tests, maybe some tests to ensure that all the context values get correctly passed down?
There was a problem hiding this comment.
Currently chartType and options are the only ones being set. The options part is currently being tested as the redraw updates the chart type so I am testing that the modified options callback is working correctly and that the chartType gets updated.
We should keep expanding these tests though once we start adding in more options.
nkrantz
reviewed
Feb 12, 2025
Co-authored-by: Nora Krantz <[email protected]>
…paste into feat-chart-context-provider
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.