From mn/ifi/inf5750
Revision as of 20:51, 5 December 2017 by (talk | contribs) (Architecture)

Jump to: navigation, search

Team members

  • Mathias Stang (mjstang)
  • Patryk Kucmann (patrykk)
  • Guro Møller Ødegård (guromod)
  • Pavel Shramau (pavelsh)

Product descriptions requirements

We are doing the Stock Level Visualisations assignment.

Our app should let the user enter two different modes:

  • Estimated months of stock left
    • Let user select one or more organisation from any organisation level (multi-select)
    • Let user select which stock to show from a pre-defined list of admin-defined configurations
    • Let user override which indicators/data elements to use for stock levels and monthly usage, and min/max thresholds of what is an acceptable number of months
    • Show graph based on the aforementioned options
    • Let user save current graph to a dashboard widget
  • Time trend for a single organisation unit
    • Let user select one organisation from any organisation level (no multi-select)
    • Let user select which stock to use from a pre-defined list of admin-defined configurations
    • Let user select how many months to show the time trend for
    • Let user override any admin-defined data in the same way as the Estimation feature (min/max thresholds should apply to min/max acceptable stock levels, not months)
    • Show graph based on the aforementioned options
    • Let user save current graph to a dashboard widget

In addition, there should be an admin configuration page that lets admins add, edit and remove configurations. A valid configuration should contain:

  • Name (shown to the user where the users selects a configuration)
  • Set one data element/indicator used for stock levels and one for usage. Assuming that if multiple data elements are combined, this can be done outside the app using indicators
  • Set min/max thresholds for number of months of left (for the Estimation feature) and min/max thresholds for stock levels (for time trend feature)




We chose React as our main framework, as it's a widely used, well documented framework, and one of the team members had some previous experience with it. We also considered Angular.js, but it seemed like having a steeper learning curve and fewer third party components, and Vue.js, which is a less mature framework with fewer third party libraries (which turned out to be important for us). In retrospect, it would have made sense to use Redux or Flux, as there's a lot of data stored in a top-level component being passed down to child component. However, we decided against it as we already had our hands full learning React's state management system, and using Redux/Flux would add another layer of complexity and increase development time.

We decided to use Semantic-UI. It seemed to have all main components we were looking for, and seemed to have all the UI components we needed to build our app. It also has good support for response layouts, which was a plus.

For visualising data, we decided to use HighCharts because it is already used in DHIS2's Visualizer chart plug-in, so we assume that DHIS2 has a valid license for it. It also has a much simpler API than a library such as D3.js, and is more powerful than similar open source libraries such as Chart.js.

We also use React-virtualized-select for a "multi-select dropdown" which handles large datasets in a much better way than Semantic-UI's dropdown component. We use React Toastify for displaying transient notifications to the user.


  • November, 1st - wiki page, understanding of DHIS2 API needed for the application, frameworks and tools to be used are defined.
  • November, 7th - general look and design of the application, functional and non-functional requirements specified, start of implementation.
  • November, 26th - end of implementation, start of testing and debugging.
  • December, 1st - project done, start of presentation preparation.
  • December, 4th - presentation made.

Group meetings, problems discussions and temporary result evaluations every Tuesday and Friday.


In our project we are using React as the only JS-framework to develop the application. React was using BSD+patents licence before, but from version 16 it is licensed under permissive MIT licence. This grants us the permission to use React in any way with only one condition, which is to include the copyright notice. Since we are interested in developing a fully open source application with source code published as it is on GitHub and the only framework we are using is React, Stockalyzr will be released by MIT licence too.

DHIS2 is using BSD licence, but we are using only Open API's from DHIS2, so it does not come under consideration.

Division of labour

Each team member initially focused on different parts of planning and development, but after a while we were all coding. We use a Kanban-like development process where we have organised everything we need to do into discrete tasks and use Trello to show tasks that need to be done, tasks in progress, tasks which need reviews and tasks that are done. Each team member codes their currently chosen tasks on a separate branch of our GitHub repo, and when it's ready, another team member reviews it and chooses whether to merge it into the master branch.

The initial division of labour was as follow:

  • Mathias: Set up the repo with the main libraries, ESLint config etc. so that the rest of the team has a good starting point
  • Pavel: Figure out which parts of the DHIS2 API we needed, and document everything for the rest of the team
  • Guro:
  • Patryk:


GitHub repository