Skip to content

Commit 7ec85e9

Browse files
eatyourpeaseatyourpeas
authored
Merge pull request #128 from rcpch/eatyourpeas/issue127
centile-label-fix
2 parents d901491 + c21988d commit 7ec85e9

File tree

9 files changed

+23063
-10
lines changed

9 files changed

+23063
-10
lines changed

‎package.json

+1-1
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.2.0",
3+
"version": "7.2.1",
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",

‎src/CentileChart/CentileChart.tsx

+24-4
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,12 @@ function CentileChart({
161161
pubertyThresholds = makePubertyThresholds(domains, sex);
162162
}
163163
if (reference === 'uk-who' || reference === 'cdc') {
164-
nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex, reference);
164+
if (reference === 'cdc' && measurementMethod === 'ofc') {
165+
// no nondisjunction lines for CDC OFC
166+
nondisjunctionThresholds = null;
167+
} else {
168+
nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex, reference);
169+
}
165170
}
166171

167172
const filteredMidParentalHeightData = useMemo(
@@ -537,7 +542,12 @@ function CentileChart({
537542
style={{ ...styles.dashedCentile }}
538543
labels={(props: { index: number }) =>
539544
centileLabels &&
540-
labelIndexInterval(chartScaleType, props.index) &&
545+
labelIndexInterval(
546+
chartScaleType,
547+
props.index,
548+
reference,
549+
measurementMethod,
550+
) &&
541551
props.index > 0
542552
? [addOrdinalSuffix(centile.centile)]
543553
: null
@@ -583,7 +593,12 @@ function CentileChart({
583593
style={{ ...styles.continuousCentile }}
584594
labels={(props: { index: number }) =>
585595
centileLabels &&
586-
labelIndexInterval(chartScaleType, props.index) &&
596+
labelIndexInterval(
597+
chartScaleType,
598+
props.index,
599+
reference,
600+
measurementMethod,
601+
) &&
587602
props.index > 0
588603
? [addOrdinalSuffix(centile.centile)]
589604
: null
@@ -650,7 +665,12 @@ function CentileChart({
650665
style={styles.sdsLine}
651666
labels={(props: { index: number }) =>
652667
centileLabels &&
653-
labelIndexInterval(chartScaleType, props.index) &&
668+
labelIndexInterval(
669+
chartScaleType,
670+
props.index,
671+
reference,
672+
measurementMethod,
673+
) &&
654674
props.index > 0
655675
? [sdsLine.sds]
656676
: null

‎src/RCPCHChart/RCPCHChart.stories.tsx

+86
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ import { smallChildJustOverTwo } from '../testParameters/measurements/smallChild
1212
import { girlMidparentalheightCDC } from '../testParameters/measurements/girlMidparentalheightCDC.ts';
1313
import { girlMidparentalHeightUKWHO } from '../testParameters/measurements/girlMidparentalheightUKWHO.ts';
1414
import { prematureGirlBMI } from '../testParameters/measurements/prematureGirlBMI.ts';
15+
import { cdcOFCGirl } from '../testParameters/measurements/cdcOFCGirls.ts';
16+
import { maleCDCBMIExcess } from '../testParameters/measurements/maleCDCBMIExcess.ts';
17+
import { childTrisomyAAPData } from '../testParameters/measurements/childTrisomyAAPData.ts';
18+
import { maleWeightT21AAPData } from '../testParameters/measurements/maleWeightT21AAP.ts';
1519
// import { cdcFentonGirlLength } from '../testParameters/measurements/fenton/cdcFentonGirlLength';
1620
// import { cdcFentonGirlWeight } from '../testParameters/measurements/fenton/cdcFentonGirlWeight.ts';
1721

@@ -387,6 +391,26 @@ export const CentileChartCDCBoysBMI: Story = {
387391
},
388392
};
389393

394+
export const CentileChartCDCBoysBMIExcess: Story = {
395+
args: {
396+
title: 'Patient Name - Hospital Number',
397+
measurementMethod: 'bmi',
398+
reference: 'cdc',
399+
sex: 'male',
400+
measurements: {
401+
bmi: maleCDCBMIExcess,
402+
},
403+
midParentalHeightData: {},
404+
enableZoom: true,
405+
chartType: 'centile',
406+
enableExport: false,
407+
exportChartCallback: () => {},
408+
theme: 'tanner2',
409+
customThemeStyles: {},
410+
clinicianFocus: true,
411+
},
412+
};
413+
390414
export const CentileChartCDCGirlsHeadCircumference: Story = {
391415
args: {
392416
title: 'Patient Name - Hospital Number',
@@ -407,6 +431,26 @@ export const CentileChartCDCGirlsHeadCircumference: Story = {
407431
},
408432
};
409433

434+
export const CentileChartCDCGirlsDataHeadCircumference: Story = {
435+
args: {
436+
title: 'Patient Name - Hospital Number',
437+
measurementMethod: 'ofc',
438+
reference: 'cdc',
439+
sex: 'female',
440+
measurements: {
441+
ofc: cdcOFCGirl,
442+
},
443+
midParentalHeightData: {},
444+
enableZoom: true,
445+
chartType: 'centile',
446+
enableExport: false,
447+
exportChartCallback: () => {},
448+
theme: 'tanner2',
449+
customThemeStyles: {},
450+
clinicianFocus: true,
451+
},
452+
};
453+
410454
export const CentileChartCDCBoysHeadCircumference: Story = {
411455
args: {
412456
title: 'Patient Name - Hospital Number',
@@ -509,6 +553,48 @@ export const CentileChartTrisomy21AAPGirlsHeight: Story = {
509553
},
510554
};
511555

556+
export const CentileChartTrisomy21AAPBoysHeightData: Story = {
557+
args: {
558+
title: 'Patient Name - Hospital Number',
559+
measurementMethod: 'height',
560+
reference: 'trisomy-21-aap',
561+
sex: 'male',
562+
measurements: {
563+
height: childTrisomyAAPData,
564+
},
565+
midParentalHeightData: {},
566+
enableZoom: true,
567+
chartType: 'centile',
568+
enableExport: false,
569+
exportChartCallback: () => {},
570+
theme: 'tanner3',
571+
customThemeStyles: {},
572+
clinicianFocus: true,
573+
logoVariant: 'bottom',
574+
},
575+
};
576+
577+
export const CentileChartTrisomy21AAPBoysWeightData: Story = {
578+
args: {
579+
title: 'Patient Name - Hospital Number',
580+
measurementMethod: 'weight',
581+
reference: 'trisomy-21-aap',
582+
sex: 'male',
583+
measurements: {
584+
weight: maleWeightT21AAPData,
585+
},
586+
midParentalHeightData: {},
587+
enableZoom: true,
588+
chartType: 'centile',
589+
enableExport: false,
590+
exportChartCallback: () => {},
591+
theme: 'tanner3',
592+
customThemeStyles: {},
593+
clinicianFocus: true,
594+
logoVariant: 'bottom',
595+
},
596+
};
597+
512598
export const CentileChartTrisomy21AAPGirlsWeight: Story = {
513599
args: {
514600
title: 'Patient Name - Hospital Number',

‎src/functions/labelAngle.ts

+16-4
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function labelAngle(
1616
Also accepts chart domains as parameter, as x magnification depends on visible extremes of chart (eg a 3 year old seen close up, or 3 year old in life course view)
1717
*/
1818

19-
if (data.length < 1) {
19+
if (data === null || data.length < 1) {
2020
return;
2121
}
2222

@@ -79,10 +79,20 @@ export function labelAngle(
7979
}
8080
}
8181
if (measurementMethod === 'bmi') {
82-
ageDiff = xDiff * 2;
82+
if (chartScaleType === 'smallChild' || chartScaleType === 'biggerChild') {
83+
ageDiff = xDiff * 5;
84+
} else {
85+
ageDiff = xDiff * 9;
86+
}
8387
}
8488
if (measurementMethod === 'ofc') {
85-
ageDiff = xDiff * 2.5;
89+
ageDiff = xDiff * 10;
90+
if (chartScaleType === 'smallChild') {
91+
ageDiff = xDiff * 5;
92+
}
93+
if (chartScaleType === 'infant') {
94+
ageDiff = xDiff * 25;
95+
}
8696
if (chartScaleType === 'prem') {
8797
ageDiff = xDiff * 200;
8898
}
@@ -91,6 +101,8 @@ export function labelAngle(
91101
let angle = 0;
92102
const radians = Math.atan2(measurementDiff, ageDiff);
93103
angle = radians * (180 / Math.PI);
94-
// console.log(`angle: ${angle}, centile: ${lastItem.l} x0: ${x0} x1: ${x1} x-diff: ${x1-x0} y0: ${y0} y1:${y1} y-diff:${y1-y0} gradient: ${(y1-y0)/(x1-x0)}`);
104+
// console.log(
105+
// `angle: ${angle}, centile: ${lastItem.l} x0: ${x0} x1: ${x1} x-diff: ${x1 - x0} y0: ${y0} y1:${y1} y-diff:${y1 - y0} gradient: ${(y1 - y0) / (x1 - x0)}`,
106+
// );
95107
return Math.round(-angle);
96108
}

‎src/functions/labelIndexInterval.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
export function labelIndexInterval(
22
chartScaleType: 'prem' | 'infant' | 'smallChild' | 'biggerChild' = 'biggerChild',
33
index: number,
4+
reference: 'uk-who' | 'cdc' | 'trisomy-21' | 'trisomy-21-aap' | 'turner',
5+
measurementMethod: 'height' | 'weight' | 'bmi' | 'ofc',
46
): boolean {
57
// returns true if index of data point in centile data array should be rendered
68

79
switch (chartScaleType) {
810
case 'prem':
911
return index % 5 == 0;
1012
case 'infant':
11-
return index % 10 == 0;
13+
return index % 5 == 0;
1214
case 'smallChild':
1315
return index % 30 == 0;
1416
case 'biggerChild':
17+
if (reference === 'trisomy-21-aap') {
18+
if (measurementMethod === 'height' || measurementMethod === 'ofc') {
19+
return index % 5 == 0;
20+
}
21+
return index % 20 == 0;
22+
}
1523
return index % 40 == 0;
1624
default:
1725
return index % 50 == 0;

0 commit comments

Comments
 (0)