Skip to content

Add empty state to panels

Problem to solve

Analytics dashboard panels do not have an empty state. As such when there are no results to display for whatever reason the panel is simply empty.

For an improved UX we should give the user a clear indication that the panel has no results to display that match the Pajamas empty states.

Screenshots

Empty with no results
image

Proposal

Add an empty state for panels when there is no data to visualize.

Implementation plan

  • Update customizable_dashboard.vue to show an empty state when there is no data inside the panel.
    • Display the text No results match your query or filter.
    • The text should be both vertically and horizontally centred.
    • Use the text color gl-text-secondary.
    • Note: This should also apply to SingleStat
  • Update the tests to verify that a panel shows the empty state when it has no data.
Edited by Elwyn Benson