Difference between revisions of "TeamHope"

From mn/ifi/inf5750
Jump to: navigation, search
(Protype: Typo fix)
(Division of labour: Added division of labour part for Mikkel)
 
(24 intermediate revisions by 4 users not shown)
Line 10: Line 10:
 
[[Stock Level Visualisations]]
 
[[Stock Level Visualisations]]
 
==Requirements==
 
==Requirements==
===='''Description'''====
+
===Description===
 
The application shall have two modes:
 
The application shall have two modes:
  
Line 16: Line 16:
  
 
- Time trend, showing time trend of stock for a single organization unit.
 
- Time trend, showing time trend of stock for a single organization unit.
===='''Functional requirements'''====
+
===Functional requirements===
 
The user can choose between the two modes described above.
 
The user can choose between the two modes described above.
  
Line 50: Line 50:
  
 
- Default min/max boundaries are associated with a specific organization unit and stock type.
 
- Default min/max boundaries are associated with a specific organization unit and stock type.
===='''Mockups'''====
+
===Mockups===
[[File:Mockup estimates admin view.jpg|thumb]]
+
<gallery>
 +
Estimates user view.jpg|Mocup of user view for estimates mode
 +
Mockup estimates admin view.jpg|Mockup of admin view for estimates mode
 +
Time trend user view.jpg|Mockup of user view for time trend mode
 +
Time trend admin view.jpg|Mockup of admin view for time trend mode
 +
</gallery>
 +
 
 +
=== Changes from the initial requirements: ===
 +
- Administrator has two min/max inputs, one for each mode.
 +
 
 +
- The administrator can create and save queries.
 +
 
 +
- The user can pick queries created by an administrator to generate plots quickly.
 +
 
 +
- The query options used by the administrator is also accessible to the user, but hidden behind a "Show advanced options" button.
 +
 
 +
- "Stock usage" and "Stock availability" are selected separately through separate dropdown menus. "Stock usage" is not used for the "timetrend"-mode.
 +
 
 +
- The administrator can delete old query presets.
 +
 
 +
- The administrator can see a preview of the results of their query before saving it.
 +
 
 +
- The "estimates"-mode has a "from"-date. The average use is calculated based on the period from the chosen date up to the current date.
 +
 
 +
- Show a tutorial for how to use the app when it is started.
  
 
==Architecture==
 
==Architecture==
We have chosen React, because of the view focused framework. We also feel that the group as a whole has more experience with React.
+
We have chosen React JS, because of the view focused framework. We also feel that the group as a whole has more experience with React.
  
- Highcharts
+
React is a JS-library made for easy creation of user interfaces. The code is written in JSX and is then transpiled into HTML- and javascript-code. The building blocks of React are called components, and it uses Virtual DOM to detect run-time changes in these components, and re-render accordingly.<ref>Nordli, Lars Henrik and Orlova, Ekaterina. 2017, ''Introduction to front-end development'', lecture notes, INF5750: Open Source Development, UiO.</ref>
==='''Licensing'''===
 
To do
 
  
=== '''Timeline''' ===
+
We used Create-React-App to set up the initial app and build our project.
 +
[[File:Architecture2.jpg|left|thumb|Architecture]]
 +
 
 +
We have used basic CSS functionality, but have not used any extra front end frameworks as we felt it would unnecessarily complicate the code.
 +
=== Additional packages: ===
 +
 
 +
==== Highcharts ====
 +
Highcharts is a dynamic plotting tool. We used it to create the plots for our project since we found it easy to use and it quickly gave nice looking plots.
 +
 
 +
==== React-Select ====
 +
We used React-Select because we needed a dropdown-menu with search function, and the ability to select multiple items.
 +
 
 +
'''Semantic UI'''
 +
 
 +
We used Semantic UI for improving the user interface.
 +
 
 +
==Licensing==
 +
The license for this Project is:
 +
 
 +
Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0)
 +
 
 +
complete license info: <nowiki>https://creativecommons.org/licenses/by-nc/3.0/legalcode</nowiki>
 +
 
 +
We originally used MIT licensing, that the components React-Select, Semantic-UI and React JS had.
 +
 
 +
Sadly, late in the project we discovered that Highcharts is not compatible with any open source licenses [https://shop.highsoft.com/faq#Non-Commercial-0],  therefore we need to use [https://creativecommons.org/licenses/by-nc/3.0/ CC(creative commons) Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0)]. This means our app cannot be used for commercial purposes.
 +
 
 +
The full license information can be found here: https://github.uio.no/TeamHope/project/edit/uitest/dhisapp/LICENSE.MD
 +
 
 +
== Timeline ==
 
{| class="wikitable"
 
{| class="wikitable"
 
!Milestone
 
!Milestone
 
!Goal
 
!Goal
 
!Date
 
!Date
 +
!Completed
 
!Comment
 
!Comment
 
|-
 
|-
Line 70: Line 122:
 
|Wiki page ready
 
|Wiki page ready
 
|November 1st
 
|November 1st
|
+
|October 27th
 +
|Will be improved more as the project evolves
 
|-
 
|-
 
|2
 
|2
 
|Start of coding
 
|Start of coding
 
|October 31st
 
|October 31st
 +
|October 27th
 
|
 
|
 
|-
 
|-
|2
+
|3
 
|Prototype ready
 
|Prototype ready
 
|November 7th
 
|November 7th
 +
|November 3rd
 
|
 
|
 
|-
 
|-
|3
+
|4
 
|App ready for use
 
|App ready for use
 
|November 20th
 
|November 20th
|
+
|November 20th
 +
|Still missing Dashboard App
 +
|-
 +
|5
 +
|End of coding
 +
|December 5th
 +
|December 4th
 +
|Dashboard app implemented and UI improved
 
|}
 
|}
  
 
== Division of labour ==
 
== Division of labour ==
We divide the labour by component and give the tasks for each member between the meetings. We do this to be flexible and get a fair division of labour.  
+
We divided in some specific tasks, although overall we all worked with React JS, and also with the API to connect with DHIS2. Since this was important for everyone.
 +
 +
Ingvild:
 +
* Mode selector component
 +
* Input min/max (user&admin) component
 +
* UserInput component
 +
* Availability/Used selector
 +
* Validate user input in MenuContainer.
 +
* Implement method getProperties in MenuContainer.
 +
* Create "try it out" button for admin.
  
=== Components ===
+
Kristian
- Select mode (ModeSelector)
+
* Plotting
 +
* Calculations and data manipulation prior to plotting
 +
* API calls related to datastores and user authority
 +
* Admin panel logic (Displaying nothing if user has insufficient authority)
 +
* Dashboard App (Peer programmed with Mikkel)
 +
* Building and uploading to Dhis (fixing manifiests, icons, etc.)
 +
Carl
 +
* Organization selector component
 +
* Stock selector (and fetch from database)
 +
* API-calls to analytics
 +
* getPredifined method from namespace, Initial business logic for data for plotting
 +
* Semantic UI Implementation. Design
 +
* Architecture document
 +
* backend.fetchData
 +
Mikkel
 +
* Period selector
 +
* Delete preset component in admin panel
 +
* Frontend layout
 +
* Gather adminpanel input
 +
* Validate input in admin panel
 +
* Dashboard App (Peer programmed with Kristian)
  
'''Estimates (Estimates):'''
+
See our Github page for more information about each task. 
  
Sidebar:
+
== Repository ==
 +
https://github.uio.no/TeamHope/project
  
- Search for organization units (MultipleOrgSearch)
+
== Working App ==
  
- Search field (OrgSearch)
+
https://inf5750.dhis2.org/demo/api/apps/PlotStocker/index.html
  
- Selected orgs list (OrgList)
+
== References ==
 
+
<references />
- Input min/max boundary (UserBoundaryInput)
 
 
 
- Min (InputNumber)
 
 
 
- Max (InputNumber)
 
 
 
- Select stock (StockSelector)
 
 
 
- Showbutton (Showbutton)
 
 
 
- Admin box (AdminBox)
 
 
 
- Input min/max boundary (AdminBoundaryInput)
 
 
 
- OK button (OK)
 
 
 
Visualization:
 
 
 
- Diagram (EstimateDiagram)
 
 
 
'''Time trend (TimeTrend):'''
 
 
 
Sidebar:
 
 
 
- Search for organization unit (SingleOrgSearch)
 
 
 
- Search field (OrgSearch)
 
 
 
- Input min/max boundary (UserBoundaryInput)
 
 
 
- Min (InputNumber)
 
 
 
- Max (InputNumber)
 
 
 
- Select stock (StockSelector)
 
 
 
- Select period (PeriodSelector)
 
 
 
- From (SelectDate)
 
 
 
- To (SelectDate)
 
 
 
- Showbutton (Showbutton)
 
 
 
- Admin box (AdminBox)
 
 
 
- Input min/max boundary (AdminBoundaryInput)
 
 
 
- OK button (OK)
 
 
 
Visualization:
 
 
 
- Time trend (TimeTrendGraph)
 
 
 
'''Background:'''
 
 
 
- Stock level retriever (StockFetcher)
 
 
 
- Estimate calculator (EstimateCalculator)
 
 
 
=== Division: ===
 
 
 
==== Prototype ====
 
'''Time trend:'''
 
 
 
Ingvild:
 
 
 
Mode selector
 
 
 
Input min/max (user&admin)
 
 
 
Kristian:
 
 
 
Visualizer
 
 
 
Carl:
 
 
 
Search org unit
 
 
 
Mikkel:
 
 
 
Select to/from
 
 
 
Stock selector
 
 
 
==Repository==
 
https://github.uio.no/TeamHope/project
 

Latest revision as of 21:59, 5 December 2017

Group members

Mikkel Bakken

Ingvild Larsen

Carl Petter Boehlke

Kristian Pedersen

Assignment

Stock Level Visualisations

Requirements

Description

The application shall have two modes:

- Estimates, showing estimated months left of a selected stock, for chosen organization units.

- Time trend, showing time trend of stock for a single organization unit.

Functional requirements

The user can choose between the two modes described above.

Both:

- Default min/max boundaries can be set by an administrator (administrator view in mockup).

- The user can specify their own desired min/max boundaries as well (user view in mockups).

- If the administrator has not set a default min/max boundary, there is no default min/max boundary in the plot.

For "Estimates":

- The user can specify one stock type, and multiple organization units.

- Show current estimates as columns in a column diagram.

- Columns outside the specified min/max boundaries will be highlighted.

- Estimates are calculated based on average consumption over the last 3 months, and current stock levels ((current stock) / (average consumption) = estimated months left).

- Default min/max boundaries are shared by all organization units.

For "Time trend":

- The user can select an organization unit, and a stock type.

- Show time trend(months) of available stock as a graph.

- The min/max boundaries are shown as lines in the graph.

- The user can choose the time period they wish to see the time trend for (by default the last 6 months).

- Default min/max boundaries are associated with a specific organization unit and stock type.

Mockups

Changes from the initial requirements:

- Administrator has two min/max inputs, one for each mode.

- The administrator can create and save queries.

- The user can pick queries created by an administrator to generate plots quickly.

- The query options used by the administrator is also accessible to the user, but hidden behind a "Show advanced options" button.

- "Stock usage" and "Stock availability" are selected separately through separate dropdown menus. "Stock usage" is not used for the "timetrend"-mode.

- The administrator can delete old query presets.

- The administrator can see a preview of the results of their query before saving it.

- The "estimates"-mode has a "from"-date. The average use is calculated based on the period from the chosen date up to the current date.

- Show a tutorial for how to use the app when it is started.

Architecture

We have chosen React JS, because of the view focused framework. We also feel that the group as a whole has more experience with React.

React is a JS-library made for easy creation of user interfaces. The code is written in JSX and is then transpiled into HTML- and javascript-code. The building blocks of React are called components, and it uses Virtual DOM to detect run-time changes in these components, and re-render accordingly.[1]

We used Create-React-App to set up the initial app and build our project.

Architecture

We have used basic CSS functionality, but have not used any extra front end frameworks as we felt it would unnecessarily complicate the code.

Additional packages:

Highcharts

Highcharts is a dynamic plotting tool. We used it to create the plots for our project since we found it easy to use and it quickly gave nice looking plots.

React-Select

We used React-Select because we needed a dropdown-menu with search function, and the ability to select multiple items.

Semantic UI

We used Semantic UI for improving the user interface.

Licensing

The license for this Project is:

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0)

complete license info: https://creativecommons.org/licenses/by-nc/3.0/legalcode

We originally used MIT licensing, that the components React-Select, Semantic-UI and React JS had.

Sadly, late in the project we discovered that Highcharts is not compatible with any open source licenses [1], therefore we need to use CC(creative commons) Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0). This means our app cannot be used for commercial purposes.

The full license information can be found here: https://github.uio.no/TeamHope/project/edit/uitest/dhisapp/LICENSE.MD

Timeline

Milestone Goal Date Completed Comment
1 Wiki page ready November 1st October 27th Will be improved more as the project evolves
2 Start of coding October 31st October 27th
3 Prototype ready November 7th November 3rd
4 App ready for use November 20th November 20th Still missing Dashboard App
5 End of coding December 5th December 4th Dashboard app implemented and UI improved

Division of labour

We divided in some specific tasks, although overall we all worked with React JS, and also with the API to connect with DHIS2. Since this was important for everyone.

Ingvild:

  • Mode selector component
  • Input min/max (user&admin) component
  • UserInput component
  • Availability/Used selector
  • Validate user input in MenuContainer.
  • Implement method getProperties in MenuContainer.
  • Create "try it out" button for admin.

Kristian

  • Plotting
  • Calculations and data manipulation prior to plotting
  • API calls related to datastores and user authority
  • Admin panel logic (Displaying nothing if user has insufficient authority)
  • Dashboard App (Peer programmed with Mikkel)
  • Building and uploading to Dhis (fixing manifiests, icons, etc.)

Carl

  • Organization selector component
  • Stock selector (and fetch from database)
  • API-calls to analytics
  • getPredifined method from namespace, Initial business logic for data for plotting
  • Semantic UI Implementation. Design
  • Architecture document
  • backend.fetchData

Mikkel

  • Period selector
  • Delete preset component in admin panel
  • Frontend layout
  • Gather adminpanel input
  • Validate input in admin panel
  • Dashboard App (Peer programmed with Kristian)

See our Github page for more information about each task.

Repository

https://github.uio.no/TeamHope/project

Working App

https://inf5750.dhis2.org/demo/api/apps/PlotStocker/index.html

References

  1. Nordli, Lars Henrik and Orlova, Ekaterina. 2017, Introduction to front-end development, lecture notes, INF5750: Open Source Development, UiO.