Merge pull request #106 from rcpch:eatyourpeas/issue105

Eatyourpeas/issue105

Author: eatyourpeas

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcpch/digital-growth-charts-react-component-library",
-  "version": "7.0.10",
+  "version": "7.0.11",
   "description": "A React component library for the RCPCH digital growth charts using Rollup, TypeScript and Styled-Components",
   "main": "dist/index.js",
   "module": "dist/esm.index.js",

src/CentileChart/CentileChart.tsx

@@ -289,33 +289,39 @@ function CentileChart({
                             allowPan={allowZooming}
                             onZoomDomainChange={handleZoomChange}
                             zoomDomain={domains}
+                            labels={({ datum }) => {
+                                // This the tool tip text, and accepts a large number of arguments
+                                // tool tips return contextual information for each datapoint, as well as the centile
+                                // and SDS lines, as well as bone ages, events and midparental heights
+                                const tooltipTextList = tooltipText(
+                                    reference,
+                                    measurementMethod,
+                                    datum,
+                                    midParentalHeightData,
+                                    clinicianFocus,
+                                    sex
+                                )
+                                if (tooltipTextList){
+                                    return tooltipTextList.join('\n').replace(/^\s+|\s+$/g, '');
+                                } 
+                            }}
                             labelComponent={
                                 <VictoryTooltip
                                     data-testid='tooltip'
                                     constrainToVisibleArea
                                     backgroundPadding={5}
                                     pointerLength={5}
                                     cornerRadius={0}
+                                    flyoutHeight={(datum) => {
+                                        const numberOfLines = datum.text.length;
+                                        return numberOfLines * 18;    // 18 is the line height
+                                    }}
                                     flyoutStyle={{
                                         ...styles.toolTipFlyout,
                                     }}
                                     style={{...styles.toolTipMain}}
                                 />
                             }
-                            labels={({ datum }) => {
-                                // This the tool tip text, and accepts a large number of arguments
-                                // tool tips return contextual information for each datapoint, as well as the centile
-                                // and SDS lines, as well as bone ages, events and midparental heights
-                                    return tooltipText(
-                                        reference,
-                                        measurementMethod,
-                                        datum,
-                                        midParentalHeightData,
-                                        clinicianFocus,
-                                        sex
-                                    )
-                                }
-                            }
                             voronoiBlacklist={['linkLine', 'chronologicalboneagelinkline', 'correctedboneagelinkline', 'areaMPH']}
                         />
                     }
@@ -688,7 +694,6 @@ function CentileChart({
 
                                         showChronologicalAge && !showCorrectedAge ?
                                         // Events against chronological age only if corrected age not showing
-                                        <VictoryPortal>
                                             <VictoryScatter
                                                 key={"item-"+index}
                                                 name="eventcaret"
@@ -700,10 +705,9 @@ function CentileChart({
                                                     />
                                                 }
                                             />
-                                        </VictoryPortal>
                                         :
                                         // Events against corrected age
-                                        <VictoryPortal>
+                                        
                                             <VictoryScatter
                                                 key={"item-"+index}
                                                 name="eventcaret"
@@ -715,7 +719,7 @@ function CentileChart({
                                                     />
                                                 }
                                             />
-                                        </VictoryPortal>
+                                        
                                     )
                                 }
 

src/functions/getDomainsAndData.ts

@@ -21,7 +21,6 @@ import { Domains, IDomainSex } from '../interfaces/Domains';
 
 import { IPlottedCentileMeasurement, Reference, ICentile } from '../interfaces/CentilesObject';
 import deepCopy from './deepCopy';
-import { ClientMeasurementObject } from '../interfaces/ClientMeasurementObject';
 import { trisomy21HeightMaleCentileData } from '../chartdata/trisomy21_height_male_centile_data';
 import { trisomy21HeightFemaleCentileData } from '../chartdata/trisomy21_height_female_centile_data';
 import { trisomy21BMIFemaleCentileData } from '../chartdata/trisomy21_bmi_female_centile_data';
@@ -31,7 +30,6 @@ import { trisomy21WeightFemaleCentileData } from '../chartdata/trisomy21_weight_
 import { trisomy21OFCMaleCentileData } from '../chartdata/trisomy21_ofc_male_centile_data';
 import { trisomy21OFCFemaleCentileData } from '../chartdata/trisomy21_ofc_female_centile_data';
 import { turnerHeightFemaleCentileData } from '../chartdata/turner_height_female_centile_data';
-import { LineSegment } from 'victory';
 
 type CentileLabelValues = {
     0.4: { value: number; workingX: number };
@@ -267,11 +265,8 @@ function childMeasurementRanges(
         let chronologicalX = measurement.plottable_data.centile_data.chronological_decimal_age_data.x;
         let correctedY = measurement.plottable_data.centile_data.corrected_decimal_age_data.y;
         let chronologicalY = measurement.plottable_data.centile_data.chronological_decimal_age_data.y;
+        const boneAgeX = measurement.bone_age.bone_age;
         const errorsPresent = false;
-            // measurement.measurement_calculated_values.corrected_measurement_error ||
-            // measurement.measurement_calculated_values.chronological_measurement_error
-            //     ? true
-            //     : false;
 
         if (!errorsPresent) {
             if (showCorrected && !showChronological) {
@@ -299,6 +294,15 @@ function childMeasurementRanges(
                     lowestChildY = coord;
                 }
             }
+            // if bone age is present and value is more extreme than the highest or lowest x, update:
+            if (boneAgeX) {
+                if (highestChildX < boneAgeX) {
+                    highestChildX = boneAgeX;
+                }
+                if (lowestChildX > boneAgeX) {
+                    lowestChildX = boneAgeX;
+                }
+            }
         } else {
             console.warn('Measurements considered invalid by the API given to the chart. The chart will ignore them.');
         }
@@ -596,6 +600,7 @@ function getDomainsAndData(
         }
         if (errorFree) {
             const { lowestChildX, highestChildX, lowestChildY, highestChildY } = childCoordinates;
+            
             lowestYFromMeasurements = lowestChildY;
             highestYFromMeasurements = highestChildY;
             const difference = highestChildX - lowestChildX;