Difference between revisions of "Stock Sharks"

From mn/ifi/inf5750
Jump to: navigation, search
(React)
(Architecture)
 
(24 intermediate revisions by 2 users not shown)
Line 5: Line 5:
  
 
== Product descriptions requirements ==
 
== Product descriptions requirements ==
* A description of the product you are developing, including features/requirements being implemented and mockups/screenshots. Also specify which assignment you have chosen.
+
 
* We have choosen the Stock project TODO: Write more here and look at what features we need. Front-end, back-end, visualization++?
+
=== Product description ===
 +
This assignment involves creating an app for DHIS2 that produces visualisations for logistics data, including the necessary calculations for producing these, including:
 +
* For a selection of organisation units, produce a visualisation of the estimated months of stock left. There is usually a policy to keep the stock between a minimum and maximum levels. These should be configurable in the app, and organisation units above/below these levels should be highlighted.
 +
* For one organisation unit, produce a visualisation of the time-trend in stock availability (e.g. for the last 12 months), with minimum and maximum thresholds for what is adequate levels of stock.
 +
The estimated months of stock left is based on the average amount used in recent periods, compared with the stock available at the end of the period in question. For example, if 350 doses of BCG has been used on average Jan-March and 600 doses is available at the end of March, the current stock will last an estimated 1,7 months.
 +
 
 +
It should be possible for an administrator to set the default minimum and maximum thresholds (in months of stock availability) to be used, and for users to override this. Furthermore, because this app should be usable in different settings/ countries and thus different DHIS2 databases, there must be an interface for selecting what data elements/ indicators to use for analysis, i.e.. for each variable the stock used, ending/ starting balance etc (as needed).
 +
 
 +
=== Requirements ===
 +
* Retive stock data from API
 +
* Retive organistaion data from API
 +
* Save threshold values to API
 +
* Create design draft
 +
* Implement design draft
 +
* Create react components
 +
* Manage data flow in between components
 +
* Create D3 graph
 +
 
 +
=== Design ===
 +
[[File:View 1.png|thumb|View one|none]]
 +
 
 +
[[File:View 2.png|thumb|View two - Administer available stock and organisation units and threshold values|none]]
 +
 
 +
[[File:View 3.png|none|thumb|View three - select one organizaion unit and several stocks, to see the available stock trends]]
 +
[[File:View 4.png|thumb|View four - Estimated stock level at end of the month|none]]
  
 
== Architecture ==
 
== Architecture ==
* 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.
+
[[File:Architecture 1.png|thumb]]
* We are going to use React to the front-end part and NodeJS to the back-end part. We're planning to use the visualization tool D3. We have choosen these technologies since we are a little familiar with React and NodeJS. D3 seems like a good tool for visualization.  
 
  
 +
=== DHIS2 API ===
 +
* DHIS2 API gives access to the data the application uses
 
=== React ===
 
=== React ===
We have chosen React, because we are a little familiar with the framework from before.  
+
* We have chosen React, because we are a little familiar with the framework from before.  
  
 
=== Redux ===
 
=== Redux ===
Not sure if we need this yet.
+
* Used Redux to handle data flow in the application, chose Redux because of some experience with it from before.
  
 
=== Material-UI ===
 
=== Material-UI ===
We chose this to help us with the styling of our project. Material-UI is easy to get started with and has a modern design, compared to other frameworks such as bootstrap.  
+
* We chose this to help us with the styling of our project. Material-UI is easy to get started with and has a modern design, compared to other frameworks such as bootstrap. Created for React
  
 
=== D3.js ===
 
=== D3.js ===
D3, a JavaScript library for visualising data.
+
* D3, a JavaScript library for visualizing data, it seems like a good tool for visualization
 
 
=== Node.js ===
 
Not sure if we need this yet.
 
  
 
== Licensing ==
 
== Licensing ==
 
* Discuss the implications (if any) on the product you are development from the software licenses of the frameworks and libraries you are using.
 
* Discuss the implications (if any) on the product you are development from the software licenses of the frameworks and libraries you are using.
* TODO: Check this up!
 
  
 +
=== Our licence ===
 +
* MIT license
 +
 +
=== '''DHIS API''' ===
 +
* BSD licence
 +
 +
=== Material-UI ===
 +
* MIT license
 +
 +
=== '''React''' ===
 +
* MIT Licence
 +
 +
==== Redux ====
 +
* MIT License
 +
 +
=== '''D3.js''' ===
 +
* BSD 3-clause "New" or "Revised" License
 
== Division of labour ==
 
== Division of labour ==
* Describe how tasks are divided within the group.
+
 
* Malin: Visualization and design
+
===== Malin =====
* Mari : Back-end, integrate DHIS API, handle API data
+
Visualization using D3.js and first-design of page.
* Christina : Front-end,  
+
 
 +
===== Mari =====
 +
Integrate DHIS API and handle API data
 +
 
 +
===== Christina =====
 +
Set up repository and project structure, front-end flow with redux (send the data to the different components), create all react components, save data to the DataStore in API
  
 
== Time schedule ==
 
== Time schedule ==
 
{| class="wikitable"
 
{| class="wikitable"
 +
|-
 
!Week 43
 
!Week 43
 +
|Get data from the API
 +
 +
Design for front-end development
 +
 +
Communicate with D3
 +
 +
Wiki page
 +
|-
 
!Week 44
 
!Week 44
 +
|Make visualisation of an organisational unit for one year.
 +
|-
 
!Week 45
 
!Week 45
 +
|Main components done
 +
|-
 
!Week 46
 
!Week 46
|-
+
|Bug fixing and final touches
| - Get data from the API
 
- Design for front-end development
 
 
 
- Communicate with D3
 
 
 
- Wiki page
 
| - Make visualization of an organizational unit for one year.
 
| - Main components done
 
| - Bug fixing
 
 
|}
 
|}
  
 
== Project repository ==
 
== Project repository ==
* GitHub-repository: https://github.uio.no/stocksharks/stockvis
+
GitHub-repository: https://github.uio.no/stocksharks/stockvis

Latest revision as of 13:20, 6 December 2017

Group members

  • Malin Aandahl (mwaandah)
  • Mari Grønberg (margronb)
  • Christina H. Andresen (chrhan)

Product descriptions requirements

Product description

This assignment involves creating an app for DHIS2 that produces visualisations for logistics data, including the necessary calculations for producing these, including:

  • For a selection of organisation units, produce a visualisation of the estimated months of stock left. There is usually a policy to keep the stock between a minimum and maximum levels. These should be configurable in the app, and organisation units above/below these levels should be highlighted.
  • For one organisation unit, produce a visualisation of the time-trend in stock availability (e.g. for the last 12 months), with minimum and maximum thresholds for what is adequate levels of stock.

The estimated months of stock left is based on the average amount used in recent periods, compared with the stock available at the end of the period in question. For example, if 350 doses of BCG has been used on average Jan-March and 600 doses is available at the end of March, the current stock will last an estimated 1,7 months.

It should be possible for an administrator to set the default minimum and maximum thresholds (in months of stock availability) to be used, and for users to override this. Furthermore, because this app should be usable in different settings/ countries and thus different DHIS2 databases, there must be an interface for selecting what data elements/ indicators to use for analysis, i.e.. for each variable the stock used, ending/ starting balance etc (as needed).

Requirements

  • Retive stock data from API
  • Retive organistaion data from API
  • Save threshold values to API
  • Create design draft
  • Implement design draft
  • Create react components
  • Manage data flow in between components
  • Create D3 graph

Design

View one
View two - Administer available stock and organisation units and threshold values
View three - select one organizaion unit and several stocks, to see the available stock trends
View four - Estimated stock level at end of the month

Architecture

Architecture 1.png

DHIS2 API

  • DHIS2 API gives access to the data the application uses

React

  • We have chosen React, because we are a little familiar with the framework from before.

Redux

  • Used Redux to handle data flow in the application, chose Redux because of some experience with it from before.

Material-UI

  • We chose this to help us with the styling of our project. Material-UI is easy to get started with and has a modern design, compared to other frameworks such as bootstrap. Created for React

D3.js

  • D3, a JavaScript library for visualizing data, it seems like a good tool for visualization

Licensing

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

Our licence

  • MIT license

DHIS API

  • BSD licence

Material-UI

  • MIT license

React

  • MIT Licence

Redux

  • MIT License

D3.js

  • BSD 3-clause "New" or "Revised" License

Division of labour

Malin

Visualization using D3.js and first-design of page.

Mari

Integrate DHIS API and handle API data

Christina

Set up repository and project structure, front-end flow with redux (send the data to the different components), create all react components, save data to the DataStore in API

Time schedule

Week 43 Get data from the API

Design for front-end development

Communicate with D3

Wiki page

Week 44 Make visualisation of an organisational unit for one year.
Week 45 Main components done
Week 46 Bug fixing and final touches

Project repository

GitHub-repository: https://github.uio.no/stocksharks/stockvis