diff --git a/package-lock.json b/package-lock.json index 0111ced..29cc287 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@rcpch/digital-growth-charts-react-component-library", - "version": "7.0.12", + "version": "7.0.10", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/src/CentileChart/CentileChart.tsx b/src/CentileChart/CentileChart.tsx index 45e4ff6..0bdfb97 100644 --- a/src/CentileChart/CentileChart.tsx +++ b/src/CentileChart/CentileChart.tsx @@ -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 ( + + } + /> + ); + } 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 */} diff --git a/src/functions/makeAllStyles.ts b/src/functions/makeAllStyles.ts index 56511cd..86f2665 100644 --- a/src/functions/makeAllStyles.ts +++ b/src/functions/makeAllStyles.ts @@ -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', diff --git a/src/functions/nondisjunctionLines.ts b/src/functions/nondisjunctionLines.ts new file mode 100644 index 0000000..d2ac4eb --- /dev/null +++ b/src/functions/nondisjunctionLines.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; +} \ No newline at end of file diff --git a/src/interfaces/StyleObjects.ts b/src/interfaces/StyleObjects.ts index 55847a8..0ab3355 100644 --- a/src/interfaces/StyleObjects.ts +++ b/src/interfaces/StyleObjects.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