add nondisjunction threshold lines and styling

Author: eatyourpeas

src/CentileChart/CentileChart.tsx

@@ -751,6 +751,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/functions/makeAllStyles.ts

@@ -19,10 +19,12 @@ import { AxisStyle, CentileStyle, SDSStyle, ChartStyle, GridlineStyle, Measureme
 const black = '#000000';
 const white = '#FFFFFF';
 const darkGrey = '#808080';
+const darkGrey = '#808080';
 const midGrey = '#b3b3b3';
 const lightGrey = '#d9d9d9';
 const lightLightGrey = "#f3f3f3";
 const charcoal = "#4d4d4d";
+const charcoal = "#4d4d4d";
 const aquaGreen ='#00BDAA'
 const orange = '#FF8000'
 const purple = '#7159AA'