Overview

As part of Reporting 2.0, the concept is the ability to create a dynamic report. One part of the dynamic reporting is the ability to create a dashboard and apply widgets. This is the requirements and designs for the canvas (dashboard).

A Dashboard Structure

Layout

The Dashboard uses a 12-column layout with the following settings:

• Columns: 12

• Max width: 1156px

• Offset: 210px from the left

• Gutter width: 16px

• Gutter on outside

  

A1 As a user, I can see my dashboard and toggle ON or OFF to apply the date range to all widgets.
Design (2 screens): IMG 1 | IMG 2

1. When the user clicks the ‘Dashboard’ page:

   1. First Time: the dashboard will display the pre-set dashboard for that user’s department

   2. Created an additional dashboard: display the first dashboard the user modified or created.

2. The dashboard page will display:

   1. Toggle and date range

   2. Dashboard button

   3. Customize button

3. Toggle ‘Apply dates to all widgets’

   1. each widget will have its own date range selection. This toggle is giving the user the ability to override the date range for ALL widgets

   2. When the toggle is ON, display the widget contents that matches within the date range selected

   3. When the toggle is OFF, display the selected date range in the widget card

      1. disable the ‘Start Date’, ‘End Date', and ‘Interval’ textfields

A2 As a user, I can select the ‘Customize’ button to perform an action to my dashboard.
Design: IMG 1

1. When the user clicks `Customize' a dropdown menu will appear with:

   1. Edit

   2. Create new

   3. Copy as & edit

2. Edit

   1. Edit the current dashboard. This will go into edit mode

3. Create new

   1. create a new dashboard

4. Copy as & edit

   1. create a separate copy of the current dashboard and enter edit mode

B Create and Edit Dashboard

B1 As a user, I can create a new dashboard and choose to create from blank or a pre-set dashboard.
Design (2 screens): IMG 1 | IMG 2 - Create from pre-set

1. When user clicks Create new from the Customize button options a modal will appear with the options:

   1. Start with blank

   2. Start with pre-set dashboard

2. When the user selects Start with blank an empty state dashboard in edit mode will appear

3. When the user selects Start with pre-set dashboard the modal contents will change and display:

   1. Explanation text

   2. Dropdown text field that lists all the available pre-set dashboards

   3. *only the available pre-set dashboards will display depending on the user’s department and role

B2 As a user, I can edit and create my dashboard when in edit mode.
Design: IMG 1

1. After the user selects Start with blank or Start with pre-set dashboard the user will enter edit mode, where the user can: add, move, and delete widgets.

   1. If Start with blank the dashboard space will be empty. The user can see a grid as a guide of how to arrange their dashboard

   2. If Start with pre-set dashboard display the pre-set dashboard widgets

2. The header of edit mode will display:

   1. Cancel

   2. Save As..

   3. Save

   4. Show Widgets

3. Cancel - this will cancel the dashboard completely. A modal should appear letting the user know that their changes will not be saved.

4. Save As.. - creates a copy of the current dashboard and saves

5. Save - saves the current dashboard

6. Show Widgets - this shows or hide the widget sidebar

B3 As a user, I can show and hide the widget sidebar.
Design (2 screens): IMG 1 - Hide | IMG 2 - Show

1. The user can show and hide the widget sidebar.

   1. If the sidebar is hidden the button should display: Show Widgets

   2. If the sidebar is displayed the button should display: Hide Widgets

2. Use a transition animation where the sidebar appears ‘Right to Left’ and disappears ‘Left to Right’

3. When viewing the sidebar, there will be sections with each department, it should display:

   1. My Favourites

   2. Sales

   3. Operations

   4. Marketing

   5. Accounting

   6. Product

4. When the user expands on a section, the widgets that belongs to the section will appear. Refer to the spreadsheet to see list of available widgets

   1. https://docs.google.com/spreadsheets/d/1B04_MvtzU8NFDsmFt5MI8MuTLSNa8cZEdO7m0prWPvQ/edit#gid=2059642941

   2. *only the available widgets will display depending on the user’s department and role

B4 As a user, I can drag a widget to the dashboard and place it anywhere I can.
Design (2 screens): IMG 1 - Drag | IMG 2 - Drop

1. The user can click and drag a widget to the dashboard

   1. When this happens, the selected widget on the sidebar will be disabled (lower opacity)

   2. the user can see the widget on their mouse curser, as they are dragging the widget across the screen

2. If the user chooses to put a widget in between other widgets, display a blue line, indicating to the user this is where the widget will be placed

   1. if this happens, shuffle all the other widgets over to the right, and move widgets down the screen if needed.

B5 As a user, I can save my dashboard and give it a name (first time creating).
Design: IMG 1

1. When the user clicks Save or Save As.. the dashboard will save and will no longer be in edit mode. This will save and update the dashboard.

2. If first time creating a dashboard, a modal will appear asking the user to name their dashboard. This also applies when Save As.. has been clicked.

3. If not first time, a modal will appear asking if the user is ready to save.

C View and toggle between Dashboards

C1 As a user, I can click the Dashboard button and a sidebar will appear with available dashboards.
Design: IMG 1

1. When user clicks Dashboard (non-edit mode) the Dashboard sidebar will appear. This is where the user can toggle between their created dashboards and view the pre-set dashboards.

   1. *only available dashboards will be displayed, depending on the user’s role and permissions

2. When the user clicks Dashboard again, the sidebar will disappear.

3. The sections that will be displayed are:

   1. My Dashboards

      1. the dashboards that the user created

   2. Department

   3. General

C2 As a user, I can manage dashboards I created.
Design: IMG 1

1. Under the ‘My Dashboard’ sections, a list of dashboard that the user created will be displayed here. Only these dashboard will have the ‘More Options’ icon button.

2. When the user clicks on the icon, dropdown modal will appear with:

   1. Edit

   2. Delete

3. Edit - go into edit mode for that dashboard and the user can edit the dashboard

4. Delete - ability to delete the dashboard

   1. a confirmation modal should appear before the dashboard is deleted.