feat: [CGC-37] Explore solutions for custom growth references (#40)

cypress/component/ChartSelector/ChartSelector.cy.js

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useChartDataForGender } from '../../../src/utils/DataFetching/Sorting/useChartDataForGender';
 import { ChartSelector } from '../../../src/components/GrowthChart/GrowthChartSelector';
+import { chartData as chartDataWHO } from '../../../src/DataSets/WhoStandardDataSets/ChartData';
 
 describe('ChartSelector', () => {
     const TestComponent = () => {
         const [gender, setGender] = useState('Boy');
-        const { chartDataForGender } = useChartDataForGender({ gender: 'Boy' });
+        const { chartDataForGender } = useChartDataForGender({ gender: 'Boy', chartData: chartDataWHO });
         const [chartData, setChartData] = useState(null);
         const [category, setCategory] = useState(null);
         const [dataset, setDataset] = useState(null);

docs/using-capture-growth-charts.md

@@ -195,70 +195,176 @@ The structure of the config has to be the same as the one in the example below;
 }
 ```    
 
-#### Custom references (Future functionality)
+#### Custom references
 ##### 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.
+1. Create a new key in the `capture-growth-chart` namespace with the key `customReferences`.
+2. Here is the format for the custom references:
 ```json
 {
-    "hcfa_b": {
-        "categoryMetadata": {
-            "gender": "Boy",
-            "label": "Head circumference for age"
+  "<Indicator key>": {
+    "categoryMetadata": {
+      "gender": "<Girl || Boy>",
+      "label": "<Indicator label>"
+    },
+    "datasets": {
+      "<time interval>": {
+        "metadata": {
+          "range": {
+            "end": <X-axis dataset end>,
+            "start": <X-axis dataset start>
+          },
+          "xAxisLabel": "<Weeks || Months || Weight>",
+          "yAxisLabel": "<Anthropometric measurements, Height || Length || Weight || Head circumference>"
         },
-        "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": [
+          {
+            "P3": <P3 value>,
+            "P15": <P15 value>,
+            "P50": <P50 value>,
+            "P85": <P85 value>,
+            "P97": <P97 value>
+          }
+        ],
+        "zScoreDatasetValues": [
+            {
+            "SD0": <SD0 value>,
+            "SD1": <SD1 value>,
+            "SD2": <SD2 value>,
+            "SD3": <SD3 value>,
+            "SD1neg": <SD1neg value>,
+            "SD2neg": <SD2neg value>,
+            "SD3neg": <SD3neg value>
             }
-        }
+        ]
+      },
     }
+  }
 }
 ```
 
+3. 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 contents of **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 desired.
+4. Add other indicators if you want, but make sure that the key maps to the right category and gender. The indicator key should be one of the following:
+- `"hcfa_g"` -> Head circumference for age
+- `"lhfa_g"` -> Length/height for age
+- `"wfa_g"` -> Weight for age
+- `"wlfh_g"` -> Weight for length/height
+<br>
+    `"_g"` indicates that the gender is girl. If you want to add references for boys, you can add the same key but with `"_b"` instead of `"_g"`. 
+    For example; 
+    `"hcfa_b"` -> Head circumference for age
 
-##### 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.
+Here is an example of how the custom references could look like:
+```json
+{
+  "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"
+        },
+        "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. Make sure to also alter the `usePercentiles` in the chart config to match the references you are using, z-scores or percentiles. 

i18n/en.pot

@@ -5,18 +5,24 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-04-15T11:58:31.112Z\n"
-"PO-Revision-Date: 2024-04-15T11:58:31.112Z\n"
+"POT-Creation-Date: 2024-04-23T10:55:58.423Z\n"
+"PO-Revision-Date: 2024-04-23T10:55:58.423Z\n"
+
+msgid "Growth Chart"
+msgstr "Growth Chart"
+
+msgid "There was an error fetching the config for the growth chart."
+msgstr "There was an error fetching the config for the growth chart."
+
+msgid "Please check the configuration in Datastore Management and try again."
+msgstr "Please check the configuration in Datastore Management and try again."
 
 msgid "Date"
 msgstr "Date"
 
 msgid "Age"
 msgstr "Age"
 
-msgid "Growth Chart"
-msgstr "Growth Chart"
-
 msgid "Years"
 msgstr "Years"
 
@@ -85,9 +91,3 @@ msgstr "Boy"
 
 msgid "Girl"
 msgstr "Girl"
-
-msgid "There was an error fetching the config for the growth chart."
-msgstr "There was an error fetching the config for the growth chart."
-
-msgid "Please check the configuration in Datastore Management and try again."
-msgstr "Please check the configuration in Datastore Management and try again."

src/Plugin.tsx

@@ -14,11 +14,15 @@ import { useEvents } from './utils/DataFetching/Hooks/useEvents';
 import { useMappedTrackedEntityVariables } from './utils/DataFetching/Sorting/useMappedTrackedEntity';
 import { ChartConfigError } from './UI/GenericError/ChartConfigError';
 import { GenericLoading } from './UI/GenericLoading';
+import { useCustomReferences } from './utils/DataFetching/Hooks/useCustomReferences';
+import { chartData } from './DataSets/WhoStandardDataSets/ChartData';
+import { CustomReferencesError } from './UI/GenericError/CustomReferencesError';
 
 const queryClient = new QueryClient();
 
 const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
     const { chartConfig, isLoading, isError } = useChartConfig();
+    const { customReferences, isLoading: isLoadingRef, isError: isErrorRef } = useCustomReferences();
     const { teiId, programId, orgUnitId } = propsFromParent;
     const { trackedEntity } = useTeiById({ teiId });
     const { events } = useEvents({
@@ -42,14 +46,18 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
 
     const [open, setOpen] = useState(true);
 
-    if (isLoading) {
+    if (isLoading || isLoadingRef) {
         return <GenericLoading />;
     }
 
     if (isError) {
         return <ChartConfigError />;
     }
 
+    if (chartConfig?.settings.customReferences && isErrorRef) {
+        return <CustomReferencesError />;
+    }
+
     return (
         <QueryClientProvider
             client={queryClient}
@@ -75,6 +83,7 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
                         <GrowthChart
                             trackedEntity={mappedTrackedEntity}
                             measurementData={mappedGrowthVariables}
+                            chartData={chartConfig.settings.customReferences ? customReferences : chartData}
                             isPercentiles={isPercentiles}
                         />
                     </WidgetCollapsible>

src/UI/GenericError/CustomReferencesError.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { WidgetCollapsible } from '../../components/WidgetCollapsible';
+import { Warning } from '../Icons';
+
+export const CustomReferencesError = () => {
+    const [open, setOpen] = useState(true);
+    return (
+        <div style={{
+            width: '100vw',
+            margin: 0,
+            padding: 0,
+        }}
+        >
+            <WidgetCollapsible
+                header={i18n.t('Growth Chart')}
+                borderless={false}
+                open={open}
+                onOpen={() => setOpen(true)}
+                onClose={() => setOpen(false)}
+            >
+                <div className='flex justify-center'>
+                    <Warning className='w-12 h-12' />
+                    <p className='flex p-5 pt-2'>
+                        {i18n.t('There was an error fetching the custom references for the growth chart.')}
+                        <br />
+                        {i18n.t('Please check the configuration in Datastore Management and try again.')}
+                    </p>
+                </div>
+            </WidgetCollapsible>
+        </div>
+    );
+};

src/components/GrowthChart/GrowthChart.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { GrowthChartBuilder } from './GrowthChartBuilder';
 import { ChartSelector } from './GrowthChartSelector';
-import { GenderCodes, CategoryCodes, MeasurementData } from '../../types/chartDataTypes';
+import { GenderCodes, CategoryCodes, MeasurementData, ChartData } from '../../types/chartDataTypes';
 import { useCalculateMinMaxValues } from '../../utils/Hooks/Calculations/useCalculateMinMaxValues';
 import { ChartSettingsButton } from './ChartSettingsButton';
 import { useChartDataForGender } from '../../utils/DataFetching/Sorting/useChartDataForGender';
@@ -11,17 +11,19 @@ interface GrowthChartProps {
     trackedEntity: MappedEntityValues;
     measurementData: MeasurementData[];
     isPercentiles: boolean;
+    chartData: ChartData;
 }
 
 export const GrowthChart = ({
     trackedEntity,
     measurementData,
     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 });
+    const { chartDataForGender } = useChartDataForGender({ gender, chartData });
 
     const [category, setCategory] = useState<keyof typeof CategoryCodes>();
     const [dataset, setDataset] = useState<string>();