OpenMRS Growth Chart

Description

The Growth Chart is designed for the OpenMRS 3.x Patient Chart. Its primary purpose is to allow clinicians to visualize pediatric growth trends (Weight-for-Age, Height-for-Age) against standardized normative curves (WHO & CDC) to identify malnutrition or growth abnormalities early.

Scope

Phase 1

• Project Initialization: Scaffolding the app and registering it within the O3 shell.

• Data Integration: Fetching Patient Demographics (DOB) and Clinical Observations (Weight, Height).

• Logic Layer: Integrating official WHO datasets and implementing Z-score calculation logic.

• Visualization: Developing both a Longitudinal Table View and an Interactive Graph View.

• Quality Assurance: Implementing E2E testing for the core flows.

• WHO Dataset 1.Integrated the data set for girls and boys of weight to age who standards. (Birth-5 years). 2.Converted original WHO .xlsx data to JSON format. 3.JSON includes L, M, S parameters for Z-score calculation and P-values for graphing. 4.Link to the WHO data - https://www.who.int/tools/child-growth-standards/standards/weight-for-age

• Weight for Age Chart 1.Weight for Age chart is displayed for patients under 5 years of age. 2.If the patient is older than 5 years it will shows and empty state.

• E2E Testing 1.Tested the "Growth Chart Unavailable" view for patients older than 5 years. 2.Tested the "Growth Chart Visibility" dashboard for patients younger than 5 years using a dynamic birthdate payload. 3.Tests are deterministic and do not depend on fixed dates.

• Unit Testing 1.Testing utility functions (growth-chart.utils.ts) that process and format patient weights.

Quick start

yarn install
yarn start

Once started, your module will be available at: http://localhost:8080/openmrs/spa/

Running unit and integration tests

To run unit and integration tests, run:

yarn turbo run test

To run tests in watch mode, run:

yarn turbo run test:watch

To generate a coverage report, run:

yarn turbo run coverage

By default, turbo will cache test runs. This means that re-running tests wihout changing any of the related files will return the cached logs from the last run. To bypass the cache, run tests with the force flag, as follows:

yarn turbo run test --force

Running End-to-End (E2E) tests

Before running the E2E tests, you need to set up the test environment. Install Playwright browsers and setup the default test environment variables by running the following commands:

npx playwright install
cp example.env .env

By default, tests run against a local backend at http://localhost:8080/openmrs. To test local changes, make sure your dev server is running before executing tests.

yarn start

To test against a remote instance (such as the OpenMRS refapp hosted on dev3.openmrs.org, update the E2E_BASE_URL environment variable in your .env file:

E2E_BASE_URL=https://dev3.openmrs.org/openmrs

To run E2E tests:

yarn test-e2e

This will run all the E2E tests (files in the e2e directory with the *.spec.ts extension) in headless mode. That means no browser UI will be visible.

To run tests in headed mode (shows the browser while tests run) use:

yarn test-e2e --headed

To run tests in Playwright's UI mode (interactive debugger), use:

yarn test-e2e --ui

You'll most often want to run tests in both headed and UI mode:

yarn test-e2e --headed --ui

To run a specific test file:

yarn test-e2e <test-name>

Read the e2e testing guide to learn more about End-to-End tests in this project.

Updating Playwright

The Playwright version in the Bamboo e2e Dockerfile and the package.json file must match. If you update the Playwright version in one place, you must update it in the other.

What's included

• ✅ OpenMRS 3.0 microfrontend setup
• ✅ Carbon Design System integration
• ✅ Internationalization (i18n) ready
• ✅ TypeScript configuration
• ✅ Jest testing setup
• ✅ ESLint + Prettier

Learn more

OpenMRS O3 resources

• Getting Started - Start here for O3 development
• Creating a Frontend Module - Step-by-step guide
• Framework Concepts - Core O3 patterns

Development guide

• Extension System - Adding widgets and extensions
• State Management - Managing app state
• Carbon and Styling - UI components and styling
• Testing - Testing your module

Community

• OpenMRS Talk - Community forum for questions
• OpenMRS Wiki - Join the developer community

Common tasks

Adding new routes

See the Routing Guide for details.

Installation

yarn add @openmrs/esm-patient-growth-chart

Building

yarn build

Testing

yarn test

Troubleshooting

openmrs develop crashes with Cannot read properties of undefined (reading 'devServer')

Ensure your build config exports the default OpenMRS config:

For rspack (default):

const config = require('@openmrs/rspack-config');

module.exports = config.default ?? config;

For webpack:

const config = require('@openmrs/webpack-config');

module.exports = config.default ?? config;

Yarn peer dependency warnings (dayjs, i18next, single-spa, swr, react-is, sass)

If you see missing peer dependency warnings, add the missing deps and align react-i18next to 11.x in your package.json, then re-run yarn install.