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

aspect-ratio #112

Closed eatyourpeas closed 1 month ago

eatyourpeas commented 1 month ago

Overview

@dmc-cambric and colleagues from Cambric in Scotland need the chart to be wider in landscape the the currently hard-coded width of 1000px

This PR reintroduces height and width optional props to the RCPCHChart component. If not supplied, the chart defaults to 1000px width, 800px height. NOTE: both height and weight must be supplied and the user must work out a sensible aspect ratio themselves. Because the SVG chart will scale to the width and height supplied, but the text (and datapoints) within it will not, the height and weight are used to calculate a scale factor for text to be applied to tooltips and axis labels and the event and legend text. This scaling does not apply to titles, buttons or plotted datapoints.

A further raised issue relates to the use of createGlobalStyles which has had the effect of applying RCPCHChart styles across the DOM. Apologies for this. This has been fixed by using a simpler styled div to wrap the <CentileChart/> and <SDSChart/> components.

Code changes

Please describe the changes you made here.

Documentation changes (done or required as a result of this PR)

The documentation in the mdx story file has been updated with the changes.

Related Issues

This closes #101 and #110

Mentions

Thanks to @dmc-cambric