{"id":19004840,"url":"https://github.com/dhis2/interpretation-app","last_synced_at":"2025-07-14T15:08:54.205Z","repository":{"id":38274209,"uuid":"69460482","full_name":"dhis2/interpretation-app","owner":"dhis2","description":"DHIS 2 interpretation app","archived":false,"fork":false,"pushed_at":"2025-03-19T09:22:16.000Z","size":5289,"stargazers_count":2,"open_issues_count":12,"forks_count":6,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-04-22T18:48:08.276Z","etag":null,"topics":["synced-settings","tx","web-app"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dhis2.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-09-28T12:22:35.000Z","updated_at":"2025-03-18T21:19:35.000Z","dependencies_parsed_at":"2024-09-14T10:13:18.117Z","dependency_job_id":"87cabe08-9c6a-4038-80a7-acbc69b7b93c","html_url":"https://github.com/dhis2/interpretation-app","commit_stats":null,"previous_names":[],"tags_count":122,"template":false,"template_full_name":null,"purl":"pkg:github/dhis2/interpretation-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhis2%2Finterpretation-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhis2%2Finterpretation-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhis2%2Finterpretation-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhis2%2Finterpretation-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dhis2","download_url":"https://codeload.github.com/dhis2/interpretation-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhis2%2Finterpretation-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265311872,"owners_count":23745161,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["synced-settings","tx","web-app"],"created_at":"2024-11-08T18:24:45.602Z","updated_at":"2025-07-14T15:08:54.150Z","avatar_url":"https://github.com/dhis2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"DHIS 2 Interpretation app\n---\n\nThis repo contains the DHIS 2 interpretation wall app.\n\n## Prerequisites\nMake sure you have at least the following versions of `node` and `npm`.\n\n+ Node version v5.6.0 or higher\n+ npm version 3.8.0 or higher\n\nUse the following commands to check your current versions\n```sh\nnode -v\n\nnpm -v\n```\n\n## Getting started\n\nClone the repository from github with the following command\n```sh\ngit clone https://github.com/dhis2/interpretation-app\n```\n\nInstall the node dependencies\n```sh\nnpm install\n```\n\nTo set up your DHIS2 instance to work with the development service you will need to add the development servers address to the CORS whitelist. You can do this within the DHIS2 Settings app under the _access_ tab. On the access tab add `http://localhost:8081` to the CORS Whitelist.\n\u003e The starter app will look for a DHIS 2 development instance configuration in\n\u003e `$DHIS2_HOME/config`. So for example if your `DHIS2_HOME` environment variable is\n\u003e set to `~/.dhis2`, the starter app will look for `~/.dhis2/config.js` and then\n\u003e `~/.dhis2/config.json` and load the first one it can find.\n\u003e\n\u003e The config should export an object with the properties `baseUrl` and\n\u003e `authorization`, where authorization is the base64 encoding of your username and\n\u003e password. You can obtain this value by opening the console in your browser and\n\u003e typing `btoa('user:pass')`.\n\u003e\n\u003e If no config is found, the default `baseUrl` is `http://localhost:8080/dhis` and\n\u003e the default username and password is `admin` and `district`, respectively.\n\u003e\n\u003e See `webpack.config.js` for details.\n\nThis should enable you to run the following node commands:\n\nTo run the development server\n```sh\nnpm start\n```\n\nTo run the tests one time\n```sh\nnpm test\n```\n\nTo run the tests continuously on file changes (for your BDD workflow)\n```sh\nnpm run test-watch\n```\n\nTo generate a coverage report for the tests\n```sh\nnpm run coverage\n```\n\nTo check the code style for both the JS and SCSS files run\n```sh\nnpm run lint\n```\n\n# Tools\n\n## Frameworks and libraries\n### React\n[React](https://facebook.github.io/react/) is the _view_ part of the front-end applications, it has a component based architecture. At DHIS2 we also use JSX syntax that is generally used with React.\n\n###d2, d2-ui\n[d2](https://github.com/dhis2/d2) is the DHIS2 abstraction library that allows you to communicate with the DHIS2 api in a programatic way. [d2-ui](https://github.com/dhis2/d2-ui) is the ui component library that is build on top of d2 to allow reuse of common components that are used within DHIS2 applications. d2-ui also contains our own application wiring code through its _stores_ and _actions_.\n\n### material-ui\nd2-ui makes use of [material-ui](http://www.material-ui.com) for rendering more basic components like TextFields and Lists. It is therefore quite useful to look into this library too when building DHIS2 apps and making use of d2-ui.\n\n## Workflow\n\n### Webpack\nWebpack is a module bundler that allows the use of plugins to do various other things. We make use of webpack for the following things:\n+ Bundling the files up into a single file. (The primary webpack use case)\n+ Transpiling ES2015 and React JSX code to ES5 syntax so it runs in the browser. (This is done using [Babel](http://babeljs.io).)\n+ Loading [Scss](http://sass-lang.com) files. Scss is a css pre-processor that has quite some fancy features as variables, nesting of style declarations etc.\n+ Minifying the bundled file to reduce file size\n+ Remove duplicate dependencies\n\nTo make the development a more interactive experience we use `webpack-dev-server` to provide us with a development server that watches the project files and refreshes the browser when changes are detected.\n\n### npm\n[Npm](https://www.npmjs.com) is used as both a dependency management tool as a _workflow manager_ through its `scripts` as can be seen in the [package.json](https://github.com/dhis2/interpretations-app/blob/master/package.json#L6-L14). It provides convenience commands to kick off various tasks. These tasks are mentioned above as `npm run \u003ccommand\u003e`, `npm start`, `npm test`, etc.\n\n### linting\nTo make sure the code is in line with the code style, we use [eslint](http://eslint.org) as a static style checker. To a large degree we follow the [airbnb Javascript styleguide](https://github.com/airbnb/javascript). We do however have slight modifications which are defined in our own eslint-config. ([eslint-config-dhis2](https://github.com/dhis2/eslint-config-dhis2/blob/master/.eslintrc))\n\n## Testing\n\n### mocha, chai, sinon\n[Mocha](https://mochajs.org) is a test runner that runs the unit tests. [Chai](http://chaijs.com) is the assertion library that is used to do assertions within those tests. It supports various styles. At DHIS2 we generally tend to go with the [expect/BDD](http://chaijs.com/api/bdd/) variant. [Sinon](http://sinonjs.org) is used to do mocking within the tests and to fake HTTP requests where needed. The interesting things to look at for sinon are it's [spies](http://sinonjs.org/docs/#spies) and [stubs](http://sinonjs.org/docs/#stubs) calls and the [fakeServer](http://sinonjs.org/docs/#fakeServer).\n\n### enzyme\n[Enzyme](https://github.com/airbnb/enzyme) tool to make testing of React components easier. They provide a pretty clean api to get information from your rendered react components. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhis2%2Finterpretation-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhis2%2Finterpretation-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhis2%2Finterpretation-app/lists"}