This document is a guided walkthrough of the “Persona Based Dashboards” tutorial Flow. In this Flow, we demonstrate how Virtualitics Predict 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 Virtualitics Predict 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 at the bottom of this page.

The data for this walkthrough can also be found at the bottom of this page and was sourced from Kaggle.

If this is your first introduction to Virtualitics Predict, also consider the “Hello World!” tutorial Flow. It is our beginner level tutorial Flow and primarily focuses on the core aspects of Flow development.

Constructing the Flow

When creating Flow scripts, 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 as a download below.  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

Every Flow begins by importing the key classes, which include Card, Section, Page, and Step. It is also important to import the various Elements to be used.

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

# 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

Creating the Flow Object

Here, the actual Flow object is created and assigned an image to be associated with it on the Virtualitics Predict Home page.

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

If set up successfully, this will show the Flow and the relevant tile image on the Virtualitics Predict Home page once the Flow has been uploaded.

Building the Flow

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

This first Step uses the DataSource Element to provide the user with a means of uploading data. It is added to a Card and then placed in the empty Section, fetched using StoreInterface.

Additionally, this Step specifies that the data must be uploaded as a CSV file and provides 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/hc/en-us/articles/24831071684115-Flow-Building-Guide-2-Persona-Based-Dashboards"
        data_source_description = "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)

Altogether, this creates a Page which prompts the user to upload specified e-commerce data in CSV format.

2. Executive Dashboard

Here, the uploaded data is used to calculate high-level insights. Those insights are then displayed in a Dashboard.

Data Import and Cleaning

This Step begins by pulling in the uploaded data from the previous Step’s DataUpload element. Next, the Step runs cleaning and preprocessing and then saves the data as an Asset. This persists the data in the user’s Virtualitics Predict 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)

Producing a Line Plot with Key Insights

Next, insights are calculated and visualized 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")

Adding an Insight-Rich Infographic

In addition to the Plot, an insight-rich Infographic is created.

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 a Dashboard with both a Plot and Infographic layout.

3. Operational Dashboard

This Step is similar to the last. The uploaded data is used to calculate high-level insights and those insights are then displayed in a Dashboard.

However, this Page focuses on more recent invoice information and actions that can be taken to capitalize upon it.

In addition to an insight-rich Dashboard, also included is a Recommendation infographic that allows the user to kick-off a CustomEvent.

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

This produces a Recommendation infographic with a prompt for action.

Completing a Flow

The final step in constructing a Flow involves chaining together each Step in the Flow Object that was created at the start.

To do this, an ordered list of the Steps is passed 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
])

Uploading a Flow

After completing this final step, the Flow file can be uploaded to Virtualitics Predict using the Create Flow button at the top right of the Virtualitics Predict Home page.

You’ll be alerted if any errors are detected in your Flow. If no errors are detected, your Flow will appear on the Virtualitics Predict Home page.