diff --git a/cypress/component/ChartSelector/ChartSelector.cy.js b/cypress/component/ChartSelector/ChartSelector.cy.js
index e90b7e6..13132b7 100644
--- a/cypress/component/ChartSelector/ChartSelector.cy.js
+++ b/cypress/component/ChartSelector/ChartSelector.cy.js
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
-import { ChartSelector } from '../../../src/Components/GrowthChartSelector';
import { useChartDataForGender } from '../../../src/utils/DataFetching/Sorting/useChartDataForGender';
+import { ChartSelector } from '../../../src/components/GrowthChart/GrowthChartSelector';
describe('ChartSelector', () => {
const TestComponent = () => {
diff --git a/cypress/component/ChartSelector/ChartSelectorDropdown/ChartSelectorDropdown.cy.js b/cypress/component/ChartSelector/ChartSelectorDropdown/ChartSelectorDropdown.cy.js
index 9d33cc4..15a3046 100644
--- a/cypress/component/ChartSelector/ChartSelectorDropdown/ChartSelectorDropdown.cy.js
+++ b/cypress/component/ChartSelector/ChartSelectorDropdown/ChartSelectorDropdown.cy.js
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { ChartSelectorDropdown } from '../../../../src/Components/GrowthChartSelector/ChartSelectorDropdown';
+import { ChartSelectorDropdown } from '../../../../src/components/GrowthChart/GrowthChartSelector/ChartSelectorDropdown';
describe('ChartSelectorDropdown', () => {
const TestComponent = () => {
diff --git a/i18n/en.pot b/i18n/en.pot
index db01be5..dad8071 100644
--- 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-03-18T10:17:19.228Z\n"
-"PO-Revision-Date: 2024-03-18T10:17:19.228Z\n"
+"POT-Creation-Date: 2024-03-25T03:31:40.489Z\n"
+"PO-Revision-Date: 2024-03-25T03:31:40.489Z\n"
msgid "Date"
msgstr "Date"
@@ -17,41 +17,20 @@ msgstr "Height"
msgid "Weight"
msgstr "Weight"
-msgid "Year"
-msgstr "Year"
-
-msgid "Years"
-msgstr "Years"
-
-msgid "Month"
-msgstr "Month"
-
-msgid "Months"
-msgstr "Months"
-
msgid "Growth Chart"
msgstr "Growth Chart"
-msgid "There was an error fetching the config for the growth chart."
-msgstr "There was an error fetching the config for the growth chart."
-
-msgid "Please check the configuration in Datastore Management and try again."
-msgstr "Please check the configuration in Datastore Management and try again."
+msgid "Months"
+msgstr "Months"
msgid "Weeks"
msgstr "Weeks"
-msgid "Head circumference (cm)"
-msgstr "Head circumference (cm)"
-
-msgid "Length (cm)"
-msgstr "Length (cm)"
-
-msgid "Height (cm)"
-msgstr "Height (cm)"
+msgid "Head circumference"
+msgstr "Head circumference"
-msgid "Weight (kg)"
-msgstr "Weight (kg)"
+msgid "Length"
+msgstr "Length"
msgid "Head circumference for age"
msgstr "Head circumference for age"
@@ -82,3 +61,18 @@ msgstr "Boy"
msgid "Girl"
msgstr "Girl"
+
+msgid "There was an error fetching the config for the growth chart."
+msgstr "There was an error fetching the config for the growth chart."
+
+msgid "Please check the configuration in Datastore Management and try again."
+msgstr "Please check the configuration in Datastore Management and try again."
+
+msgid "Year"
+msgstr "Year"
+
+msgid "Years"
+msgstr "Years"
+
+msgid "Month"
+msgstr "Month"
diff --git a/package.json b/package.json
index 5640c9c..9932543 100644
--- a/package.json
+++ b/package.json
@@ -17,12 +17,12 @@
"devDependencies": {
"@dhis2/cli-app-scripts": "^11.0.0",
"@testing-library/cypress": "^10.0.1",
- "cypress": "^13.6.6",
+ "cypress": "^13.7.0",
"eslint": "8.57.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
- "eslint-plugin-react": "^7.34.0",
+ "eslint-plugin-react": "^7.34.1",
"react-scripts": "5.1.0-next.14",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3"
diff --git a/src/Components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx b/src/Components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx
deleted file mode 100644
index 040dc66..0000000
--- a/src/Components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React from 'react';
-import i18n from '@dhis2/d2-i18n';
-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, CategoryLabels } from '../../../types/chartDataTypes';
-import { chartLineColorPicker } from '../../../utils/chartLineColorPicker';
-import { annotateLineEnd } from '../../../utils/annotateLineEnd';
-import { useMeasurementDataChart } from '../../../utils/useMeasurementDataChart';
-
-interface GrowthChartBuilderProps extends ChartDataTypes {
- category: keyof typeof CategoryToLabel;
- dataset: string | number;
- dateOfBirth: Date;
-}
-
-export const GrowthChartBuilder = ({
- datasetValues,
- datasetMetadata,
- yAxisValues,
- keysDataSet,
- annotations,
- measurementData,
- category,
- dataset,
- dateOfBirth,
-}: GrowthChartBuilderProps) => {
- Chart.register(annotationPlugin);
-
- const { minDataValue, maxDataValue } = yAxisValues;
-
- const adjustIndex = (dataset === '2 to 5 years') ? 24 : 0;
-
- const ZscoreLines = keysDataSet.map((key) => ({
- data: datasetValues.map((entry, index) => ({
- x: (category !== 'wflh_b' && category !== 'wflh_g') ? adjustIndex + index : datasetMetadata.range.start + index,
- y: entry[key],
- })),
- borderWidth: 0.9,
- borderColor: chartLineColorPicker(key),
- label: key,
- }));
-
- const categoryLabel = CategoryToLabel[category];
- const datasetMappings: { [key: string]: string } = {
- [CategoryLabels.hcfa]: 'headCircumference',
- [CategoryLabels.lhfa]: 'height',
- [CategoryLabels.wfa]: 'weight',
- [CategoryLabels.wflh]: 'weight',
- };
-
- const fieldName = datasetMappings[categoryLabel];
- const formattedFieldName = fieldName.charAt(0).toUpperCase() + fieldName.substring(1);
- const MeasurementData = useMeasurementDataChart(measurementData, fieldName, category, dataset, dateOfBirth);
-
- const data : any = { datasets: [...ZscoreLines, ...MeasurementData] };
-
- const options: ChartOptions<'line'> = {
- elements: { point: { radius: 0, hoverRadius: 0 } },
- plugins: {
- annotation: { annotations },
- legend: { display: false },
- tooltip: {
- enabled: true,
- intersect: false,
- position: 'nearest',
- backgroundColor: 'white',
- bodyFont: { size: 12 },
- bodyColor: 'black',
- borderColor: 'black',
- borderWidth: 1,
- padding: 12,
- caretPadding: 4,
- boxPadding: 4,
- usePointStyle: true,
- filter: (tooltipItem: any) => tooltipItem.dataset.id === 'measurementData',
- callbacks: {
- title: () => '',
- beforeLabel: (tooltipItem: any) => {
- const date = new Date(tooltipItem.raw.eventDate).toLocaleDateString();
- return `${i18n.t('Date')}: ${date}`;
- },
- label: (tooltipItem: any) => {
- if (category === 'wflh_b' || category === 'wflh_g') {
- return `${i18n.t('Height')}: ${tooltipItem.label} | ${i18n.t('Weight')}: ${tooltipItem.formattedValue}`;
- }
- const value = tooltipItem.formattedValue;
- return `${formattedFieldName}: ${value}`;
- },
- },
- },
- },
- scales: {
- x: {
- type: 'linear',
- title: {
- display: true,
- text: i18n.t(datasetMetadata.xAxisLabel),
- font: { size: 13 },
- },
- min: datasetMetadata.range.start,
- max: datasetMetadata.range.end,
- ticks: { stepSize: 1 },
- },
- y: {
- title: {
- display: true,
- text: i18n.t(datasetMetadata.yAxisLabel),
- font: { size: 13 },
- },
- position: 'left',
- min: minDataValue,
- max: maxDataValue,
- },
- yRight: {
- position: 'right',
- min: minDataValue,
- max: maxDataValue,
- ticks: { padding: 18 },
- },
- },
- animation: {
- onComplete: (chartAnimation: any) => annotateLineEnd(chartAnimation),
- onProgress: (chartAnimation: any) => annotateLineEnd(chartAnimation),
- },
- };
-
- return (
-
-
- {/* eslint-disable-next-line react/no-unused-prop-types */}
- {({ height, width }: { height: number, width: number }) => (
-
-
-
- )}
-
-
+
+ {/* eslint-disable-next-line react/no-unused-prop-types */}
+ {({ height, width }: { height: number, width: number }) => (
+
+
+
+ )}
+
+