Add Dashboard

[dan-tang-ssd]

The dashboard shows different kind of summaries of the whole institution or one of the portfolios. Including initiatives status summary, red lines summary and principles summary.

It provides a visualised way to compare yours initiatives (left hand side) and all initiatives (right hand side). We provide filters that allow user to find initiatives to meet specific criteria.

The dashboard has a generic design, so that anything (initiative(s), portfolio(s), a set of project Ids) can be compared to anything. This is for possible future enhancement, which allows users to have more flexiability for comparision. E.g.,

• Compare region A and region B
• Compare country C and country D
• Compare institution E and institution F
• Compare portfolio E1 and portfolio F1
• Compare inititive E11 and inititive F11
• Anything to Anything

Considering possible performance issue, all summaries data are generated in database stored procedure.

Program flow:

1. Vue component sends criteria to Laravel controller
2. Laravel controller calls database stored procedure
3. Stored procedure generates summaries data in database level, return them to Laravel controller
4. Laravel controller performs sorting for principles summary data, return all summaries data to Vue component
5. Vue component renders summaries data in visualised way (tables, stacked bar chart)

[dan-tang-ssd]

Screen shots:

Dashboard filters

Initiatives status summary

Red lines summary GREEN colour if yours % is 100, otherwise YELLOW colour

Principles summary Sort by "Highest to Lowest" by default (most GREEN goes first) P.S. 1. Finally I sort by GREEN, then YELLOW, then RED by calling usort 3 times separately.

2. Stacked bar chart shows GREEN, YELLOW and RED with 100% by getting percentage in 2 d.p. instead of integer.
3. Chart 1 width is fixed, by specifying Y axis label width

Principles summary Sort by "Lowest to Highest" (most RED goes first)

Principles summary Sort by "Default" (Principle ID)

[dan-tang-ssd]

TODO items:

1. project start

   • use selection box instead of number textbox?
   • pros: avoid unexpected user input, e.g. -100, 100, abc

2. budget, show thousand separater for budget

   • use selection box instead of textbox, to show budget with thousand separter in option label easily

3. dashboard filters section will be collapsible when not in use

   • um... how do we know when will it be "not in use"...? After user clicking "Submit" button?

4. when dashboard filters section is collapsed, show active filters

5. dashboard, refine general layout, look and feel

6. add "Generate PDF" button

   • "Generate PDF" feature is in dev branch, we need to merge "add-dashboard" branch to dev branch first

[dan-tang-ssd]

Add error handling in database stored procedure for the following situations (after filtering):

1. There is no project found
2. There is no red line reviewed
3. There is no principles assessed

It should be fine if there is one project with red lines fully reviewed and principles fully assessed.

Further enhancement may be required for project with red lines partially reviewed and / or principles partially assessed.

[dave-mills]

Update:

Fixes:

• Added filters to the "others" assessment list as well so we are comparing like with like.

Ongoing Issues:

• when a given set of filters results in there being a principle that is "na" for all assessments, the generate_dashboard_summary function fails entirely due to a "division by 0" issue in the generate_principles_summary function.
• The dashboard_principle table is being populated by checking if the assessed rating is exactly matching the rating in the dasshboard_rating table. This means the only values allowed are the values inside the ratings table. Given that the rating is a continuous variable, this approach seems unworkable?