Difference between revisions of "IngenRomForFeil"

From mn/ifi/inf5750
Jump to: navigation, search
(Added som parts of requirements)
 
(22 intermediate revisions by 3 users not shown)
Line 7: Line 7:
  
 
== Product descriptions requirements ==
 
== Product descriptions requirements ==
'''Assignment :'''  
+
 
 +
=== '''Assignment''' ===
 
* [[HIV Cascade Analysis]]
 
* [[HIV Cascade Analysis]]
'''Requirements:'''
+
 
 +
=== '''Requirements''' ===
 +
'''Description:'''
  
 
Create an app that provides visualization of a clinical cascade, with the HIV 90-90-90 as the primary example.
 
Create an app that provides visualization of a clinical cascade, with the HIV 90-90-90 as the primary example.
  
Basic functionality:
+
'''Basic functionality:'''
 
* Present visualizations as bar charts from left to right, where each bar is presented as a subset to previous.Needs to be able to be presented in at least three possible ways:
 
* Present visualizations as bar charts from left to right, where each bar is presented as a subset to previous.Needs to be able to be presented in at least three possible ways:
 
** As percentages, where the first bar in the cascade is 100%, and the subsequent bars as expressed as percentages of the previous
 
** 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.
 
** As raw numbers, but showing both the actual number and the gap.
 
** As raw data and percentages (on different axis), i.e. bars with the raw data and a line with the percentage.
 
** As raw data and percentages (on different axis), i.e. bars with the raw data and a line with the percentage.
Specific functionality that is requested:
+
'''Specific functionality that is requested:'''
* Be able to set configurations
 
* test
 
* test
 
*
 
  
 +
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.
 +
* Possible to save different configurations
 +
* Switch between saved configurations
 +
* In addition to data element, there must be possible to define time periods and organization unit to display.
 +
* There must be support for downloading the visualizations.
 
'''Mock-up of the web application:'''
 
'''Mock-up of the web application:'''
 +
 +
Our first mock up on how we pictured the application layout to be. It is inspired by the "Data Visualizer" app from DHISP2.
  
 
[[File:Cascade analysis.jpeg.png|border|706x706px]]
 
[[File:Cascade analysis.jpeg.png|border|706x706px]]
  
A description of the product you are developing, including features/requirements being implemented and mockups/screenshots.  
+
== Architecture ==
 +
 
 +
We have built our application as a single page application, using the angular2 framework. All of the component for handling configuration, data, bar charts and selections are pushed to the same html page, and are displayed accordingly to the basic layout that we have created for the application. From here the services handles all data communication with both users and with DHISP2 through the restful API's Analytics and Data Store.
 +
 
 +
For more information on the general architecture of angular2 look here:
  
== Architecture ==
+
- https://angular.io/guide/architecture
[https://angular.io Angular] and [https://material.angular.io Angular Material]
 
  
'''Technologies and Framework'''
+
=== '''Technologies and Framework''' ===
* Angular2 / 4
+
The biggest choice in this application was to chose the framework Angular 2. It's a popular framework that is well known, and has thoroughly documented features, and is a very good framework for creating web applications. The group members all wanted to get more experience using this framework and we decided conjointly to use Angular 2. 
 +
* Angular 2 / 4
 
** MaterialUI
 
** MaterialUI
Why...
+
** Material Icons
* HTML
+
** Chart.js
* CSS
+
 
Why....
+
* HTML 5
* RESTFUL API DHISP2
+
* CSS 3
 +
 
 +
* DHISP2
 
** Analytics
 
** Analytics
 
** Data Store
 
** Data Store
Why..
+
=== '''Tools''' ===
 
 
'''Tools'''
 
 
* Webstorm
 
* Webstorm
Why
+
IDE for Javascript development
 
* Trello
 
* Trello
https://trello.com/b/xj55ZWho/plans
+
Collaboration tool for projects.  
  
 +
Link to our board: https://trello.com/b/xj55ZWho/plans
 
* Slack
 
* Slack
Why
+
Collaboration tool for projects
  
 
* Github
 
* Github
 +
Development platform for host and review code, manage our project and version control
 +
 +
== Licensing ==
 +
All of our framworks and libraries comes with permisive licenses, and are described further in detail:
 +
 +
'''Angular 2 / 4'''
 +
 +
Licence: MIT
 +
 +
Source: https://github.com/angular/angular/blob/master/LICENSE
 +
 +
'''Material Design'''
 +
 +
Licence: MIT
 +
 +
Source: https://github.com/angular/material2/blob/master/LICENSE
 +
 +
'''Material Icons'''
 +
 +
Licence: Apache Licence 2.0
 +
 +
Source: https://github.com/google/material-design-icons/blob/master/LICENSE
 +
 +
'''Chart.js'''
 +
 +
Licence: MIT
 +
 +
Source: https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
 +
 +
'''Implications of the licence types:'''
 +
 +
The two licence types that are included in the framework and libraries we use are MIT and Apache Licence 2.0.
 +
 +
''<u>MIT:</u>''
 +
 +
A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.
 +
 +
https://opensource.org/licenses/MIT
 +
 +
''<u>Apache Licence 2.0:</u>''
  
https://github.uio.no/IngenRomForFeil/HIVCascade
+
"A permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code."
  
== Licensing ==
+
https://opensource.org/licenses/Apache-2.0
Discuss the implications (if any) on the product you are development from the software licenses of the frameworks and libraries you are using.
 
  
 +
There is no implications by using the libraries that we have used. The only implication is that we cannot re-sell or any of the icons used through material icons since they are under a Apache  2.0 licence.
 
== Division of labour ==
 
== Division of labour ==
Martin :
+
Martin: Design & Documentation
 +
 
 +
Herman: Data handling & Analysis
  
Herman :  
+
Nicolay: FrontEnd
  
Nicolay :
+
Testing: All
 +
 
 +
== Timeline for project ==
 +
Week 42:
 +
 
 +
- Startup
 +
 
 +
- Getting Github and choosing all tools.
 +
 
 +
- Start of developement
 +
 
 +
Week 43: Continue to finalize first prototype and working version
 +
 
 +
Week 44:
 +
 
 +
- Having a working first version in regards to all necessary functionality
 +
 
 +
- Redesign and testing
 +
 
 +
Week 45: Redesign and testing
 +
 
 +
Week 46: Testing and documentation
 +
 
 +
Week 47: Testing,finalizing of project and documentation
  
 
== Link to project repository ==
 
== Link to project repository ==
 +
https://github.uio.no/IngenRomForFeil/HIVCascade
 +
 +
https://github.uio.no/IngenRomForFeil/HIVCascadeDashboard

Latest revision as of 11:11, 6 December 2017

Group members

Herman Krogstad Nerskar (hermankn@ifi.uio.no)

Martin Arentsen Espeland (m.a.espeland@usit.uio.no)

Nicolay David Mohebi (n.d.mohebi@usit.uio.no)

Product descriptions requirements

Assignment

Requirements

Description:

Create an app that provides visualization of a clinical cascade, with the HIV 90-90-90 as the primary example.

Basic functionality:

  • Present visualizations as bar charts from left to right, where each bar is presented as a subset to previous.Needs to be able to be presented in at least three possible 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.
    • As raw data and percentages (on different axis), i.e. bars with the raw data and a line with the percentage.

Specific functionality that is requested:

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.
  • Possible to save different configurations
  • Switch between saved configurations
  • In addition to data element, there must be possible to define time periods and organization unit to display.
  • There must be support for downloading the visualizations.

Mock-up of the web application:

Our first mock up on how we pictured the application layout to be. It is inspired by the "Data Visualizer" app from DHISP2.

Cascade analysis.jpeg.png

Architecture

We have built our application as a single page application, using the angular2 framework. All of the component for handling configuration, data, bar charts and selections are pushed to the same html page, and are displayed accordingly to the basic layout that we have created for the application. From here the services handles all data communication with both users and with DHISP2 through the restful API's Analytics and Data Store.

For more information on the general architecture of angular2 look here:

- https://angular.io/guide/architecture

Technologies and Framework

The biggest choice in this application was to chose the framework Angular 2. It's a popular framework that is well known, and has thoroughly documented features, and is a very good framework for creating web applications. The group members all wanted to get more experience using this framework and we decided conjointly to use Angular 2.

  • Angular 2 / 4
    • MaterialUI
    • Material Icons
    • Chart.js
  • HTML 5
  • CSS 3
  • DHISP2
    • Analytics
    • Data Store

Tools

  • Webstorm

IDE for Javascript development

  • Trello

Collaboration tool for projects.

Link to our board: https://trello.com/b/xj55ZWho/plans

  • Slack

Collaboration tool for projects

  • Github

Development platform for host and review code, manage our project and version control

Licensing

All of our framworks and libraries comes with permisive licenses, and are described further in detail:

Angular 2 / 4

Licence: MIT

Source: https://github.com/angular/angular/blob/master/LICENSE

Material Design

Licence: MIT

Source: https://github.com/angular/material2/blob/master/LICENSE

Material Icons

Licence: Apache Licence 2.0

Source: https://github.com/google/material-design-icons/blob/master/LICENSE

Chart.js

Licence: MIT

Source: https://github.com/chartjs/Chart.js/blob/master/LICENSE.md

Implications of the licence types:

The two licence types that are included in the framework and libraries we use are MIT and Apache Licence 2.0.

MIT:

A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

https://opensource.org/licenses/MIT

Apache Licence 2.0:

"A permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code."

https://opensource.org/licenses/Apache-2.0

There is no implications by using the libraries that we have used. The only implication is that we cannot re-sell or any of the icons used through material icons since they are under a Apache 2.0 licence.

Division of labour

Martin: Design & Documentation

Herman: Data handling & Analysis

Nicolay: FrontEnd

Testing: All

Timeline for project

Week 42:

- Startup

- Getting Github and choosing all tools.

- Start of developement

Week 43: Continue to finalize first prototype and working version

Week 44:

- Having a working first version in regards to all necessary functionality

- Redesign and testing

Week 45: Redesign and testing

Week 46: Testing and documentation

Week 47: Testing,finalizing of project and documentation

Link to project repository

https://github.uio.no/IngenRomForFeil/HIVCascade

https://github.uio.no/IngenRomForFeil/HIVCascadeDashboard