Difference between revisions of "Visulie"
From mn/ifi/inf5750
(→Timeline) (Tag: Visual edit) |
(→Architecture:) (Tag: Visual edit) |
||
(4 intermediate revisions by 2 users not shown) | |||
Line 18: | Line 18: | ||
== Architecture: == | == Architecture: == | ||
− | *Chart.js | + | [[File:Brainstorming.jpg|center|thumb|400x400px|Brainstorming session]] |
− | + | [[File:Mock-up.png|center|thumb|500x500px|Hi-fidelity prototype]] | |
− | + | [[File:Architecture-detailed.png|center|thumb|600x600px|Detailed architecture overview]] | |
− | + | [[File:Frameworks.png|center|thumb|400x400px|Overview of libraries and frameworks]] | |
− | + | [[File:Component-structure.png|center|thumb|500x500px|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 == | == Timeline == | ||
Line 59: | Line 64: | ||
== Licence == | == Licence == | ||
− | + | {| 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 15:48, 7 December 2017
Contents
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?
- Select and visualize various charts with different stock data, in an intuitive manner.
- 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
- Configure default minimum and maximum threshold. (Administrator)
- Produce time-trend stock availability for one organization unit with max and min thresholds.
- e.g. for the last 12 month.
- Select different countries and databases
- Select indicators for analysis (i.e. for each variable start/end balance)
Architecture:
- 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 |
|
|
|
|
Project Repository
https://github.uio.no/kudakwac/visulie
Licence
Library/Framework | License | Why? | Implication |
---|---|---|---|
React & "create-react-app" tool | MIT License |
|
|
React Semantic UI | MIT License |
|
|
Chart JS | MIT License |
|
|
DHIS2 | BSD License |
|
|
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