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

Group Members

  • Jonas Henie (jonasbhe)
  • Kristoffer Mjelva (kristomj)
  • Øyvind Egede-Nissen (oyvinege)

Project overview

Refactor/Expand Comparative/Trend Analysis App with charts and maps

The purpose of the Comparative/Trend app is to enable visual comparisons of charts and maps by placing them side-by-side or in a grid. For maps, the purpose is to show the same basic map for different time periods, so that changes over time become visible. An example could be a map showing measles incidence by district, week by week. For charts, the purpose is to show the same chart from multiple organisation units. An example could be a line chart showing the trend in a disease over time, district by district. The maps and charts could either be based on either existing chart or map favourites, or made ad-hoc based on selecting an indicator.

Our interpretation

To complete this task, we have decided to first analyze the base app that was provided to us. Based on this analysis we decided to completely re-implement the app using React, ES6, and other modern web programming tools. We aim to create a new app based on the functionality of the existing one. This new app will have a UI design more in line with the existing DHIS design language, and will aim to be a more intuitive user experience.

Our goals

  • Improve the design
  • Improve the user experience
  • Improve the code structure and readability
  • Improve performance
  • Add a map comparison feature

Refreshed UI mockup

Initial mock up of the gui

Summary of Requirements

  • React
  • ES6
  • Comparison through charts, maps, tables


Project milestones

  • October 28 - [complete]:
    • Document features and architecture
    • Show understanding of project task
  • December 1st - [pending]:
    • Delivery

App development milestones

  • Create git-repository - [complete]
  • Create wiki page - [complete]
  • Analyze base application - [complete]
  • Create basic API fetching functions - [complete]
  • Setup dev version of app using npm - [complete]
  • Implement barebones react UI - [complete]
  • Build the UI elements - [complete]
    • Dropdownlists - [complete]
    • Checkboxes - [complete]
    • Charts - [complete]
    • Maps - [complete]
  • Create API fetching functions for selected data - [complete]
  • Calculate fetched data - [complete]
  • Implement table and charts functionality - [complete]
  • Implement maps functionality - [complete]
  • Manage app design and user experience - [complete]
  • Build production version to upload to 'App Management' in DHIS - [complete]

Time Schedule

Group meetings on Wednesdays at 10:15. Beyond that we communicate and set up something that fits everyone's schedule.

Task Distribution

Tasks are distributed as they appear.

Progression screenshots and screen flows

First working implementation of drop down lists
Drop down list progress. With selections and check boxes.
User interface progression shot
Updated UI with charts and graphs
Refreshed layout, working grid layout with data
Working favorite charts, tables and maps

Finished app

Finished app with a selection of the data type display forms
Help text page
Finished app with a selection of favorites displayed

Documented learning during project

We have gained a deeper insight in JavaScript and React, and how to create web-apps and web-pages.

None of us had any previous experience with the DHIS2 platform, so this project gave us experience in using and developing web-apps for the system.

Suggested improvements to API

During the implementation period, we discovered a few aspects where the api or plugins can be improved. In our app, we make use of three of DHIS's plugins. The table, chart and map plugins.

  • The chart plugin does not appear to support custom heights, which meant we were not able to make use of the whole page when showing just one chart.
  • We had troubles with getting the map plugin to load more than one map. Trying to load more than one caused the plugin to crash. It seems this is an issue with the plugin, but we are not 100% sure. We came up with a work around, which is to reload the plugin for each map. This works, but is not optimal.
  • The documentation for some plugins is difficult to use, especially the map plugin.
  • The documentation of the api is a bit outdated. For example:
    • We discovered that the time period formats is a bit inconsistent. For instance, "2015Oct" is supported, "2015Apr" is not. "2015April" is supported, "2015October" is not.
    • Some time period formats exist but are not listed in the documentation.

Repository and App download

Github repository