fix: restructuring useCalculateDecimalDate

dev-otta · Mar 21, 2024 · 1fa3056 · 1fa3056
1 parent 4996713
commit 1fa3056
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 56 deletions.
diff --git 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 { ChartData, GenderCodes, CategoryCodes, MeasurementData } from '../../types/chartDataTypes';
+import { GenderCodes, CategoryCodes, MeasurementData } from '../../types/chartDataTypes';
 import { useCalculateMinMaxValues } from '../../utils/Hooks/Calculations/useCalculateMinMaxValues';
 import { ChartSettingsButton } from './ChartSettingsButton';
 import { useChartDataForGender } from '../../utils/DataFetching/Sorting/useChartDataForGender';
@@ -21,13 +21,13 @@ export const GrowthChart = ({
     const { chartDataForGender } = useChartDataForGender({ gender });
 
     const [category, setCategory] = useState<keyof typeof CategoryCodes>();
-    const [dataset, setDataset] = useState<keyof ChartData>();
+    const [dataset, setDataset] = useState<string>();
 
     useEffect(() => {
         if (Object.keys(chartDataForGender).length > 0) {
             const newCategory = Object.keys(chartDataForGender)[0] as keyof typeof CategoryCodes;
             setCategory(newCategory);
-            const newDataset = Object.keys(chartDataForGender[newCategory].datasets)[0] as keyof ChartData;
+            const newDataset = Object.keys(chartDataForGender[newCategory].datasets)[0];
             setDataset(newDataset);
         }
     }, [chartDataForGender]);

diff --git a/src/Components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx b/src/Components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx
@@ -4,14 +4,15 @@ import { Line } from 'react-chartjs-2';
 import Chart, { ChartOptions } from 'chart.js/auto';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { ChartDataTypes, CategoryToLabel, MeasurementTypeCodesLabel, MeasurementTypeCodes } from '../../../types/chartDataTypes';
+import { ChartDataTypes, CategoryToLabel, MeasurementTypeCodesLabel,
+    MeasurementTypeCodes, DataSetLabels, CategoryCodes } from '../../../types/chartDataTypes';
 import { GrowthChartAnnotations, AnnotateLineEnd } from '../../../utils/ChartOptions';
 import { useMeasurementPlotting, useZscoreLines } from '../../../utils/Hooks/ChartDataVisualization';
 import { ChartTooltipConfig } from './ChartTooltipConfig';
 
 interface GrowthChartBuilderProps extends ChartDataTypes {
     category: keyof typeof CategoryToLabel;
-    dataset: string | number;
+    dataset: string;
     dateOfBirth: Date;
 }
 
@@ -34,8 +35,8 @@ export const GrowthChartBuilder = ({
     const MeasuremenCode = MeasurementTypeCodes[category];
     const MeasuremenLabel = MeasurementTypeCodesLabel[MeasuremenCode];
 
-    const adjustIndex = (dataset === '2 to 5 years') ? 24 : 0;
-    const startIndex = (category !== 'wflh_b' && category !== 'wflh_g') ? adjustIndex : datasetMetadata.range.start;
+    const adjustIndex = (dataset === DataSetLabels.y_2_5) ? 24 : 0;
+    const startIndex = (category !== CategoryCodes.wflh_b && category !== CategoryCodes.wflh_g) ? adjustIndex : datasetMetadata.range.start;
 
     const ZscoreLinesData = useZscoreLines(datasetValues, keysDataSet, datasetMetadata, category, dataset, startIndex);
     const MeasurementData = useMeasurementPlotting(measurementData, MeasuremenCode, category, dataset, dateOfBirth, startIndex);

diff --git a/src/Components/GrowthChart/GrowthChartSelector/ChartSelector.tsx b/src/Components/GrowthChart/GrowthChartSelector/ChartSelector.tsx
@@ -6,7 +6,7 @@ interface ChartSelectorProps {
     category: keyof typeof CategoryCodes;
     dataset: keyof ChartData;
     setCategory: (category: keyof typeof CategoryCodes) => void;
-    setDataset: (dataset: keyof ChartData) => void;
+    setDataset: (dataset: string) => void;
     chartData: ChartData;
     isDisabled?: boolean;
     gender: string;
@@ -26,11 +26,11 @@ export const ChartSelector = ({
     const handleCategoryChange = (value: string) => {
         const newCategory = Object.keys(chartData).find((key) => chartData[key].categoryMetadata.label === value) as keyof typeof CategoryCodes;
         setCategory(newCategory);
-        setDataset(Object.keys(chartData[newCategory].datasets)[0] as keyof ChartData);
+        setDataset(Object.keys(chartData[newCategory].datasets)[0]);
     };
 
     const handleDatasetChange = (value: string) => {
-        setDataset(value as keyof ChartData);
+        setDataset(value);
     };
 
     return (

diff --git a/src/utils/Hooks/Calculations/useCalculateDecimalDate.ts b/src/utils/Hooks/Calculations/useCalculateDecimalDate.ts
@@ -1,44 +1,32 @@
-export const useCalculateDecimalDate = (date: string, dataset: string | number, dateOfBirth: Date): string => {
-    const millisecondsInDay = 1000 * 60 * 60 * 24;
-
-    if (dataset === '0 to 13 weeks') {
-        const millisecondsInWeek = millisecondsInDay * 7;
-
-        const formattedDate: Date = new Date(date);
-        const diffInMilliseconds = formattedDate.getTime() - dateOfBirth.getTime();
-        const diffInWeeks = (diffInMilliseconds / millisecondsInWeek);
-
-        if (diffInWeeks < 0) return null;
-        if (diffInWeeks > 13) return null;
-        return diffInWeeks.toFixed(2);
-    }
-
-    if (dataset === '0 to 2 years' || dataset === '0 to 5 years') {
-        const millisecondsInMonth = millisecondsInDay * 30.44;
-
-        const formattedDate: Date = new Date(date);
-        const diffInMilliseconds = formattedDate.getTime() - dateOfBirth.getTime();
-        const diffInMonths = (diffInMilliseconds / millisecondsInMonth);
+import { DataSetLabels } from '../../../types/chartDataTypes';
 
-        if (diffInMonths < 0) return null;
+interface DatasetMap {
+    [x: string]: () => string;
+}
 
-        if (dataset === '0 to 2 years' && diffInMonths > 24) return null;
-        if (dataset === '0 to 5 years' && diffInMonths > 60) return null;
-
-        return diffInMonths.toFixed(2);
-    }
+export const useCalculateDecimalDate = (date: string, dataset: string, dateOfBirth: Date): string => {
+    const millisecondsInDay = 1000 * 60 * 60 * 24;
+    const formattedDate: Date = new Date(date);
+    const diffInMilliseconds = formattedDate.getTime() - dateOfBirth.getTime();
 
-    if (dataset === '2 to 5 years') {
+    const calculateDiffInMonths = (maxMonths: number | null = null): string => {
         const millisecondsInMonth = millisecondsInDay * 30.44;
-
-        const formattedDate: Date = new Date(date);
-        const diffInMilliseconds = formattedDate.getTime() - dateOfBirth.getTime();
-        const diffInMonths = (diffInMilliseconds / millisecondsInMonth);
-
-        if (diffInMonths < 24) return null;
-        if (diffInMonths > 60) return null;
+        const diffInMonths = diffInMilliseconds / millisecondsInMonth;
+        if (diffInMonths < 0 || (maxMonths !== null && diffInMonths > maxMonths)) return null;
         return diffInMonths.toFixed(2);
-    }
-
-    return null;
+    };
+
+    const datasetMap: DatasetMap = {
+        [DataSetLabels.w_0_13]: () => {
+            const millisecondsInWeek = millisecondsInDay * 7;
+            const diffInWeeks = diffInMilliseconds / millisecondsInWeek;
+            if (diffInWeeks < 0 || diffInWeeks > 13) return null;
+            return diffInWeeks.toFixed(2);
+        },
+        [DataSetLabels.y_0_2]: () => calculateDiffInMonths(24),
+        [DataSetLabels.y_0_5]: () => calculateDiffInMonths(60),
+        [DataSetLabels.y_2_5]: () => calculateDiffInMonths(60),
+    };
+
+    return datasetMap[dataset]?.() ?? null;
 };
diff --git a/src/utils/Hooks/Calculations/useCalculateMinMaxValues.ts b/src/utils/Hooks/Calculations/useCalculateMinMaxValues.ts
@@ -2,7 +2,7 @@ export function useCalculateMinMaxValues(datasetValues: Array<any>) {
     if (!datasetValues) {
         return { min: 0, max: 0 };
     }
-    const flatValues: number[] = datasetValues.flatMap((entry: any) => Number(Object.values(entry)));
+    const flatValues: number[] = datasetValues.flatMap((entry: any) => (Object.values(entry)) as number[]);
     return {
         min: Math.min(...flatValues),
         max: Math.max(...flatValues),

diff --git a/src/utils/Hooks/ChartDataVisualization/useMeasurementPlotting.ts b/src/utils/Hooks/ChartDataVisualization/useMeasurementPlotting.ts
@@ -1,5 +1,5 @@
 import { useCalculateDecimalDate } from '../Calculations/useCalculateDecimalDate';
-import { DataSetLabels } from '../../../types/chartDataTypes';
+import { DataSetLabels, CategoryCodes } from '../../../types/chartDataTypes';
 
 export interface MeasurementDataEntry {
     eventDate: string | Date;
@@ -12,7 +12,7 @@ export const useMeasurementPlotting = (
     measurementData: MeasurementDataEntry[] | undefined,
     fieldName: string,
     category: string,
-    dataset: string | number,
+    dataset: string,
     dateOfBirth: Date,
     startIndex: number,
 ) => {
@@ -26,11 +26,9 @@ export const useMeasurementPlotting = (
         let xValue: Date | number | string;
         let yValue: number;
 
-        if (category === 'wflh_b' || category === 'wflh_g') {
-            if (category === 'wflh_b' || category === 'wflh_g') {
-                xValue = parseFloat(String(entry.dataValues.height));
-                yValue = parseFloat(String(entry.dataValues.weight));
-            }
+        if (category === CategoryCodes.wflh_b || category === CategoryCodes.wflh_g) {
+            xValue = parseFloat(String(entry.dataValues.height));
+            yValue = parseFloat(String(entry.dataValues.weight));
         } else {
             const dateString: string = typeof entry.eventDate === 'string' ? entry.eventDate : entry.eventDate.toISOString();
             const xValueDecimalDate: string = useCalculateDecimalDate(dateString, dataset, dateOfBirth);