Skip to content

Grid#

GridInterface #

Specs for Grid Interface.

Grid #

Grid(*items: Row | FluidRow | LayoutItem)

Organize dashboard content with vertical grid structure.

The Grid class is component in a dashboard layout, allowing users to organize content using a vertical grid structure. It provides a way to arrange widgets, rows, and selectable sections.

Constructor for Grid.

Parameters:

Name Type Description Default
items Row | FluidRow | LayoutItem

items to add to grid. Can be widgets, rows or selectable sections (e.g tabs).

 ()

Examples:#

Create Grid with widget 
import pandas as pd

from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.widgets import maps

data = pd.DataFrame(
    data=[{"region": "PT", "value": 10}, {"region": "GB", "value": 100}]
)

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(maps.Geo(data=data)),
)

Result: Grid with widget

Create Grid with multiple widgets 
import pandas as pd

from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.widgets import maps

data = pd.DataFrame(
    data=[{"region": "PT", "value": 10}, {"region": "GB", "value": 100}]
)

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(
        maps.Geo(data=data),
        maps.Geo(data=data),
    ),
)

Result: Grid with multiple widgets

Row #

Row(*items: RowItem, height: int | float | None = None)

Organize and group content horizontally within a vertical grid layout.

The Row class represents a row within a vertical grid layout, allowing users to organize and group content horizontally.

Constructor for Row.

Parameters:

Name Type Description Default
*items RowItem

Content that is going to be added inside the Row, if the item is a Column, it will be added to the row, if the item is a Widget or a Grid, it will be added to a Column.

 ()
height int | float | None

Custom height for the row.

 None

Examples:#

Create Row with widget 
import pandas as pd

from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.widgets import maps

data = pd.DataFrame(
    data=[{"region": "PT", "value": 10}, {"region": "GB", "value": 100}]
)

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(
        layout.Row(maps.Geo(data=data))
    ),
)

Result: Row with widget

Create Row with multiple widgets 
import pandas as pd

from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.widgets import maps

data = pd.DataFrame(
    data=[{"region": "PT", "value": 10}, {"region": "GB", "value": 100}]
)

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(
        layout.Row(
            maps.Geo(data=data),
            maps.Geo(data=data),
        )
    ),
)

Result: Column with widget

Create Row with Tab Section and Card 
import pandas as pd

from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.widgets import maps

data = pd.DataFrame(
    data=[{"region": "PT", "value": 10}, {"region": "GB", "value": 100}]
)

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(
        layout.Row(
            layout.TabSection(
                layout.Tab(
                    label="One Widget",
                    content=maps.Geo(data=data),
                )
            ),
            layout.Card(
                header=layout.Header(title="My Map"),
                content=maps.Geo(data=data),
            ),
        )
    ),
)

Result: Row with Tab Section and Card

Column #

Column(*, content: LayoutItem, width: int | None = None)

Organize and group content vertically within a vertical grid layout.

The Column class represents a column within a vertical grid layout, providing a way to organize and group content vertically.

Constructor for Column.

Parameters:

Name Type Description Default
content LayoutItem

Representing the base class for items in a dashboard layout. It's a common type that other layout-related classes inherit from.

 required
width int | None

Sets the column width, value between 3 and 12. If value is None the width will be set automatically based on the number of columns in the row.

 None

Examples:#

Create Column with widget 
import pandas as pd

from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.widgets import maps

data = pd.DataFrame(
    data=[{"region": "PT", "value": 10}, {"region": "GB", "value": 100}]
)

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(
        layout.Row(
            layout.Column(content=maps.Geo(data=data))
        )
    )
)

Result: Column with widget

Create Column with default width 
import pandas as pd

from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.widgets import maps

data = pd.DataFrame(
    data=[{"region": "PT", "value": 10}, {"region": "GB", "value": 100}]
)

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(
        layout.Row(
            layout.Column(content=maps.Geo(data=data)),
            layout.Column(content=maps.Geo(data=data)),
        )
    ),
)

Result: Column with default width

Create Column with custom width 
import pandas as pd

from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.widgets import maps

data = pd.DataFrame(
    data=[{"region": "PT", "value": 10}, {"region": "GB", "value": 100}]
)

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(
        layout.Row(
            layout.Column(
                content=maps.Geo(data=data),
                with=4,
            ),
            layout.Column(
                content=maps.Geo(data=data),
                width=8,
            ),
        )
    ),
)

Result: Column with custom width

FluidRow #

FluidRow(
    *items: Widget,
    vertical_alignment: VerticalAlignment = TOP,
    horizontal_alignment: FluidHorizontalAlignment = CENTER,
)

Enables flexible and responsive content alignment in a vertical grid layout.

The FluidRow class represents a fluid row within a vertical grid layout, allowing for flexible and responsive content alignment.

Constructor for FluidRow.

Parameters:

Name Type Description Default
items Widget

item within the FluidRow must be compatible.

 ()
vertical_alignment VerticalAlignment

Fluid Row vertical alignment option. TOP, MIDDLE or BOTTOM, available.

 TOP
horizontal_alignment FluidHorizontalAlignment

Fluid Row horizontal alignment option. LEFT, CENTER, RIGHT or STRETCH available.

 CENTER

Important: Only the following widgets support being used inside a FluidRow: button, search, select, tile, tile matrix, and toggle.

Examples:#

Create FluidRow with widget 
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.widgets import tile

data = {"text": "Person A", "number": 29}

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(
        layout.FluidRow(
            tile.Tile(data=data),
        )
    ),
)

Result: Column with widget

Create FluidRow with multiple widgets 
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.widgets import tile

data = {"text": "Person A", "number": 29}

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(
        layout.FluidRow(
            tile.Tile(data=data),
            tile.Tile(data=data),
        )
    ),
)

Result: FluidRow with multiple widgets

Create FluidRow with left alignment 
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.dashboard import Dashboard
from engineai.sdk.dashboard.enum import align
from engineai.sdk.dashboard.widgets import tile

data = {"text": "Person A", "number": 29}

Dashboard(
    workspace_slug="my-workspace",
    app_slug="my-app",
    slug="first-dashboard",
    content=layout.Grid(
        layout.FluidRow(
            tile.Tile(data=data),
            tile.Tile(data=data),
            horizontal_alignment=align.FluidHorizontalAlignment.LEFT,
        )
    ),
)

Result: FluidRow with left alignment

Types#

RowItem module-attribute #

RowItem = RowItemStrict | LayoutItem

RowItemStrict module-attribute #

RowItemStrict = Column