When you would like to arrange displayed tables, charts, and any other content on a Page in a manner that is easily consumable (minimal scrolling, clean formatting, etc.), we recommend using a Dashboard.

Method: predict_backend.page.elements.dashboard.Dashboard()

Creating Dashboards

Dashboards possess rich functionality. At a high level, you can:

• Display multiple Elements (image, infographic, plot, or table) on a single Page.

• Arrange Elements in Rows or Columns (optionally specifying relative widths/heights, respectively).

• Access Dashboards embedded in Flows by selecting “Dashboards” in the left toolbar on Virtualitics Predict's Home page. 

As an example, let’s create a dashboard with the following components:

• One table (displaying raw data)

• Two bar charts of equal width arranged side-by-side (i.e., in the same row)

The table and pair of bar charts will appear in their own rows in the Dashboard.

Note that in the ExampleDashboard class instance, Step type is set to StepType.DASHBOARD. This is necessary for Virtualitics Predict to find and display Dashboards on the “Dashboards" page.

from predict_backend.flow.flow import Flow
from predict_backend.flow.step import Step, StepType
from predict_backend.page import Card, Page, PageType, Section
from predict_backend.page.elements import Dashboard, DataSource, Table
from predict_backend.page.elements.dashboard import Column, Row
from predict_backend.store.store_interface import StoreInterface
from predict_backend.utils.viz_utils import create_bar_plot

class DataUpload(Step):
   def run(self, flow_metadata):
       pass

class ExampleDashboard(Step):
   def run(self, flow_metadata):
       # Get store interface/current page
       store_interface = StoreInterface(**flow_metadata)
       page = store_interface.get_page()

       # Get data (assume it was uploaded by the user in a previous step)
       data = store_interface.get_element_value(
           data_upload_step.name,
           "Iris Dataset"
       )

       # Create table
       table = Table(data, title = "Iris Dataset")

       # Create bar chart (#1)
       width_bar_chart = create_bar_plot(
           data,
          "variety",
          "sepal.width",
          "Sepal Width Ranges"
       )

        # Create bar chart (#2)
        length_bar_chart = create_bar_plot(
             data,
             "variety",
             "sepal.length",
             "Sepal Length Ranges"
       )

        # Create dashboard
        dashboard = Dashboard(
            [
                table,
                Row([width_bar_chart, length_bar_chart]),
            ]
       )

       # Add dashboard to section, update page
       page.add_content_to_section(
           dashboard,
           "Dashboard Example",
           card_title = "Dashboard with a table and two charts"
        )
        store_interface.update_page(page)

# Define the flow
dashboard_flow = Flow(
    "Example Flow with Dashboard",
    "See how dashboards work!"
)

# Data Upload
data_upload_card = Card(
    "Upload",
    [
        DataSource(
            "Iris Dataset", 
            ["csv"], 
            description="Upload the iris dataset"
        )
    ]
)

data_upload_content = Section("Upload the iris dataset", [data_upload_card])
data_upload_page = Page("Data Upload", PageType.INPUT, {}, [data_upload_content])
data_upload_step = DataUpload(
    "Data Upload",
    "Upload the iris dataset", 
    "Data Ingestion",
    StepType.INPUT,
    data_upload_page
)

# Dashboard
dashboard_content = Section("Dashboard Example", []) 
dashboard_page = Page("Creating Dashboards in Predict", PageType.RESULTS, {}, [dashboard_content])
dashboard_step = ExampleDashboard(
    "Tables and Charts",
    "View a simple dashboard",
    "Creating Dashboards",
    StepType.DASHBOARD, # note step type
    dashboard_page
)

# Chain steps together to create the flow
dashboard_flow.chain([data_upload_step, dashboard_step])

What to Expect

Note how dashboard titles (+ optional descriptions), element titles (+ optional descriptions), and element ratios affect what you see on the page.

We recommend you experiment with combinations of element types and row/column arrangements to see just how flexible Dashboards are in Virtualitics Predict. 

Additional Details

• Dashboards are fundamentally lists of rows. 

• To modify the relative sizes of elements within rows or columns, pass a list of integers to the ratio parameter in predict_backend.page.elements.dashboard.Row (or Column). For example, if you want to display two charts in a column but want the height of the first chart to be three times larger than that of the second chart, set ratio = [3,1]