Merge pull request #145 from rcpch:label-angles

Label-angles

Author: eatyourpeas

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rcpch/digital-growth-charts-react-component-library",
-    "version": "7.3.1",
+    "version": "7.3.2",
     "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

@@ -550,18 +550,19 @@ function CentileChart({
                                                             angle={({ index }) => {
                                                                 return labelAngle(
                                                                     centile.data,
-                                                                    index,
+                                                                    parseInt(index.toString()),
                                                                     chartScaleType,
                                                                     measurementMethod,
                                                                     domains,
                                                                 );
                                                             }}
                                                             style={styles.centileLabel}
                                                             backgroundStyle={{ fill: 'white' }}
-                                                            backgroundPadding={{ top: 1, bottom: 1, left: 3, right: 3 }}
+                                                            backgroundPadding={{ top: 1, bottom: 1, left: 1, right: 1 }}
                                                             textAnchor={'middle'}
                                                             verticalAnchor={'middle'}
                                                             dy={0}
+                                                            dx={0}
                                                         />
                                                     }
                                                 />
@@ -596,7 +597,7 @@ function CentileChart({
                                                             angle={({ index }) => {
                                                                 return labelAngle(
                                                                     centile.data,
-                                                                    index,
+                                                                    parseInt(index.toString()),
                                                                     chartScaleType,
                                                                     measurementMethod,
                                                                     domains,
@@ -610,9 +611,10 @@ function CentileChart({
                                                                 },
                                                             ]}
                                                             backgroundStyle={{ fill: 'white' }}
-                                                            backgroundPadding={{ top: 0, bottom: 0, left: 3, right: 3 }}
+                                                            backgroundPadding={{ top: 0, bottom: 0, left: 0, right: 0 }}
                                                             textAnchor={'middle'}
                                                             verticalAnchor={'middle'}
+                                                            dx={0}
                                                             dy={0}
                                                         />
                                                     }
@@ -655,24 +657,26 @@ function CentileChart({
                                                         centileLabels &&
                                                         labelIndexInterval(props.index, props.data, domains) &&
                                                         props.index > 0
-                                                            ? [sdsLine.sds]
+                                                            ? [addOrdinalSuffix(sdsLine.sds)]
                                                             : null
                                                     }
                                                     labelComponent={
                                                         <VictoryLabel
                                                             angle={({ index }) => {
                                                                 return labelAngle(
                                                                     sdsLine.data,
-                                                                    index,
+                                                                    parseInt(index.toString()),
                                                                     chartScaleType,
                                                                     measurementMethod,
                                                                     domains,
                                                                 );
                                                             }}
                                                             style={{ fill: styles.sdsLine.data.stroke, fontSize: 10.0 }}
                                                             backgroundStyle={{ fill: 'white' }}
-                                                            textAnchor={'end'}
-                                                            dy={5}
+                                                            textAnchor={'middle'}
+                                                            verticalAnchor={'middle'}
+                                                            dy={0}
+                                                            dx={0}
                                                         />
                                                     }
                                                 />

src/functions/labelIndexInterval.ts

@@ -6,12 +6,15 @@ export function labelIndexInterval(index: number, data: any[], domains: { x: num
     if (data == undefined) {
         return false;
     }
+    if (index <= 0 || index >= data.length - 2) {
+        return undefined; // Cannot calculate angle at the edges.
+    }
     const bill = data.filter((d: any) => {
         if (d.x > domains.x[0] && d.x < domains.x[1]) {
             return d;
         }
     });
-    let numberOfItemsBetweenLabels = Math.floor(bill.length / 3); // 3 labels per line - this will serve as an index to split the data into 4 sections
+    let numberOfItemsBetweenLabels = Math.floor(bill.length / 2); // 2 labels per line - this will serve as an index to split the data into 4 sections
 
     return index % numberOfItemsBetweenLabels == 0;
 }