BluePrint: User Dashboard for Eden

Introduction

Brief description

Dashboard for Eden is the user interface providing a graphical view 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 and scalability.

Target problem

Dashboard smartly integrates and encompasses key performance indicators of different resources, thereby minimising deep navigation to different locations to summarise information ,and making monitoring an easy task by providing everything needed 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 to choose what information is displayed on my dashboard and from what resources.
• As an end user, I want to modify layout of my home page and save it for future access.
• As an end user I want to prioritise widgets on my dashboard to choose what loads first.
• As a Team leader, I want summary of all information related to volunteers, event/incident ,persons involved in single place/window.
• As an administrator , I want to monitor the status if different resources/modules along with key performance indicators within same page/window.
• As an administrator, I want to enable/disable certain widgets categorised by priority for scalability and load balancing.

Requirements

Functional

• System must be able to extract information/summary of information from various resources/modules.
• Admin must be able to disable/enable certain class of widgets globally for efficient monitoring and administration
• 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 (via code).
• Responsive UI/UX for customization of layout
• Easy configuration of widgets, using code
• Ability to prioritise widgets
• 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
• Be Scalable and responsive under stress/congestion

Project Deliverables

• Widgets displaying summary/statistics of different resources (in form of pie charts , bar charts etc )
• Embedded list and navigation block widgets
• Map/gis module widgets
• Widgets for inserting data into resources(tables) on the fly
• Scalable Dashboard fitting user needs
• Dashboard serving home page for modules/resources

Dashboard Content

• From Sahana Eden
  • Outstanding tasks they need to do
  • Reviewing incoming CAP alerts.
  • Summary Reports
  • Graphs
  • Map
  • Contact Lists
  • Latest Activity
• External Information
  • World Clocks
  • Social Media Feed

Use-Cases

Design

Data Model

todo

Types of Widgets

• Datatable
• Datalist
• Chart
• Report
• Read Form
• Create Form
• External Feed

Types Of Dashboard

• User
  • Standard : This will be the default dashboard provided to new users on signup.It will contain preselected widgets from misc resources.For ex default dashboard would contain
    • Map of offices
    • Upcoming training
    • Contact details of Active volunteers sorted by region
    • Time line of shipments

• Customisable : These are the dashboards which are customised by user according to there needs.They results from customisation(layout and choice of widgets) applied to standard dashboard. For example this type of dashboard can contain :
  • World clocks
  • widgets displaying feeds/tweets from important organisations
  • Maps of Assets
  • Map of project communities
    

• Resource Dashboards : Resource dashboards serves the purpose of displaying summary of particular resources on single page.These resource specific dashboards are ideal way of getting glimpse of status o particular resource. For example Resource dashboard for organisation would contain :
  
  • Number of Resources (Staff, Branch, Volunteers)
  • Map of Offices
  • Key Contact Details (Phone ,Address ,email)
  • List of Branches / Offices

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
• Admin monitors the load of widgets
• disables/enables certain class of widgets [globally] in response to network conditions

Wireframes

BluePrint/UserInterface#ModuleIndexPages

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.
• Widgets by default will be prioritised by position in rows , but can be manually prioritised by user and grouped in hierarchy.
• AJax calls would be queued according to priority of widgets.
• By default user will be provided with generic theme/template of dashboard with fixed number and type of widget .
• Configuration options provided would simply contain ability to reposition widgets(which would be fixed in number say 5 for the moment) or ability to load configurations which would be provided by default or contributed by some designer
• 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
• ​http://logs.sahanafoundation.org/sahana-eden/2013-04-29.txt
• ​http://logs.sahanafoundation.org/sahana-eden/2013-05-02.txt

---

BluePrint BluePrint