Merge pull request #97 from rcpch/fix-reopened-measurement-plot-size-issue-94

Fix-reopened-measurement-plot-size-issue-94
I will merge this now and open a new issue for this

Author: eatyourpeas

package.json

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

src/CentileChart/CentileChart.tsx

@@ -678,11 +678,11 @@ function CentileChart({
                         };
 
                         if (isChartCrowded) {
-                            chronData.size = 1.5;
-                            correctData.size = 1.5;
-                        } else {
                             chronData.size = 3.5;
                             correctData.size = 3.5;
+                        } else {
+                            chronData.size = 4.5;
+                            correctData.size = 4.5;
                         }
 
                         return (

src/functions/makeAllStyles.ts

@@ -15,7 +15,6 @@ This function therefore instantiates defaults where user values have not been pr
 This creates a styles object that is passed to the chart.
 */
 import { AxisStyle, CentileStyle, SDSStyle, ChartStyle, GridlineStyle, MeasurementStyle } from '../interfaces/StyleObjects';
-import { setOpacity } from './setOpacity';
 
 const black = '#000000';
 const white = '#FFFFFF';
@@ -241,7 +240,7 @@ function makeAllStyles(
                 opacity: 0.5
             }
         },
-        measurementPoint: {
+        measurementPoint: { // these are the points on the chart where measurements are plotted: note that the size is dynamically set based on the isCrowded function
             data: {
                 fill: measurementStyle?.measurementFill ?? black,
             },
@@ -252,9 +251,9 @@ function makeAllStyles(
                 strokeWidth: 1.25,
             },
         },
-        highlightedMeasurementFill: {
+        highlightedMeasurementFill: { // these are the points on the chart where measurements are plotted: note that the size is dynamically set based on the isCrowded function
             data: {
-                fill: measurementStyle?.highlightedMeasurementFill ?? black
+                fill: measurementStyle?.highlightedMeasurementFill ?? black,
             }
         },
         eventTextStyle: {

src/functions/stylesForTheme.ts

@@ -5,7 +5,6 @@ import { Tanner3AxisStyles, Tanner3ChartStyles, Tanner3GridlineStyles, Tanner3Ce
 import { traditionalBoyAxisStyles, traditionalBoyChartStyles, traditionalBoyGridlineStyles, traditionalBoyCentileStyles, traditionalBoyMeasurementStyles, traditionalBoySDSStyles } from '../testParameters/styles/traditionalBoysStyles';
 import { traditionalGirlAxisStyles, traditionalGirlChartStyles, traditionalGirlGridlineStyles, traditionalGirlCentileStyles, traditionalGirlMeasurementStyles, traditionalGirlSDSStyles } from '../testParameters/styles/traditionalGirlsStyles';
 import { ChartStyle, AxisStyle, GridlineStyle, CentileStyle, SDSStyle, MeasurementStyle } from '../interfaces/StyleObjects';
-import { Exception } from 'sass';
 
 export const stylesForTheme = (theme: 'monochrome' | 'traditional' | 'tanner1' | 'tanner2' | 'tanner3' | 'custom', sex: 'male' | 'female')=>{
     // Returns the styles objects for a theme. If custom is selected, monochrome is selected to be customized later