This document is a guided walkthrough of the “Persona Based Dashboards” tutorial Flow. In this Flow we demonstrate how the Virtualitics AI Platform can be used to create hyper-personalized dashboards that meet the unique needs of any end user. In this tutorial we are creating dashboards that present insights on invoice data for a UK-based e-commerce company.

It is recommended that you open this Flow in the Virtualitics AI Platform and progress through it as you follow this walkthrough. Only a subset of the code used to build the Flow can be found in this walkthrough, the full script can be found here: persona_dashboards.py

The data for this walkthrough can be found here: ecommerce_dashboard_data.csv and was sourced from Kaggle.

If this is your first introduction to Virtualitics AI Platform Flows, also consider the “Hello World!” tutorial Flow. It is our most beginner-oriented tutorial Flow and primarily focuses on the core aspects of Flow development.

Constructing the Flow

When creating flow scrips, we recommend organizing your file in the following order:

1. Imports
2. Step Definitions
3. Flow and Pages Creation

This sequential organization can be seen in the full script for this flow provided in the section above. However, for the purpose of this walkthrough, we will go through each step and its corresponding page together as it will make for easier reading.

Imports

We begin every flow by importing our key classes, which include Card, Section, Page, and Step. We also import the various Elements we’ll be using.

# Import predict flow classes
from predict_backend.flow.flow import  Flow
from predict_backend.flow.step import Step, StepType
from predict_backend.page import Page, PageType,  Section, Card
from predict_backend.store.store_interface import StoreInterface
from predict_backend.utils.asset import AssetType
from predict_backend.validation.dataset import Dataset

You will also need to import:

• Element and plot types from the Virtualitics SDK
• Packages you’ll use for data processing, such as NumPy and Pandas

Create Flow Object

Here, we create our actual Flow object and can also assign an image to be associated with it on the Virtualitics AI Platform homepage. See this article for more guidance on setting Flow tile images.

# Instantiate flow and assign image
tile_image_link = "https://predict-tutorials.s3-us-gov-west-1.amazonaws.com/persona_based_dashboards_tile.jpeg"
persona_dashboards = Flow(
   name="Persona Based Dashboard", 
   description="New to writing flows in the Virtualitics AI Platform? Check out this tutorial flow.",
   image_path=tile_image_link
)

Our Flow can be seen here on the Virtualitics AI Platform home page.

Build Steps and Pages

Steps are the primary building blocks of a flow. They orchestrate all backend and frontend tasks performed on each page. We will now go through each of this Flow’s steps and their corresponding pages:

1. Data Upload
2. Executive Dashboard
3. Operational Dashboard

1. Data Upload

In this step, we use the DataSource element to provide the user with a means of uploading data. We add it to a Card and then place it in the empty Section we fetch using StoreInterface. Additionally, we specify the data must be uploaded as a CSV file and provide additional information to help guide the user.

# This step has the user upload the dataset we'll be using
class DataUploadStep(Step):
    def run(self, flow_metadata):
        store_interface = StoreInterface(**flow_metadata)
        page = store_interface.get_page()
        section = page.get_section_by_title("")

        data_source_link = "https://docs.virtualitics.com/en_US/create-a-new-flow/persona-based-dashboards"
        data_source_description = f"You can find the relevant data for this tutorial here: {data_source_link}"
        data_source = DataSource(title="Upload e-commerce data here!",
                                options=["csv"],
                                description=data_source_description,
                                required=True
        )
        
        data_card = Card(title="Data Upload Card", content=[data_source])
        page.add_card_to_section(data_card, "")

        store_interface.update_page(page)

Here is what ends up getting rendered for the user:

2. Executive Dashboard

In the Executive Dashboard step, we use the uploaded data to calculate high-level insights and then display them in a Dashboard.

We begin by pulling in the uploaded data from the previous step’s DataUpload element. After some cleaning and preprocessing we then save the data as an asset. This persists the data in the user’s Virtualitics AI Platform workspace and allows them to access it at any time.

# Get the data from the data upload step, turn it into a predict dataset to persist it for later use
df = store_interface.get_element_value(data_upload_step.name, "Upload e-commerce data here!")
df["SaleValue"] = df["Quantity"] * df["UnitPrice"]
df["InvoiceDate"] = pd.to_datetime(df["InvoiceDate"])
df["InvoiceMonth"] = df["InvoiceDate"].dt.strftime("%Y-%m")
df["Description"] = df["Description"].apply(lambda x: string.capwords(str(x)))
predict_dataset = Dataset(df, "eCommerceDataAssetLabel", name="eCommerceData")
store_interface.save_asset(predict_dataset)

Next, we start to calculate insights and visualize them with various elements, according to the user’s needs. The code below produces a line plot of total sales revenue by month:

from predict_backend.utils.viz_utils import create_line_plot

# Calculate the total sales for each month and create a line plot
sales_by_month = df.groupby("InvoiceMonth").agg(TotalSalesValue=('SaleValue', 'sum'))
sales_by_month = sales_by_month.sort_values("InvoiceMonth", ascending=True).reset_index(level=0).head(-1)
line_plot = create_line_plot(sales_by_month, 'InvoiceMonth', 'TotalSalesValue', "Total Sales Revenue by Month")

In addition to other plots, we also create an insight-rich Infographic. A dedicated walkthrough on building Infographics in the Virtualitics AI Platform can be found here. 

At the end of the step we present all of these visual insights in a clean and aesthetic manner using a Dashboard. 

from predict_backend.page.elements import Dashboard
from predict_backend.page.elements.dashboard import Column, Row

left_column = Column([top_products_bar, line_plot])
right_column = Column([non_uk_buyers_bar, table])

# Create a Dashboard using the previously created columns
dash = Dashboard(content=[info, Row([left_column, right_column])], title="")

Altogether, this step creates the following Dashboard:

3. Operational Dashboard

This step is similar to the last. We once again calculate a variety of insights and then neatly display them in a Dashboard. However, this page will focus on more recent invoice information and actions that can be taken to capitalize upon it. In addition to an insight-rich Dashboard, we also include a Recommendation Infographic that allows the user to kick-off a CustomEvent. See this article for detailed information on creating custom events.

# Create a Recommendation Infographic
rec = InfographData(
   label="Recommended Action",
   main_text="**Kick-off segmentation based marketing campaign?**", 
   supporting_text="Additional text can be placed here",
   icon="info",
   _type = InfographDataType.POSITIVE
)

kick_off_event = KickOffEvent("Kick-off", "Would you like to take the recommended action?")
info_rec = Infographic(
   title="Insights and Recommended Action",
   description="Suggested action based on model predictions", 
   recommendation=[rec],
   layout=InfographicOrientation.ROW,
   event=kick_off_event
)

current_page.add_content_to_section(elems=info_rec, section_title="", show_card_title=False, show_card_description=False)

The above code produces the following Recommendation Infographic:

Completing a Flow

The final step in constructing a flow involves chaining together each Step in the Flow object we created at the start. To do this, we pass an ordered list of our Steps to the Flow’s chain() method:

# Chain together the steps of the flow
persona_dashboards.chain([
   data_upload_step,
   executive_dashboard_step,
   operational_dashboard_step
])

After completing this final step, your Flow file can be uploaded to the Virtualitics AI Platform using the “Create Flow” button in the top right of the home page of your workspace:

You’ll be alerted if any errors are detected in your Flow. If no errors are detected, your Flow will appear on the home page of your workspace!