Reports are comprised of multiple Blocks, which wrap up Python objects, such as Pandas DataFrames, visualisations, and Markdown. Datapane also includes interactive layout blocks to add tabs, pages, and selects to your reports.
Blocks can be combined together and nested. For instance, you can pass multiple plots into a
Select to provide an interactive dropdown. This makes it simple to assemble complex, reusable interfaces and reports.
You can think of blocks as similar to HTML Elements / Tags, but specialized on creating data-driven reports
There are two main types of Blocks provided by default in Datapane:
- Display Blocks display data and visualizations, such as a Plot (dp.Plot) or a DataTable (dp.DataTable). They take Python objects, such as Panda DataFrames, and automatically convert them into a component that can be viewed in your report.
- Layout Blocks can be used to layout other Blocks. For instance,
dp.Groupcan group blocks together in columns, or
dp.Selectallows a user to select between multiple blocks. They take other Blocks as their input and lay them out to help build complex and visually informative layouts.
Below is a simple example that demonstrates building up a collection of blocks, including BigNumber to display high-level data, a Plot block, and multiple tabs and columns.
# Import libraries import datapane as dp import altair as alt from vega_datasets import data # Load the data from vega_datasets source = data.cars() # Create an interactive Altair chart plot1 = ( alt.Chart(source) .mark_circle(size=60) .encode( x="Horsepower", y="Miles_per_Gallon", color="Origin", tooltip=["Name", "Origin", "Horsepower", "Miles_per_Gallon"], ) .interactive() ) report = dp.Blocks( dp.Page( title="Plots", blocks=[ dp.Formula("x^2 + y^2 = z^2"), dp.Group( dp.BigNumber(heading="Number of percentage points", value="84%", change="2%", is_upward_change=True), dp.BigNumber(heading="Simple Statistic", value=100), columns=2, ), dp.Select( dp.Plot(plot1, label="Chart"), dp.HTML( """ <iframe allowfullscreen="" class="giphy-embed" frameborder="0" height="480" src="https://giphy.com/embed/7NoNw4pMNTvgc" width="480"></iframe><p><a href="https://giphy.com/gifs/content-7NoNw4pMNTvgc">via GIPHY</a></p> """, label="HTML + GIF", ), ), ], ), dp.Page(title="Data", blocks=[dp.DataTable(source, label="Data")]), ) dp.save_report(report, path='report.html')
App saved to ./report.html