fix: merge conflicts with master resolved

dev-otta · Apr 23, 2024 · ad02fab · ad02fab
2 parents 8230098 + 906819e
commit ad02fab
Show file tree

Hide file tree

Showing 28 changed files with 5,633 additions and 6,624 deletions.
diff --git a/cypress/component/ChartSelector/ChartSelector.cy.js b/cypress/component/ChartSelector/ChartSelector.cy.js
@@ -1,7 +1,7 @@
 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/ChartDataZscores';
+import { chartData as chartDataWHO } from '../../../src/DataSets/WhoStandardDataSets/ChartData';
 
 describe('ChartSelector', () => {
     const TestComponent = () => {

diff --git a/d2.config.js b/d2.config.js
@@ -1,5 +1,6 @@
 const config = {
     type: 'app',
+    name: 'capture-growth-chart',
 
     entryPoints: { plugin: './src/Plugin.tsx' },
 };

diff --git a/docs/resources/images/tracked_entity_type_attributes.png b/docs/resources/images/tracked_entity_type_attributes.png
diff --git a/docs/using-capture-growth-charts.md b/docs/using-capture-growth-charts.md
@@ -2,60 +2,263 @@
 
 ## About Capture Growth Charts { #about_capture_growth_charts } 
 
-Capture growth charts is a web application that allows users to capture and view growth data for children under the age of 5. The application is designed to be used by health workers in the field to capture growth data for children and to view growth charts for children in their care. The application is designed to be used on a tablet or computer device and is optimized for data entry and visualization of growth charts for efficient monitoring of child development.
+Capture growth charts is a web application that allows users to capture and view growth data for children under the age of 5. The application is designed to be used by health workers to capture growth data for children and to view growth charts for children in their care. The application is designed to be used on a tablet or computer device and is optimized for data entry and visualization of growth charts for efficient monitoring of child development.
 
-## Register an event { #capture_register_event } 
+# Plugin Implementation { #implement_plugin }
+Plugins allows developers to extend the functionality on DHIS2. These plugins enable users to customize form fields and sections within the Capture app, potentially enhancing data entry and user experience. The Growth Chart is using the plugin functionality to be implemented in the Capture app.
 
-1. Open the **Capture** app.
+## Prerequisites { #prerequisites }
+- DHIS2 version 2.38 or later
+- Capture app version v100.53.0 or later (Can be updated in the **App Management** app).
+- Access to the Maintenance app.
+- Access to the Datastore Management app.
+- Access to the App Management app.
 
-2. Select an organisation unit.
+## Implementation { #implementation }
+### Datastore Management app
+The plugin is implemented using the Datastore Management app.
 
-3. Select an event program.
+#### capture namespace
+- Create a new namespace `capture` with key `useNewDashboard`.
+    - Add the following code to the namespace. Make sure to change `programId` to the id of the program you want to use the plugin for.
+    ```json
+    {
+        "<programId>": true
+    }
+    ```
 
-    You will only see programs associated with the selected organisation unit and programs you have access to, and that are shared with your user group through data level sharing.
+- Create a new key `enrollmentOverviewLayout` in the `capture` namespace.
+    - Add the following code to the key. This will be the new layout for the Capture app. Again, change the `programId` Make sure to change the contents of `leftColumn` and `rightColumn` to fit your needs.
+    ```json
+    {
+        "<programId>": {
+            "leftColumn": [
+                {
+                    "name": "QuickActions",
+                    "type": "component"
+                },
+                {
+                    "name": "StagesAndEvents",
+                    "type": "component"
+                }
+            ],
+            "rightColumn": [
+                {
+                    "name": "TrackedEntityRelationship",
+                    "type": "component"
+                },
+                {
+                    "name": "ErrorWidget",
+                    "type": "component"
+                },
+                {
+                    "name": "WarningWidget",
+                    "type": "component"
+                },
+                {
+                    "name": "FeedbackWidget",
+                    "type": "component"
+                },
+                {
+                    "name": "IndicatorWidget",
+                    "type": "component"
+                },
+                {
+                    "name": "Notes",
+                    "type": "component"
+                },
+                {
+                    "name": "ProfileWidget",
+                    "settings": {
+                    "readOnlyMode": true
+                    },
+                    "type": "component"
+                },
+                {
+                    "name": "EnrollmentWidget",
+                    "settings": {
+                    "readOnlyMode": false
+                    },
+                    "type": "component"
+                }
+            ],
+            "title": "Growth Monitoring"
+        }
+    }
+    ```
 
-4. If the program has a category combination set the category option will have to be selected.
+# Growth chart plugin upload
+## Clone the repository
+Clone the repository to your local machine by running the following command in your terminal:
+```bash
+git clone https://github.com/dev-otta/dhis2-who-growth-chart.git
+```
 
-5. Click **Create new event**.
+## Build the plugin
+Run `yarn build` in the root of the project to build the plugin. The build can then be found in `/build/bundle`, and is a compressed file (`.zip`).
 
-    ![create new event](resources/images/create_new_event.png)
+Upload the compressed file to the DHIS2 instance using the `manuall install` funciton in the **App Management** app. Now the plugin should be an available app on the instance and you can find it on this url: 
+- `<Url of instance>/api/apps/capture-growth-chart/plugin.html` 
 
-6. Fill in the required information. If the programs program stage is configured to capture a location:
+> **Note:** The growth chart will display a warning if it's missing the configuration file. The steps to complete this configuration file will be covered later in this guide.
 
-    - If the field is a coordinate field you can either enter the coordinates
-    directly or you can click the **map** icon to the left of the coordinate field.
-    The latter one will open a map where you can search for a location or set on
-    directly by clicking on the map.
 
-    - If the field is a polygon field you can click the **map** icon to the left of
-    the field. This will open a map where you can search for a location and capture
-    a polygon (button in the upper right corner of the map).
+Make sure to alter `<Url of instance>` with the actual url of you instance.
 
-7. If desired you can add a comment by clicking the **Write comment** button at the bottom of the form. Note that Event comments are attributed to a user and cannot be deleted. 
+# Configuration { #configuration }
+## Maintenance app { #maintenance }
+The following steps can be made in the **Maintenance** app on DHIS2.
 
-8. If desired you can add a relationship by clicking the **Add relationship** button at the bottom of the form.
-   See the section about **Adding a relationship** for more information.
+### Data element
+Data elements needed to support full functionality in for the growth chart are; **Weight**, **Height** and **Head circumference**. **Weight** can be in either `gram` or `kg`, but **Height** and **Head circumference** should be in `cm`. If one of the data elements are missing, growth charts using that data element will not be displayed.  
 
-9. Click **Save and exit** or click the arrow next to the button to select **Save and add another**.
+### Program
+#### Tracked entity attribute
+Tracked entity attribues needed for the Growth chart plugin is `Date of birth` and `Gender`. 
 
-    - **Save and add another** will save the current event and clear the form.
-    All the events that you have captured will be displayed in a list at the bottom of the page.
-    When you want to finish capturing events you can, if the form is blank,
-    click the finish button or if your form contains data click the arrow
-    next to **Save and add another** and select **Save and exit**.
+> **Tip:** `First Name` and `Last Name` are also utilized in additional functionality, but not necessary for using the growth chart itself.
+                    
+#### Tracked entity type
+Navigate to the tracked entity type for **Person**. This type needs to be assigned the same attributes as those created in the [Tracked Entity Attributes](#tracked-entity-attributes) step. Make sure `Display in list` for the attributes is active, like the image below. 
+![Tracked entity type](resources/images/tracked_entity_type_attributes.png)  
 
-> **Note**
->
-> Some data elements in an event might be mandatory (marked with a red star next to the data element label).
-> All mandatory data elements must be filled in before the user is allowed to complete the event.
-> The exception to this is if the user has the authority called __"Ignore validation of required fields in Tracker and Event Capture".__
-> If the user has this authority, the mandatory data elements will not be required and
-> the red star will not be displayed next to the data element label. Note that super user that have the __"ALL"__ authority automatically
-> have this authority.
+#### Program     
+Select your preffered program for storing the growth variables and displaying the Growth Chart. 
+##### Attributes
+The program should have the following attributes:
+- `First name`
+- `Last name`
+- `Date of birth`
+- `Gender`
+
 
-> **Tip**
->
-> The data entry form can also be displayed in **row view**. In this mode the data elements are arranged horizontally. This can be
-> achieved by clicking the **Switch to row view** button on the top right of the data entry form. If you are currently in **row view** you
-> can switch to the default form view by clicking the **Switch to form view** button on the top right of the data entry form.
+##### Program stages
+Select stage where growth variables currently are or will be stored.
+The program stage should have the following data elements:
+- `Weight` (g or kg)
+- `Height` (cm)
+- `Head circumference` (cm)
+
+
+## Datastore Manangement app { #datastore_management }
+### Capture namespace
+In namespace `capture`, enter the file with key `enrollmentOverviewLayout`
+Add new section for the growth chart under `leftColumn`. You can choose where on the left column to place it. Add the following code, but remember to change out `<Url of instance>` with the url of your instance.
+```json
+{
+    "source": "http://<Url of instance>/api/apps/capture-growth-chart/plugin.html",
+    "type": "plugin"
+}
+```
 
+### Capture-growth-chart namespace
+#### Config      
+Create new namespace `capture-growth-chart` with key `config`
+The growth chart plugin needs this config to work. Keep in mind that all Id's should be changed, and will be specific for each implementation. 
+
+##### Metadata
+The `metadata` object contains the following keys:
+- `attributes` - Contains the attribute IDs for **dateOfBirth**, **gender**, **firstName**, **lastName**, **femaleOptionCode** and **maleOptionCode**. All of these attribute IDs can be found in the **Maintenance** app under `Tracked entity attributes`, except for the **femaleOptionCode** and **maleOptionCode** which can be found in `Option set` under **Other** in the **Maintenance** app. 
+- `dataElements` - Contains the data element IDs for **headCircumference**, **height** and **weight**. All of these data element IDs can be found in the **Maintenance** app under **Data elements**.
+- `program` - Contains the program stage ID for the program stage where the growth data is stored. This ID can be found in the **Maintenance** app under **Programs** and **Program stages**.
+
+##### Settings
+The `settings` object contains the following keys:
+- `usePercentiles` - A boolean value that determines if the growth chart should use percentiles or z-scores. If `true`, the growth chart will use percentiles. If `false`, the growth chart will use z-scores
+- `weightInGrams` - A boolean value that determines if the weight should be in grams or kg. 
+
+The structure of the config has to be the same as the one in the example below;
+```json
+{
+    "metadata": {
+        "attributes": {
+            "dateOfBirth": "AMl8BkN8Lyq",
+            "gender": "tyNlJWNnEbs",
+            "firstName": "Sx5Gd4JfPrL",
+            "lastName": "sljlq9XtqaA",
+            "femaleOptionCode": "CGC_Female",
+            "maleOptionCode": "CGC_Male"
+        },
+        "dataElements": {
+            "headCircumference": "GfchA70xtmP",
+            "height": "wWCSulSdUgd",
+            "weight": "yZwKJdYXTZF"
+        },
+        "program": {
+            "programStageId": "h3gT08Et4sC"
+        }
+    },
+    "settings": {
+        "usePercentiles": false,
+        "weightInGrams": false
+    }
+}
+```    
+
+#### 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.
+```json
+{
+    "hcfa_b": {
+        "categoryMetadata": {
+            "gender": "Boy",
+            "label": "Head circumference for age"
+        },
+        "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)"
+                }
+            }
+        }
+    }
+}
+```
+
+
+##### 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.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ 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-03-22T16:48:14.724Z\n"
-"PO-Revision-Date: 2024-03-22T16:48:14.724Z\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"
@@ -20,24 +20,48 @@ msgstr "Please check the configuration in Datastore Management and try again."
 msgid "Date"
 msgstr "Date"
 
-msgid "Height"
-msgstr "Height"
+msgid "Age"
+msgstr "Age"
 
-msgid "Weight"
-msgstr "Weight"
+msgid "Years"
+msgstr "Years"
 
 msgid "Months"
 msgstr "Months"
 
 msgid "Weeks"
 msgstr "Weeks"
 
+msgid "year"
+msgstr "year"
+
+msgid "years"
+msgstr "years"
+
+msgid "month"
+msgstr "month"
+
+msgid "months"
+msgstr "months"
+
+msgid "week"
+msgstr "week"
+
+msgid "weeks"
+msgstr "weeks"
+
 msgid "Head circumference"
 msgstr "Head circumference"
 
 msgid "Length"
 msgstr "Length"
 
+msgid "Height"
+msgstr "Height"
+
+msgid "Weight"
+msgstr "Weight"
+
 msgid "Head circumference for age"
 msgstr "Head circumference for age"
 
@@ -67,12 +91,3 @@ msgstr "Boy"
 
 msgid "Girl"
 msgstr "Girl"
-
-msgid "Year"
-msgstr "Year"
-
-msgid "Years"
-msgstr "Years"
-
-msgid "Month"
-msgstr "Month"