Setup for Growth Chart React component

Hi,

I’ve been trying to set up your growth charts with the response from your API but I’m not having much luck as the API response appears to be incompatible with the component.

I’ve managed to get the response to work but I had to modify the response data which doesn’t seem right so I thought I’d ask.

I’m currently parsing the response and passing it to the measurementsArray prop.

Unable to attach the mock I’m using as I’m a new user.

1 Like

Hi @jcooperprioritydigit I’ve bumped you to @trust_level_2 so you should be able to post your mocks.

Thanks for letting us know you’re having trouble. Our aim is that the API response should be able to be dropped right into the component and the component should understand and display it natively so if this isn’t working then we would want to fix it ASAP.

Can you let us know what error you are getting?

Which parameters are you having to re-map/parse/modify?

@cc @eatyourpeas

Hi @pacharanero, thanks for your quick response

I’ve attached a text document containing the modified response used to get the type errors to go away (Appended comments to the lines I had to change and what I did).

mock.txt (7.0 KB)

The error I’m currently getting is “RangeError: Invalid time value at Date.toISOString”, I have a feeling it might be caused by observation_date being a string in the response but that would be a wild guess.

Thanks again

Hi @pacharanero,

Just curious to know if you’ve had a chance to look at this yet.

Kind regards

Hi sorry to be slow to this convo. I can see what you are trying to do, but you should not have to import the Measurement interface from the charting package - it is possible that the typing does not work entirely outside the package. That is all for the internal working. The only component you need for the charts to work is the RCPCHChart component, one of the props for which is the response from the API. If you look at the react client you will see it is used in src/api/chart.js. You would make an async api call and pass the result then directly to the package:

<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}
      />