diff --git a/src/components/GrowthChart/GrowthChartBuilder/ChartTooltip.ts b/src/components/GrowthChart/GrowthChartBuilder/ChartTooltip.ts index 80de91c..55ca5c1 100644 --- a/src/components/GrowthChart/GrowthChartBuilder/ChartTooltip.ts +++ b/src/components/GrowthChart/GrowthChartBuilder/ChartTooltip.ts @@ -81,20 +81,54 @@ export const ChartTooltip = (category: string, xAxisLabel: string, yAxisLabel: s if (xAxisLabel === TimeUnitCodes.weeks) { const weeks = Number(Math.floor(xValue % timeUnitData.Months.divisor)); const months = Number(Math.floor(xValue / timeUnitData.Months.divisor)); - 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}` : ''}`); + + 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}`; + } + } } if (xAxisLabel === TimeUnitCodes.months) { const months = Number(Math.floor(xValue % timeUnitData.Years.divisor)); const years = Number(Math.floor(xValue / timeUnitData.Years.divisor)); - 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}` : ''}`); + + xLabel = `${i18n.t('Age')}: `; + + if (years > 0) { + xLabel += `${years} ${(years === 1) ? timeUnitData.Years.singular : timeUnitData.Years.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 (months > 0) { + weeks === 0 ? xLabel += '' : xLabel += `${weeks} ${(weeks === 1) ? timeUnitData.Weeks.singular + : timeUnitData.Weeks.plural}`; + } + } } const labels = []; diff --git a/src/types/chartDataTypes.ts b/src/types/chartDataTypes.ts index 0d11079..460aae4 100644 --- a/src/types/chartDataTypes.ts +++ b/src/types/chartDataTypes.ts @@ -12,7 +12,7 @@ export interface MeasurementData { interface TimeUnitData { singular: string; plural: string; - divisor: number; + divisor?: number; } export interface ChartDataTypes { @@ -53,6 +53,7 @@ export const TimeUnitCodes = Object.freeze({ years: i18n.t('Years'), months: i18n.t('Months'), weeks: i18n.t('Weeks'), + days: i18n.t('Days'), }); export const timeUnitData: { [key: string]: TimeUnitData } = { @@ -69,7 +70,11 @@ export const timeUnitData: { [key: string]: TimeUnitData } = { [TimeUnitCodes.weeks]: { singular: i18n.t('week'), plural: i18n.t('weeks'), - divisor: 1, + divisor: 7, + }, + [TimeUnitCodes.days]: { + singular: i18n.t('day'), + plural: i18n.t('days'), }, };