search

rcpch / digital-growth-charts-react-component-library

A typescript React library for displaying RCPCH Digital Growth Charts from API data
https://growth.rcpch.ac.uk
MIT License
8 stars 11 forks source link

CentileChart stories crashing on fontSize #132

Closed mbarton closed 1 week ago

mbarton commented 1 week ago

Start up Storybook and visit the Centile Chart > With Height And No Data story.

It crashes with an error:

TypeError: Cannot read properties of undefined (reading 'fontSize')
    at CentileChart (http://localhost:6006/src_CentileChart_CentileChart_tsx-src_testParameters_measurements_prematureGirlOverThreeHeigh-603ab9.iframe.bundle.js:830:41)
    at renderWithHooks (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:49742:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:53506:13)
    at beginWork (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:55019:16)
    at beginWork$1 (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:60858:14)
    at performUnitOfWork (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:59992:12)
    at workLoopSync (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:59898:5)
    at renderRootSync (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:59866:7)
    at recoverFromConcurrentError (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:59282:20)
    at performConcurrentWorkOnRoot (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:59182:22)

I think we are not passing referenceTextStyle in the styles hardcoded here? https://github.com/rcpch/digital-growth-charts-react-component-library/blob/live/src/testParameters/styles/tanner3Styles.ts. They perhaps need regenerating?

mbarton commented 1 week ago

@eatyourpeas I'm very new to this code so this might be a silly question but could we call makeAllStyles from the stories to avoid getting out of sync in the future?

eatyourpeas commented 1 week ago

Loving the chromatic thank you @mbarton The RCPCHChart component is really a wrapper for the CentileChart and SDSChart components. The styles are created before the RCPCHChart component is instantiated because the theme or custom style props passed in from the user need to be converted into the style object (using makeAllStyles) before passing into whichever chart is then rendered.

So best of all would be to remove all the stories in there currently for SDSChart and CentileChart and have a library of examples all using RCPCHChart instead. Within the RCPCHChart folder we would have the docs (as they are now), and then subfolders for each of the different chart types, measurement methods, sexes and references. Perhaps a preterm section for each also.