feat: ajout des charts #300
Conversation
package.json
Outdated
| @@ -71,6 +71,7 @@ | |||
| "@emotion/react": "^11.10.4", | |||
| "@emotion/styled": "^11.10.4", | |||
| "@gouvfr/dsfr": "1.12.1", | |||
| "@gouvfr/dsfr-chart": "^1.0.0", | |||
There was a problem hiding this comment.
Needs to go in dependencies, not devDependencies or it wont work.
There was a problem hiding this comment.
I was thinking of that but all the other libraries are in "devDependencies" (not sure why). Maybe it is only use during the build ?
There was a problem hiding this comment.
Yes, all dev dependencies are used only at build time and @gouvfr/dsfr is vendored because we need to apply some marginal transformation to it.
| @@ -0,0 +1,42 @@ | |||
| import React from "react"; | |||
There was a problem hiding this comment.
| import React from "react"; | |
| "use client"; | |
| import React from "react"; |
This component is not RSC ready
|
|
||
| /** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */ | ||
| export const BarChart = chartWrapper((props: BarChartBaseProps) => { | ||
| return <bar-chart {...stringifyObjectValue(props)} />; |
There was a problem hiding this comment.
This is probably not Server Renderable and thus it won't work in next.js projects.
We'll have to instruct next user to use dynamic() https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr
There was a problem hiding this comment.
Yes, maybe it will be the case. I will test it and add a guide/example if this is the case :)
| const graphProps = rest as T; | ||
|
|
||
| useEffect(() => { | ||
| prDsfrLoaded.then(() => setIsDsfrLoaded(true)); |
There was a problem hiding this comment.
Good job for figuring this on your own. I'm impressed
There was a problem hiding this comment.
Thank you! I was inspired by this : #244
|
I just added some test, storybook. 😁 I had to change some CSP rules to make chart works on next. Also I fix issue with the next build. |
|
Great! Thanks a lot for your work! Let's release! |
|
Let's go!! |
|
You really did a great job on this. Maybe, if you could go the extra miles and add a little notice on the storybook to instruct the Next user on how to use thoses components with Something like this: react-dsfr/stories/Header.stories.tsx Lines 20 to 21 in 9652993 |
|
Hey @K4ST0R, Just to let you know, there's currently a dependency issue with I've created an issue: GouvernementFR/dsfr-chart#11
I've also done this. Thanks again |
|
Thank you a lot @garronej and thank you adding the notice :) ! Hmm that's an issue, I will check if i have time to create a PR in dsr-chart! |
#299