Skip to content

Instantly share code, notes, and snippets.

@williaster
Last active January 23, 2024 06:58
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save williaster/bad4ac9c6a71b234cf9fc8ee629844e5 to your computer and use it in GitHub Desktop.
Save williaster/bad4ac9c6a71b234cf9fc8ee629844e5 to your computer and use it in GitHub Desktop.
Superset Dashboard v2

New Superset Dashboard Experience 🎉

Contents

Improvements
User guide
FAQs

Improvements

The new Superset Dashboard experience introduces several major improvements to the viewing and editing of dashboards. Some highlights include:

1) Drag & drop dashboard components

Many new dashboard UI components were added and exposed in a new drag and drop builder interface to enable you to build more effective and intentional dashboard layouts.

Chart preview

It's worth noting that you no longer have to use slices to implement your dashboard headers, dividers, or markdown components 🎉 Markdown slices from v1 dashboards are converted to native v2 markdown components, though if they are used as headers it might make most sense to replace them with Header components. These components can be edited directly in dashboard view.

2) Improved grid

The new dashboard grid is more predictable and visually clear. It uses a more common 12-column, which is more widely used because it supports a variety of widths for organizing content.

Dashboard grid

3) Undo/redo

When editing a dashboard all of your actions are now undo/redo-able until you persist them via saving ✨! Ctrl+Z and Ctrl+Y keyboard shortcuts also work 😎

Undo

4) Add Charts directly from a Dashboard

Now you can more easily and quickly navigate and add your charts to a dashboard from the builder side pane, instead of from the explore view. Note that you may only search and sort the charts you have edit permissions for.

Chart preview

5) Improved loading time

Dashboard load times can be improved through the use of Tabs, which enable breaking larger dashboards into smaller sections. The visualizations within a Tab are lazy-loaded meaning that they do not load until you select a Tab.


User guide

12-column grid

Regardless of the size of your browswer window, the dashboard uses a 12 column grid. Components such as Charts, Markdown, and Columns are resizable.

Grid demo

Rows and Columns

The new dashboard layout is fundamentally built upon row and column container components. You can drag and drop entire rows or columns as single entities, and nest them to a certain extent.

In rows content flows left => right

Row demo

In columns content flows top => bottom

Column demo

Tabs

Tabs are a great way to help organize your dashboard and can speed up loading time.

You may add top-level dashboard tabs

Top-level Tabs demo

And/or embed tabs within the dashboard itself

Tabs demo

Charts

You can naviagate all the charts and filters that you own from the builder sidepane and add them directly to your dashboard. Use the searchbox to filter slices, and the dropdown to sort them by various attributes.

Chart navigation demo

Markdown

The Markdown component replaces the "Markup" slice type. You can type markdown or HTML and preview the rendered markdown immediately by selecting "Preview" from the popover menu, or clicking outside the component.

Markdown slices from v1 dashboards are converted to native v2 markdown components, though it might make most sense to replace them with Header components.

Markdown demo

Header

Headers can be added between rows and support a limited number of styles and sizes.

Header

Divider

Dividers can be added between rows and allow you to organize and separate content on a dashboard.

Divider


FAQs

Why did my dashboard break upon conversion to v2?

We've tried our best to seamlessly convert between v1 and v2 layouts, but the two are not 100% compatible. We feel that minor regressions are worth the overall benefits of Dashboard v2, and in most cases we expect the conversion to take only a couple of minutes. The following incompatibilities are known:

  • If your CSS rules heavily target dashboard layout elements they are expected to break, whereas if your rules target chart styles they should not. Custom CSS is viewed as an experimental, power-user feature. It is experimental because it is fragile due to its dependency on the underlying dashboard implementation and is therefore backward incompatible.
  • The grid library used to power v1 was buggy and in some cases this caused the layout data to be corrupted. We have used heuristics to mitigate this issue as much as possible
  • Certain v1 dashboard layouts are not support in v2 because of a different underlying data structure

What happened to my Markup components during v2 migration?

Now that you can create and edit Markdown components within the dashboard itself, "Markup" slices should be considered deprecated. Therefore in the v1 => v2 conversion, we have converted "Markup" slices to proper dashboard Markdown components. If Markdown was being used for Headers, it might make most sense to replace them with Header components.

If I have a filter on a dashboard with Tabs, do the filters apply to charts on all Tabs?

Currently yes, unless you have configured your charts to be immune to all dashboard filters. We plan to improve this in the future (see future features below).

How do I provide feedback on the new Dashboard?

Your Superset administrator should provide a mechanism to provide feedback, or you may open a new Superset github issue.

What future features are planned for the Dashboard view?

  • Chart thumbnails in builder pane
  • Filters and group bys that apply only to specific tabs and containers (rows, etc.)
  • Comment threads
@SpyderRivera
Copy link

Thanks for putting together nice documentation!

@srggrs
Copy link

srggrs commented Sep 18, 2018

This is awesome guys! Thanks!

@jerllllllllyn
Copy link

Experienced just now! Great improvement! Thanks for contribution!

@Rakesh-Online
Copy link

Rakesh-Online commented Sep 23, 2019

Hi, I had a question regarding the superset dashboard it would be really helpful if can share some insight. Is there any possibility of viewing the same excel sheet structure in the dashboard for client reference as you can see the 3 levels of data in excel so exact same way I have to show in the dashboard this is the client requirement so please help me out.
Screenshot 2019-09-23 at 11 43 34 AM

@vuvansy1992kt
Copy link

Hi there,
How you can insert icon or symbol in Header chart or Dashboard ???

@williaster
Copy link
Author

williaster commented Nov 21, 2019

@vuvansy1992kt you should be able to just use the emoji picker on mac os

@vuvansy1992kt
Copy link

@vuvansy1992kt you should be able to just use the emoji picker on mac os

Hahaha, thank you, it so funny :v

@OkanSen
Copy link

OkanSen commented Jul 15, 2020

Hi, I'm not sure if this is the right place to post this but here it goes;

I can't seem to find any component names for the Superset dashboard components. I could edit many parts but there are small areas that need further touches. Do you know where I can find the component names such as; div.navbar, .slice_container svg, etc... of the Superset dashboard components?

Thanks in advance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment