feat: code cleanup

dev-otta · Mar 24, 2024 · e5b85d6 · e5b85d6
1 parent 6c32df6
commit e5b85d6
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 64 deletions.
diff --git a/src/components/GrowthChart/GrowthChartBuilder/ChartTooltip.ts b/src/components/GrowthChart/GrowthChartBuilder/ChartTooltip.ts
@@ -1,6 +1,6 @@
 import i18n from '@dhis2/d2-i18n';
 import { Scriptable, ScriptableTooltipContext, TooltipPositionerMap } from 'chart.js';
-import { unitCodes } from '../../../types/chartDataTypes';
+import { unitCodes, CategoryCodes, timeUnitData, TimeUnitCodes } from '../../../types/chartDataTypes';
 
 interface TooltipConfig {
     enabled: boolean;
@@ -15,7 +15,7 @@ interface TooltipConfig {
     caretPadding: number;
     boxPadding: number;
     usePointStyle: boolean;
-    animation: boolean;
+    animation: any;
     filter: (tooltipItem: any) => boolean;
     callbacks: {
         title: () => string;
@@ -28,26 +28,23 @@ export const ChartTooltip = (category: string, xAxisLabel: string, yAxisLabel: s
     let xUnit = '';
     let yUnit = '';
 
-    if (category === 'hcfa_g' || category === 'hcfa_b') {
+    if (category === CategoryCodes.hcfa_b || category === CategoryCodes.hcfa_g) {
         yUnit = unitCodes.cm;
     }
 
-    if (category === 'lhfa_g' || category === 'lhfa_b') {
+    if (category === CategoryCodes.lhfa_b || category === CategoryCodes.lhfa_g) {
         yUnit = unitCodes.cm;
     }
 
-    if (category === 'wfa_g' || category === 'wfa_b') {
+    if (category === CategoryCodes.wfa_g || category === CategoryCodes.wfa_b) {
         yUnit = unitCodes.kg;
     }
 
-    if (category === 'wflh_g' || category === 'wflh_b') {
+    if (category === CategoryCodes.wflh_b || category === CategoryCodes.wflh_g) {
         xUnit = unitCodes.cm;
         yUnit = unitCodes.kg;
     }
 
-    if (xAxisLabel === 'Months') xUnit = xAxisLabel;
-    if (xAxisLabel === 'Weeks') xUnit = xAxisLabel;
-
     return {
         enabled: true,
         intersect: false,
@@ -81,17 +78,23 @@ export const ChartTooltip = (category: string, xAxisLabel: string, yAxisLabel: s
                 const yLabel = `${yAxisLabel}: ${yValue} ${yUnit}`;
                 xLabel = `${xAxisLabel}: ${xValue} ${xUnit}`;
 
-                if (xAxisLabel === 'Weeks') {
-                    const weeks = xValue % 4;
-                    const months = Math.floor(xValue / 4);
-                    xLabel = (months === 0 ? `${i18n.t('Age')}: ${weeks.toFixed(0)} ${i18n.t('Weeks')}`
-                        : `${i18n.t('Age')}: ${months} ${i18n.t('Months')} ${weeks.toFixed(0)} ${i18n.t('Weeks')}`);
+                if (xAxisLabel === TimeUnitCodes.weeks) {
+                    const weeks = Number((xValue % timeUnitData.Months.divisor).toFixed(0));
+                    const months = Number((Math.floor(xValue / timeUnitData.Months.divisor)).toFixed(0));
+                    xLabel = (months === 0 ? `${i18n.t('Age')}: ${weeks} ${(weeks === 1)
+                        ? timeUnitData.Weeks.singular : timeUnitData.Weeks.plural}`
+                        : `${i18n.t('Age')}: ${months} ${(months === 1) ? timeUnitData.Months.singular
+                            : timeUnitData.Months.plural} ${(weeks > 0) ? `${weeks} ${(weeks === 1)
+                            ? timeUnitData.Weeks.singular : timeUnitData.Weeks.plural}` : ''}`);
                 }
-                if (xAxisLabel === 'Months') {
-                    const months = xValue % 12;
-                    const years = Math.floor(xValue / 12);
-                    xLabel = (years === 0 ? `${i18n.t('Age')}: ${months.toFixed(0)} ${i18n.t('Months')}`
-                        : `${i18n.t('Age')}: ${years} ${i18n.t('Years')} ${months.toFixed(0)} ${i18n.t('Months')}`);
+                if (xAxisLabel === TimeUnitCodes.months) {
+                    const months = Number(Math.floor(xValue % timeUnitData.Years.divisor).toFixed(0));
+                    const years = Number(Math.floor(xValue / timeUnitData.Years.divisor).toFixed(0));
+                    xLabel = (years === 0 ? `${i18n.t('Age')}: ${months} ${(months === 1)
+                        ? timeUnitData.Months.singular : timeUnitData.Months.plural}`
+                        : `${i18n.t('Age')}: ${years} ${(years === 1) ? timeUnitData.Years.singular
+                            : timeUnitData.Years.plural} ${(months > 0) ? `${months} ${(months === 1)
+                            ? timeUnitData.Months.singular : timeUnitData.Months.plural}` : ''}`);
                 }
 
                 const labels = [];

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 },
-            ...ChartTooltip(category, datasetMetadata.xAxisLabel, datasetMetadata.yAxisLabel),
+            tooltip: ChartTooltip(category, datasetMetadata.xAxisLabel, datasetMetadata.yAxisLabel),
         },
         scales: {
             x: {

diff --git a/src/types/chartDataTypes.ts b/src/types/chartDataTypes.ts
@@ -9,6 +9,12 @@ export interface MeasurementData {
     };
 }
 
+interface TimeUnitData {
+    singular: string;
+    plural: string;
+    divisor: number;
+}
+
 export interface ChartDataTypes {
     datasetValues: { [key: string]: number }[];
     datasetMetadata: {
@@ -28,37 +34,51 @@ export interface ChartData {
             label: string;
             gender: string;
         };
-        datasets: { [key: string]: {
-            zScoreDatasetValues: { [key: string]: number }[];
-            percentileDatasetValues: { [key: string]: number }[];
-            metadata: {
-                chartLabel: string;
-                yAxisLabel: string;
-                xAxisLabel: string;
-                range: { start: number; end: number };
+        datasets: {
+            [key: string]: {
+                datasetValues: { [key: string]: number }[];
+                metadata: {
+                    chartLabel: string;
+                    yAxisLabel: string;
+                    xAxisLabel: string;
+                    range: { start: number; end: number };
                 };
             }
         };
     };
 }
 
 export const TimeUnitCodes = Object.freeze({
+    years: i18n.t('Years'),
     months: i18n.t('Months'),
     weeks: i18n.t('Weeks'),
 });
 
+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,
+    },
+    [TimeUnitCodes.weeks]: {
+        singular: i18n.t('week'),
+        plural: i18n.t('weeks'),
+        divisor: 1,
+    },
+};
+
 export const MeasurementTypeCodesLabel = Object.freeze({
     headCircumference: i18n.t('Head circumference'),
     length: i18n.t('Length'),
     height: i18n.t('Height'),
     weight: i18n.t('Weight'),
 });
 
-export const unitCodes = Object.freeze({
-    cm: i18n.t('cm'),
-    kg: i18n.t('kg'),
-});
-
 export const MeasurementTypeCodes = Object.freeze({
     hcfa_b: 'headCircumference',
     hcfa_g: 'headCircumference',
@@ -70,13 +90,26 @@ export const MeasurementTypeCodes = Object.freeze({
     wflh_g: 'weight',
 });
 
+export const unitCodes = Object.freeze({
+    cm: 'cm',
+    kg: 'kg',
+    g: 'g',
+});
+
 export const CategoryLabels = Object.freeze({
     hcfa: i18n.t('Head circumference for age'),
     lhfa: i18n.t('Length/height for age'),
     wfa: i18n.t('Weight for age'),
     wflh: i18n.t('Weight for length/height'),
 });
 
+const CategoryToYUnitLabel = Object.freeze({
+    hcfa: unitCodes.cm,
+    lhfa: unitCodes.cm,
+    wfa: unitCodes.kg,
+    wflh: unitCodes.cm,
+});
+
 export const CategoryCodes = Object.freeze({
     hcfa_b: 'hcfa_b',
     hcfa_g: 'hcfa_g',
@@ -98,6 +131,18 @@ export const CategoryToLabel = Object.freeze({
     wflh_b: CategoryLabels.wflh,
     wflh_g: CategoryLabels.wflh,
 });
+
+export const CategoryToYUnit = Object.freeze({
+    hcfa_b: CategoryToYUnitLabel.hcfa,
+    hcfa_g: CategoryToYUnitLabel.hcfa,
+    lhfa_b: CategoryToYUnitLabel.lhfa,
+    lhfa_g: CategoryToYUnitLabel.lhfa,
+    wfa_b: CategoryToYUnitLabel.wfa,
+    wfa_g: CategoryToYUnitLabel.wfa,
+    wflh_b: CategoryToYUnitLabel.wflh,
+    wflh_g: CategoryToYUnitLabel.wflh,
+});
+
 export const DataSetLabels = Object.freeze({
     y_0_5: i18n.t('0 to 5 years'),
     w_0_13: i18n.t('0 to 13 weeks'),

diff --git a/src/utils/ChartOptions/GrowthChartAnnotations.tsx b/src/utils/ChartOptions/GrowthChartAnnotations.tsx
@@ -1,44 +1,31 @@
-import i18n from '@dhis2/d2-i18n';
-import { TimeUnitCodes } from '../../types/chartDataTypes';
-
-interface TimeUnitData {
-    singular: string;
-    plural: string;
-    divisor: number;
-}
+import { timeUnitData, TimeUnitCodes } from '../../types/chartDataTypes';
 
 export interface AnnotationLabelType {
     display: boolean;
     content?: (value: number) => string;
     position?: 'top' | 'bottom' | 'center' | 'start' | 'end';
     yAdjust?: number;
 }
-
-const timeUnitData: { [key: string]: TimeUnitData } = {
-    [TimeUnitCodes.months]: {
-        singular: i18n.t('Year'),
-        plural: i18n.t('Years'),
-        divisor: 12,
-    },
-    [TimeUnitCodes.weeks]: {
-        singular: i18n.t('Month'),
-        plural: i18n.t('Months'),
-        divisor: 4,
-    },
-};
-
-const contentText = (value: number, xAxisLabel: string) => {
-    const { singular, plural } = timeUnitData[xAxisLabel];
-    return `${value} ${value === 1 ? singular : plural}`;
-};
-
 export const GrowthChartAnnotations = (
-    ChartLines: any[],
+    ZscoreLines: any[],
     datasetMetadata: any,
 ): AnnotationLabelType[] => {
-    const timeUnitConfig = timeUnitData[datasetMetadata.xAxisLabel];
+    let timeUnitConfig = {
+        singular: '',
+        plural: '',
+        divisor: 0,
+    };
+
+    if (datasetMetadata.xAxisLabel === TimeUnitCodes.weeks) {
+        timeUnitConfig = timeUnitData.Months;
+    }
+
+    if (datasetMetadata.xAxisLabel === TimeUnitCodes.months) {
+        timeUnitConfig = timeUnitData.Years;
+    }
+
     if (timeUnitConfig) {
-        const xValues = ChartLines[0]?.data.map((entry: any) => entry.x) || [];
+        const xValues = ZscoreLines[0]?.data.map((entry: any) => entry.x) || [];
 
         const { divisor } = timeUnitConfig;
 
@@ -53,7 +40,7 @@ export const GrowthChartAnnotations = (
                     display: true,
                     content: () => {
                         const value = label / divisor;
-                        return contentText(value, datasetMetadata.xAxisLabel);
+                        return `${value} ${value === 1 ? timeUnitConfig.singular : timeUnitConfig.plural}`;
                     },
                     position: 'end',
                     yAdjust: 10,