Difference between revisions of "CloseSource"
(5 intermediate revisions by the same user not shown) | |||
Line 24: | Line 24: | ||
=== Description of Final Product === | === Description of Final Product === | ||
− | + | CloseSource HIV Cascade Analysis is a lightweight React application designed for DHIS2, including the possibility to select organisation units and data elements from the DHIS2 API, creating a cascade visualisation with Recharts of how far the data elements are from the established target of the cascade. | |
+ | |||
+ | It features three different visualisations, as specified in the Requirements section, as well as the possibility to save your chosen data elements as a configuration that you can reuse at a later time. | ||
+ | ====Version requirements for this project==== | ||
+ | * React: <code>v16.0.0</code> or higher | ||
+ | * Node.js: <code>v6.11.5</code> or higher | ||
+ | * Recharts: <code>v1.0.0</code> or higher | ||
+ | * Material UI: <code>v0.19.4</code> or higher | ||
+ | * saveSvgAsPng: <code>v1.2.0</code> or higher | ||
== Architecture == | == Architecture == | ||
− | + | <code style=display:block;white-space:pre-wrap> | |
+ | node_modules/ | ||
+ | public/ | ||
+ | src/ | ||
+ | ├── graph/ | ||
+ | | ├── ExportButton.js // button for exporting chart to png | ||
+ | | ├── graph.css | ||
+ | | ├── GraphContainer.js | ||
+ | | ├── GraphPicker.js | ||
+ | | ├── PercentageBarChart.js // component for chart | ||
+ | | ├── RawPercantageBarChart.js // component for chart | ||
+ | | └── StackedBarChart.js // component for chart | ||
+ | ├── images/ | ||
+ | | └── icon-96x96.png | ||
+ | ├── api_access_layer.js | ||
+ | ├── App.css | ||
+ | ├── App.js | ||
+ | ├── Drawer.js // component: side menu and navbar | ||
+ | ├── index.css | ||
+ | ├── index.jss | ||
+ | ├── logo.svg | ||
+ | ├── Main.js | ||
+ | ├── manifest.webapp // to deploy on DHIS2 | ||
+ | └── registerServiceWorker.js | ||
+ | package-lock.json | ||
+ | README.md | ||
+ | </code> | ||
===Frameworks=== | ===Frameworks=== | ||
* [https://reactjs.org/ React] | * [https://reactjs.org/ React] | ||
Line 37: | Line 71: | ||
===Libraries/Tools=== | ===Libraries/Tools=== | ||
* [http://recharts.org/#/en-US/ Recharts] | * [http://recharts.org/#/en-US/ Recharts] | ||
− | * [https:// | + | * [https://nodejs.org/en/ Node.js] |
− | + | * [http://www.material-ui.com/ Material-UI] | |
− | + | * [https://github.com/exupero/saveSvgAsPng saveSvgAsPng.js] | |
− | + | We chose to use Recharts to provide more functionality for the graphs being made. Recharts were used to create truly Open Source charts, and saveSvgAsPng.js was used to download the charts when created. Material-UI was used for general design and layout of the application. | |
== Licensing == | == Licensing == | ||
− | + | ===MIT License=== | |
− | + | React, Recharts, Material UI and saveSvgAsPng are all under the MIT license, that you can read more about [https://opensource.org/licenses/MIT here] | |
+ | ===Custom License=== | ||
+ | Node.js is under a custom license for all open software and free software, that you can read more about [https://raw.githubusercontent.com/nodejs/node/master/LICENSE here] | ||
== Division of labour == | == Division of labour == | ||
We all want to have a fullstack understanding of the application, so we will divide the working power where it needs be. Even so we have defined the most essential parts of development and divided responsibility for these. In practice this means that for the following tasks, each group member is responsible that their part of the application is up to speed with the rest of the application during development. In this way we ensure that all group members are familiar with the other parts of the application, so we never end up in a situation where one member is unavailable and the development stops. We also ensure that someone is keeping track of the different parts of the application and can communicate if that particular part starts lagging behind. | We all want to have a fullstack understanding of the application, so we will divide the working power where it needs be. Even so we have defined the most essential parts of development and divided responsibility for these. In practice this means that for the following tasks, each group member is responsible that their part of the application is up to speed with the rest of the application during development. In this way we ensure that all group members are familiar with the other parts of the application, so we never end up in a situation where one member is unavailable and the development stops. We also ensure that someone is keeping track of the different parts of the application and can communicate if that particular part starts lagging behind. |
Latest revision as of 22:33, 6 December 2017
Contents
About CloseSource
This is the Wiki for CloseSource, one of the groups enrolled in INF5750 - Open Source Development 2017. Information about our group project will be added here throughout the semester.
Group members
The group consists of the following members:
- Edvarda W. Eriksen (ererikse)
- Duy Johnny K. Nguyen (djnguyen)
- Milad Sharif (milads)
Product descriptions requirements
We have chosen the task
Requirements from the assignment
The app needs to be able to present this information in (at least) three 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 (i.e. difference between target and actual).
- As raw data and percentages (on different axis), i.e. bars with the raw data and a line with the percentage.
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.
Cascades are often done done for different population groups (by sex, age etc). Therefore, it should be possible to save different configurations, and to swap between these. In addition to selection of data, it must be possible to select the time period and organisation unit to display data for, either as part of the configuration or when generating the visualisation. There must be support for downloading the visualisations.
Description of Final Product
CloseSource HIV Cascade Analysis is a lightweight React application designed for DHIS2, including the possibility to select organisation units and data elements from the DHIS2 API, creating a cascade visualisation with Recharts of how far the data elements are from the established target of the cascade.
It features three different visualisations, as specified in the Requirements section, as well as the possibility to save your chosen data elements as a configuration that you can reuse at a later time.
Version requirements for this project
- React:
v16.0.0
or higher - Node.js:
v6.11.5
or higher - Recharts:
v1.0.0
or higher - Material UI:
v0.19.4
or higher - saveSvgAsPng:
v1.2.0
or higher
Architecture
node_modules/
public/
src/
├── graph/
| ├── ExportButton.js // button for exporting chart to png
| ├── graph.css
| ├── GraphContainer.js
| ├── GraphPicker.js
| ├── PercentageBarChart.js // component for chart
| ├── RawPercantageBarChart.js // component for chart
| └── StackedBarChart.js // component for chart
├── images/
| └── icon-96x96.png
├── api_access_layer.js
├── App.css
├── App.js
├── Drawer.js // component: side menu and navbar
├── index.css
├── index.jss
├── logo.svg
├── Main.js
├── manifest.webapp // to deploy on DHIS2
└── registerServiceWorker.js
package-lock.json
README.md
Frameworks
We intend to use React because it is the second most used JavaScript frameworks. Furthermore one of the group members had experience with React from before, and the rest of the group wanted to learn React. As it has a fast learning curve and a very active community, getting help will also be straightforward.
We also saw in the lecture that for smaller projects React supposedly is more efficient than for instance Angular 2. In addition React has reuseable components, so if anyone at DHIS2 want to re-use our code for other illnesses or statistics, this can easily be done with React. This way we can also hope to help extend DHIS2 as a platform, by building reusable, sustainable code in a true Open Source fashion.
Libraries/Tools
We chose to use Recharts to provide more functionality for the graphs being made. Recharts were used to create truly Open Source charts, and saveSvgAsPng.js was used to download the charts when created. Material-UI was used for general design and layout of the application.
Licensing
MIT License
React, Recharts, Material UI and saveSvgAsPng are all under the MIT license, that you can read more about here
Custom License
Node.js is under a custom license for all open software and free software, that you can read more about here
Division of labour
We all want to have a fullstack understanding of the application, so we will divide the working power where it needs be. Even so we have defined the most essential parts of development and divided responsibility for these. In practice this means that for the following tasks, each group member is responsible that their part of the application is up to speed with the rest of the application during development. In this way we ensure that all group members are familiar with the other parts of the application, so we never end up in a situation where one member is unavailable and the development stops. We also ensure that someone is keeping track of the different parts of the application and can communicate if that particular part starts lagging behind.
Group memeber | Task |
---|---|
Milad Sharif | Data retrieval and manipulation between DHIS2 and application |
Duy Johnny Khac Nguyen | Graph/Chart development |
Edvarda Eriksen | UX design and overall application interface |
Timeline for Development
This will naturally be subject to change as the development commences.
Week 44 | Week 45 | Week 46 | Week 47 | Week 48 |
---|---|---|---|---|
Group
Notice
|
Group
Notice
|
Group
Notice
|
Group
|
Group
Notice
|