Groups and Grid Layouts¶

`Group` ¶

If you pass a list of blocks (such as Plot and Table) to an app, 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, Arakawa provides a Group block which takes a list of blocks and a number of columns and lays them out in a grid.

Tip

As Group blocks are blocks 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

Parameters:

Name	Type	Description	Default
`*arg_blocks`	`BlockOrPrimitive`	Group to add to report	`()`
`blocks`	`list[BlockOrPrimitive] \| None`	Allows providing the report blocks as a single list	`None`
`name`	`str \| None`	A unique id for the blocks to aid querying (optional)	`None`
`label`	`str \| None`	A label used when displaying the block (optional)	`None`
`widths`	`list[int \| float] \| None`	A list of numbers representing the proportion of vertical space given to each column (optional)	`None`
`valign`	`VAlign`	The vertical alignment of blocks in the Group (default = VAlign.TOP)	`TOP`
`columns`	`int`	Display the contained blocks, e.g. Plots, using n columns (default = 1), setting to 0 auto-wraps the columns	`1`

Note

Group can be passed using either arg parameters or the blocks kwarg, e.g. ar.Group(plot, table, columns=2) or ar.Group(blocks=[plot, table], columns=2).

Simple 2 Column Grid¶

ar.Group(ar.Text("⬅️ Left side"), ar.Text("➡️ Right side"), columns=2)

Plot and DataTable in a 2 Column Grid¶

import altair as alt
from vega_datasets import data

df = data.iris()
plot = (
    alt.Chart(df)
    .mark_point()
    .encode(x="petalLength:Q", y="petalWidth:Q", color="species:N")
)

ar.Group(ar.Plot(plot), ar.DataTable(df), columns=2)

Populating a Grid With a List of Blocks¶

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:

import altair as alt
from vega_datasets import data

df = data.iris()
plot = (
    alt.Chart(df)
    .mark_point()
    .encode(x="petalLength:Q", y="petalWidth:Q", color="species:N")
)

# You could also generate these in a loop/function
my_plots = [ar.Plot(plot), ar.DataTable(df)]

ar.Group(blocks=my_plots, columns=2)