[Sample data] Use Lens in flights dashboard

[wylieconlon]

Not only have I changed the flights dashboard to use Lens instead of Visualize where possible, I've also made changes to the content of the dashboard. The goal of this dashboard is now to analyze the origin of delayed and cancelled flights, instead of having mixed types of panels.

In Lens, I'm specifically adding a week over week formula and conditionally colored tables, which are highlighting the newest features.

Part of #77340

Before

After

[spalger]

jenkins, test this

(had to abort for Jenkins upgrade)

[monfera]

Wylie thanks for asking about the chages.

It's a big improvement in a number of ways 🎉 eg.

• it starts with good visualizations, and the formerly "hero" placed big word cloud got demoted to a much smaller view in a much less prized area (at the fold, on the right); its squarish aspect ratio is much better too
• pie chart with in-slice labels is better than a donut with linked labels
• speedometers got removed
• more reasonably and similarly sized and placed maps

In some future version it'd be good to change the red/green color pair in the heatmap to a more accessible categorical color set, and as the surface area of the heatmap and esp. the individual cells is a bit high (due to having only two columns) a more muted color palette may work better.

I'm also wondering if maybe all of the time series are worth putting below one another, assuming their time domain is shared. Maybe binning could be in sync too, eg. flight counts and delays sharing the same time resolution. For some reason it also feels that the maps would be neat side by side, as both could then be visible simultaneously.

There are the following main parts to this report(*), in the approx. order of importance, give or take. There are legitimate alternative orders of importance (depends on the use), so this is only for example:

1. The maps
2. All the time series
3. All other charts
4. Detailed tables

It's useful for a report to convey a clear visual hierarchy, eg. starting with the maps (side by side, full width, and substantial height), so its placement and size identifies it as the anchor element. Then the time series form a somewhat monolithic, aligned block with internal vertical and horizontal rythm - the 2nd most important bit. The auxiliary charts can be on the right. The table, below, esp. if it needs that many columns.

(*) I'm calling it a report, because a dashboard needs to fit on a fixed screen area, eg. one specific screen. In the future I hope our dashboards will be fixed screen, or somewhat responsive dashboards that show all charts even if shrunken, or simplify or even cull charts, but never scroll. What scrolls, or would otherwise has overflow is something else, eg. a report, notebook or journal article.

[dej611]

The new dashboard looks very nice and has a more gentle learning curve.
Probably the only comment is relative to the datatable, which is a bit too colorful: using a different palette may make it easier to spot outliers than the Status one currently used.

I've used the Warm palette here for the Cancelled column to compare it:

Also, it would be nice to use the transpose feature somewhere, but I could not come up with a nice combination (Origin x Destination may be nice).

It would be nice also to use a Heatmap to show something like this (metric: max delay time / max flight time (also average may work):

(not optimal for static visualization, but nice as interactive heatmap)
Nevermind, I've just noticed the only way to display the metric is the tooltip, as the legend cannot be customized.

I'm also wondering if maybe all of the time series are worth putting below one another, assuming their time domain is shared. Maybe binning could be in sync too, eg. flight counts and delays sharing the same time resolution. For some reason it also feels that the maps would be neat side by side, as both could then be visible simultaneously.

Agree with @monfera on this.

That said I like the current layout apart from having the maps stacked, which makes it harder to track them together as I often found myself scrolling up and down the dashboard.

[wylieconlon]

@monfera and @dej611 thanks for the feedback, I've taken most of it and I'm not sure what to do about the rest that I haven't applied here. Specifically, here are the parts I didn't take:

• I didn't move the maps to the top, but I did make them side-by-side instead of vertical. My opinion here is that users will want the quick summary information first, so I thought it was important to keep the metrics & time series in one place.
• I didn't add a heatmap because it's currently in experimental mode
• I removed most of the color in the table, now it's only using the logic that 20% or greater is yellow, 60% or greater is red. Is this good?

Here's the update:

[dej611]

Much better with the new layout and the cleaner palette on the datatable 👍

[nreese]

Can you change the maxSize to 32 and the minSize to 4 so the markers stand out better?

[wylieconlon]

@nreese Sure, I can make this change, but the main reason I reduced the size was to deal with overlapping circles at the zoomed out map. Any thoughts on the tradeoff between those two priorities?

[nreese]

I think overlapping circles are better then a nearly empty map in the default view.

[nreese]

LGTM

The new dashboard looks great

[tsullivan]

app services changes LGTM

[wylieconlon]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: dff0699
• Storybooks Preview

Metrics [docs]

✅ unchanged

History

• 💔 Build #138867 failed 9c28ac3
• 💔 Build #138846 failed 77ad85a
• 💚 Build #138542 succeeded ee24b2e
• 💚 Build #138275 succeeded 977fd47
• 💔 Build #137565 failed 005956f

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.