fix: Age calculation in tolltip and growth chart annotations fixed

dev-otta · May 22, 2024 · e2ab366 · e2ab366
1 parent 331a53b
commit e2ab366
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 53 deletions.
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-04-02T13:38:27.904Z\n"
-"PO-Revision-Date: 2024-04-02T13:38:27.904Z\n"
+"POT-Creation-Date: 2024-05-22T09:36:42.938Z\n"
+"PO-Revision-Date: 2024-05-22T09:36:42.938Z\n"
 
 msgid "Growth Chart"
 msgstr "Growth Chart"
@@ -32,6 +32,9 @@ msgstr "Months"
 msgid "Weeks"
 msgstr "Weeks"
 
+msgid "Days"
+msgstr "Days"
+
 msgid "year"
 msgstr "year"
 
@@ -50,6 +53,12 @@ msgstr "week"
 msgid "weeks"
 msgstr "weeks"
 
+msgid "day"
+msgstr "day"
+
+msgid "days"
+msgstr "days"
+
 msgid "Head circumference"
 msgstr "Head circumference"
 

diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "chart.js": "^4.4.2",
     "chartjs-plugin-annotation": "^3.0.1",
     "classnames": "^2.5.1",
+    "date-fns": "^3.6.0",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
     "prop-types": "15.8.1",

diff --git a/src/components/GrowthChart/GrowthChartBuilder/ChartTooltip.ts b/src/components/GrowthChart/GrowthChartBuilder/ChartTooltip.ts
@@ -1,5 +1,6 @@
 import i18n from '@dhis2/d2-i18n';
 import { Scriptable, ScriptableTooltipContext, TooltipPositionerMap } from 'chart.js';
+import { differenceInMonths, differenceInWeeks, differenceInYears } from 'date-fns';
 import { unitCodes, CategoryCodes, timeUnitData, TimeUnitCodes } from '../../../types/chartDataTypes';
 
 interface TooltipConfig {
@@ -24,7 +25,7 @@ interface TooltipConfig {
     };
 }
 
-export const ChartTooltip = (category: string, xAxisLabel: string, yAxisLabel: string): TooltipConfig => {
+export const ChartTooltip = (category: string, xAxisLabel: string, yAxisLabel: string, dateOfBirth: Date): TooltipConfig => {
     let xUnit = '';
     let yUnit = '';
 
@@ -67,8 +68,10 @@ export const ChartTooltip = (category: string, xAxisLabel: string, yAxisLabel: s
                 return `${i18n.t('Date')}: ${date}`;
             },
             label: (tooltipItem) => {
+                const date = new Date(tooltipItem.raw.eventDate);
                 let yValue = Number(tooltipItem.formattedValue.replace(',', '.'));
-                let xValue = Number(tooltipItem.label.replace(',', '.')) + 0.01;
+                let xValue = Number(tooltipItem.label.replace(',', '.'));
+                const weeks = differenceInWeeks(date, dateOfBirth);
 
                 let xLabel = '';
 
@@ -79,54 +82,26 @@ export const ChartTooltip = (category: string, xAxisLabel: string, yAxisLabel: s
                 xLabel = `${xAxisLabel}: ${xValue} ${xUnit}`;
 
                 if (xAxisLabel === TimeUnitCodes.weeks) {
-                    const weeks = Number(Math.floor(xValue % timeUnitData.Months.divisor));
-                    const months = Number(Math.floor(xValue / timeUnitData.Months.divisor));
-
                     xLabel = `${i18n.t('Age')}: `;
-
-                    if (months > 0) {
-                        xLabel += `${months} ${(months === 1) ? timeUnitData.Months.singular : timeUnitData.Months.plural} `;
-                    }
-
-                    if (weeks > 0) {
-                        xLabel += `${weeks} ${(weeks === 1) ? timeUnitData.Weeks.singular : timeUnitData.Weeks.plural} `;
-                    }
-
-                    if (months < 1) {
-                        const totalDays = Number(xValue * timeUnitData.Weeks.divisor);
-                        const days = Number(Math.floor(totalDays % timeUnitData.Weeks.divisor));
-                        if (weeks === 0) {
-                            xLabel += `${days} ${(days === 1) ? timeUnitData.Days.singular : timeUnitData.Days.plural}`;
-                        }
-                        if (weeks > 0) {
-                            days === 0 ? xLabel += '' : xLabel += `${days} ${(days === 1) ? timeUnitData.Days.singular
-                                : timeUnitData.Days.plural}`;
-                        }
-                    }
+                    xLabel += `${weeks} ${(weeks === 1) ? timeUnitData.Weeks.singular : timeUnitData.Weeks.plural} `;
                 }
                 if (xAxisLabel === TimeUnitCodes.months) {
-                    const months = Number(Math.floor(xValue % timeUnitData.Years.divisor));
-                    const years = Number(Math.floor(xValue / timeUnitData.Years.divisor));
+                    const months = differenceInMonths(date, dateOfBirth) % 12;
+                    const years = differenceInYears(date, dateOfBirth);
 
                     xLabel = `${i18n.t('Age')}: `;
 
-                    if (years > 0) {
-                        xLabel += `${years} ${(years === 1) ? timeUnitData.Years.singular : timeUnitData.Years.plural} `;
+                    if (weeks <= 13) {
+                        xLabel = `${weeks} ${(weeks === 1) ? timeUnitData.Weeks.singular : timeUnitData.Weeks.plural} `;
                     }
 
-                    if (months > 0) {
-                        xLabel += `${months} ${(months === 1) ? timeUnitData.Months.singular : timeUnitData.Months.plural} `;
-                    }
-
-                    if (years < 1) {
-                        const totalWeeks = Number(xValue * timeUnitData.Months.divisor);
-                        const weeks = Number(Math.floor(totalWeeks % timeUnitData.Months.divisor));
-                        if (months === 0) {
-                            xLabel += `${weeks} ${(weeks === 1) ? timeUnitData.Weeks.singular : timeUnitData.Weeks.plural}`;
+                    if (weeks > 13) {
+                        if (years > 0) {
+                            xLabel += `${years} ${(years === 1) ? timeUnitData.Years.singular : timeUnitData.Years.plural} `;
                         }
+
                         if (months > 0) {
-                            weeks === 0 ? xLabel += '' : xLabel += `${weeks} ${(weeks === 1) ? timeUnitData.Weeks.singular
-                                : timeUnitData.Weeks.plural}`;
+                            xLabel += `${months} ${(months === 1) ? timeUnitData.Months.singular : timeUnitData.Months.plural} `;
                         }
                     }
                 }

diff --git a/src/components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx b/src/components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx
@@ -47,7 +47,7 @@ export const GrowthChartBuilder = ({
         plugins: {
             annotation: { annotations },
             legend: { display: false },
-            tooltip: ChartTooltip(category, datasetMetadata.xAxisLabel, datasetMetadata.yAxisLabel),
+            tooltip: ChartTooltip(category, datasetMetadata.xAxisLabel, datasetMetadata.yAxisLabel, dateOfBirth),
         },
         scales: {
             x: {

diff --git a/src/types/chartDataTypes.ts b/src/types/chartDataTypes.ts
@@ -12,7 +12,6 @@ export interface MeasurementData {
 interface TimeUnitData {
     singular: string;
     plural: string;
-    divisor: number;
 }
 
 export interface ChartDataTypes {
@@ -60,22 +59,18 @@ export const timeUnitData: { [key: string]: TimeUnitData } = {
     [TimeUnitCodes.years]: {
         singular: i18n.t('year'),
         plural: i18n.t('years'),
-        divisor: 12,
     },
     [TimeUnitCodes.months]: {
         singular: i18n.t('month'),
         plural: i18n.t('months'),
-        divisor: 4.34812141,
     },
     [TimeUnitCodes.weeks]: {
         singular: i18n.t('week'),
         plural: i18n.t('weeks'),
-        divisor: 7,
     },
     [TimeUnitCodes.days]: {
         singular: i18n.t('day'),
         plural: i18n.t('days'),
-        divisor: 1,
     },
 };
 

diff --git a/src/utils/ChartOptions/GrowthChartAnnotations.tsx b/src/utils/ChartOptions/GrowthChartAnnotations.tsx
@@ -1,4 +1,4 @@
-import { timeUnitData, TimeUnitCodes } from '../../types/chartDataTypes';
+import { timeUnitData, TimeUnitCodes, MeasurementTypeCodesLabel } from '../../types/chartDataTypes';
 
 export interface AnnotationLabelType {
     display: boolean;
@@ -13,11 +13,10 @@ export const GrowthChartAnnotations = (
     let timeUnitConfig = {
         singular: '',
         plural: '',
-        divisor: 0,
     };
 
-    if (datasetMetadata.xAxisLabel === TimeUnitCodes.weeks) {
-        timeUnitConfig = timeUnitData.Months;
+    if (datasetMetadata.xAxisLabel === TimeUnitCodes.weeks || Object.values(MeasurementTypeCodesLabel).includes(datasetMetadata.xAxisLabel)) {
+        return [];
     }
 
     if (datasetMetadata.xAxisLabel === TimeUnitCodes.months) {
@@ -27,7 +26,7 @@ export const GrowthChartAnnotations = (
     if (timeUnitConfig) {
         const xValues = ZscoreLines[0]?.data.map((entry: any) => entry.x) || [];
 
-        const { divisor } = timeUnitConfig;
+        const { divisor } = { divisor: 12 };
 
         const annotations = xValues.filter((label: number) => label % divisor === 0)
             .map((label: number) => ({

diff --git a/yarn.lock b/yarn.lock
@@ -5477,6 +5477,11 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+
 dayjs@^1.10.4:
   version "1.11.10"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"