Skip to content

Commit 31c5adb

Browse files
eatyourpeaseatyourpeas
committed
always show 3 labels
1 parent 9e45b4b commit 31c5adb

File tree

3 files changed

+44
-46
lines changed

3 files changed

+44
-46
lines changed

‎src/CentileChart/CentileChart.tsx

+7-21
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ import icon from '../images/icon.png';
7272
import ukca from '../images/ukca.png';
7373
import { BottomContainer } from '../SubComponents/BottomContainer';
7474
import { BottomLogoContainer } from '../SubComponents/BottomLogoContainer';
75+
import { Domains } from '../interfaces/Domains';
7576

7677
// allows two top level containers: zoom and voronoi
7778
const VictoryZoomVoronoiContainer: any = createContainer('zoom', 'voronoi');
@@ -537,14 +538,9 @@ function CentileChart({
537538
padding={{ top: 20, bottom: 20 }}
538539
data={centile.data}
539540
style={{ ...styles.dashedCentile }}
540-
labels={(props: { index: number }) =>
541+
labels={(props: { index: number; data: any }) =>
541542
centileLabels &&
542-
labelIndexInterval(
543-
chartScaleType,
544-
props.index,
545-
reference,
546-
measurementMethod,
547-
) &&
543+
labelIndexInterval(props.index, props.data, domains) &&
548544
props.index > 0
549545
? [addOrdinalSuffix(centile.centile)]
550546
: null
@@ -588,14 +584,9 @@ function CentileChart({
588584
padding={{ top: 20, bottom: 20 }}
589585
data={centile.data}
590586
style={{ ...styles.continuousCentile }}
591-
labels={(props: { index: number }) =>
587+
labels={(props: { index: number; data: [] }) =>
592588
centileLabels &&
593-
labelIndexInterval(
594-
chartScaleType,
595-
props.index,
596-
reference,
597-
measurementMethod,
598-
) &&
589+
labelIndexInterval(props.index, props.data, domains) &&
599590
props.index > 0
600591
? [addOrdinalSuffix(centile.centile)]
601592
: null
@@ -660,14 +651,9 @@ function CentileChart({
660651
padding={{ top: 20, bottom: 20 }}
661652
data={sdsLine.data}
662653
style={styles.sdsLine}
663-
labels={(props: { index: number }) =>
654+
labels={(props: { index: number; data: [] }) =>
664655
centileLabels &&
665-
labelIndexInterval(
666-
chartScaleType,
667-
props.index,
668-
reference,
669-
measurementMethod,
670-
) &&
656+
labelIndexInterval(props.index, props.data, domains) &&
671657
props.index > 0
672658
? [sdsLine.sds]
673659
: null

‎src/functions/labelAngle.ts

+22
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,28 @@ export function labelAngle(
1616
Also accepts chart domains as parameter, as x magnification depends on visible extremes of chart (eg a 3 year old seen close up, or 3 year old in life course view)
1717
*/
1818

19+
// const bill = data.filter((d: any) => {
20+
// if (d.x > domains.x[0] && d.x < domains.x[1]) {
21+
// return d;
22+
// }
23+
// });
24+
// const numberOfItemsBetweenLabels = Math.floor(bill.length / 4); // 3 labels per line - this will serve as an index to split the data into 4 sections
25+
// const dataBefore = bill.slice(0, numberOfItemsBetweenLabels);
26+
// const dataBetween = bill.slice(numberOfItemsBetweenLabels, numberOfItemsBetweenLabels * 2);
27+
// const dataAfter = bill.slice(numberOfItemsBetweenLabels * 2, numberOfItemsBetweenLabels * 3);
28+
// const dataAfterAfter = bill.slice(numberOfItemsBetweenLabels * 3, bill.length);
29+
// console.log('dataBefore', dataBefore);
30+
// console.log('dataBetween', dataBetween);
31+
// console.log('dataAfter', dataAfter);
32+
// console.log('dataAfterAfter', dataAfterAfter);
33+
34+
/*
35+
We want to be able to see at least 3 labels per line irrespective of the scale of the chart
36+
of the degree of magnification of the x axis.
37+
To do this we will break the llist of date into 4 sections - before, between and after each label
38+
39+
*/
40+
1941
if (data === null || data.length < 1) {
2042
return;
2143
}

‎src/functions/labelIndexInterval.ts

+15-25
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
1-
export function labelIndexInterval(
2-
chartScaleType: 'prem' | 'infant' | 'smallChild' | 'biggerChild' = 'biggerChild',
3-
index: number,
4-
reference: 'uk-who' | 'cdc' | 'trisomy-21' | 'trisomy-21-aap' | 'turner' | 'who',
5-
measurementMethod: 'height' | 'weight' | 'bmi' | 'ofc',
6-
): boolean {
7-
// returns true if index of data point in centile data array should be rendered
8-
9-
switch (chartScaleType) {
10-
case 'prem':
11-
return index % 5 == 0;
12-
case 'infant':
13-
return index % 5 == 0;
14-
case 'smallChild':
15-
return index % 30 == 0;
16-
case 'biggerChild':
17-
if (reference === 'trisomy-21-aap') {
18-
if (measurementMethod === 'height' || measurementMethod === 'ofc') {
19-
return index % 5 == 0;
20-
}
21-
return index % 20 == 0;
22-
}
23-
return index % 40 == 0;
24-
default:
25-
return index % 50 == 0;
1+
export function labelIndexInterval(index: number, data: any[], domains: { x: number[]; y: number[] }): boolean {
2+
// return true if the index is a multiple of the number of items between labels
3+
// this will be used to determine if a label should be displayed
4+
// the number of items between labels will be determined by the number of items in the data array
5+
// and the number of labels to be displayed - this will be 3
6+
if (data == undefined) {
7+
return false;
268
}
9+
const bill = data.filter((d: any) => {
10+
if (d.x > domains.x[0] && d.x < domains.x[1]) {
11+
return d;
12+
}
13+
});
14+
let numberOfItemsBetweenLabels = Math.floor(bill.length / 3); // 3 labels per line - this will serve as an index to split the data into 4 sections
15+
16+
return index % numberOfItemsBetweenLabels == 0;
2717
}

0 commit comments

Comments
 (0)