| Table of Contents | ||||
|---|---|---|---|---|
|
...
the dashboard container
individual Widgets
a menu for adding new widgets
Placement and Positioning
...
All rows should be the same fixed height.
Two half-height widgets may be stacked on top of one another within a single row.
The height of full-width widgets may respond to the widget content, or (optionally) be adjusted by the user.
or
All widgets on the same row should be the same height.
The height of each row can may be adjusted by:
using drag-and-drop (Optional), or
automatically responding to the widget content (with all widgets adjusting . All widgets will adjust to the same height as the tallest widget). (Optional).
Columns
Additional columns (up to 2?) may be added to the dashboard for full-height widgets only.
Order or columns may be changed by the user. (← → controls?)
These columns have an independent vertical scroll, i.e. do not scroll with the main dashboard.
Examples
https://documentation.sisense.com/docs/customizing-the-dashboard-layout
...
New widgets will be added:
from a menu, in which case it can optionally be added as the first or last widget, and
(optionally) using Drag and Drop, in which case the widget will be added to the chosen position on the dashboard.
A set of default dashboards, populated with useful widgets, may be offered for easy set up.
The user will be able to change the order of the widgets using controls and/or drag-and-drop.
...
Create dummy visual
Widget sizing
The size of each individual widget can be set both before and after it is added to the dashboard.
Each widget will have a default size, depending on its content.
Particular sizes may be prohibited for individual widget types. For example, it may not be appropriate to create an XS widget containing a large chart or table.
...
A transition effect should be used when moving widgets using drag and drop.
Should there be a transition effect on the whole dashboard when a new widget is added?
Best practices
Use:
for flexible workspaces which can be entirely managed by the user.
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You >> | <<Screen with 200 width>> |
...