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
7 stars 9 forks source link

Scaling Chart to 0 -8 Years instead of 0 - Child Age #52

Closed stephenplantnca closed 1 year ago

stephenplantnca commented 1 year ago

I believe you implemented away to scale the chart 0 -18 years. Instead of by the default 0- Child Age. How in the chart code can I make this change.

Thank

eatyourpeas commented 1 year ago

There is a toggle button in the bottom right of the chart next to the copy button which appears once data has been entered.

image

image

I am sorry, the documentation for this seems to be missing. I will fix this.

In essence, an implementation would look like this:

import { RCPCHChart } from "@rcpch/digital-growth-charts-react-component-library";
<div>
      <Dimmer active={isLoading}>
        <Loader>Fetching Data</Loader>
      </Dimmer>
      <RCPCHChart
        reference={props.reference}
        measurementMethod={props.measurementMethod}
        sex={props.sex}
        title={titles.title}
        subtitle={titles.subtitle}
        measurementsArray={props.measurementsArray} // this is the plottable child data
        midParentalHeightData={props.midParentalHeightData}
        chartStyle={props.chartStyle}
        measurementStyle={props.measurementStyle}
        centileStyle={props.centileStyle}
        sdsStyle={props?.sdsStyle}
        gridlineStyle={props.gridlineStyle}
        axisStyle={props.axisStyle}
        enableZoom
        chartType={props.chartType}
        enableExport={true}
        exportChartCallback={exportChartCallback}
        clinicianFocus={props.clinicianFocus}
      />
 </div>

There is a new prop clinicianFocus which accepts a boolean value to toggle the life course view. This is what you are looking for. Please make sure you are using the latest version (6.1.12).

Shortly there will be a new prop showCentileLabels - also, a boolean - currently in development so will not be on npm yet. It will toggle show/hide of labels to the individual centile lines, currently only seen on hover with tooltips. This has been requested by several centres so keep an eye out.

eatyourpeas commented 1 year ago

Hi @stephenplantnca on reflection (sorry it is a while since I implemented all this) I think the clinicianFocus prop is to toggle the advice strings between clinician-focussed advice and patient-focussed advice. I think there is actually no prop for the lifecourse view button - so if you can't see it, you are probably running an old version of the charts. I will close this for now but let me know if there is a problem and I will reopen and investigate.