Layouts

This page explains the multiple layouts components and all the options to control the layout of the dashboard.

There are 4 main components of Jupyter-flex Dashboard: Pages, Sections, Cards and Cells and they have that ordered hierarchy meaning that Pages contain one or more Sections, Sections contain or or multiple Cards and Cards contain one or multiple cells.

Cells are pretty self explanatory as they are the same as in Jupyter, it can be Markdown or Code cells and can contain one output.

Cards¶

A Card is an object that holds one or more Cells, these can be markdown cells or code cells that have outputs such as plots, text, widgets and more.

To define a new Card you use a level-3 markdown header (###). Each card belongs in a Section and one Section can have one or more Cards.

Any tagged Cell will be added to the current Card until a new Card, Section or Page is defined.

The components of a Card are:

1. Title: Based on the value of level-3 markdown header (###) used to define it
2. One (or more) code cells tagged with body that contain outputs
3. One (or more) markdown cells tagged with body that contain some narrative for the dashboard
4. Footer: one or more markdown or code cells tagged with footer
5. Help modal: one or more markdown or code cells tagged with help

For example take this notebook with one Card, two plots and some text. Note that code cells get expanded to ocupy all the space in the Card while markdown cells get just use the space they need to display its content.

In [1]:

import plotly
import plotly.express as px

In [2]:

df = px.data.iris()

In [3]:

### Card header

In [4]:

body

"This is a markdown cell, **all** *regular* syntax ~~should~~ works."

Out[4]:

'This is a markdown cell, **all** *regular* syntax ~~should~~ works.'

In [5]:

body

"This is another markdown cell, you can add multiple markdown cells and the main chart is expanded."

Out[5]:

'This is another markdown cell, you can add multiple markdown cells and the main chart is expanded.'

In [6]:

body

fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.show()