Age buttons don't work independently when multiple charts are on screen

[dmc-cambric]

Ran into a problem whereby the age buttons do not toggle correctly on a chart when multiple charts are on screen.

Brief summary:

We have started displaying multiple growth charts on screen at the same time.

In the above example we have two chart components rendered. The left chart behaves as intended, with the current age type button highlighted, clicking between these buttons also behaves as intended when updating the chart.

However the right chart doesn't highlight any of the age buttons, and clicking them causes the age buttons (and chart points) of the left chart to toggle.

All other buttons on the chart work fine, independently from one another as does zooming, its just the age buttons that don't work for the chart on the right.

Any advice you can provide is much appreciated!

Using Ver 7.0.0

Cheers, Dan

[eatyourpeas]

Interesting @dmc-cambric thanks for raising. They two charts should not influence each other's behaviour as each receive props, but do not have callbacks to their parent. I wonder if it something to do with the way the data is passed in? In the second chart you do not seem to have any datapoints rendered? Are you rendering two instances of the component, or the same one twice? Also, the data needs to be passed in in a different format:

<RCPCHChart
    reference={'uk-who'}
    measurementMethod={'height'}
    sex={'female'}
    title={"Arthur Scargill - 12345678A"}
    measurements={
        height: [
            {
                birth_data: {
                    ...
                },
                bone_age: {
                    ...
                },
                child_observation_value: {
                    ...
                },
                events_data: {
                    ...
                },
                measurement_calculated_values: {
                    ...
                },
                measurement_dates: {
                    ...
                },
                plottable_data: {
                    ...
                }
            },
            ...
        ]
    } // this is the plottable child data
    midParentalHeightData={[]} // this is the optional plottable midparental height data from the RCPCH API
    theme={'traditional'}
    enableZoom
    chartType={'centile'}
    enableExport={false}
    exportChartCallback={()=>{}} // this is a callback for the export chart function if true
    clinicianFocus={false}
/>

See line 12 for our implementation in the client. See here for docs. The live site is working as expected.

If you are happy to post your code, that might help, or reach out separately by email and we can try and troubleshoot.

[dmc-cambric]

Thanks for your response, the second chart is actually rendering the correct data points as intended (top left of the right-hand chart shows the only measurement added).

The charts rendered above are configured for use with v7.0.0, as two separate components. The charts have the following args passed into them, which I believe conforms to the recent changes.

{
    "title": STEVE, Stevie (Mr) - 5555555555",
    "sex": "male",
    "reference": "uk-who",
    "measurementMethod": "weight",
    "measurements": {
        "height": [ {...},{...}],
        "weight": [{...}],
        "bmi": [{...}],
        "ofc": []
    },
    "theme": "tanner1",
    "midParentalHeightData": {},
    "enableZoom": true,
    "enableExport": false,
    "clinicianFocus": true
}

{
    "title": STEVE, Stevie (Mr) - 5555555555",
    "sex": "male",
    "reference": "uk-who",
    "measurementMethod": "height",
    "measurements": {
        "height": [ {...},{...}],
        "weight": [{...}],
        "bmi": [{...}],
        "ofc": []
    },
    "theme": "tanner1",
    "midParentalHeightData": {},
    "enableZoom": true,
    "enableExport": false,
    "clinicianFocus": true
}

I'm not entirely sure the issue is the way the data is passed in, as the actual age buttons don't highlight on the right chart when clicked, which I believe is not affected by the data state?

If you've got any ideas would really appreciate it, otherwise yeah I'm happy to discuss further via. email if you guys would like to see code

[eatyourpeas]

That all looks right @dmc-cambric. Perhaps let's catch up on email?

[eatyourpeas]

In follow up - the reason for this turns out to be the names and ids of the radiobuttons. Because these were not dynamically-named, there was a clash of identical names in the DOM, leading to the inactive button group being deselected.

I have spun up a vite app with two components npm linked locally (forgive the dark mode). Hopefully this will fix your issue if you update to 7.0.2. Do please reopen this issue if it does not resolve things for Cambric.