dhis2 / dashboard-app

Dashboard app for DHIS 2

This project was bootstrapped with DHIS2 Application Platform.

Development

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Configuration

Two environment variables need to be set for running dashboards-app in development mode. It is recommended to set these environment variables in a .env or .env.local file.

api base url: REACT_APP_DHIS2_BASE_URL

The api base url points to a running DHIS2 instance. This can be for example http://localhost:8080.

REACT_APP_DHIS2_BASE_URL=http://localhost:8080

api authentication: REACT_APP_DHIS2_AUTHORIZATION

In order for maps, event reports and event charts to display in development mode, you also need to provide the authenticaion credentials for the api. The following example is the base64 encoded value for the username/password combination of admin:district:

REACT_APP_DHIS2_AUTHORIZATION=Basic YWRtaW46ZGlzdHJpY3Q=

e2e tests

Configuration

Additional environment variables are needed in order to run the Cypress e2e tests. It is recommended to define these in the same place as the REACT_APP_DHIS2_BASE_URL env var (for example. .env). REACT_APP_DHIS2_BASE_URL and CYPRESS_DHIS2_BASE_URL must match.

REACT_APP_DHIS2_BASE_URL=http://localhost:8080
CYPRESS_DHIS2_BASE_URL=http://localhost:8080
CYPRESS_DHIS2_USERNAME=admin
CYPRESS_DHIS2_PASSWORD=district

Run the e2e tests

The following commands can be used to run the tests:

Comman	Backend	Environment	Tests
yarn cy:open	API server	Cypress UI	All
yarn cy:run	API server	Headless	All

yarn test

Launches the test runner and runs all available unit tests found in /src.

See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
. This command is run by the continuous integration server.

See the building section for more information.

Conditional E2E Test Recording

To record e2e tests in Cypress Cloud, you can use one of the following methods based on your needs:

• Commit Message: Include [e2e record] in your commit messages to activate recording.
• GitHub Labels: Apply the e2e record label to your pull request to trigger recording.

This setup helps in managing Cypress Cloud credits more efficiently, ensuring recordings are only made when explicitly required.

Learn More

You can learn more about the platform in the DHIS2 Application Platform Documentation.

You can learn more about the runtime in the DHIS2 Application Runtime Documentation.

To learn React, check out the React documentation.

dashboard-app's Issues

Add LICENSE

All cards that display integers on the dashboard seem to share the same font size based on the smallest font

I've noticed that when loading a dashboard that contains several cards that are numbers like the example below:

This is an admin account with full access - loaded first

Here is the same dashboard from a different user with facility only access

Notice the font sizes are the same

But when I clear the cache in the facility only user and reload the font sizes are much larger and more readable.

Note: there are other cards on the dashboard with larger figures, maybe thats whats causing a smaller font size on the admin user?

Is this a bug?
I've been increasing card size in an attempt to make numbers more legible but it seems this might be restricting the font sizes in some way?

Margin issue with 'width: 90%' on wide text blocks

When creating a wide text block in the dashboard - I've noticed a strange margin issue.

Its being caused by the following line

width: '90%',

link -> https://github.com/dhis2/dashboard-app/blob/9c6c0c65a20852fd0f1187cc5a359c9180d5b43b/src/components/Item/TextItem/Item.js#L30C19-L30C19

Seems to create a weird styling bug when using the text block in a wide variant resulting in huge X margins. Its caused because the 'width: 90%' of the texy body a ;margin: 0 auto; used to center it.

It means for some strange margins breaking the visual flow of the cards. Here are 2 examples:

POT file generation. Strings getting truncated on dot (.)

Found a small issue with the pot file generator. When the string has a . in it, then the part of the string after it is not included. For example: (edited)

i18n.t(
'No dashboards found. Use the + button to create a new dashboard.'
)```

that’s in the code. The generated pot file has this:

```msgid "No dashboards found"```