Fix charts using chart.js #13212
Merged
Fix charts using chart.js #13212
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
pettinarip
requested review from
wackerow,
corwintines,
minimalsm and
nhsz
as code owners
github-actions
bot
added
content 🖋️
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
pettinarip
commented
Jun 20, 2024
|
|
||
| // chart options config | ||
| const chartOptions = { | ||
| // chart styles | ||
| barThickness: 38, |
There was a problem hiding this comment.
Moved these to the dataset to avoid type errors
pettinarip
commented
Jun 20, 2024
Comment on lines
-171
to
-172
| aspectRatio: aspectRatioValue, | ||
| maintainAspectRatio: true, |
There was a problem hiding this comment.
Removed the aspectRatio and leave it to adapt automatically to the container size.
pettinarip
commented
Jun 20, 2024
| maintainAspectRatio: false, | ||
| layout: { | ||
| padding: { | ||
| top: 10, |
There was a problem hiding this comment.
Added some padding because the label was cut off on small resolutions
pettinarip
commented
Jun 20, 2024
pettinarip
commented
Jun 20, 2024
| @@ -184,7 +196,7 @@ export const GridItem = ({ metric }: GridItemProps) => { | |||
| </Box> | |||
| {hasData && ( | |||
| <Box position="absolute" insetInline="0" bottom={7} height="60%"> | |||
| <Line options={chartOptions} data={chartData} updateMode="none" /> | |||
| <Line options={chartOptions} data={chartData} /> | |||
There was a problem hiding this comment.
Minor: removed this to have an animation when you update the data.
pettinarip
commented
Jun 20, 2024
| data: hasData | ||
| ? dataValues.slice(dataValues.length - filteredRange!.length) | ||
| : [], | ||
| data: filteredRange.map((item) => item.value), |
There was a problem hiding this comment.
Simplified this logic since I thought it was related to the production error. I left it because it looks simpler to read.
… add rtl support, improve type safety, and add story
wackerow
approved these changes
Jun 21, 2024
|
Looks good, @nhsz this targets your branch though so I'll let you merge when ready |
nhsz
approved these changes
Jun 24, 2024
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.
Description
Tackles issues detected while testing the chart.js migration.
Home page charts
Energy consumption chart
aspectRatiounset given that we want the chart to adapt to its parent sizeAdded stories for both.
Related PR
#12952