From mn/ifi/inf5750
Jump to: navigation, search


  • Andreas Finn Hansen (andrefh)
  • Kristoffer Solheim (krisaso)
  • Lukas Vannini (lukasva)
  • Ole Marius Haanæs (omhaanae)


Stock Level Visualisations

Product overview

The application will include three different features:

  • Admin control: An user with admin privieges is able to freely form StockGroups using a selection of dataElements, and/or Indicators. The stockGroup will contain a reference to a dataset containging starting balance, and a set of references to contributors to the monthly depletion of stock. For instance units consumed, units discarded, units lost and more. Within the admin control menu is also the option to set min and max values, referring to the minimum and maximum number of months of stock usage the admin wish to retain each month. Lastly, the admin user is able to name the stockGroup.
  • Stock visualizer: We display Stock visualizer as a bar graph, where each bar is an organizational unit's months of stock left. This number is calculated by dividing the current level of stock left with the average use of that stock. The user is able so select among the admin-created stockGroups and combine it with one or more organisational units to display estimated months of stock left given the prior 12 months of usage data. The user will be notified if the time left is above or below the set min or max values, set by the admin.
  • Time trend view: The user is able to select one of the admin-created StockGroups, and one organisational unit. The Time trend view then displays a line graph with the fluctuating availability of a stock, as well as an average of this availability. The data is analyzed using linear regression analysis and projected into the next six months. The chart will also display the chosen levels of minimum and maximum values for that stockGroup.
Time trend
Time trend
Stock left
Stock left
Admin menu
Admin menu



Describe the technical architecture of the product, including what frameworks you will be using (e.g. react, angular, others) and /why/ you have chosen these.

We chose Angular as one of our group members had experience with the framework. Angular Material was chosen as it is a natural combination with Angular, as well as it is standard for Dhis2. ng2-charts was chosen, as it is one of the few chart libraries for Angular. Further, Angular CLI is almost a must for any Angular project. It speeds up the creation of new components as well as other features. Flex-Layout was chosen as our one group member had positive experience with how it styles the page content. Material design icons are a good combination with Material. Sass has little downsides compared to css, so we included it as default in our project.

App Structure

Main frameworks


Angular Material

ng2-charts (based on Chart.js)

Other frameworks

Angular CLI

Angular Flex-Layout

Material Design Icons



Rough timeline.png

Division of labor


  • Kristoffer: get a basic visual framework up and running.
  • Andreas: start working on finding the API calls for the parameters of the stock visualizer view.
  • Ole: start working on finding the API calls necessary in the time trend view.
  • Lukas: start working on creating a table in the API for registering min and max values for a given OU/SKU pair.


  • Kristoffer: Services, Angular interaction, Async issues, /datastore, Medic
  • Andreas: StockGroup, admin menu, some services and styling
  • Lukas: Organisation Units, necessary Org.unit menues for user and admin
  • Ole: Exploration of the API--> Analytics, Time trend, Months left, use of min/max


Discuss the implications (if any) on the product you are development from the software licenses of the frameworks and libraries you are using.

All our frameworks use the liberal MIT license. This means that only credit is needed.

Github repository