Skip to content

Commit

Permalink
Merge pull request #115 from rcpch/cdc
Browse files Browse the repository at this point in the history 
CDC
  • Loading branch information
@eatyourpeas
eatyourpeas authored Oct 21, 2024
2 parents a93129c + ae16ba5 commit e1e096a
Show file tree
Hide file tree
Showing 31 changed files with 42,763 additions and 51 deletions.
5 changes: 4 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,7 @@ build/
dist/
storybook-static/
.DS_Store
.vscode
.vscode

src/chartdata/fenton/*.*
src/testParameters/measurements/fenton/*.*
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@rcpch/digital-growth-charts-react-component-library",
"version": "7.0.13",
"version": "7.1.0",
"description": "A React component library for the RCPCH digital growth charts using Rollup, TypeScript and Styled-Components",
"main": "build/index.js",
"module": "build/esm.index.js",
Expand Down Expand Up @@ -32,7 +32,8 @@
"dependencies": {
"sass": "1.70.0",
"styled-components": "6.1.8",
"victory": "36.9.1"
"victory": "36.9.1",
"@rcpch/digital-growth-charts-react-component-library":"7.0.12"
},
"devDependencies": {
"@babel/preset-react": "7.23.3",
Expand Down
75 changes: 74 additions & 1 deletion src/CentileChart/CentileChart.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Tanner1Styles } from '../testParameters/styles/tanner1Styles';
import { Tanner2Styles } from '../testParameters/styles/tanner2Styles';
import { Tanner3Styles } from '../testParameters/styles/tanner3Styles';
import { traditionalBoysStyles } from '../testParameters/styles/traditionalBoysStyles';
import { traditionalGirlsStyles } from '../testParameters/styles/traditionalGirlsStyles';
import { termGirlWithSingleHeightMeasurementAndBoneAgeAndEvent } from '../testParameters/measurements/termGirlWithSingleHeightMeasurementAndBoneAgeAndEvent';
import { twoWeightMeasurements } from '../testParameters/measurements/twoWeightMeasurements';
import { twoToEight } from '../testParameters/measurements/twoToEight';
Expand All @@ -28,7 +29,7 @@ import { termBabyGirlWeight } from '../testParameters/measurements/termBabyGirlW
import { trisomy21HighBMI } from '../testParameters/measurements/trisomy21HighBMI';

export default {
title: 'CentileChart',
title: 'Centile Chart',
};

export const WithHeightAndNoData = () => (
Expand All @@ -49,6 +50,78 @@ export const WithHeightAndNoData = () => (
/>
);

export const WithCDCFemaleHeightAndNoData = () => (
<CentileChart
chartsVersion="testChart"
reference="cdc"
title="Patient"
subtitle="Name - CDC"
measurementMethod="height"
sex="female"
childMeasurements={[]}
midParentalHeightData={midParentalHeights}
enableZoom={true}
styles={traditionalGirlsStyles}
enableExport={true}
exportChartCallback={() => null}
clinicianFocus={true}
/>
);

export const WithCDCMaleWeightAndNoData = () => (
<CentileChart
chartsVersion="testChart"
reference="cdc"
title="Patient"
subtitle="Name - CDC"
measurementMethod="weight"
sex="male"
childMeasurements={[]}
midParentalHeightData={midParentalHeights}
enableZoom={true}
styles={traditionalBoysStyles}
enableExport={true}
exportChartCallback={() => null}
clinicianFocus={true}
/>
);

export const WithCDCMaleBMIAndNoData = () => (
<CentileChart
chartsVersion="testChart"
reference="cdc"
title="Patient"
subtitle="Name - CDC"
measurementMethod="bmi"
sex="male"
childMeasurements={[]}
midParentalHeightData={midParentalHeights}
enableZoom={true}
styles={traditionalBoysStyles}
enableExport={true}
exportChartCallback={() => null}
clinicianFocus={true}
/>
);

export const WithCDCMaleOFCAndNoData = () => (
<CentileChart
chartsVersion="testChart"
reference="cdc"
title="Patient"
subtitle="Name - CDC"
measurementMethod="ofc"
sex="male"
childMeasurements={[]}
midParentalHeightData={midParentalHeights}
enableZoom={true}
styles={traditionalBoysStyles}
enableExport={true}
exportChartCallback={() => null}
clinicianFocus={true}
/>
);

export const WithTurnerHeightAndNoData = () => (
<CentileChart
chartsVersion="testChart"
Expand Down
51 changes: 42 additions & 9 deletions src/CentileChart/CentileChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ function CentileChart({
),
[storedChildMeasurements, sex, measurementMethod, reference, showCorrectedAge, showChronologicalAge],
);


// get the highest reference index of visible centile data
let maxVisibleReferenceIndex: number = null;
Expand All @@ -143,7 +144,8 @@ function CentileChart({
minimumArrayLength = 6;
break;
}
if (item[0].data.length > minimumArrayLength){

if (item[0].data !== null && item[0].data.length > minimumArrayLength){
maxVisibleReferenceIndex = index;
}
});
Expand Down Expand Up @@ -300,6 +302,7 @@ function CentileChart({
// This the tool tip text, and accepts a large number of arguments
// tool tips return contextual information for each datapoint, as well as the centile
// and SDS lines, as well as bone ages, events and midparental heights

const tooltipTextList = tooltipText(
reference,
measurementMethod,
Expand Down Expand Up @@ -336,7 +339,7 @@ function CentileChart({

{
/* Term child shaded area: */
termAreaData !== null && <VictoryArea style={styles.termArea} data={termAreaData} />
termAreaData !== null && reference=="uk-who" && <VictoryArea style={styles.termArea} data={termAreaData} />
}

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

{
{ reference==="uk-who" && measurementMethod === "height" &&
// delayed puberty area:
pubertyThresholds !== null && (
<VictoryArea
Expand All @@ -387,27 +390,37 @@ function CentileChart({
*/
}

{ reference==="uk-who" && measurementMethod==="height" && filteredMidParentalHeightData &&
{ (reference==="uk-who" || reference==="cdc") && measurementMethod==="height" && filteredMidParentalHeightData &&

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

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

const lowerData = reference.lowerParentalCentile;
const midData = reference.midParentalCentile;
const upperData = reference.upperParentalCentile;

return (
<VictoryGroup key={'midparentalCentileDataBlock' + index}>
{ upperData.map((centile: ICentile, centileIndex: number)=>{
{
upperData.map((centile: ICentile, centileIndex: number)=>{
// area lower and and upper boundaries
const newData: any = centile.data.map((data, index) => {
let o: any = Object.assign({}, data)
o.y0 = lowerData[centileIndex].data[index].y
return o;
})
if (newData.length < 1){
// prevents a css `width` infinity error if no data presented to centile line;
return
}

return (
<VictoryArea
name="areaMPH"
Expand All @@ -419,6 +432,10 @@ function CentileChart({
})
}
{ lowerData.map((lowercentile: ICentile, centileIndex: number) => {
if (lowercentile.data.length < 1){
// prevents a css `width` infinity error if no data presented to centile line
return
}
return (
<VictoryLine
name="lowerCentileMPH"
Expand All @@ -430,6 +447,10 @@ function CentileChart({
);
})}
{midData.map((centile: ICentile, centileIndex: number) => {
if (centile.data.length < 1){
// prevents a css `width` infinity error if no data presented to centile line
return
}
return (
<VictoryLine
name="centileMPH"
Expand All @@ -441,6 +462,10 @@ function CentileChart({
);
})}
{upperData.map((uppercentile: ICentile, centileIndex: number) => {
if (uppercentile.data.length < 1){
// prevents a css `width` infinity error if no data presented to centile line
return
}
return (
<VictoryLine
name="upperCentileMPH"
Expand Down Expand Up @@ -474,6 +499,14 @@ function CentileChart({
{centileData &&
centileData.map((referenceData, referenceIndex) => {

if (reference === "cdc"){
if(referenceIndex === 0 || (measurementMethod === "ofc" && referenceIndex > 1)){
// 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.
// it also removes the duplicate tooltips in the head circumference chart
return
}
}

return (
<VictoryGroup
key={'centileDataBlock' + referenceIndex}
Expand All @@ -484,14 +517,14 @@ function CentileChart({

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

if (centile.data.length < 1){
if (centile.data !== null && centile.data.length < 1){
// prevents a css `width` infinity error if no data presented to centile line
return
}

if (centileIndex % 2 === 0) {
if (centileIndex %2) {
// even index - centile is dashed

return (
<VictoryLine
data-testid={'reference-'+referenceIndex+'-centile-'+centile.centile+'-measurement-'+measurementMethod}
Expand Down Expand Up @@ -557,7 +590,7 @@ function CentileChart({

{
/* BMI SDS lines */
measurementMethod === "bmi" && bmiSDSData &&
measurementMethod === "bmi" && bmiSDSData && reference === "uk-who" && // only render for UK-WHO BMI charts since other references do not have SDS lines
bmiSDSData.map((sdsReferenceData, index) => {
return (
<VictoryGroup
Expand Down
2 changes: 1 addition & 1 deletion src/CentileChart/CentileChart.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export type Results = {
};
export interface CentileChartProps {
chartsVersion?: string;
reference: 'uk-who' | 'turner' | 'trisomy-21';
reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc';
title: string;
subtitle: string;
measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi';
Expand Down
2 changes: 1 addition & 1 deletion src/RCPCHChart/RCPCHChart.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import * as RCPCHChartStories from './RCPCHChart.stories.tsx';

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

<Canvas of={RCPCHChartStories.CentileChart} />
<Canvas of={RCPCHChartStories.CentileChartUKWHOGirlsHeight} />

## Props

Expand Down
Loading

0 comments on commit e1e096a

Please sign in to comment.