Difference between revisions of "Visulie"

From mn/ifi/inf5750
Jump to: navigation, search
(Timeline)
(Architecture:)
 
(5 intermediate revisions by 2 users not shown)
Line 18: Line 18:
  
 
== Architecture: ==
 
== Architecture: ==
*Chart.js
+
[[File:Brainstorming.jpg|center|thumb|400x400px|Brainstorming session]]
**''Visualizing various charts.''
+
[[File:Mock-up.png|center|thumb|500x500px|Hi-fidelity prototype]]
*Redux
+
[[File:Architecture-detailed.png|center|thumb|600x600px|Detailed architecture overview]]
**''State handling''
+
[[File:Frameworks.png|center|thumb|400x400px|Overview of libraries and frameworks]]
*React
+
[[File:Component-structure.png|center|thumb|500x500px|Structure of components]]
**''Front end framework for handling view''
+
* '''React''' (front-end library for handling view)
 +
 
 +
*'''Chart.js''' (visualizing various charts.)
 +
*'''Semantic UI''' (css library for react with ready-to-use components)
 +
 
 +
*'''DHIS2 API''' (REST API web service)
  
 
== Timeline ==
 
== Timeline ==
Line 30: Line 35:
 
|Week 44
 
|Week 44
 
|Week 45
 
|Week 45
 +
|Week 46
 
|-
 
|-
 
|
 
|
Line 46: Line 52:
 
* Finalize wiki page 
 
* Finalize wiki page 
 
|
 
|
* Visualize data with Chart.js
+
**Visualize data with Chart.js
 +
**Attempt to deploy app
 +
**Divide tasks and build filter-view
 +
|
 +
* Bind fetched data and view with Chart.js
 +
* Figure out about licensing
 
|}
 
|}
  
Line 53: Line 64:
  
 
== Licence ==
 
== Licence ==
[ .. This is currently in discussion. More details coming soon .. ]
+
{| class="wikitable"
 +
!Library/Framework
 +
!License
 +
!Why?
 +
!Implication
 +
|-
 +
|React & "create-react-app" tool
 +
|MIT License
 +
|
 +
* We chose React because 3/4 of the group already had some experience with it and it has a fast learning curve.
 +
* Heavy support amongst the community made it an easy choice in terms of good documentation andfinding answers & solutions (e.g. on Stack Overflow).
 +
|
 +
* Made our project into a more component-based structure, which is the key feature of React.
 +
* Better structure of readability of code since the components dictate the flow and structure of our code
 +
|-
 +
|React Semantic UI
 +
|MIT License
 +
|
 +
* Semantic UI provided ready to use components that could be altered, and tailored to our needs.
 +
* Most of us have prior experience with CSS frameworks/libraries like "Materialize" and "Bootstrap
 +
|
 +
* Semantic UI defines our UI and the "look" and "feel" to our app, in terms of styling choices etc. (i.e. color, font, buttons)
 +
|-
 +
|Chart JS
 +
|MIT License
 +
|
 +
* Very fast and simple chart visualization library
 +
* Easy implementation of simple plotting functionality
 +
|
 +
* All the visualisations in form of charts is done using Chart-JS
 +
* Very simple setup of chart types (e.g. bar-charts) makes the initialisation of the charts fairly simple and integrated well with our code
 +
|-
 +
|DHIS2
 +
|BSD License
 +
|
 +
* Mostly because it's required in this project.
 +
* DHIS API is part of the server-side service that our app makes requests to.
 +
|
 +
* All the data used and visualized is based on responses from the DHIS API and web service
 +
* The nature of DHIS (i.e. being a REST API) is the reason why our communication rely heavily on CRUD operations and interaction
 +
|}
  
== Contribution ==
+
== Contribution: ==
 
*'''Birashanthan Tharmakulasingam''' ''(birashat@student.matnat.uio.no)''
 
*'''Birashanthan Tharmakulasingam''' ''(birashat@student.matnat.uio.no)''
 +
**Front-end and Back-end
 
*'''Sarujanthan Subaschandran''' ''(sarujans@student.matnat.uio.no)''
 
*'''Sarujanthan Subaschandran''' ''(sarujans@student.matnat.uio.no)''
 +
**Front-end
 
*'''Khalil Abuawad''' ''(khalila@student.matnat.uio.no)''
 
*'''Khalil Abuawad''' ''(khalila@student.matnat.uio.no)''
 +
**Front-end and Back-end
 
*'''Kudakwashe Kidwell Chambwe''' ''(kudakwac@student.matnat.uio.no)''
 
*'''Kudakwashe Kidwell Chambwe''' ''(kudakwac@student.matnat.uio.no)''
 +
**Front-end and Back-end

Latest revision as of 14:48, 7 December 2017

Overview and features of the product

What are we building? 

A web application that provides data on stock level logistics, like e.g. how much stock of a particular medicine/vaccine etc available at the start of the month, how much is received, how much is used, how much is is left at the end of the month. 

The assignment is described in detail on here: Stock Level Visualisations

What should the system do? 

  1. Select and visualize various charts with different stock data, in an intuitive manner. 
  2. Configure the stock data, i.e. change the maximum and minimum levels. (All users)
    • Calculate and and visualize the stock left based on avg. stock data
  3. Configure default minimum and maximum threshold. (Administrator)
  4. Produce time-trend stock availability for one organization unit with max and min thresholds. 
    • e.g. for the last 12 month. 
  5. Select different countries and databases 
    • Select indicators for analysis (i.e. for each variable start/end balance)

Architecture: 

Brainstorming session
Hi-fidelity prototype
Detailed architecture overview
Overview of libraries and frameworks
Structure of components
  • React (front-end library for handling view)
  • Chart.js (visualizing various charts.)
  • Semantic UI (css library for react with ready-to-use components)
  • DHIS2 API (REST API web service)

Timeline

Week 43 Week 44 Week 45 Week 46
  • Setup wiki
  • Connect to DHIS
  • Prototype 
  • Bootstrapping the stack
  • Setup front-end client
  • Improve connection to DHIS
  • Finalize wiki page 
    • Visualize data with Chart.js
    • Attempt to deploy app
    • Divide tasks and build filter-view
  • Bind fetched data and view with Chart.js
  • Figure out about licensing

Project Repository

https://github.uio.no/kudakwac/visulie

Licence 

Library/Framework License Why? Implication
React & "create-react-app" tool MIT License
  • We chose React because 3/4 of the group already had some experience with it and it has a fast learning curve.
  • Heavy support amongst the community made it an easy choice in terms of good documentation andfinding answers & solutions (e.g. on Stack Overflow).
  • Made our project into a more component-based structure, which is the key feature of React.
  • Better structure of readability of code since the components dictate the flow and structure of our code
React Semantic UI MIT License
  • Semantic UI provided ready to use components that could be altered, and tailored to our needs.
  • Most of us have prior experience with CSS frameworks/libraries like "Materialize" and "Bootstrap
  • Semantic UI defines our UI and the "look" and "feel" to our app, in terms of styling choices etc. (i.e. color, font, buttons)
Chart JS MIT License
  • Very fast and simple chart visualization library
  • Easy implementation of simple plotting functionality
  • All the visualisations in form of charts is done using Chart-JS
  • Very simple setup of chart types (e.g. bar-charts) makes the initialisation of the charts fairly simple and integrated well with our code
DHIS2 BSD License
  • Mostly because it's required in this project.
  • DHIS API is part of the server-side service that our app makes requests to.
  • All the data used and visualized is based on responses from the DHIS API and web service
  • The nature of DHIS (i.e. being a REST API) is the reason why our communication rely heavily on CRUD operations and interaction

Contribution:

  • Birashanthan Tharmakulasingam (birashat@student.matnat.uio.no)
    • Front-end and Back-end
  • Sarujanthan Subaschandran (sarujans@student.matnat.uio.no)
    • Front-end
  • Khalil Abuawad (khalila@student.matnat.uio.no)
    • Front-end and Back-end
  • Kudakwashe Kidwell Chambwe (kudakwac@student.matnat.uio.no)
    • Front-end and Back-end