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:

PreviousFree EchartsNextFeatures & Navigation

Last updated