feat: Filter chartData based on measurmentData

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-04-23T10:55:58.423Z\n"
-"PO-Revision-Date: 2024-04-23T10:55:58.423Z\n"
+"POT-Creation-Date: 2024-04-24T10:57:45.778Z\n"
+"PO-Revision-Date: 2024-04-24T10:57:45.778Z\n"
 
 msgid "Growth Chart"
 msgstr "Growth Chart"
@@ -17,12 +17,18 @@ 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 "There was an error fetching the custom references for the growth chart."
+msgstr "There was an error fetching the custom references for the growth chart."
+
 msgid "Date"
 msgstr "Date"
 
 msgid "Age"
 msgstr "Age"
 
+msgid "Year"
+msgstr "Year"
+
 msgid "Years"
 msgstr "Years"
 

src/Plugin.tsx

@@ -15,8 +15,9 @@ import { useMappedTrackedEntityVariables } from './utils/DataFetching/Sorting/us
 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 { chartData as chartDataWHO } from './DataSets/WhoStandardDataSets/ChartData';
 import { CustomReferencesError } from './UI/GenericError/CustomReferencesError';
+import { useFilterByMissingData } from './utils/DataFetching/Sorting';
 
 const queryClient = new QueryClient();
 
@@ -40,6 +41,11 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
         isWeightInGrams: chartConfig?.settings.weightInGrams || false,
     });
 
+    const { chartData } = useFilterByMissingData(
+        mappedGrowthVariables,
+        chartConfig?.settings.customReferences ? customReferences : chartDataWHO,
+    );
+
     const isPercentiles = chartConfig?.settings.usePercentiles || false;
 
     const [open, setOpen] = useState(true);
@@ -81,7 +87,7 @@ const PluginInner = (propsFromParent: EnrollmentOverviewProps) => {
                         <GrowthChart
                             trackedEntity={mappedTrackedEntity}
                             measurementData={mappedGrowthVariables}
-                            chartData={chartConfig.settings.customReferences ? customReferences : chartData}
+                            chartData={chartData}
                             isPercentiles={isPercentiles}
                         />
                     </WidgetCollapsible>

src/components/GrowthChart/GrowthChart.tsx

@@ -21,7 +21,6 @@ export const GrowthChart = ({
     chartData,
 }: GrowthChartProps) => {
     const trackedEntityGender = trackedEntity?.gender;
-
     const [gender, setGender] = useState<string>(trackedEntityGender !== undefined ? trackedEntityGender : GenderCodes.CGC_Female);
     const { chartDataForGender } = useChartDataForGender({ gender, chartData });
 

src/utils/DataFetching/Sorting/useFilterByMissingData.ts

@@ -2,6 +2,9 @@ import { useMemo } from 'react';
 import { ChartData, MeasurementData } from '../../../types/chartDataTypes';
 
 export const useFilterByMissingData = (measurementData: MeasurementData[], chartData: ChartData) => {
+    if (!chartData || !measurementData) {
+        return {};
+    }
     const requiredData = Object.freeze({
         hcfa_b: { headCircumference: true },
         hcfa_g: { headCircumference: true },