Merge pull request #106 from rcpch:eatyourpeas/issue105

Eatyourpeas/issue105

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;