Trust us, we're Scientists! Visualization/Overview

From mn/ifi/inf5750
Revision as of 19:06, 29 October 2013 by (talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Tuwas Visualizer for DHIS2

This project is was started during the Inf5750 - Open source software development course at the University of Oslo The purpose of the app is to make it easy for users to extract data from DHIS2 and display this data in a user friendly way.
The District Health Information System (DHIS) is a highly flexible, open-source health management information system and data warehouse. It is developed by the Health Information Systems Programme (HISP). The core development activities are managed and coordinated by the Department of Informatics at the University of Oslo, and supported by The Norwegian Research Council, NORAD, The University of Oslo, and The Norwegian Centre for International Cooperation in Education.
For the first version Tuwas Visualizer will support line, bar and pie charts. And the user will be able to choose from some predefined settings.

The project is build using AngularJS. We use several angular plugins for ui and graphs. Most of the dependencies are managed using bower.
Note: While angular is client-side-only technology and it's possible to create angular webapps that don't require a backend server at all, we recommend hosting the project files using a local webserver during development to avoid issues with security restrictions (sandbox) in browsers. The sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr, etc to function properly when an html page is opened via file:// scheme instead of http://.

Running the app during development
You can pick one of these options:

  • serve this repository with your webserver
  • install node.js and run scripts/web-server.js

Then navigate your browser to http://localhost:<port>/app/index.html to see the app running in your browser.

Running the app in production
Tuwas Visualizer is an Angular app. Angular apps are really just a bunch of static html, css and js files that just need to be hosted somewhere, where they can be accessed by browsers.

Running unit tests
We have used jasmine and Karma for our unit tests/specs.
Requires node.js, Karma (sudo npm install -g karma) and a local or remote browser.

  • start scripts/ (on windows: scripts\test.bat)
  • a browser will start and connect to the Karma server (Chrome is default browser, others can be captured by loading the same url as the one in Chrome or by changing the config/karma.conf.js file)
  • to run or re-run tests just change any of your source or test javascript files.

End to end testing
Angular ships with a baked-in end-to-end test runner that understands angular, your app and allows you to write your tests with jasmine-like BDD syntax.
Requires a webserver, node.js + ./scripts/web-server.js or your backend server that hosts the angular static files.
_Note: We have also added ./ that runs the same script but can be called with less characters :)
Check out the end-to-end runner's documentation for more info.

  • create your end-to-end tests in test/e2e/scenarios.js
  • serve your project directory with your http/backend server or node.js + scripts/web-server.js
  • to run do one of:
  • open http://localhost:port/test/e2e/runner.html in your browser
  • run the tests from console with Karma via scripts/ or script/e2e-test.bat

'''Directory Layout'''
app/ --> all of the files to be used in production
css/ --> css files
app.css --> default stylesheet
bootstrap.min.css --> Bootstrap css
bootstrap-theme.min.css --> Not currently used
sticky-footer-navbar.css --> Not currently used
img/ --> image files
glyphicons-halflings.png --> Glyphicon icons
glyphicons-halflings-white.png --> Gphyphicon icons in white
index.html --> app layout file (the main html template file of the app)
index-async.html --> just like index.html, but loads js files asynchronously
js/ --> javascript files
app.js --> application
controllers/ --> application controllers
BarGraphController.js --> Controller for bar graphs
LinearGraphController.js --> Controller for linear graphs
LoginController.js --> Controller for login
PieChartController.js --> Controller for pie graphs
directives.js --> application directives
filters.js --> custom angular filters
services.js --> custom angular services
lib/ --> angular and 3rd party javascript libraries
angular.js --> the latest angular js
angular.min.js --> the latest minified angular js
angular-*.js --> angular add-on modules
version.txt --> version number
bower/ --> Bower components folder
partials/ --> angular view partials (partial html templates)
config/karma.conf.js --> config file for running unit tests with Karma
config/karma-e2e.conf.js --> config file for running e2e tests with Karma
scripts/ --> handy shell/js/ruby scripts --> runs end-to-end tests with Karma (*nix)
e2e-test.bat --> runs end-to-end tests with Karma (windows)
test.bat --> autotests unit tests with Karma (windows) --> autotests unit tests with Karma (*nix)
web-server.js --> simple development webserver based on node.js
test/ --> test source files and libraries
e2e/ -->
runner.html --> end-to-end test runner (open in your browser to run)
scenarios.js --> end-to-end specs
indicatorgroups.json --> fixture for a json response from dhis2 api
indicator.json --> fixture for a json response from dhis2 api
angular/ --> angular testing libraries
angular-mocks.js --> mocks that replace certain angular services in tests
angular-scenario.js --> angular's scenario (end-to-end) test runner library
version.txt --> version file
unit/ --> unit level specs/tests
controllersSpec.js --> specs for controllers
directivessSpec.js --> specs for directives
filtersSpec.js --> specs for filters
servicesSpec.js --> specs for services
bower.json --> Bower config file that holds dependencies --> Run the webserver script in the script/ directory.

For more information on Tuwas Visualizer please contact any of our team members.
For more information on DHIS2 please visit
For more information on AngularJS please check out