Skip to content

Commit

Permalink
feat: Custom references supporting precentiles
Browse files Browse the repository at this point in the history
  • Loading branch information
@edvinstava
edvinstava committed Apr 24, 2024
1 parent ad02fab commit 5667c34
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 57 deletions.
160 changes: 106 additions & 54 deletions docs/using-capture-growth-charts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,67 +198,119 @@ The structure of the config has to be the same as the one in the example below;
#### Custom references (Future functionality)
##### Create custom references
1. Create a new key in the `capture-growth-chart` namespace with the key `customReferences`
2. Add the custom references you want to use. The structure of the custom references has to be the same as the one in the example below. But the **datasetValues** should be changed to fit your own references.
2. Add the custom references you want to use. The structure of the custom references has to be the same as the one in the example below. But the **percentileDatasetValues** and **zScoreDatasetValues** should be changed to your custom references. However, you don't need to add references for both percentiles and z-scores, you can choose to only add one of them if you want.
```json
{
"hcfa_b": {
"categoryMetadata": {
"gender": "Boy",
"label": "Head circumference for age"
"lhfa_g": {
"categoryMetadata": {
"gender": "Girl",
"label": "Length/height for age"
},
"datasets": {
"0 to 13 weeks": {
"metadata": {
"chartLabel": "0 to 13 weeks",
"range": {
"end": 13,
"start": 0
},
"xAxisLabel": "Weeks",
"yAxisLabel": "Length"
},
"datasets": {
"0 to 13 weeks": {
"datasetValues": [
{
"SD0": 34.5,
"SD1": 35.7,
"SD1neg": 33.2,
"SD2": 37,
"SD2neg": 31.9,
"SD3": 38.3,
"SD3neg": 30.7
},
// ... more data points ...
],
"metadata": {
"chartLabel": "0 to 13 weeks",
"range": {
"end": 13,
"start": 0
},
"xAxisLabel": "Weeks",
"yAxisLabel": "Head circumference (cm)"
}
},
"0 to 5 years": {
"datasetValues": [
{
"SD0": 34.5,
"SD1": 35.7,
"SD1neg": 33.2,
"SD2": 37,
"SD2neg": 31.9,
"SD3": 38.3,
"SD3neg": 30.7
},
// ... more data points ...
],
"metadata": {
"chartLabel": "0 to 5 years",
"range": {
"end": 5,
"start": 0
},
"xAxisLabel": "Years",
"yAxisLabel": "Head circumference (cm)"
}
}
}
"percentileDatasetValues": [
{
"P15": 47.2,
"P3": 45.6,
"P50": 49.1,
"P85": 51.1,
"P97": 52.7
}
// Add more data here
],
"zScoreDatasetValues": [
{
"SD0": 49.1,
"SD1": 51,
"SD1neg": 47.3,
"SD2": 52.9,
"SD2neg": 45.4,
"SD3": 54.7,
"SD3neg": 43.6
}
// Add more data here
]
},
"0 to 2 years": {
"metadata": {
"range": {
"end": 24,
"start": 0
},
"xAxisLabel": "Months",
"yAxisLabel": "Length"
},
"percentileDatasetValues": [
{
"P15": 47.2,
"P3": 45.6,
"P50": 49.1,
"P85": 51.1,
"P97": 52.7
}
// Add more data here
],
"zScoreDatasetValues": [
{
"SD0": 49.1,
"SD1": 51,
"SD1neg": 47.3,
"SD2": 52.9,
"SD2neg": 45.4,
"SD3": 54.7,
"SD3neg": 43.6
}
// Add more data here
]
},
"2 to 5 years": {
"metadata": {
"chartLabel": "2 to 5 years",
"range": {
"end": 60,
"start": 24
},
"xAxisLabel": "Months",
"yAxisLabel": "Height"
},
"percentileDatasetValues": [
{
"P15": 82.4,
"P3": 79.6,
"P50": 85.7,
"P85": 89.1,
"P97": 91.8
}
// Add more data here
],
"zScoreDatasetValues": [
{
"SD0": 85.7,
"SD1": 88.9,
"SD1neg": 82.5,
"SD2": 92.2,
"SD2neg": 79.3,
"SD3": 95.4,
"SD3neg": 76
}
// Add more data here
]
}
}
}
}
```


##### Use custom references

Now you can set `customReferences` to `true` in the config. This will make the plugin use the custom references you have created. If you want to use the default references, you can set `customReferences` to `false` in the config. This will make the plugin use the WHO references.
Now you can set `customReferences` to `true` in the config. This will make the plugin use the custom references you have created. If you want to use the default references, you can set `customReferences` to `false` in the config. This will make the plugin use the WHO references. Make sure to also alter the `usePercentiles` in the chart config to match the references you are using, z-scores or percentiles.
2 changes: 1 addition & 1 deletion src/components/GrowthChart/GrowthChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const GrowthChart = ({
isPercentiles,
chartData,
}: GrowthChartProps) => {
const trackedEntityGender = trackedEntity.gender;
const trackedEntityGender = trackedEntity?.gender;

const [gender, setGender] = useState<string>(trackedEntityGender !== undefined ? trackedEntityGender : GenderCodes.CGC_Female);
const { chartDataForGender } = useChartDataForGender({ gender, chartData });
Expand Down
2 changes: 1 addition & 1 deletion ...omponents/GrowthChart/GrowthChartSelector/ChartSelectorDropdown/ChartSelectorDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const ChartSelectorDropdown = ({
dataTest,
}: ChartSelectorDropdownProps) => (
<div className='flex flex-col'>
{isDisabled ? (
{isDisabled || items.length <= 1 ? (
<button
className='flex flex-row rounded border border-gray-300 py-1 gap-2 h-7 px-4 items-center whitespace-nowrap'
disabled
Expand Down
2 changes: 1 addition & 1 deletion src/utils/DataFetching/Hooks/useCustomReferences.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const useCustomReferences = () => {
isError,
} = useQuery(
'customReferences',
(): any => dataEngine.query({ customReferences: { resource: 'dataStore/capture-growth-charts/customReference' } }),
(): any => dataEngine.query({ customReferences: { resource: 'dataStore/capture-growth-chart/customReference' } }),
{ staleTime: 5000 },
);

Expand Down

0 comments on commit 5667c34

Please sign in to comment.