Skeleton/empty state graph for Day 0 usage

[tiyiprh]

Requesting new features, enhancements, or design changes to PatternFly

• Describe the use cases and requirements of the new feature or enhancement you are requesting.
  In Event-Driven Ansible, we show a data graph on the dashboard. However, the graph will only show once a rule is run and there is data. On Day 0, we want to show a skeleton/empty state graph to indicate to the user that there is something that will be shown on the dashboard even though there is no data populated yet.
• Explain why this feature is needed and/or why these requirements cannot be met using existing components.
  There is currently no skeleton/empty state graph but examples of skeleton components.
• Link any detailed design documents, rough sketches, wireframes or workflows.
  Based on the skeleton component currently in PatternFly, we've designed a possible solution to meet this use case.

Mockup: https://www.sketch.com/s/b2f1b675-cfe0-4016-b781-12b589027938/a/OebpAO2

[andrew-ronaldson]

In another product I have seen a simple bordered area containing an empty state to build a query. Would something like this work for your use case?

[tiyiprh]

Hi @andrew-ronaldson, thanks for this! This empty state is a step in the right direction from what we had before, which was no empty state at all, but we are hoping to improve upon empty state nuances depending on the type it is. The typical empty state could work in this case but we would like to have something more visually robust to display what the resource will be once it is fully loaded/available. I believe @tiffanynolan has some experience and is working on empty state nuances so maybe she'll have some feedback here as well!

[tiffanynolan]

Thanks for the ping, @tiyiprh. While we have not finalized design guideline proposals for this use case, the working group participants were very fond of a an empty state variation that has a blurred background and then a very clear action to create data that would fill in that graph. Something like this:

[tiyiprh]

Made some iterations based on the feedback and then discussed with @tiffanynolan. We came to an agreement on this mockup:

We are showing a static image with a fixed design based on the type of graph once data has been input and will have a fixed height. Once data has been populated, the height will change accordingly. We are using the extra small empty state from PF within the graph area.

This is just some context of what our generic empty state is like versus what a graph empty state would look like. The graph empty state gives more context on what the user can expect to see versus just the generic empty state.

[andrew-ronaldson]

Pinging @dlabrecq on this for his chart expertise. Is this ghosted chart with Empty state technically possible?

[dlabrecq]

I spent some time creating a POC to add both PatternFly's EmptyState and Skeleton components using XS variants.

Example 1

It is possible to override Chart styles and add PatternFly's EmptyState; however, I quickly discovered a few issues.

1. The EmptyState does not fit in smaller charts. The example above appears to work, but it must be a large chart. I found that the chart must be 300px min, which is 1/3 larger than any of our PatternFly chart examples -- some donut charts are only 50px.
2. In order to show HTML within an SVG image, we must wrap EmptyState by an foreignObject tag -- something compatible with SVG. Although the chart scales as the window shrinks, the EmptyState is not responsive.

Example 2
This EmptyState is too big for our existing (200px) chart examples. More importantly, it shows that EmptyState is not responsive here.

responsiveness.mov

More issues / notes

• Despite the empty state, chart data must be provided to plot those fake lines shown in the UX design
• Charts may not accommodate an EmptyState at small window sizes
  • Mixing HTML in an SVG is not likely to be responsive
• The UX empty state design only addresses one use case
  • Not all charts show an x/y axis, grid lines, same legend layouts, etc.
  • What about pie charts, bullet charts, etc. and what would that look like?
• Charts are composable, so there will be multiple components to override
• EmptyState is also composable and would be added to Chart separately, similar to ChartLine, ChartAxis, etc.
• EmptyState must be wrapped by foreignObject and positioned absolutely
• Skeleton must be wrapped by foreignObject

That said, perhaps this could just be a simple PatternFly EmptyState with a background image? At least that would be responsive.

[tiyiprh]

Thanks so much @dlabrecq for taking the time to work through this and the feedback. Based on the above, we reworked the design.
Our thought is to separate out the skeleton view and use a plain alert instead as the "empty state" warning, including description. This way, regardless of the chart type and size, we can still display a skeleton view and have the alert with description and action within the card. This will also scale better.

[dlabrecq]

Curious what would a skeleton would look like for other types of charts; bar, pie, donut, utilization, bullet, area, etc?

[tiyiprh]

I'm thinking something like this? Let me know any feedback!

[dlabrecq]

Are you expecting to use the animated PatternFly skeletons? Using plain grey boxes would be simpler.

I think most of the mocks are doable. Although, the threshold chart legend looks a little tricky. It shows dashed lines as the legend symbol, while all other charts use grey boxes.

Still some things to figure out...

• Charts need data in order to plot the fake lines
• Not clear if users would need to override each chart component themselves?
• PatternFly skeletons would be positioned absolutely and may need to be adjusted slightly by the user -- plain grey boxes wouldn't need alignment

[tiyiprh]

We are planning to use grey boxes and not the animated PF skeletons.
For the threshold chart legend, I used whatever the PF example was. If it needs to use a grey box, that's fine with us.
We weren't planning to use real data but just wanted to show a static example chart type based on whatever the chart will be when it's populated.

[dlabrecq]

Ok, just wondering if the chart was expected to provide fake data. It could provide something basic, but probably wouldn't be a true representation of your populated chart.

[tiyiprh]

Something basic is fine. The idea is just to show the user an example of what the chart/graph would look like as a placeholder until it gets populated and filled out so they have an idea of what they can expect to see.

[dlabrecq]

I have a draft PR here patternfly/patternfly-react#10311

I created a new theme to fill-in all labels grey, but also removed chart interactions like tooltips, cursors, etc.
Developers can provide their own fake data to represent their graphs or copy the examples provided.

You can view live examples below
https://patternfly-react-pr-10311.surge.sh/charts/skeletons

[andrew-ronaldson]

Closed with react issue and design kit issue