fix: merge with master

docs/using-capture-growth-charts.md

@@ -0,0 +1,61 @@
+# Using Capture Growth Charts { #capture_growth_charts } 
+
+## 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.
+
+## Register an event { #capture_register_event } 
+
+1. Open the **Capture** app.
+
+2. Select an organisation unit.
+
+3. Select an event program.
+
+    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.
+
+4. If the program has a category combination set the category option will have to be selected.
+
+5. Click **Create new event**.
+
+    ![create new event](resources/images/create_new_event.png)
+
+6. Fill in the required information. If the programs program stage is configured to capture a location:
+
+    - 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).
+
+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. 
+
+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.
+
+9. Click **Save and exit** or click the arrow next to the button to select **Save and add another**.
+
+    - **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**.
+
+> **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.
+
+> **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.
+

src/Components/GrowthChart/GrowthChart.tsx

@@ -7,22 +7,22 @@ import { useCalculateMinMaxValues } from '../../utils/useCalculateMinMaxValues';
 import { GrowthChartAnnotations } from './GrowthChartOptions';
 import { ChartSettingsButton } from './ChartSettingsButton';
 import { useChartDataForGender } from '../../utils/DataFetching/Sorting/useChartDataForGender';
-import { ChartConfig } from '../../utils/DataFetching/Hooks/useChartConfig';
+import { MappedEntityValues } from '../../utils/DataFetching/Sorting/useMappedTrackedEntity';
 import { usePercentilesOrZScores } from '../../utils/DataFetching/Sorting';
 
 interface GrowthChartProps {
-    trackedEntity: ChartConfig['metadata']['attributes'];
+    trackedEntity: MappedEntityValues;
     measurementData: MeasurementData[];
 }
 
 export const GrowthChart = ({
     trackedEntity,
     measurementData,
 }: GrowthChartProps) => {
-    const trackedEntityGender = GenderCodes[trackedEntity?.gender?.toLowerCase() as 'male' | 'female'];
+    const trackedEntityGender = trackedEntity.gender;
     const [percentiles] = useState<boolean>(false);
 
-    const [gender, setGender] = useState<keyof typeof GenderCodes>(trackedEntityGender !== undefined ? trackedEntityGender : GenderCodes.female);
+    const [gender, setGender] = useState<string>(trackedEntityGender !== undefined ? trackedEntityGender : GenderCodes.CGC_Female);
     const { chartDataForGender } = useChartDataForGender({ gender });
 
     const [category, setCategory] = useState<keyof typeof CategoryCodes>();
@@ -38,7 +38,7 @@ export const GrowthChart = ({
     }, [chartDataForGender]);
 
     useEffect(() => {
-        trackedEntity?.gender !== undefined && setGender(GenderCodes[trackedEntity?.gender?.toLowerCase() as 'male' | 'female']);
+        Object.values(GenderCodes).includes(trackedEntity.gender) && setGender(trackedEntity?.gender);
     }, [trackedEntity]);
 
     const dataSetEntry = chartDataForGender[category]?.datasets[dataset];

src/DataSets/WhoStandardDataSets/ChartData.ts

@@ -26,7 +26,7 @@ export const chartData: ChartData = {
     [CategoryCodes.hcfa_b]: {
         categoryMetadata: {
             label: CategoryLabels.hcfa,
-            gender: GenderCodes.male,
+            gender: GenderCodes.CGC_Male,
         },
         datasets: {
             [ChartCodes.hcfa_b_0_13_w_z]: {
@@ -54,7 +54,7 @@ export const chartData: ChartData = {
     [CategoryCodes.hcfa_g]: {
         categoryMetadata: {
             label: CategoryLabels.hcfa,
-            gender: GenderCodes.female,
+            gender: GenderCodes.CGC_Female,
         },
         datasets: {
             [ChartCodes.hcfa_g_0_13_w_z]: {
@@ -82,7 +82,7 @@ export const chartData: ChartData = {
     [CategoryCodes.lhfa_b]: {
         categoryMetadata: {
             label: CategoryLabels.lhfa,
-            gender: GenderCodes.male,
+            gender: GenderCodes.CGC_Male,
         },
         datasets: {
             [ChartCodes.lhfa_b_0_13_w_z]: {
@@ -120,7 +120,7 @@ export const chartData: ChartData = {
     [CategoryCodes.lhfa_g]: {
         categoryMetadata: {
             label: CategoryLabels.lhfa,
-            gender: GenderCodes.female,
+            gender: GenderCodes.CGC_Female,
         },
         datasets: {
             [ChartCodes.lhfa_g_0_13_w_z]: {
@@ -158,7 +158,7 @@ export const chartData: ChartData = {
     [CategoryCodes.wfa_b]: {
         categoryMetadata: {
             label: CategoryLabels.wfa,
-            gender: GenderCodes.male,
+            gender: GenderCodes.CGC_Male,
         },
         datasets: {
             [ChartCodes.wfa_b_0_13_w_z]: {
@@ -186,7 +186,7 @@ export const chartData: ChartData = {
     [CategoryCodes.wfa_g]: {
         categoryMetadata: {
             label: CategoryLabels.wfa,
-            gender: GenderCodes.female,
+            gender: GenderCodes.CGC_Female,
         },
         datasets: {
             [ChartCodes.wfa_g_0_13_w_z]: {
@@ -214,7 +214,7 @@ export const chartData: ChartData = {
     [CategoryCodes.wflh_b]: {
         categoryMetadata: {
             label: CategoryLabels.wflh,
-            gender: GenderCodes.male,
+            gender: GenderCodes.CGC_Male,
         },
         datasets: {
             [ChartCodes.wfl_b_0_2_y_z]: {
@@ -242,7 +242,7 @@ export const chartData: ChartData = {
     [CategoryCodes.wflh_g]: {
         categoryMetadata: {
             label: CategoryLabels.wflh,
-            gender: GenderCodes.female,
+            gender: GenderCodes.CGC_Female,
         },
         datasets: {
             [ChartCodes.wfl_g_0_2_y_z]: {

src/Plugin.tsx

@@ -32,7 +32,11 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
         variableMappings: chartConfig?.metadata.attributes, trackedEntity, trackedEntityAttributes: trackedEntity?.attributes,
     });
 
-    const mappedGrowthVariables = useMappedGrowthVariables({ growthVariables: chartConfig?.metadata.dataElements, events });
+    const mappedGrowthVariables = useMappedGrowthVariables({
+        growthVariables: chartConfig?.metadata.dataElements,
+        events,
+        isWeightInGrams: chartConfig?.settings.weightInGrams || false,
+    });
 
     const [open, setOpen] = useState(true);
 

src/types/chartDataTypes.ts

@@ -126,6 +126,6 @@ export const ChartCodes = Object.freeze({
 });
 
 export const GenderCodes = Object.freeze({
-    male: i18n.t('Boy'),
-    female: i18n.t('Girl'),
+    CGC_Male: i18n.t('Boy'),
+    CGC_Female: i18n.t('Girl'),
 });

src/utils/DataFetching/Hooks/useChartConfig.ts

@@ -6,6 +6,8 @@ export type ChartConfig = {
         attributes: {
             dateOfBirth: string;
             gender: string;
+            femaleOptionCode: string;
+            maleOptionCode: string;
         };
         dataElements: {
             headCircumference: string;
@@ -19,6 +21,7 @@ export type ChartConfig = {
     settings: {
         defaultStandard: string;
         zScoreStandard: string;
+        weightInGrams: boolean;
     };
 };
 

src/utils/DataFetching/Sorting/useMappedGrowthVariables.ts

@@ -3,6 +3,7 @@ import { Event } from '../Hooks/useEvents';
 interface UseMappedGrowthVariablesProps {
     events: Event[];
     growthVariables: { [key: string]: string };
+    isWeightInGrams: boolean;
 }
 
 export interface MappedDataValue {
@@ -17,6 +18,7 @@ export interface MappedDataValue {
 export const useMappedGrowthVariables = ({
     events,
     growthVariables,
+    isWeightInGrams,
 }: UseMappedGrowthVariablesProps): MappedDataValue[] | undefined => events?.map((event: Event) => {
     const dataValueMap: { weight: string; headCircumference: string; height: string; [key: string]: string } = {
         weight: '',
@@ -27,7 +29,9 @@ export const useMappedGrowthVariables = ({
     if (growthVariables && event.dataValues) {
         Object.entries(growthVariables).reduce((acc, [key, value]: [string, string]) => {
             const dataValue = String(Object.entries(event.dataValues).find(([dataElement]) => dataElement === value)?.[1]);
-            if (dataValue && value) acc[key] = dataValue;
+            if (dataValue && value) {
+                acc[key] = (key === 'weight' && (isWeightInGrams || Number(dataValue) > 1000)) ? String(Number(dataValue) / 1000) : dataValue;
+            }
             return acc;
         }, dataValueMap);
     }

src/utils/DataFetching/Sorting/useMappedTrackedEntity.ts

@@ -1,11 +1,15 @@
+import { GenderCodes } from '../../../types/chartDataTypes';
 import { ChartConfig } from '../Hooks/useChartConfig';
 import { TrackedEntity } from '../Hooks/useTeiById';
 
 interface Attribute {
     [key: string]: string;
 }
 
-type ChartConfigAttributes = ChartConfig['metadata']['attributes'] & { [key: string]: string };
+export interface MappedEntityValues {
+    dateOfBirth: string | undefined;
+    gender: string;
+}
 
 interface UseMappedTrackedEntityVariablesProps {
     trackedEntity: TrackedEntity;
@@ -17,20 +21,32 @@ export const useMappedTrackedEntityVariables = ({
     trackedEntity,
     trackedEntityAttributes,
     variableMappings,
-}: UseMappedTrackedEntityVariablesProps): ChartConfigAttributes => {
-    const mappedValues: ChartConfigAttributes = {
+}: UseMappedTrackedEntityVariablesProps): MappedEntityValues => {
+    const mappedValues: MappedEntityValues = {
         dateOfBirth: undefined,
         gender: undefined,
     };
+
     if (!trackedEntity || !trackedEntityAttributes || !variableMappings) {
         return mappedValues;
     }
 
     return Object.entries(variableMappings).reduce((acc, [key, attributeId]) => {
+        if (key !== 'dateOfBirth' && key !== 'gender') return acc;
+
         const attribute = trackedEntityAttributes.find((attr: Attribute) => attr.attribute === attributeId);
         if (attribute) {
             const value = trackedEntity.attributes.find((attr: Attribute) => attr.attribute === attributeId)?.value;
             if (value !== undefined && value !== null) {
+                if (key === 'gender') {
+                    if (value === variableMappings.femaleOptionCode) {
+                        acc.gender = GenderCodes.CGC_Female;
+                    }
+                    if (value === variableMappings.maleOptionCode) {
+                        acc.gender = GenderCodes.CGC_Male;
+                    }
+                    return acc;
+                }
                 acc[key] = value;
             }
         }