Bento box
The bento box is a way for the user to group charts together with a more fine tuned way of managing the sizes of the components. To group the charts the function s.plt.set_bentobox
must be used, and to stop grouping the elements the user has to call the function s.plt.pop_out_of_bentobox
. When defining the bento box the cols size and rows size can be defined which will will set the size of the bentobox in the main grid.
Some behavior considerations:
The bento box has it's own grid, and this grid has a different distribution to the main grid:
24 columns - NO gap
Row size 16 px height - NO gap
If components do not define the
rows_size
parameter, they will have:Indicators components will have, by default, eight rows.
Other components will have, by default, 14 rows.
If components do not define the
cols_size
parameter, they will have:Indicators comps will have, by default, 12 cols.Other components will have, by default, 24 cols.
Example:
s.plt.set_bentobox(cols_size=8, rows_size=3)
indicator_data = {
"description": "",
"title": "State",
"value": "Open",
}
s.plt.indicator(
data=indicator_data, order=0,
rows_size=8, cols_size=12,
)
s.plt.indicator(
data=indicator_data, order=1,
rows_size=8, cols_size=12,
)
s.plt.bar(
data=[
{'date': dt.date(2021, 1, 1), 'x': 5, 'y': 5},
{'date': dt.date(2021, 1, 2), 'x': 6, 'y': 5},
{'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5},
{'date': dt.date(2021, 1, 4), 'x': 7, 'y': 5},
{'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5},
],
x='date', order=2, rows_size=24, cols_size=24,
)
s.plt.pop_out_of_bentobox()
And create stuff such as:

Last updated
Was this helpful?