diff --git a/src/Components/GrowthChart/GrowthChart.tsx b/src/Components/GrowthChart/GrowthChart.tsx index c05e37e..5f3512a 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 { 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(); - const [dataset, setDataset] = useState(); + const [dataset, setDataset] = useState(); 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 index 2741add..261aa9d 100644 --- 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 index 8062c3f..89e39a6 100644 --- 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 index 4dcb393..cf284cf 100644 --- 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 index ff8a2d7..535ec6f 100644 --- a/src/utils/Hooks/Calculations/useCalculateMinMaxValues.ts +++ b/src/utils/Hooks/Calculations/useCalculateMinMaxValues.ts @@ -2,7 +2,7 @@ export function useCalculateMinMaxValues(datasetValues: Array) { 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 index f153e94..858f92b 100644 --- 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);