Dashboard¶

Dashboard elements provide flexible grid-based layouts for organizing multiple visualizations and components.

Dashboard Class¶

Dashboard ¶

Dashboard(content: list[Row | Column | DASHBOARD_ELEMENT], title: str = '', description: str = '', orientation: Optional[DashboardOrientation] = None, show_title: bool = True, show_description: bool = True, filters: Optional[list[InputElement]] = None, updater: Optional[Callable] = None)

NOTICE: As of version 1.23.0 the Dashboard element is depreciated. It is recommended to use :class:~virtualitics_sdk.page.card.Card elements in place of Dashboard elements.

A Dashboard is a way to lay out certain elements on a page. This can be done by placing those elements in rows or columns. Only Plots, Images, Infographics, and Tables can be put into Dashboards.

Parameters:

content (list[Row | Column | DASHBOARD_ELEMENT]) –

The list or Rows or elements that makes up a dashboard. Any lone elements in this list will be put into their own row.
title (str, default: '' ) –

The title of the dashboard, defaults to "".
description (str, default: '' ) –

The description of the dashboard, defaults to "".
orientation (Optional[DashboardOrientation], default: None ) –

(deprecated) the Dashboard's orientation, defaults to None.
show_title (bool, default: True ) –

whether to show the title of the dashboard, defaults to True.
show_description (bool, default: True ) –

Whether or now to show the description of a dashboard, defaults to True.
filters (Optional[list[InputElement]], default: None ) –

A list of input elements that can be used as input to the dashboard's updater function, defaults to None.
updater (Optional[Callable], default: None ) –

A function to provide dynamic updates to the dashboard which can use inputs from the dashboard filters, defaults to None.

Raises:

ValueError –

If the dashboard has no content.
ValueError –

If all rows do not have the same width.

update_item ¶

update_item(element_title: str, new_element: DASHBOARD_ELEMENT)

This function updates an element of the dashboard, which can be used in conjunction with the dashboard's updater function to provide dynamic page updates.

Parameters:

element_title (str) –

The title of the element to be updated.
new_element (DASHBOARD_ELEMENT) –

The new element that will replace currently existing element.

Basic Usage¶

from virtualitics_sdk import Dashboard, Row, Column, DashboardOrientation

# Create a dashboard with rows
dashboard = Dashboard(
    id="my_dashboard",
    title="Analytics Dashboard",
    orientation=DashboardOrientation.VERTICAL,
    content=[
        Row(content=[plot1, plot2]),
        Row(content=[table1])
    ]
)

Layout Components¶

Row¶

Row ¶

Row(elements: list[Element | 'virtualitics_sdk.elements.dashboard.Column'], ratio: Optional[list[int | float]] = None)

A Row in a :class:~virtualitics_sdk.elements.dashboard.Dashboard. A :class:~virtualitics_sdk.elements.dashboard.Dashboard is fundamentally a list of :class:~virtualitics_sdk.elements.dashboard.Row s.

Parameters:

elements (list[Element | 'virtualitics_sdk.elements.dashboard.Column']) –

A list of elements in the row. This can be any element like a :class:~virtualitics_sdk.elements.dropdown.Dropdown element or an inner :class:~virtualitics_sdk.elements.dashboard.Column inside of that Row.
ratio (Optional[list[int | float]], default: None ) –

The relative widths of the elements inside the :class:~virtualitics_sdk.elements.dashboard.Row, defaults to all elements having the same width.

Raises:

ValueError –

If the given ratio array is not equal the number of elements.
ValueError –

If all columns in that row do not have the same height.

Arrange elements horizontally:

from virtualitics_sdk import Row

row = Row(
    content=[element1, element2, element3]
)

Column¶

Column ¶

Column(elements: list[Element | 'virtualitics_sdk.elements.dashboard.Row'], ratio: Optional[list[int | float]] = None)

A Column vertically contains elements within a :class:~virtualitics_sdk.elements.dashboard.Row. A column can also contain inner rows.

Parameters:

elements (list[Element | 'virtualitics_sdk.elements.dashboard.Row']) –

The Elements or :class:~virtualitics_sdk.elements.dashboard.Rows within this :class:~virtualitics_sdk.elements.dashboard.Column.
ratio (Optional[list[int | float]], default: None ) –

The relative heights of all of the elements in the :class:~virtualitics_sdk.elements.dashboard.Column, defaults to equal heights.

Raises:

ValueError –

If the given ratio array is not equal the number of elements.
ValueError –

If all rows in that column do not have the same width.

Arrange elements vertically:

from virtualitics_sdk import Column

column = Column(
    content=[element1, element2, element3]
)

Dashboard Orientations¶

DashboardOrientation ¶

Layout Examples¶

Two-Column Layout¶

dashboard = Dashboard(
    id="two_column",
    title="Side-by-Side Comparison",
    orientation=DashboardOrientation.HORIZONTAL,
    content=[
        Column(content=[plot1, table1]),
        Column(content=[plot2, table2])
    ]
)

Grid Layout¶

# 2x2 grid
dashboard = Dashboard(
    id="grid",
    title="Metrics Grid",
    orientation=DashboardOrientation.VERTICAL,
    content=[
        Row(content=[metric1, metric2]),
        Row(content=[metric3, metric4])
    ]
)

Mixed Layout¶

# Full-width header, then two columns
dashboard = Dashboard(
    id="mixed",
    title="Complex Dashboard",
    orientation=DashboardOrientation.VERTICAL,
    content=[
        Row(content=[header_plot]),  # Full width
        Row(content=[
            Column(content=[plot1, plot2]),  # Left column
            Column(content=[table1, stats])  # Right column
        ])
    ]
)

Nested Dashboards¶

# Create sub-dashboards
left_panel = Dashboard(
    id="left_panel",
    title="Analysis",
    orientation=DashboardOrientation.VERTICAL,
    content=[
        Row(content=[plot1]),
        Row(content=[plot2])
    ]
)

right_panel = Dashboard(
    id="right_panel",
    title="Details",
    orientation=DashboardOrientation.VERTICAL,
    content=[
        Row(content=[table1]),
        Row(content=[table2])
    ]
)

# Combine into main dashboard
main_dashboard = Dashboard(
    id="main",
    title="Main Dashboard",
    orientation=DashboardOrientation.HORIZONTAL,
    content=[left_panel, right_panel]
)

Complete Example¶

from virtualitics_sdk import (
    Dashboard, Row, Column, DashboardOrientation,
    PlotlyPlot, Table, Infographic, InfographData
)
import plotly.express as px

class DashboardStep(Step):
    def run(self, flow_metadata):
        df = self._inLink.dataset.data

        # Create visualizations
        sales_plot = PlotlyPlot(
            id="sales_plot",
            figure=px.line(df, x='date', y='sales', title='Sales Trend')
        )

        distribution_plot = PlotlyPlot(
            id="dist_plot",
            figure=px.histogram(df, x='category', title='Category Distribution')
        )

        data_table = Table(
            id="data_table",
            data=df,
            title="Raw Data"
        )

        metrics = Infographic(
            id="metrics",
            title="Key Metrics",
            data=[
                InfographData(label="Total Sales", value=f"${df['sales'].sum():,.0f}"),
                InfographData(label="Avg Order", value=f"${df['sales'].mean():,.0f}")
            ]
        )

        # Assemble dashboard
        dashboard = Dashboard(
            id="analytics_dashboard",
            title="Sales Analytics",
            orientation=DashboardOrientation.VERTICAL,
            content=[
                Row(content=[metrics]),  # Metrics at top
                Row(content=[  # Plots side by side
                    Column(content=[sales_plot]),
                    Column(content=[distribution_plot])
                ]),
                Row(content=[data_table])  # Table at bottom
            ]
        )

        return Page(
            title="Dashboard",
            sections=[
                Section(
                    title="Analytics",
                    cards=[Card(title="Overview", content=[dashboard])]
                )
            ]
        )

Responsive Behavior¶

Dashboards automatically adapt to screen sizes:

Desktop: Full grid layout as specified
Tablet: Columns may stack
Mobile: All elements stack vertically

Best Practices¶

Logical Grouping: Group related visualizations together
Consistent Sizing: Use similar-sized elements in rows
Not Too Dense: Don't overcrowd dashboards (3-6 elements max)
Hierarchy: Use rows and columns to show relationships
Performance: Limit number of complex plots in single dashboard
Testing: Preview on different screen sizes

Dashboard¶

Dashboard Class¶

Dashboard ¶

update_item ¶

Basic Usage¶

Layout Components¶

Row¶

Row ¶

Column¶

Column ¶

Dashboard Orientations¶

DashboardOrientation ¶

Layout Examples¶

Two-Column Layout¶

Grid Layout¶

Mixed Layout¶

Nested Dashboards¶

Complete Example¶

Responsive Behavior¶

Best Practices¶

See Also¶