New Custom Dashboard Flow - Available visualizations MVC
Problem to solve
As part of the Create a new Custom DashboardFlow (#416673 - closed) we need to update the current available visualizations component to match the MVC designs.
Related non-blocking issue to update the dashboard editor New Custom Dashboard Flow - Dashboard designer MVC (#422024 - closed).
Proposed solution
Update current available visualizations component to match the MVC designs.
Other considerations
The visualization designer call to action is not part of the design. However the component should continue to list custom built visualizations.
The custom visualizations can be listed under the Built-in
section for the first iteration. We can follow-up with a Custom
/ User defined
tab.
Designs
Design | Mockup |
---|---|
![]() |
![]() |
Deprecated designs below.
Implementation plan
frontend
-
Update available visualizations list to use a side drawer. -
Add a tabs with a Built-in
+ counter to the top of the list.- We'll follow-up with a
Custom
tab.
- We'll follow-up with a
-
Update available visualizations list to use multi-select checkboxes. - Consider automatically checking the visualizations that are already on the dashboard.
-
Add a Add to dashboard
button that stretches the entire width at the top of the dashboard.- When clicked, it should add the selected visualizations to the dashboard as panels.
- Hide this button when not editing.
-
Update available visualizations list to group items by visualization type. - Add user friendly strings for each visualization type. This could be accomplished using a map.
-
Update the visualization list item to match the design. - Remove the icon.
- Add a border around each option.
-
Update specs.
Edited by Jiaan Louw