Skip to content

Commit e1e096a

Browse files
eatyourpeaseatyourpeas
authored
Merge pull request #115 from rcpch/cdc
CDC
2 parents a93129c + ae16ba5 commit e1e096a

31 files changed

+42763
-51
lines changed

‎.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,7 @@ build/
33
dist/
44
storybook-static/
55
.DS_Store
6-
.vscode
6+
.vscode
7+
8+
src/chartdata/fenton/*.*
9+
src/testParameters/measurements/fenton/*.*

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@rcpch/digital-growth-charts-react-component-library",
3-
"version": "7.0.13",
3+
"version": "7.1.0",
44
"description": "A React component library for the RCPCH digital growth charts using Rollup, TypeScript and Styled-Components",
55
"main": "build/index.js",
66
"module": "build/esm.index.js",
@@ -32,7 +32,8 @@
3232
"dependencies": {
3333
"sass": "1.70.0",
3434
"styled-components": "6.1.8",
35-
"victory": "36.9.1"
35+
"victory": "36.9.1",
36+
"@rcpch/digital-growth-charts-react-component-library":"7.0.12"
3637
},
3738
"devDependencies": {
3839
"@babel/preset-react": "7.23.3",

‎src/CentileChart/CentileChart.stories.tsx

+74-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Tanner1Styles } from '../testParameters/styles/tanner1Styles';
66
import { Tanner2Styles } from '../testParameters/styles/tanner2Styles';
77
import { Tanner3Styles } from '../testParameters/styles/tanner3Styles';
88
import { traditionalBoysStyles } from '../testParameters/styles/traditionalBoysStyles';
9+
import { traditionalGirlsStyles } from '../testParameters/styles/traditionalGirlsStyles';
910
import { termGirlWithSingleHeightMeasurementAndBoneAgeAndEvent } from '../testParameters/measurements/termGirlWithSingleHeightMeasurementAndBoneAgeAndEvent';
1011
import { twoWeightMeasurements } from '../testParameters/measurements/twoWeightMeasurements';
1112
import { twoToEight } from '../testParameters/measurements/twoToEight';
@@ -28,7 +29,7 @@ import { termBabyGirlWeight } from '../testParameters/measurements/termBabyGirlW
2829
import { trisomy21HighBMI } from '../testParameters/measurements/trisomy21HighBMI';
2930

3031
export default {
31-
title: 'CentileChart',
32+
title: 'Centile Chart',
3233
};
3334

3435
export const WithHeightAndNoData = () => (
@@ -49,6 +50,78 @@ export const WithHeightAndNoData = () => (
4950
/>
5051
);
5152

53+
export const WithCDCFemaleHeightAndNoData = () => (
54+
<CentileChart
55+
chartsVersion="testChart"
56+
reference="cdc"
57+
title="Patient"
58+
subtitle="Name - CDC"
59+
measurementMethod="height"
60+
sex="female"
61+
childMeasurements={[]}
62+
midParentalHeightData={midParentalHeights}
63+
enableZoom={true}
64+
styles={traditionalGirlsStyles}
65+
enableExport={true}
66+
exportChartCallback={() => null}
67+
clinicianFocus={true}
68+
/>
69+
);
70+
71+
export const WithCDCMaleWeightAndNoData = () => (
72+
<CentileChart
73+
chartsVersion="testChart"
74+
reference="cdc"
75+
title="Patient"
76+
subtitle="Name - CDC"
77+
measurementMethod="weight"
78+
sex="male"
79+
childMeasurements={[]}
80+
midParentalHeightData={midParentalHeights}
81+
enableZoom={true}
82+
styles={traditionalBoysStyles}
83+
enableExport={true}
84+
exportChartCallback={() => null}
85+
clinicianFocus={true}
86+
/>
87+
);
88+
89+
export const WithCDCMaleBMIAndNoData = () => (
90+
<CentileChart
91+
chartsVersion="testChart"
92+
reference="cdc"
93+
title="Patient"
94+
subtitle="Name - CDC"
95+
measurementMethod="bmi"
96+
sex="male"
97+
childMeasurements={[]}
98+
midParentalHeightData={midParentalHeights}
99+
enableZoom={true}
100+
styles={traditionalBoysStyles}
101+
enableExport={true}
102+
exportChartCallback={() => null}
103+
clinicianFocus={true}
104+
/>
105+
);
106+
107+
export const WithCDCMaleOFCAndNoData = () => (
108+
<CentileChart
109+
chartsVersion="testChart"
110+
reference="cdc"
111+
title="Patient"
112+
subtitle="Name - CDC"
113+
measurementMethod="ofc"
114+
sex="male"
115+
childMeasurements={[]}
116+
midParentalHeightData={midParentalHeights}
117+
enableZoom={true}
118+
styles={traditionalBoysStyles}
119+
enableExport={true}
120+
exportChartCallback={() => null}
121+
clinicianFocus={true}
122+
/>
123+
);
124+
52125
export const WithTurnerHeightAndNoData = () => (
53126
<CentileChart
54127
chartsVersion="testChart"

‎src/CentileChart/CentileChart.tsx

+42-9
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ function CentileChart({
121121
),
122122
[storedChildMeasurements, sex, measurementMethod, reference, showCorrectedAge, showChronologicalAge],
123123
);
124+
124125

125126
// get the highest reference index of visible centile data
126127
let maxVisibleReferenceIndex: number = null;
@@ -143,7 +144,8 @@ function CentileChart({
143144
minimumArrayLength = 6;
144145
break;
145146
}
146-
if (item[0].data.length > minimumArrayLength){
147+
148+
if (item[0].data !== null && item[0].data.length > minimumArrayLength){
147149
maxVisibleReferenceIndex = index;
148150
}
149151
});
@@ -300,6 +302,7 @@ function CentileChart({
300302
// This the tool tip text, and accepts a large number of arguments
301303
// tool tips return contextual information for each datapoint, as well as the centile
302304
// and SDS lines, as well as bone ages, events and midparental heights
305+
303306
const tooltipTextList = tooltipText(
304307
reference,
305308
measurementMethod,
@@ -336,7 +339,7 @@ function CentileChart({
336339

337340
{
338341
/* Term child shaded area: */
339-
termAreaData !== null && <VictoryArea style={styles.termArea} data={termAreaData} />
342+
termAreaData !== null && reference=="uk-who" && <VictoryArea style={styles.termArea} data={termAreaData} />
340343
}
341344

342345
{/* X axis: */}
@@ -368,7 +371,7 @@ function CentileChart({
368371
{/* Any measurements plotting here are likely due to delayed puberty */}
369372
{/* The upper border is the 0.4th centile so this must come before the centiles */}
370373

371-
{
374+
{ reference==="uk-who" && measurementMethod === "height" &&
372375
// delayed puberty area:
373376
pubertyThresholds !== null && (
374377
<VictoryArea
@@ -387,27 +390,37 @@ function CentileChart({
387390
*/
388391
}
389392

390-
{ reference==="uk-who" && measurementMethod==="height" && filteredMidParentalHeightData &&
393+
{ (reference==="uk-who" || reference==="cdc") && measurementMethod==="height" && filteredMidParentalHeightData &&
391394

392395
filteredMidParentalHeightData.map((reference, index)=>{
393396

394397
// this function filters the midparental height centile data to only those values
395398
// one month either side of the most recent measurement, or 20 y if no measurements
396399
// supplied.
400+
if (index === 0){
401+
// neonates - remove
402+
return
403+
}
397404

398405
const lowerData = reference.lowerParentalCentile;
399406
const midData = reference.midParentalCentile;
400407
const upperData = reference.upperParentalCentile;
401408

402409
return (
403410
<VictoryGroup key={'midparentalCentileDataBlock' + index}>
404-
{ upperData.map((centile: ICentile, centileIndex: number)=>{
411+
{
412+
upperData.map((centile: ICentile, centileIndex: number)=>{
405413
// area lower and and upper boundaries
406414
const newData: any = centile.data.map((data, index) => {
407415
let o: any = Object.assign({}, data)
408416
o.y0 = lowerData[centileIndex].data[index].y
409417
return o;
410418
})
419+
if (newData.length < 1){
420+
// prevents a css `width` infinity error if no data presented to centile line;
421+
return
422+
}
423+
411424
return (
412425
<VictoryArea
413426
name="areaMPH"
@@ -419,6 +432,10 @@ function CentileChart({
419432
})
420433
}
421434
{ lowerData.map((lowercentile: ICentile, centileIndex: number) => {
435+
if (lowercentile.data.length < 1){
436+
// prevents a css `width` infinity error if no data presented to centile line
437+
return
438+
}
422439
return (
423440
<VictoryLine
424441
name="lowerCentileMPH"
@@ -430,6 +447,10 @@ function CentileChart({
430447
);
431448
})}
432449
{midData.map((centile: ICentile, centileIndex: number) => {
450+
if (centile.data.length < 1){
451+
// prevents a css `width` infinity error if no data presented to centile line
452+
return
453+
}
433454
return (
434455
<VictoryLine
435456
name="centileMPH"
@@ -441,6 +462,10 @@ function CentileChart({
441462
);
442463
})}
443464
{upperData.map((uppercentile: ICentile, centileIndex: number) => {
465+
if (uppercentile.data.length < 1){
466+
// prevents a css `width` infinity error if no data presented to centile line
467+
return
468+
}
444469
return (
445470
<VictoryLine
446471
name="upperCentileMPH"
@@ -474,6 +499,14 @@ function CentileChart({
474499
{centileData &&
475500
centileData.map((referenceData, referenceIndex) => {
476501

502+
if (reference === "cdc"){
503+
if(referenceIndex === 0 || (measurementMethod === "ofc" && referenceIndex > 1)){
504+
// this is a hack that needs fixing in future. It arrises because of the null data in the CDC neonate dataset (Fenton). Once the data is fixed, this can be removed. Only for weight is renders a line in the under ones.
505+
// it also removes the duplicate tooltips in the head circumference chart
506+
return
507+
}
508+
}
509+
477510
return (
478511
<VictoryGroup
479512
key={'centileDataBlock' + referenceIndex}
@@ -484,14 +517,14 @@ function CentileChart({
484517

485518
// BMI charts also have SDS lines at -5, -4, -3, -2, 2, 3, 4, 5
486519

487-
if (centile.data.length < 1){
520+
if (centile.data !== null && centile.data.length < 1){
488521
// prevents a css `width` infinity error if no data presented to centile line
489522
return
490523
}
491524

492-
if (centileIndex % 2 === 0) {
525+
if (centileIndex %2) {
493526
// even index - centile is dashed
494-
527+
495528
return (
496529
<VictoryLine
497530
data-testid={'reference-'+referenceIndex+'-centile-'+centile.centile+'-measurement-'+measurementMethod}
@@ -557,7 +590,7 @@ function CentileChart({
557590

558591
{
559592
/* BMI SDS lines */
560-
measurementMethod === "bmi" && bmiSDSData &&
593+
measurementMethod === "bmi" && bmiSDSData && reference === "uk-who" && // only render for UK-WHO BMI charts since other references do not have SDS lines
561594
bmiSDSData.map((sdsReferenceData, index) => {
562595
return (
563596
<VictoryGroup

‎src/CentileChart/CentileChart.types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export type Results = {
1919
};
2020
export interface CentileChartProps {
2121
chartsVersion?: string;
22-
reference: 'uk-who' | 'turner' | 'trisomy-21';
22+
reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc';
2323
title: string;
2424
subtitle: string;
2525
measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi';

‎src/RCPCHChart/RCPCHChart.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import * as RCPCHChartStories from './RCPCHChart.stories.tsx';
88

99
An `RCPCHChart` instance is a wrapper component that receives user props and uses these to create either a CentileChart or an SDSChart.
1010

11-
<Canvas of={RCPCHChartStories.CentileChart} />
11+
<Canvas of={RCPCHChartStories.CentileChartUKWHOGirlsHeight} />
1212

1313
## Props
1414

0 commit comments

Comments
 (0)