From 49bfb5238a6580f2190e352b2353c25ee1e1f0d1 Mon Sep 17 00:00:00 2001
From: petterav <136808617+petterav@users.noreply.github.com>
Date: Wed, 24 Apr 2024 12:28:02 +0200
Subject: [PATCH] feat: [CGC-27] Count Months Like WHO Chart (#70)

---
 .../GrowthChartBuilder/GrowthChartBuilder.tsx | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx b/src/components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx
index 67acbde..0735773 100644
--- a/src/components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx
+++ b/src/components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx
@@ -59,7 +59,25 @@ export const GrowthChartBuilder = ({
                 },
                 min: datasetMetadata.range.start,
                 max: datasetMetadata.range.end,
-                ticks: { stepSize: 1 },
+                ticks: {
+                    stepSize: 1,
+                    callback: (value: number, index, values) => {
+                        if (datasetMetadata.xAxisLabel === 'Months') {
+                            const isFirstTick = index === 0;
+                            const isLastTick = index === values.length - 1;
+
+                            if (isFirstTick || isLastTick) {
+                                const years = value / 12;
+                                return `${years} ${years === 1 ? i18n.t('Year') : i18n.t('Years')}`;
+                            }
+
+                            const modulo = value % 12;
+                            return modulo === 0 ? '' : modulo;
+                        }
+                        return value;
+                    },
+                },
+
             },
             y: {
                 title: {