From mn/ifi/inf5750
Revision as of 22:33, 6 December 2017 by (talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

About CloseSource

This is the Wiki for CloseSource, one of the groups enrolled in INF5750 - Open Source Development 2017. Information about our group project will be added here throughout the semester.

Group members

The group consists of the following members:

  • Edvarda W. Eriksen (ererikse)
  • Duy Johnny K. Nguyen (djnguyen)
  • Milad Sharif (milads)

Product descriptions requirements

We have chosen the task

Requirements from the assignment

The app needs to be able to present this information in (at least) three ways:

  • As percentages, where the first bar in the cascade is 100%, and the subsequent bars as expressed as percentages of the previous.
  • As raw numbers, but showing both the actual number and the gap (i.e. difference between target and actual).
  • As raw data and percentages (on different axis), i.e. bars with the raw data and a line with the percentage.

Because this app should be usable in different settings/ countries and thus different DHIS2 databases, there must be an interface for configuring the cascade and a possibility of saving these configurations for reuse later:

  • What data elements/indicators to include in the cascade, as this might differ from country to country or even at different levels within a country.
  • The target for each data element/indicator. While the global target for HIV is 90-90-90, it should be possible to set the target in the app.

Cascades are often done done for different population groups (by sex, age etc). Therefore, it should be possible to save different configurations, and to swap between these. In addition to selection of data, it must be possible to select the time period and organisation unit to display data for, either as part of the configuration or when generating the visualisation. There must be support for downloading the visualisations.

Description of Final Product

CloseSource HIV Cascade Analysis is a lightweight React application designed for DHIS2, including the possibility to select organisation units and data elements from the DHIS2 API, creating a cascade visualisation with Recharts of how far the data elements are from the established target of the cascade.

It features three different visualisations, as specified in the Requirements section, as well as the possibility to save your chosen data elements as a configuration that you can reuse at a later time.

Version requirements for this project

  • React: v16.0.0 or higher
  • Node.js: v6.11.5 or higher
  • Recharts: v1.0.0 or higher
  • Material UI: v0.19.4 or higher
  • saveSvgAsPng: v1.2.0 or higher


node_modules/ public/ src/ ├── graph/ | ├── ExportButton.js // button for exporting chart to png | ├── graph.css | ├── GraphContainer.js | ├── GraphPicker.js | ├── PercentageBarChart.js // component for chart | ├── RawPercantageBarChart.js // component for chart | └── StackedBarChart.js // component for chart ├── images/ | └── icon-96x96.png ├── api_access_layer.js ├── App.css ├── App.js ├── Drawer.js // component: side menu and navbar ├── index.css ├── index.jss ├── logo.svg ├── Main.js ├── manifest.webapp // to deploy on DHIS2 └── registerServiceWorker.js package-lock.json


We intend to use React because it is the second most used JavaScript frameworks. Furthermore one of the group members had experience with React from before, and the rest of the group wanted to learn React. As it has a fast learning curve and a very active community, getting help will also be straightforward.

We also saw in the lecture that for smaller projects React supposedly is more efficient than for instance Angular 2. In addition React has reuseable components, so if anyone at DHIS2 want to re-use our code for other illnesses or statistics, this can easily be done with React. This way we can also hope to help extend DHIS2 as a platform, by building reusable, sustainable code in a true Open Source fashion.


We chose to use Recharts to provide more functionality for the graphs being made. Recharts were used to create truly Open Source charts, and saveSvgAsPng.js was used to download the charts when created. Material-UI was used for general design and layout of the application.


MIT License

React, Recharts, Material UI and saveSvgAsPng are all under the MIT license, that you can read more about here

Custom License

Node.js is under a custom license for all open software and free software, that you can read more about here

Division of labour

We all want to have a fullstack understanding of the application, so we will divide the working power where it needs be. Even so we have defined the most essential parts of development and divided responsibility for these. In practice this means that for the following tasks, each group member is responsible that their part of the application is up to speed with the rest of the application during development. In this way we ensure that all group members are familiar with the other parts of the application, so we never end up in a situation where one member is unavailable and the development stops. We also ensure that someone is keeping track of the different parts of the application and can communicate if that particular part starts lagging behind.

Group memeber Task
Milad Sharif Data retrieval and manipulation between DHIS2 and application
Duy Johnny Khac Nguyen Graph/Chart development
Edvarda Eriksen UX design and overall application interface

Timeline for Development

This will naturally be subject to change as the development commences.

Week 44 Week 45 Week 46 Week 47 Week 48


  • Finish the first edition of the Wiki Page
  • Set-up Github Repo
  • Get familiar with DHIS2 API
  • Start creating the file architecture of the application


  • React/Redux Course 1. - 3. of November (Edvarda)


  • Finish the application architecture and start developing the application interface.
    • Set up the React environment
    • Understand data retrieval from DHIS2
    • Implement Recharts graph


  • INF5181 Mandatory Assignment hand-in 10th of November (Milad and Duy)


  • Finalize first version of application interface
  • Synchronisation of data retrieval and the graph
  • Integration of graph into application interface


  • INF4130 Mandatory Assignment hand-in 14th of November (Duy and Edvarda)


  • Implement and test functionality for different data and targets in the graph
  • Test the application thoroughly
  • Finalize design


  • Finalize application
  • Test all functionality
  • Prepare for presentation


  • INF5181 Exam 27th of November (Duy and Milad)

Link to project repository

CloseSource: HIV Cascade Analysis