From 31e67f5bb95974b5be0a310878bec4c66af4a29d Mon Sep 17 00:00:00 2001
From: edvinstava <136808756+edvinstava@users.noreply.github.com>
Date: Wed, 24 Apr 2024 12:48:21 +0200
Subject: [PATCH] feat: [CGC-37] Explore solutions for custom growth references
  (#40)

---
 .../ChartSelector/ChartSelector.cy.js         |   3 +-
 docs/using-capture-growth-charts.md           | 218 +++++++++++++-----
 i18n/en.pot                                   |  22 +-
 src/Plugin.tsx                                |  11 +-
 src/UI/GenericError/CustomReferencesError.tsx |  33 +++
 src/components/GrowthChart/GrowthChart.tsx    |   8 +-
 .../ChartSelectorDropdown.tsx                 |   2 +-
 .../DataFetching/Hooks/useChartConfig.ts      |   2 +-
 .../DataFetching/Hooks/useCustomReferences.ts |  21 ++
 .../Sorting/useChartDataForGender.ts          |   6 +-
 10 files changed, 249 insertions(+), 77 deletions(-)
 create mode 100644 src/UI/GenericError/CustomReferencesError.tsx
 create mode 100644 src/utils/DataFetching/Hooks/useCustomReferences.ts

diff --git a/cypress/component/ChartSelector/ChartSelector.cy.js b/cypress/component/ChartSelector/ChartSelector.cy.js
index 13132b7..8508a36 100644
--- a/cypress/component/ChartSelector/ChartSelector.cy.js
+++ b/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);
diff --git a/docs/using-capture-growth-charts.md b/docs/using-capture-growth-charts.md
index 19c5426..6e38f58 100644
--- a/docs/using-capture-growth-charts.md
+++ b/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.
\ No newline at end of file
+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. 
diff --git a/i18n/en.pot b/i18n/en.pot
index 899bef6..3c358fe 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,17 @@ 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"
@@ -14,9 +23,6 @@ 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."
diff --git a/src/Plugin.tsx b/src/Plugin.tsx
index 7c0b14d..b4200ae 100644
--- a/src/Plugin.tsx
+++ b/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,7 +46,7 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
 
     const [open, setOpen] = useState(true);
 
-    if (isLoading) {
+    if (isLoading || isLoadingRef) {
         return <GenericLoading />;
     }
 
@@ -50,6 +54,10 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
         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>
diff --git a/src/UI/GenericError/CustomReferencesError.tsx b/src/UI/GenericError/CustomReferencesError.tsx
new file mode 100644
index 0000000..0621799
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/components/GrowthChart/GrowthChart.tsx b/src/components/GrowthChart/GrowthChart.tsx
index 6342dc2..efd3f05 100644
--- a/src/components/GrowthChart/GrowthChart.tsx
+++ b/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>();
diff --git a/src/components/GrowthChart/GrowthChartSelector/ChartSelectorDropdown/ChartSelectorDropdown.tsx b/src/components/GrowthChart/GrowthChartSelector/ChartSelectorDropdown/ChartSelectorDropdown.tsx
index 7318fcb..27923d9 100644
--- a/src/components/GrowthChart/GrowthChartSelector/ChartSelectorDropdown/ChartSelectorDropdown.tsx
+++ b/src/components/GrowthChart/GrowthChartSelector/ChartSelectorDropdown/ChartSelectorDropdown.tsx
@@ -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
diff --git a/src/utils/DataFetching/Hooks/useChartConfig.ts b/src/utils/DataFetching/Hooks/useChartConfig.ts
index 3673d79..329c696 100644
--- a/src/utils/DataFetching/Hooks/useChartConfig.ts
+++ b/src/utils/DataFetching/Hooks/useChartConfig.ts
@@ -19,7 +19,7 @@ export type ChartConfig = {
         };
     };
     settings: {
-        defaultStandard: string;
+        customReferences: boolean;
         zScoreStandard: string;
         weightInGrams: boolean;
     };
diff --git a/src/utils/DataFetching/Hooks/useCustomReferences.ts b/src/utils/DataFetching/Hooks/useCustomReferences.ts
new file mode 100644
index 0000000..3b728cf
--- /dev/null
+++ b/src/utils/DataFetching/Hooks/useCustomReferences.ts
@@ -0,0 +1,21 @@
+import { useQuery } from 'react-query';
+import { useDataEngine } from '@dhis2/app-runtime';
+
+export const useCustomReferences = () => {
+    const dataEngine = useDataEngine();
+    const {
+        data,
+        isLoading,
+        isError,
+    } = useQuery(
+        'customReferences',
+        (): any => dataEngine.query({ customReferences: { resource: 'dataStore/capture-growth-chart/customReferences' } }),
+        { staleTime: 5000 },
+    );
+
+    return {
+        customReferences: data?.customReferences,
+        isLoading,
+        isError,
+    };
+};
diff --git a/src/utils/DataFetching/Sorting/useChartDataForGender.ts b/src/utils/DataFetching/Sorting/useChartDataForGender.ts
index c2543b7..b26a53b 100644
--- a/src/utils/DataFetching/Sorting/useChartDataForGender.ts
+++ b/src/utils/DataFetching/Sorting/useChartDataForGender.ts
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { ChartData } from '../../../types/chartDataTypes';
-import { chartData } from '../../../DataSets/WhoStandardDataSets/ChartData';
 
 interface ChartDataForGenderProps {
     gender: string;
+    chartData: ChartData
 }
 
-export const useChartDataForGender = ({ gender }: ChartDataForGenderProps) => {
+export const useChartDataForGender = ({ gender, chartData }: ChartDataForGenderProps) => {
     const [chartDataForGender, setChartDataForGender] = useState<ChartData>({});
 
     useEffect(() => {
@@ -21,7 +21,7 @@ export const useChartDataForGender = ({ gender }: ChartDataForGenderProps) => {
         );
 
         setChartDataForGender(filteredData);
-    }, [gender]);
+    }, [gender, chartData]);
 
     return { chartDataForGender };
 };