When is this applicable?

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()

How-To

Dashboards possess rich functionality. At a high level, users may:

• 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) vertical navigation bar 

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.

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])

Upload the Iris dataset for this example to work as a user-uploaded Flow (modify as needed for other datasets).

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

What to Expect (Validation)

Dashboard generated from example code.

Note how dashboard titles (+ optional descriptions), element titles (+ optional descriptions), and element ratios affect what you see on the page. We recommend developers experiment with combinations of element types and row/column arrangements to see just how flexible Dashboards are in 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].
• For advanced use of Dashboards, refer to the article on how to create a dynamic page. 
  • A practical use of these features is to:
    • Create a dynamic page that accepts a user input (e.g., a selection on a dropdown menu), and
    • Update a Dashboard reflecting the users' selection.