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

A typescript React library for displaying RCPCH Digital Growth Charts from API data

digital-growth-charts-react-component-library's Issues

Show Gestational Age when hovering over pre-term measurements

We have had a clinician point out that it would be helpful to see the 'gestational age' when hovering over a point on the chart for a pre-term baby (< 37 weeks).
For example, DOB=10/01/23, Measurement Date = 10/01/23. Gestation = 36 weeks 0 day. The chart shows the 'adjusted' plot point as a cross and when you hover it says 'Corrected Age: undefined'. This was confusing to the clinician as they thought it was showing a 'corrected age'. Adding another measurement for same DOB and Measurement Date 28/02/23 does show 'Corrected Age: 3 weeks' which makes sense.
We have tested this in your Demo Chart site and it does the same, but unsure if this is by design.

No development branch?

Looks like the component library doesn't have a development branch, like our other RCPCH projects. While not absolutely necessary, I think it would be good to have to standardise our workflows across projects. @pacharanero if you're happy to add it, we can branch off of the current live.

Not showing Adjusted/Unadjusted toggle buttons when 40 weeks gestation

When adding a measurement with gestation weeks exactly 40, and regardless of gestation days, the chart does not show the adjusted/unadjusted/Both toggle buttons.

For example:
Weeks = 39, Days = 6 then they show OK
Weeks = 40, Days = 0 to 6 then they do NOT show
Weeks = 41, Days = 1 then they show OK

I found a line in defaultToggles.ts (line 19) which is checking the gestation weeks and setting showToggle to false.
I have recently upgraded the version we are using to 6.1.7 but we saw this issue in 6.1.4 also.

Chart design comments

The charts look really good. I particularly like the way the centile disjunctions are plotted so clearly, and the BMI units are correctly rendered!

Because they're really good I'm encouraged to be really picky about the design elements. So here's a list of points that strike me:

• add age 0 on the generic age scale, with age units in years/months not y/mths
• in the data entry boxes to the left, make the separate sections more obvious with bold labels for Reference, Birth date, Measurement date, Measurements, Sex and Gestation, each on one line
• when entering a date from the calendar it starts at the date of birth and increments in months - can an option to increment by years be added? Editing the date directly is problematic
• when I go to edit the year in the measurement date box the year first resets to 0000 then the whole date resets to dd/mm/yyyy with an error saying the date is too early - irritating!
• the sex data box is coded male/female but the charts are labelled boys/girls - better to be consistent
• the gestation boxes for weeks and days both need a label
• the height axis is too busy with 5 cm increments - 10 or more would be better. Perhaps aim to have all four charts with a similar number of ticks on the y axis, currently 39 for height, 20 for weight, 6 for BMI and 9 for head circumference
• there is a redundant closing bracket in the BMI axis label
• the preterm data look messy in the generic charts, and it may be better to omit them. Once infant data are entered the age scale changes to represent them correctly, but they don't look right with the age scale unlabelled below 0
• entering a height at age 8 gives the chart from age 4 to 20, but the height scale starts at 0 cm which is wasteful of space - the axis range should be appropriate for the visible chart region, along with a bit more above and below to handle outliers, important particularly for BMI
• this same point applies to the BMI chart, where the y scale could start nearer to 10 than 0. Conversely the head circumference scale perhaps needs to start a bit lower not higher
• with heights of 50 at age 0 and 140 at age 8 the chart displayed is from 4-20 years, with large numbers but no labels on the axes
• plotting weight 4 at age 0 gives a weight axis with no numbers, and the label is weight (cm) !
• adding weight 17 at 40 months adds lollypops to the age axis, but in a large font and no labels
• i don't think the UK-WHO to UK90 transition is flagged on the weight chart in the way it is for height
• the #RoyalColleges3.0 link at the top is hard to see against the background (perhaps deliberately!)

That's probably enough for now...

extended BMI SDS

A suggestion from Mars Skae, endocrinologist is for more SDS lines on the centile charts for children of high BMI
She cites the CDC

Full screen toggle hides when gestation weeks is 40

This is likely related to my other issue #40 but it is a different problem.

When I enter a measurement with gestation weeks exactly 40 (regardless of days), and when I click the full screen toggle on the bottom left, the full screen button disappears. I can't then toggle back to 'zoom in'.

I have tested this on your Online Chart Demo but am unable to replicate it there.

By default we have set the 'enableExport' chart property to false, but as a test we set it to true, and interestingly the full screen button shows and works as expected. So this might explain why your demo works OK.

Looking at the code, this implies that the check on line 704 in CentileChart.tsx finds showToggle, allowZooming and enableExport all = false when the full screen button is clicked. The fullScreenPressed function is clearing out the storedChildMeasurements array which in turn could have an effect on the re-evaluation of allowZooming on line 119 in CentileChart.tsx.

measurementFill property doesn't change Centile Chart point colour

Hi Team,

Have noticed that specifying the measurementFill property on measurementStyle doesn't show the colour change for the chronological age or corrected age measurement points on the Centile chart.

Looking at the source code (src/CentileChart/CentileChart.tsx), it seems that the colour is hardcoded to black for corrected age measurement (Line 683) and that the measurementFill doesn't filter through to either the chronological age measurement point or the corrected age measurement point.

Using version 6.1.4.

Thanks in advance,
Daniel

Chart colours and fonts

We plan to have one or more themes for the growth charts. We need to agree the fonts and colours for each.

Fonts (all chart themes)

• Axis text, labels - Arial (to check on sizing)
• Title/heading - Montserrat (to check on sizing)

Colours (each chart theme) - on these elements:

• Gridlines
• Axes
• Axis labels and tick labels
• Centile lines
• Background

@eatyourpeas, @Jo-Ball

uk-who child centile data insufficient

There is a gap between the two datasets, instead of an overlap

Chart not displaying plot points very close together

We have a set of measurements in our test data which don't appear to be rendering properly on the chart.
I have reproduced this on your on line demo chart site. I'm not sure whether this behaviour is by design or that it's a rare combination of measurements.

For example:
Patient Date of birth = 28/02/2020
Gestation 40w 0d
Sex = Male
Weight Measurements:

28/02/2023 14 kg
28/02/2022 12.1 kg
28/02/2021 10.3 kg
01/03/2020 3.5 kg
28/02/2020 3.5 kg

So there is a measurement on the child's birth date and another 2 days later. Then 3 subsequent measurements a year apart.

The problem is that it shows the later 3 - albeit as very small points, and doesn't show the first two at all. I can zoom in by scrolling with the mouse wheel but can't see the points.

Given that our users are a mixture of Neonatal, Paediatricians and Dieticians, between them they cover the full range of child ages. So they may, over time, want to see the full history on a chart.

Thanks

Growth Charts for Turner's Syndrome patients

Apologies if this is not the correct place to ask this kind of question, but not sure where else to post. This isn't an issue as such with the Chart Component, but a question about implementation.

I wondered if any integrators/implementers of the Growth Charts API and/or Growth Charts component have taken account for Turner's patients? I note from your Demo application that you don't allow the submission of Turners measurements for weight, BMI or head circumference.

I'd be interested to know how others might have implemented this use case where a user wants to record height measurements by calling the Turners API end point, and plotting a height chart with Turner's Syndrome reference data. But for weight and head circumference, use the UK-WHO API end point and plot a chart using UK-WHO reference data. Additionally, how should the BMI calculation be handled? Presumably, from a clinical perspective, the BMI couldn't be calculated and plotted?

Thanks for any ideas about how best to approach this use case.

Trisomy tooltips duplicate text

When plotting values on trisomy charts, the tooltip text is duplicated.

Estimated Observations in Chart

Hi,
Got another clinician request for you...

Apparently they can enter estimated height/weight observations in our patient records for various reasons.

What there asking for. is if an observation is estimated could that be marked on the chart?
So you could have a mixture of actual/estimated values displayed in the chart with different dots.

I'd pass across whether the observation was estimated with the observation value.

Thanks
Stephen

mid_parental_height_centile returning undefined if midParentalHeightData prop isn't set in component

Not sure if it's a setup issue but I am finding that mid_parental_height_centile returns undefined unless midParentalHeightData is set to an empty array within the component call:

working example:

<RCPCHChart
     exportChartCallback={exportChartCallback}
     measurementMethod={measurementMethod}
     measurementsArray={measurementsArray}
     midParentalHeightData={{}}
     reference={reference}
     sex={sex}
     subtitle={subtitle}
     title={title}
/>

error occurs:

<RCPCHChart
     exportChartCallback={exportChartCallback}
     measurementMethod={measurementMethod}
     measurementsArray={measurementsArray}
     reference={reference}
     sex={sex}
     subtitle={subtitle}
     title={title}
/>

This is the error received:

Percentage median BMI implementation

Percentage median BMI is used widely in child and adolescent eating disorders, and may have some utility in obesity, though SDS in obesity seems to be a more commonly used measure.

The RCPCHGrowth package reports %mBMI for both corrected and chronological ages, so should be included, perhaps in the tool tips against BMI.

hover on Life Course View / Copy To Clipboard buttons should have an explanatory tooltip

Both these buttons should have an explanatory tooltip saying what they do.

month lollipops missing from x axis label

The x axis label should have a legend explaining the lollipop components represent months

Tooltip text to reflect if users are clinicians or families

@stephen775
Meeting with Salford users yesterday.
Request for tooltip text to have less in it.
Advice strings in the tooltips are set and written by the project board. There are two types of advice string, especially around corrected age calculation, one for clinicians, one for families.

Implementation

1. Introduce a new prop clinicianFocus in the RCPCHChart component - this allows users to flag whether they want a chart for clinicians or a chart for children/families. It is optional and defaults to true (clinician) if absent.
2. remove centile advice from chart if clinicianFocus is true
3. return the more technical clinical advice strings with regard to age if clinicianFocus is true. Return the more lay language version if false. This tends to be more verbose.
4. Delayed puberty and reference transition labels to remain as these are relevant to all users

These issues have been implemented in salford branch

Clinicians

Children/Families

Whitespace on component could be reduced

Looking over the React component today I noticed how much white space there is, and how this has the effect of reducing the overall size of the chart as compared to the container it is in.

I wondered if it would be possible to move some of the logos and buttons to give an overall 'tighter' feel, reduce whitespace, and thereby scale up the chart itself for any given window. I think this would make the clinical view better and might also give us the opportunity to create a 'toolbar' along the bottom for all the buttons we have.

Current whitespace

Proposed moves of logos/buttons/text

• RCPCH logo moves to an area of the top left of the chart very unlikely to be used for clinical measurements
• UKCA logo moves to an area of the bottom right of the chart also very unlikely to be used for clinical measurements
• UK-WHO text to be side-by-side with the type of chart and sex (in this case Height / Boys)
• Clipboard and Life Course button to move to the right and be tighter in to the bottom of the chart. Possibly create a Toolbar at the bottom to contain all buttons, bringing them all into one place and making things neater.

@eatyourpeas any thoughts on this?

Dynamic sized plot points

If there are lots of plotted data points they look very crowded on the screen. This is likely to be the case for many babies on NICU particularly who have their weights measured regularly. It would be good to reduce the diameter of the plotted data point if close to others, increase it if further away.

two measurements of the same type on the same day

Error handling would be helpful to prevent the charts rendering two measurements of the same type taken on the same day.

The 'grey wedge' under the pubertal section should have clearer information

Can we link directly to the "instructions" that are mentioned? (presumably these come from the original paper chart cards)
Can we do this is a good-looking way? (ie can there be a little ℹ️ type icon to click?)

Related: Is there therefore an argument for adding a "URL" field to the tooltip data (which comes from the API not the chart component) to enable adding a URL to any returned chart information?

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

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

Api BMI response not returning any errors for invalid measurements

More of an issue with the api rather than the chart.
All other measurements will return the standard measurement response with some error fields populated with helpful messages if the user enters a measurement below or above the constants. This is helping us determine if it should be passed into the chart or to display a warning message to the user.
However when entering values above or below the constants for BMI I have noticed that measurement response comes back with no errors in any of the error nodes, meaning our application deems the response is correct and will try to pass it into the chart component.
This can be worked around with more validation on our input form to stop users entering values that are too high or low in the first place but I was wondering if this is as designed or a known issue

Pan/Zoom data points can be off screen

It would be good to prevent panning where all the growth measurents are nolonger in the visible area of the chart.

date label format to include month names

Request from a user to change date format to include date format with months as words

Puberty region in height graphs blocked by grey box in Storybook

On Storybook, when running the react-18-feature-test-branch, hovering below the puberty line elicits a filled box that pops up which blocks the screen. This happens between the precocious puberty line and post-17 completion delayed puberty.

Storybook CentileCharts affected: ‘With measurements from Birth Over Two Years’, ‘With Height and No Data’ (seems to be just the normal Height charts)

Default padding around growth chart

When embedding the growth chart in a page there is a default padding amount added around the chart. This padding is not exposed as a prop in the JavaScript and as such cannot be altered.

As you can see in the above screenshot the chart has padding which brings it further into the page.
In the Victory Chart documentation the default padding is set to 50, this appears to be causing the issue we are seeing.

https://formidable.com/open-source/victory/docs/victory-chart/#padding
Could we have a prop to customise the chart padding?

Incorrect date parse in observation_date tooltip

Identified by welsh dev team - the tooltip date is swapping month and day, leading to error

Toggle corrected and chronological ages

Project board decided today to correct for gestation, even if term, across the life course. This means potentially plotting measurements for both ages, leading to a crowded chart. The solution was to render chronological age only if a toggle button is pressed.

Better support for touch screens incl. pinch zoom

At present the dGC Chart Component focuses primarily on the deployment environment we expect in the NHS - majority desktop PCs with a mouse. In general there is relatively low penetration of touchscreen tablets and other touch devices in the clinical areas in which we expect Growth Charts to be initially used (paediatric clinics, GPs etc) and we have had to (for resource constraint reasons) focus on the Desktop browser.

We accept that other areas of clinical practice such as Community Nursing are likely to be the first to adopt touchscreen devices and we aim to support touchscreen zooming better in the future.

Future use of the dGC component for the eRedBook or other mobile apps will definitely need a touch-interface compatible Chart component)

Linting and formatting

Hi

We have just upgraded to the latest version of the charting library and are having some problems getting the charts to render.

The first issue we have come across is the styling, there appears to be errors in this file

The code:
newStyle.height === null && 600

seems to be trying to set default values but that is not what it is doing, I think the correct code would be something like:

newStyle.height = newStyle.height == null ? 600 : newStyle.height

this will set newStyle.height to 600 if the current value is null or undefined (=== will only check for null) this code could also be made a lot more concise using object spread but may be more difficult to understand.

The checks for null such as if (newStyle.tickLabelTextStyle===null) will only work if the value is null the typescript does not all null to be set only undefined this could be fixed by adding a check for undefined or changing to == as mentioned above.

=== should be used everywhere except checking for null when you also want to check for undefined.

A linting tool such as eslint with moderately strict settings should catch issues like this as the current code would do nothing.

I would also recommend adding a formatting tool like prettier to help keep code style consistent.

I would be happy to do a PR if you would like me to resolve any of these issues, adding a formatter would change the formatting of all the files so may be difficult to review.

Gradient-oriented labels bug

On the centile charts, the labels of the centiles are loaded in at gradients at the respective points on the graph, however some gradients are broken. @eatyourpeas has already noticed this, just formalising it in an Issue.

Bugged gradient labels:

Healthy gradient labels:

centile labels

Requests for centile labels from colleagues in Scotland and also DCHW.

Initial setup of component returning sdsStroke undefined

Hi,

I've just set up the component and when trying to load it I get returned the error:
Cannot read properties of undefined (reading 'sdsStroke')

I've gotten around this by hardcoding the sdsStroke in the centileStyle but it is set to nullable in the typing so I thought I'd raise an issue.

<RCPCHChart
    centileStyle={{
       sdsStroke: '#A9A9A9',
     }}
    exportChartCallback={exportChartCallback}
    measurementMethod={measurementMethod}
    measurementsArray={measurementsArray}
    reference={reference}
    sex={sex}
    subtitle={subtitle}
    title={title}
/>

Thanks

plotting at 22 weeks

Request from DCHW
Although there is no reference data, clinical colleagues would like the ability to plot measurements at 22 weeks gestation, even if there would be no centile lines or centile/sds calculations.

Control the Size of plot points

Hello there,

I am trying to chnage the size of plot points but i didnt find a prop to change it,
Could you add that or tell me how to control it, sometimes its giving very small points ?

Dates in tooltips

Meeting with users in Salford
User request for date of measurement as well as age to appear in tooltips
Now implemented in the salford branch
@stephen775

Is it possible to set the age range displayed in the chart?

Is it possible to set the age range displayed in the chart?

As if the child is say 5 years old it displays a 0-6 years range in the chart.

The clinicians would like the chart to be able to display a 0- 18 year range/even if the patient only 5 years old with observations up till that age.

Thanks
Stephen Plant

Tooltips font loading Times New Roman locally

Tooltips on growth charts should have Montserrat font, like in the live demo, but when running locally the font loads in as Times New Roman

RCPCH logo embedded in the chart

When we saw the charts in use today in someone else's system, it made me wonder if we need some kind of symbol to suggest these charts are 'official'. I wondered if there should be something embedded, eg a logo, in the chart that would signify it is official.

• RCPCH logo (which is a registered trademark I presume and therefore nobody else could use it unless it was the official chart library
• possibly the logo could be a clickable link to more details about the charts, perhaps to the https://growth.rcpch.ac.uk/ site
• if we used the logo in an MIT-licensed component that other orgs are going to use then there might need to be a line that says (tiny) "The RCPCH logo is a registered trademark of the Royal College of Paediatrics and Child Health and is used here with persmission" (which they have)

Quick Mockup

chartScaleType defaults to biggerChild

When a centile chart is rendered, the centile lines and axis are dependent on the parameter chartScaleType. This then informs the x-axis label, and whether months as lollipops will show up.

At the moment, every Storybook story (except 'With Premature Female Heights) is automatically rendering with the chartScaleType set to biggerChild, since this is the default. However, this means that the rendering of an appropriate x-label doesn't happen. For example, smallChild is defined as ≤ 4 years old, > 1 year old. But Storybook renders a child who has data plotted between 0-2 years on the biggerChild axis.

This has implications for rendering gradient labels as per Issue #64. If we can't use the chartScaleType as a conditional (because it always defaults to biggerChild), then the gradients can't be conditionally scaled up/down as appropriate and so will keep bugging out

BMI SDS in tooltip

This would be helpful to report in the tooltip

Build Issues with NPM package - Missing icon + no default export

Hi Team,

Having the following build issues when installing the charts component library with npm:

Error 1:
node_modules/@rcpch/digital-growth-charts-react-component-library/build/RCPCHChart/RCPCHChart.d.ts(1,8):
error TS1192: Module '"C:/source/Morse/Client/node_modules/@types/react/index"' has no default export.

Error 2:
C:\source\Morse\Client\node_modules/@rcpch/digital-growth-charts-react-component-library/build/index.d.ts(2,18):
error TS2307: Cannot find module '../src/images/icon.png'.

Regarding issue 1, I can resolve by manually editing the ‘RCPCHChart.d.ts’ file and replacing
import React from 'react';
with
import * as React from 'react';

For issue 2, the icon doesn't seem to be present in the ‘node_modules@rcpch\digital-growth-charts-react-component-library’ folder although I can see it in the RCPCH github repo here. Locally resolved by commenting out import and export of icon in ‘index.d.ts’ file.

I'm using:
"react": "17.0.2",
"typescript": "3.2.4"
"@rcpch/digital-growth-charts-react-component-library": 6.1.4
"@types/react": "17.0.2"

Any help would be much appreciated!

Documentation: HOWTO install the react component in a plain HTML page

Based on today's chat with implementers it would be useful to have a page in the documentation which explains how to obtain a single JS file which can be included via <script src="index.js"></script> into a normal HTML page and interacted with using plain old JS.

Term shaded area tooltip missing

The tooltip text for the shaded area denoting term in the weight centile chart is missing.

Subtitle styling prop has no effect

Title styling prop currently applies to both title and subtitle

Displaying SDS Label All Time

Have a request from a clinician here.
The want the SDS label that are displayed when you hover over the SDS line in the BMI to be displayed all the time.

This is so there visible when the chart is print out and sent externally.

Is that possible?

Thanks

adjusted/unadjusted

the terms adjusted/unadjusted in the toggle buttons do not match chronological/corrected used elsewhere.

Testing for dGC Component Library

It looks like there isn't a testing suite automatically executed on the Component Library upon PR submission, like with Epilepsy12.

For code safety reasons, this would be a good idea to implement and help ensure best CI/CD practices are being adhered to. Much like with Epilepsy12, it would also ensure that edge cases, dependency changes or any problems that would otherwise go missed are raised if adequate testing is in place.

At the moment Jest only has around ~20% code coverage for the component library, and while complete coverage shouldn't be our sole objective, we can afford to bump up the coverage numbers.