Client diversity piechart update #15251
Conversation
LifeofDan-EL
requested review from
wackerow,
corwintines,
pettinarip and
minimalsm
as code owners
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
github-actions
bot
added
the
dependencies 📦
|
Deploy is failing, at first, I thought it was a lint error, so I fixed that with |
There was a problem hiding this comment.
@LifeofDan-EL left a comment about the issue we have.
On the other hand, there are a few files in this PR that shouldn't be modified/added/deleted like yarn.lock, .env.example, and some yarn related ones that are not necessary. Can help you clean them up once we have a working preview.
| @@ -5,6 +5,27 @@ lang: en | |||
| sidebarDepth: 2 | |||
| --- | |||
|
|
|||
| import { PieChart } from "@/components/PieChart" | |||
There was a problem hiding this comment.
This import is redundant now that we are injecting the component in the MdComponents file.
Also, next-mdx-remote (the mdx compiler that we use) doesn't support imports or exports, so we need to do something different to pass the below data to the component.
I think the easiest would be to pass the data array inline like this:
<PieChart data={[ { name: "Geth", value: 43 }, ... ]} title="Execution Clients" />To clarify more, you can't use variables like executionData without exporting them in mdx. But since imports/exports are not supported, we can't use them either.
There was a problem hiding this comment.
Thanks @pettinarip for the clarification, it was an oversight pushing the yarn file. Thanks again.
LifeofDan-EL
force-pushed
the
client-diversity
branch
from
9549a39 to
99615fa
Compare
There was a problem hiding this comment.
@LifeofDan-EL good job. The implementation looks good and is functional. Left a comment about the styles to try to align it with our current design system.
| * Color palette for blue shades, ordered from deep blue (largest share) to light blue (smallest share). | ||
| * Ensure your data is sorted from largest to smallest for this to work as intended. | ||
| */ | ||
| const COLORS = [ |
There was a problem hiding this comment.
There are a few issues with these colors:
- there is not enough contrast in dark mode
- these are not part of our current color palette
This is the current colors that we have https://dev--63b7ea99632763723c7f4d6b.chromatic.com/?path=/story/design-system-colors--primitives
@konopkja what do you think?
There was a problem hiding this comment.
Yeah, I looked at the preview after deployment and I agree there isn't enough contrast. Let me use values from the colour palette.
.yarn/install-state.gz
Outdated
.yarnrc.yml
Outdated
seems like dark mode / light mode have some contrast issues, on dark mode its the upper part , on light mode its the opposite part |
|
lets use accent colors here |
here is the list of accent colors in our tw config |
|
The latest build currently has the accent colour and I tweaked the legend a bit. What's left is to work on the responsiveness. Once that is done, then I can update the content too, to reflect the new values. |
Description
This PR is to create a new piechart that changes depending on the values, which is to be used to update the client diversity part of the website.
#15099
Preview: https://deploy-preview-15251--ethereumorg.netlify.app/en/developers/docs/nodes-and-clients/client-diversity/