BluePrint: User Dashboard for Eden

Introduction

Brief description

Dashboard for Eden is the user interface showing a graphical presentation of the current status (snapshot) and trends of different modules/resources along with external data for quick glance and monitoring purposes , with full user customization.

Target problem

Dashboard smartly integrates and encompasses key performance indicators of different resources, thereby preventing user to navigate to different locations to summaries information and making monitoring an easy task by providing everything neede in single place.

Benefit to Sahana

Dashboard will spruce up the ability of sahana-eden to function as a great management and administration application, which is a critical requirement during the time of need.

Existing solutions/prototypes

S3profile currently provides ability to configure widgets (using code) that can be used as components for dashboard. Dashboard project aims to brings this configuration and customization to user domain with responsive UI/UX and at same time being as modular as possible.

Stakeholders

• Sys admins
• End users
• Volunteer groups
• Team leader/Manager

For big picture of story , users won't need to go to the report section of each resource/module as dashboard will list summary related info of resources/modules. Quick access to basic info will further prevent users navigating to specific module pages.

User Stories

• As a non-administrative user, I want customize my home page , to choose what information is displayed on my dashboard and from what resources
• As an end user, I want to tweak and modify layout of my home page and save it for future access
• As a Team leader, I want summary of all information related to volunteers, event/incident ,persons involved in single place/window.
• As an administrator user, I want to monitor the status if different resources/modules along with key performance indicators within same page/window.

Requirements

Functional

• System must be able to extract information/summary of information from various resources/modules.
• Ability to display combination of different type of data like data tables , graphs ,map widgets , other widgets simultaneously.
• Provide easy access to relevant information and resources like forms for CRUD functionality without useless navigation.
• Ability to select source of information to be displayed with fine level customization to choose various fields from resources.
• Responsive UI/UX for customization of layout
• Easy configuration of widgets, using both UI and code
• Ability to add external data sources like feeds and tweets
• Ability to save configuration of dashboard for later visits
• Ability to select predefined themes of data sources
• Ability to define themes to set data source combination for collection of widgets

Non-functional

• Should be accessible after successful login
• Should be able to link all resources/modules
• Must be able to load preference stored by the user

Use-Cases

Design

Data Model

todo

Workflows

• User visits the dashboard after logging in
• User is presented with default dashboard if not customized or customized version if available
• Click create-widgets if want to add/create item to particular module/resource
  -> add required details/fields in popup/iframe window
  -> Click send/done
• Click add button to add a new widget
  -> select the data source
  -> configure the widget the data required
  -> preview the widget (optional)
  -> click submit
• Add summary/key point indicators from resources
  -> configure summary widget
• Add foreign data
  -> add data source
  -> choose summary format (datacharts ,tables, pie charts, histograms etc)
  -> other details for representation of widgets
• Drag widgets around the window to change position
• resize/customize other UI properties
• save the configuration

Wireframes

todo

Technologies

• Javascript libraries for responsive UI and widget creation
• S3profile for configuring widgets
• Jquery flot graph library for summary generation(chosen over matplotlib based graphs due to easy customization and other rich features)
• CSS 3 for slick and clean layout

Implementation

(Prospective)

• Layout is composed of placeholders ( html5 containers for example) for different widgets , which will populate the view.
• Factory class for widgets will provide objects corresponding to widget requested
• Different subclasses of widget factory will also subclass available widget classes in S3 and take the onus of all properties/attributes of widgets
• Fields of requested module/resource will be presented to user to build/customize the widget.
• Predefined fields will prepared along with required table joins for quick widget creation.
  -> for example [volunteer name], [shipment requester] and other various fields will be predefined with their respective table joins required to fetch information.
• Reference to Data required by widgets will be stored in separate database for populating widgets on load.
• Graph and map widgets will be loaded dynamically by data that needs to plotted by fetching data on request.
• Layout preferences will be saved in configuration files in key value pair( can be promoted to database storage on need).

References

• http://eden.sahanafoundation.org/wiki/BluePrint/UserInterface/Dashboard
• http://eden.sahanafoundation.org/wiki/BluePrint/UserInterface#ModuleIndexPages

Discussions

• ​https://github.com/flavour/eden/pull/452
• ​https://groups.google.com/forum/?fromgroups=#!topic/sahana-eden/CaROmqrnv0U
• ​http://logs.sahanafoundation.org/sahana-eden/2013-04-20.txt

---

BluePrint