Layout, Pages, and Selects
Laying out your report to make it more readable and understandable

Overview

Although you are you probably analyzing data in a list of sequential steps, it may not the best way to present results -- especially if you are sharing with people who are used to a traditional dashboard or BI tool.
Datapane's report library provides components which allow for more flexible grid-style layouts, multiple pages, tabs, and selects, which allows you to create powerful custom interfaces without knowledge of HTML or CSS.

Grid layouts

If you pass a list of blocks (such as Plot and Table) to a Report, they are -- by default -- laid out in a single column with a row per block. If you would like to customize the rows and columns, Datapane provides a Group component which takes a list of blocks and a number of columns and/or rows and lays them out in a grid.
If we take the example in the earlier tutorial, but want to lay the plot and dataset side-by-side, we can use specify this using Group and specifying the number of columns.
Python
Text Report
simple_report.py
1
import pandas as pd
2
import altair as alt
3
import datapane as dp
4
5
dataset = pd.read_csv('https://covid.ourworldindata.org/data/owid-covid-data.csv')
6
df = dataset.groupby(['continent', 'date'])['new_cases_smoothed_per_million'].mean().reset_index()
7
8
plot = alt.Chart(df).mark_area(opacity=0.4, stroke='black').encode(
9
x='date:T',
10
y=alt.Y('new_cases_smoothed_per_million:Q', stack=None),
11
color=alt.Color('continent:N', scale=alt.Scale(scheme='set1')),
12
tooltip='continent:N'
13
).interactive().properties(width='container')
14
15
dp.Report(
16
dp.Group(
17
dp.Plot(plot),
18
dp.DataTable(df),
19
columns=2
20
)
21
).upload(name='covid_report', open=True)
Copied!
1
```datapane
2
block: Group
3
columns: 2
4
blocks:
5
- block: asset
6
label: plot-1
7
- block: asset
8
label: table-2
9
```
Copied!
If you're generating your plots programmatically or have a lot of plots, you can pass them into the Group block as a list, using the blocks parameter. We can rewrite the previous example as follows :
Python
1
import pandas as pd
2
import altair as alt
3
import datapane as dp
4
5
dataset = pd.read_csv('https://covid.ourworldindata.org/data/owid-covid-data.csv')
6
df = dataset.groupby(['continent', 'date'])['new_cases_smoothed_per_million'].mean().reset_index()
7
8
plot = alt.Chart(df).mark_area(opacity=0.4, stroke='black').encode(
9
x='date:T',
10
y=alt.Y('new_cases_smoothed_per_million:Q', stack=None),
11
color=alt.Color('continent:N', scale=alt.Scale(scheme='set1')),
12
tooltip='continent:N'
13
).interactive().properties(width='container')
14
15
# You could also generate these in a loop/function
16
my_plots = [dp.Plot(plot), dp.DataTable(df)]
17
18
dp.Report(
19
dp.Group(
20
blocks=my_plots,
21
columns=2
22
)
23
).upload(name='covid_report', open=True)
Copied!
As Groupcomponents are components themselves, they are composable, and you can create more custom layers of nested blocks, for instance nesting 2 rows in the left column of a 2 column layout

Customizing width

To customize the width of your report, you can set the report type.

Pages

Reports on Datapane can have multiple pages, which are presented to users as tabs at the top of your report. These can be used similarly to sheets in an Excel document.
To add a page, use the dp.Page block at the top-level of your report, and give it a title with the title parameter.
Pages cannot be nested, and can only exist at the root level of your dp.Report object. If you're using pages, all other blocks must be contained inside a Page block.
Python
Text Report
1
import seaborn as sns
2
import altair as alt
3
import datapane as dp
4
5
titanic = sns.load_dataset("titanic")
6
7
points = alt.Chart(titanic).mark_point().encode(
8
x='age:Q',
9
color='class:N',
10
y='fare:Q',
11
).interactive().properties(width='container')
12
13
dp.Report(
14
dp.Page(
15
title="Titanic Dataset",
16
blocks=["### Dataset", titanic]
17
),
18
dp.Page(
19
title="Titanic Plot",
20
blocks=["### Plot", points]
21
)
22
).upload(name='altair_example_pages')
23
Copied!
1
```datapane
2
block: page
3
title: Titanic Dataset
4
```
5
### Dataset
6
7
```datapane
8
block: asset
9
label: datatable-1
10
```
11
12
```datapane
13
block: page
14
title: Titanic Ploc
15
```
16
### Plot
17
18
```datapane
19
block: asset
20
label: plot-2
21
```
22
"""
Copied!

Tabs and Selects

In addition to top-level pages elements, you can include tabs and dropdown selects inside your reports using the dp.Select block. This allows users to switch between multiple blocks interactively and can even function as a basic filter. It is also useful for providing background context to another block - for instance, to add source code to a plot or a dataset.
The dp.Select block has two modes:
    Tabs are used for less than 5 options - you can override this default by passing in the parameter type=dp.Select.TABS
    Drop downs are used for 5 or more options - you can override this default by passing in the parametertype = dp.Select.DROPDOWN. In addition, a search bar will appear if the block contains more than 10 options.
To set the option names, make sure each block contained inside your dp.Select has a label - see example:
Python
Text Report
1
import seaborn as sns
2
import altair as alt
3
import datapane as dp
4
5
code = '''
6
titanic = sns.load_dataset("titanic")
7
8
dp.Report(
9
dp.Select(blocks=[
10
dp.Table(titanic.describe(), label='Data Description'),
11
dp.DataTable(titanic, label='Whole Dataset'),
12
dp.Code(code, label='Source code')
13
])
14
).upload(name='altair_example_select')
15
'''
16
17
dp.Report(
18
"# Titanic overview",
19
dp.HTML('<html><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/RMS_Titanic_3.jpg/1599px-RMS_Titanic_3.jpg" style="height:400px;display:flex;margin:auto"></img></html>'),
20
dp.Select(blocks=[
21
dp.Table(titanic.describe(), label='Data Description'),
22
dp.DataTable(titanic, label='Whole Dataset'),
23
dp.Code(code, label='Source code')
24
])
25
).upload(name='altair_example_select')
26
Copied!
1
```datapane
2
block: Select
3
blocks:
4
- block: asset
5
name: table-1
6
label: Data Description
7
- block: asset
8
name: table-2
9
label: Whole Dataset
10
- block: code
11
label: Source code
12
value: |
13
titanic = sns.load_dataset("titanic")
14
15
dp.Report(
16
dp.Select(blocks=[
17
dp.Table(titanic.describe(), label='Data Description'),
18
dp.DataTable(titanic, label='Whole Dataset'),
19
dp.Code(code, label='Source code')
20
])
21
).upload(name='altair_example_select')
22
```
Copied!
Last modified 21d ago