Quarto Dashboards | Charles Teague | Posit
Quarto has a host of exciting new features in release v1.4, with one of the most anticipated being Quarto Dashboards. In a recent internal presentation, Posit's Charles Teague demonstrated the new capabilities and we wanted to share it with community. Please note that you can use this feature today, but to access it you need to be running on a Quarto prerelease build dated November 6, 2023, or later. We also encourage users to review our pre-release documentation which offers additional information and examples of the dashboard functionality. Quarto Pre-release builds: https://quarto.org/docs/download/prerelease.html Quarto Dashboard Documentation: https://quarto.org/docs/dashboards/
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Quarto Dashboards is a new feature that is coming to Quarto in the 1.4 release, and it's something that we really decided to add on the heels of the most recent Posit conference, and so it wasn't originally on the plan for 1.4, but we decided to take a little bit of extra time and see if we could squeeze it in.
Obviously the goal of Quarto Dashboards is pretty simple, make it easy to build compelling interactive dashboards using R, Python, Julia, Observable, and very much sort of heritage of Flex Dashboard, so very much sort of bring Flex Dashboard and that type of experience into Quarto, incorporate everything we've learned, everything the company has built, and try to bring that together into a really great experience for our users.
Dashboards in Quarto are pretty straightforward. They're basically composed of cards, so you can think about cards as just sort of the units, the atomic units that you're arranging in a dashboard, and you arrange those cards into rows and columns to lay them out, and then you can use things like pages, tab sets, and sidebars to sort of incorporate more advanced layout, to incorporate controls and other things that might need to appear in the dashboard.
But with those simple building blocks, it's actually pretty easy to build some cool dashboards.
Building a simple dashboard
So let's build a simple dashboard. Let's see if we can do this. So let's just start from scratch. I've got a QMD that I've got going here, and I'm just going to start with the front matter, my dashboard, and let's make it format dashboard.
And then let's just put in, for now, we're going to explore my lack of R programming skills, but let's just put in a simple static plot to start, and then let's have a look at what we get.
And so you can see now I've gotten, okay, I guess I've gotten, you know, a little title bar, I've gotten one big card, and so you can see, you know, the treatment is already a little different than just a simple web page, because we're sort of filling the whole screen.
And in fact, as we add elements to this dashboard, like let's add a second plot to this dashboard, it sort of knows enough to lay things out appropriately. So it just made two different cards here, and the cards contain the visualization.
But of course, I may want to start to do some cooler things to sort of tune this up a little bit. Let's start by putting a title on some of these cards. So let's go title, you know, cars plot, and then we'll add a title down here, MT cars plot.
Arranging layouts with headings
I wonder if those might look better side by side. Well, in Quarto dashboards, you use headings to arrange things. And so by adding a simple heading, I can basically say, okay, I'd like to, you know, I guess maybe maybe the way to explain it is to do this is to say, you know, dashboards have sort of an orientation, which by default is rows.
So by default, it's saying just everything that shows up is a row, I could change that and say, actually, like, let's make everything columns instead. And so when I do that, we'll actually get the layout now into columns.
Similarly, if I said, let's go back to rows, just a good old basic orientation that we had. If I said I want to make a row explicitly, I can add a heading and say, here's a row that I made. And so I made a row, and the row has two things side by side in it, it'll get even easier to see if I do something like make another row and put some content in it.
So now I have made a dashboard that basically has here, a row with some content in it, and then here a row with the plots in it. And you can see that looks very straightforward.
And so that gives you the basic idea of arranging things now, you know, you can keep going. So you know, I could say, I'm going to make a column inside here. And then I'm going to make another column. And I will put another plot inside that column. So I'll put another plot cars in here.
And so you can see you can you can make some pretty fancy layouts with some pretty simple constructs with just using headings to arrange content.
And so you can see you can you can make some pretty fancy layouts with some pretty simple constructs with just using headings to arrange content.
Tab sets, pages, and navigation
But you know, maybe maybe it's, you want to do something cooler, you know, so for example, maybe instead of instead of putting these side by side like that, we want to make them in tabs. So we can just add a tab set to our column heading right there. And now we've got them in tabs. So that's pretty cool.
You know, but maybe we don't even want them in tabs, maybe we want them on separate pages. So why don't we put a heading one right here, and we'll make a page and a page, page two. And now we've arranged them on completely standalone pages. And in fact, we could have very fancy layouts on each of these two pages.
And so you can see the, you know, some some important concepts at work here. So one important concept is these code cells are very, very primary. So these code cells are automatically making cards. And so that means you don't really have to do a lot of work. You know, you basically can make code cells that create visualizations, and then place some simple markdown around the outside to provide the layout and orientation.
The second is you can see, you know, the the headings and the markdown that you need to add to create these layouts is really straightforward, and hopefully very, very intuitive.
So that's gives you some of the basic ideas. Now there's, of course, there's more you can do. You know, you can do things like add additional navigation. So I could say like, I want a Twitter sharing link. And then I want a GitHub link to the repo. And then, you know, we'll automatically do the right thing and figure out your GitHub URL and put a sharing URL. So you can very quickly get some pretty nice things.
Value boxes
There are more things you can do than just cards. So for example, you know, you could do a row that's got what are called value boxes. Value boxes, you probably are familiar with from bslib. But if I want to make a value box here, I can make a code cell. And then I can just say, this code cell is a value box. And then this code cell really just needs to return a list that describes what we want to show here.
So let's just say my value is 26. The color is going to be red. And let's even put an icon on it for like envelope. And then let's make two of those just because it'll look a little cooler. Now we've got a red and a green value box that we've created. And there they are. They've showed up just as you'd expect.
And what's great about this is now these value boxes, of course, since they're built programmatically, can be responsive. You know, so obviously, they can be red and green. The icons can update to reflect the status. And so it's super straightforward now to make these types of arrangements using this Quarto dashboard.
Dashboards in Jupyter notebooks
Now, I think the other thing to think about and one other area that we focused on was trying to create experiences that were great inside notebooks as well. And so here I've got a Jupyter notebook. I was showing you a Quarto markdown document. Now I've got a Jupyter notebook that's building a dashboard as well.
And part of what's great about using the cells as sort of atomic units, as you can see, this notebook, which basically makes a pretty nice dashboard, is, you know, has some markdown cells, but really is just a set of code cells with a little bit of markdown around it to arrange it.
And if we actually open up a terminal here and actually preview this, Quarto preview Gapminder. So if we actually preview this Jupyter notebook, we will see here's the dashboard that that creates. And so, you know, you can go and create pretty great authoring experiences inside notebooks even for building these really nice and robust Quarto dashboards.
Interactivity and Shiny
And so I think the last little bit for me to talk about is just give you a quick look, a preview of some interactivity. So let me just get back to so a couple examples of interactive dashboards.
And so, you know, obviously the static dashboards that I showed you help you understand the layout. But here's a nice dashboard that shows some of the interactivity and how straightforward it is to incorporate things like Shiny into these dashboards. So you know, this is all pretty cool.
But what's really cool is when you look at the actual source behind it, and you see how straightforward the source is, we've made a sidebar, we have the main plot, we have the data, the data page, and then we've just mixed some code cells in there that create the various inputs that actually render the plot. And all of that works just beautifully.
And so it's really straightforward to make both fancy layouts and also pretty impressive interactive dashboards.
And so it's really straightforward to make both fancy layouts and also pretty impressive interactive dashboards.
As I said, this is coming in Quarto 1.4. I think we anticipate that early next year. And I wanted to highlight, I think, one other thing, which is over the past two weeks, we've been working hard on this feature. But the rest of the company has chipped in in a great way by helping us both test and generate a huge number of sample dashboards. We appreciate everyone's effort and support doing that.
I have found a number of really great bugs as a result of all that testing, a few of which are still open, but I'm getting through them. And we also have probably 20 great samples on the Quarto website, most of which were contributed by other members of the company. So thanks to all for your support as we sort of grind really hard to try to get this into Quarto 1.4 unexpectedly. So thanks all. And hopefully people like what they see.
