Merge pull request #114 from rcpch:eatyourpeas/issue98

nondisjunction-lines

Author: eatyourpeas

package-lock.json

@@ -22,6 +22,7 @@ import tailoredXTickValues from '../functions/tailoredXTickValues';
 import defaultToggles from '../functions/defaultToggles';
 import { tooltipText } from '../functions/tooltips';
 import { delayedPubertyThreshold, makePubertyThresholds, lowerPubertyBorder } from '../functions/DelayedPuberty';
+import { nondisjunctionThresholds, makeNonDisjunctionThresholds } from '../functions/nondisjunctionLines';
 import { getFilteredMidParentalHeightData } from '../functions/getFilteredMidParentalHeightData';
 import { isCrowded } from '../functions/isCrowded';
 import { labelAngle } from '../functions/labelAngle';
@@ -154,10 +155,14 @@ function CentileChart({
     const isChartCrowded = isCrowded(domains, childMeasurements);
 
     let pubertyThresholds: null | any[] = null;
+    let nondisjunctionThresholds: null | any[] = null;
 
     if (reference === 'uk-who' && measurementMethod === 'height') {
         pubertyThresholds = makePubertyThresholds(domains, sex);
     }
+    if (reference === 'uk-who') {
+        nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex)
+    }
 
     const filteredMidParentalHeightData = useMemo(() => getFilteredMidParentalHeightData(reference, childMeasurements, midParentalHeightData, sex),[
         reference,
@@ -629,6 +634,34 @@ function CentileChart({
                             })
                     }
 
+                    {
+                        //  nondisjunction lines uk90->uk-who->uk-who
+                        nondisjunctionThresholds !== null &&
+                            nondisjunctionThresholds.map((dataArray) => {
+                                if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+                                    return (
+                                        <VictoryLine
+                                            key={dataArray[0].x}
+                                            name={`nondisjunction-${dataArray[0].x}`}
+                                            style={styles.nondisjunctionThresholdLine}
+                                            data={dataArray}
+                                            labelComponent={
+                                                <VictoryLabel
+                                                    textAnchor="start"
+                                                    angle={-90}
+                                                    dx={5}
+                                                    dy={10}
+                                                    style={styles.nondisjunctionThresholdLabel}
+                                                />
+                                            }
+                                        />
+                                    );
+                                } else {
+                                    return null;
+                                }
+                            })
+                    }
+
                     {/* create a series for each child measurements data point: a circle for chronological age, a cross for corrected */}
                     {/* If data points are close together, reduce the size of the point */}
 

src/CentileChart/CentileChart.tsx

@@ -18,9 +18,11 @@ import { AxisStyle, CentileStyle, SDSStyle, ChartStyle, GridlineStyle, Measureme
 
 const black = '#000000';
 const white = '#FFFFFF';
+const darkGrey = '#808080';
 const midGrey = '#b3b3b3';
 const lightGrey = '#d9d9d9';
 const lightLightGrey = "#f3f3f3";
+const charcoal = "#4d4d4d";
 const aquaGreen ='#00BDAA'
 const orange = '#FF8000'
 const purple = '#7159AA'
@@ -152,7 +154,7 @@ function makeAllStyles(
         },
         delayedPubertyThresholdLine: {
             data: {
-                stroke: measurementStyle?.measurementFill ?? black,
+                stroke: charcoal,
                 strokeWidth: 1,
             },
         },
@@ -162,6 +164,12 @@ function makeAllStyles(
             fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
             textAlign: 'start',
         },
+        nondisjunctionThresholdLine: {
+            data: {
+                stroke: charcoal,
+                strokeWidth: 1,
+            },
+        },
         sdsLine: {  // these are the sds lines on the BMI chart
             data: {
                 stroke: centileStyle?.sdsStroke ?? '#A9A9A9',

src/functions/makeAllStyles.ts

@@ -0,0 +1,46 @@
+import { Domains } from '../interfaces/Domains';
+
+export const nondisjunctionThresholds = {
+    male: [
+        {
+            x: 0.038,
+            label: 'Transition point from UK-WHO to UK90 reference',
+        },
+        {
+            x: 2,
+            label: "Measure length until 2y. Measure height from 2y. A child's height is usually slightly less than their length.",
+        },
+        {
+            x: 4,
+            label: 'Transition point from UK-WHO to UK90 reference',
+        },
+    ],
+    female: [
+        {
+            x: 0.038,
+            label: 'Transition point from UK-WHO to UK90 reference',
+        },
+        {
+            x: 2,
+            label: "Measure length until 2y. Measure height from 2y. A child's height is usually slightly less than their length.",
+        },
+        {
+            x: 4,
+            label: 'Transition point from UK-WHO to UK90 reference',
+        },
+    ],
+};
+
+export function makeNonDisjunctionThresholds(domains: Domains | null, sex: 'male' | 'female') {
+    if (!domains) {
+        return [];
+    }
+    const newNonDisjunctionThresholds: any[] = [];
+    for (const element of nondisjunctionThresholds[sex]) {
+        const dataSubArray = [];
+        dataSubArray.push({ x: element.x, y: domains.y[0], label: element.label });
+        dataSubArray.push({ x: element.x, y: domains.y[1], label: element.label });
+        newNonDisjunctionThresholds.push(dataSubArray);
+    }
+    return newNonDisjunctionThresholds;
+}

src/functions/nondisjunctionLines.ts

@@ -19,6 +19,8 @@ export interface MeasurementStyle {
 export interface CentileStyle {
     sdsStroke?: string; // sds line colour
     centileStroke?: string; // centile line colour
+    nondisjunctionThresholdLabel ?: string; // label for nondisjunctionThresholdLabel
+    nondisjunctionThresholdLine ?: string; // colour of nondisjunctionThresholdLine
     delayedPubertyAreaFill?: string; // delayed puberty area colour
     midParentalCentileStroke?: string; // Midparental height centile line colour
     midParentalAreaFill?: string; // Midparental height area colour