Merge pull request #125 from rcpch/eatyourpeas/issue124

Trisomy21-AAP
rcpch · Oct 27, 2024 · d901491 · d901491
2 parents 7305c2c + 3487a1e
commit d901491
Show file tree

Hide file tree

Showing 22 changed files with 59,036 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@rcpch/digital-growth-charts-react-component-library",
-    "version": "7.1.4",
+    "version": "7.2.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",

diff --git a/src/CentileChart/CentileChart.stories.tsx b/src/CentileChart/CentileChart.stories.tsx
@@ -8,7 +8,6 @@ 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';
 import { twoToEightWeight } from '../testParameters/measurements/twoToEightWeight';
 import { twoToEightOFC } from '../testParameters/measurements/twoToEightOFC';

diff --git a/src/CentileChart/CentileChart.tsx b/src/CentileChart/CentileChart.tsx
@@ -93,7 +93,7 @@ function CentileChart({
     enableExport,
     exportChartCallback,
     clinicianFocus,
-    logoVariant
+    logoVariant,
 }: CentileChartProps) {
     const [userDomains, setUserDomains] = useState(null);
 
@@ -160,8 +160,8 @@ function CentileChart({
     if (reference === 'uk-who' && measurementMethod === 'height') {
         pubertyThresholds = makePubertyThresholds(domains, sex);
     }
-    if (reference === 'uk-who') {
-        nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex);
+    if (reference === 'uk-who' || reference === 'cdc') {
+        nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex, reference);
     }
 
     const filteredMidParentalHeightData = useMemo(
@@ -251,21 +251,17 @@ function CentileChart({
 
     return (
         <MainContainer>
-
             {logoVariant === 'top' && (
                 <TopContainer>
                     <LogoContainer>
                         <IndividualLogoContainer>
                             <img src={icon} width={24} height={24} />
                         </IndividualLogoContainer>
-                        <VersionLabel
-                            fontFamily={styles.chartTitle.fontFamily}
-                        >{chartsVersion}</VersionLabel>
+                        <VersionLabel fontFamily={styles.chartTitle.fontFamily}>{chartsVersion}</VersionLabel>
                         <IndividualLogoContainer>
-                            <img src={ukca} width={18} height={18}/>
+                            <img src={ukca} width={18} height={18} />
                         </IndividualLogoContainer>
                     </LogoContainer>
-
                 </TopContainer>
             )}
 
@@ -754,9 +750,10 @@ function CentileChart({
                     {/* If data points are close together, reduce the size of the point */}
 
                     {childMeasurements.map((childMeasurement: Measurement, index) => {
-                        const [observationYear, observationMonth, observationDay] = childMeasurement.measurement_dates.observation_date.split('-');
+                        const [observationYear, observationMonth, observationDay] =
+                            childMeasurement.measurement_dates.observation_date.split('-');
                         const observationDate = `${observationDay}/${observationMonth}/${observationYear}`;
-                        
+
                         const chronData: any = {
                             age_type: 'chronological_age',
                             age_error: childMeasurement.measurement_dates.chronological_decimal_age_error,
@@ -976,7 +973,9 @@ function CentileChart({
                     color={styles.referenceTextStyle.color}
                     fontWeight={styles.referenceTextStyle.fontWeight}
                     fontStyle={styles.referenceTextStyle.fontStyle}
-                >{referenceText(reference)}</ChartTitle>
+                >
+                    {referenceText(reference)}
+                </ChartTitle>
 
                 {logoVariant === 'legend' && (
                     <ChartTitle
@@ -985,7 +984,9 @@ function CentileChart({
                         color={styles.referenceTextStyle.color}
                         fontWeight={styles.referenceTextStyle.fontWeight}
                         fontStyle={styles.referenceTextStyle.fontStyle}
-                    >Powered by RCPCH Digital Growth Charts - {chartsVersion}</ChartTitle>
+                    >
+                        Powered by RCPCH Digital Growth Charts - {chartsVersion}
+                    </ChartTitle>
                 )}
 
                 {logoVariant === 'bottom' && (
@@ -996,12 +997,11 @@ function CentileChart({
                             </IndividualLogoContainer>
                             <VersionLabel fontFamily={styles.chartTitle.fontFamily}>{chartsVersion}</VersionLabel>
                             <IndividualLogoContainer>
-                                <img src={ukca} width={18} height={18}/>
+                                <img src={ukca} width={18} height={18} />
                             </IndividualLogoContainer>
                         </BottomLogoContainer>
                     </BottomContainer>
                 )}
-
             </ChartContainer>
 
             {(showToggle || allowZooming || enableExport || childMeasurements.length > 0) && (

diff --git a/src/CentileChart/CentileChart.types.ts b/src/CentileChart/CentileChart.types.ts
@@ -19,7 +19,7 @@ export type Results = {
 };
 export interface CentileChartProps {
     chartsVersion?: string;
-    reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc';
+    reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc' | 'trisomy-21-aap';
     title: string;
     subtitle: string;
     measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi';

diff --git a/src/RCPCHChart/RCPCHChart.stories.tsx b/src/RCPCHChart/RCPCHChart.stories.tsx
@@ -467,6 +467,174 @@ export const CentileChartUKWHOGirlMidparentalHeight: Story = {
     },
 };
 
+export const CentileChartTrisomy21AAPBoysHeight: Story = {
+    args: {
+        title: 'Patient Name - Hospital Number',
+        measurementMethod: 'height',
+        reference: 'trisomy-21-aap',
+        sex: 'male',
+        measurements: {
+            height: [],
+        },
+        midParentalHeightData: {},
+        enableZoom: true,
+        chartType: 'centile',
+        enableExport: false,
+        exportChartCallback: () => {},
+        theme: 'tanner3',
+        customThemeStyles: {},
+        clinicianFocus: true,
+        logoVariant: 'bottom',
+    },
+};
+
+export const CentileChartTrisomy21AAPGirlsHeight: Story = {
+    args: {
+        title: 'Patient Name - Hospital Number',
+        measurementMethod: 'height',
+        reference: 'trisomy-21-aap',
+        sex: 'female',
+        measurements: {
+            height: [],
+        },
+        midParentalHeightData: {},
+        enableZoom: true,
+        chartType: 'centile',
+        enableExport: false,
+        exportChartCallback: () => {},
+        theme: 'tanner3',
+        customThemeStyles: {},
+        clinicianFocus: true,
+        logoVariant: 'bottom',
+    },
+};
+
+export const CentileChartTrisomy21AAPGirlsWeight: Story = {
+    args: {
+        title: 'Patient Name - Hospital Number',
+        measurementMethod: 'weight',
+        reference: 'trisomy-21-aap',
+        sex: 'female',
+        measurements: {
+            weight: [],
+        },
+        midParentalHeightData: {},
+        enableZoom: true,
+        chartType: 'centile',
+        enableExport: false,
+        exportChartCallback: () => {},
+        theme: 'tanner3',
+        customThemeStyles: {},
+        clinicianFocus: true,
+        logoVariant: 'bottom',
+    },
+};
+
+export const CentileChartTrisomy21AAPBoysWeight: Story = {
+    args: {
+        title: 'Patient Name - Hospital Number',
+        measurementMethod: 'weight',
+        reference: 'trisomy-21-aap',
+        sex: 'female',
+        measurements: {
+            weight: [],
+        },
+        midParentalHeightData: {},
+        enableZoom: true,
+        chartType: 'centile',
+        enableExport: false,
+        exportChartCallback: () => {},
+        theme: 'tanner1',
+        customThemeStyles: {},
+        clinicianFocus: true,
+        logoVariant: 'bottom',
+    },
+};
+
+export const CentileChartTrisomy21AAPGirlsBMI: Story = {
+    args: {
+        title: 'Patient Name - Hospital Number',
+        measurementMethod: 'bmi',
+        reference: 'trisomy-21-aap',
+        sex: 'female',
+        measurements: {
+            bmi: [],
+        },
+        midParentalHeightData: {},
+        enableZoom: true,
+        chartType: 'centile',
+        enableExport: false,
+        exportChartCallback: () => {},
+        theme: 'tanner3',
+        customThemeStyles: {},
+        clinicianFocus: true,
+        logoVariant: 'bottom',
+    },
+};
+
+export const CentileChartTrisomy21AAPGBoysBMI: Story = {
+    args: {
+        title: 'Patient Name - Hospital Number',
+        measurementMethod: 'bmi',
+        reference: 'trisomy-21-aap',
+        sex: 'male',
+        measurements: {
+            bmi: [],
+        },
+        midParentalHeightData: {},
+        enableZoom: true,
+        chartType: 'centile',
+        enableExport: false,
+        exportChartCallback: () => {},
+        theme: 'tanner1',
+        customThemeStyles: {},
+        clinicianFocus: true,
+        logoVariant: 'bottom',
+    },
+};
+
+export const CentileChartTrisomy21AAPGirlsHeadCircumference: Story = {
+    args: {
+        title: 'Patient Name - Hospital Number',
+        measurementMethod: 'ofc',
+        reference: 'trisomy-21-aap',
+        sex: 'female',
+        measurements: {
+            ofc: [],
+        },
+        midParentalHeightData: {},
+        enableZoom: true,
+        chartType: 'centile',
+        enableExport: false,
+        exportChartCallback: () => {},
+        theme: 'tanner3',
+        customThemeStyles: {},
+        clinicianFocus: true,
+        logoVariant: 'bottom',
+    },
+};
+
+export const CentileChartTrisomy21AAPBoysHeadCircumference: Story = {
+    args: {
+        title: 'Patient Name - Hospital Number',
+        measurementMethod: 'ofc',
+        reference: 'trisomy-21-aap',
+        sex: 'male',
+        measurements: {
+            ofc: [],
+        },
+        midParentalHeightData: {},
+        enableZoom: true,
+        chartType: 'centile',
+        enableExport: false,
+        exportChartCallback: () => {},
+        theme: 'tanner1',
+        customThemeStyles: {},
+        clinicianFocus: true,
+        logoVariant: 'bottom',
+    },
+};
+
 export const TomatoCentileChart: Story = {
     args: {
         title: 'Patient Name - Hospital Number',

diff --git a/src/RCPCHChart/RCPCHChart.types.ts b/src/RCPCHChart/RCPCHChart.types.ts
@@ -14,7 +14,7 @@ import { ClientMeasurementObject } from '../interfaces/ClientMeasurementObject';
 export interface RCPCHChartProps {
     title: string;
     measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi';
-    reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc';
+    reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc' | 'trisomy-21-aap';
     sex: 'male' | 'female';
     measurements: ClientMeasurementObject;
     midParentalHeightData?: MidParentalHeightObject | undefined;

diff --git a/src/SDSChart/SDSChart.types.ts b/src/SDSChart/SDSChart.types.ts
@@ -2,7 +2,7 @@ import { ClientMeasurementObject } from '../interfaces/ClientMeasurementObject';
 import { MidParentalHeightObject } from '../interfaces/MidParentalHeightObject';
 export interface SDSChartProps {
     chartsVersion: string;
-    reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc';
+    reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc' | 'trisomy-21-aap';
     title: string;
     subtitle: string;
     measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi';