Update: After publishing this article, I was contacted by Pyplan to ask me if they could add this model to their online examples library, so now you can access it from the file manager of your free account in the following path: Pyplan> Public > Examples> 09 — Lazada Trends.

Now, to the project:

The data used for this model is available in my Github here.

You can see the final published app we will make here.

In his model, Vincent Tatan uses a dataset from Lazada (e-commerce platform), generating data visualizations to learn about price changes in Lazada products over date and time.

I will focus on creating the app so that the starting point will be reading the database with the prices.

Once logged in, we will create our new model just clicking in the orange button and giving it a name:

Creating a new model in Pyplan

Let’s create the first node (drag and drop) and define it as:

result = pd.read_csv(‘https://raw.githubusercontent.com/damiangino/Working-with-Pyplan/master/lazada.csv')

Code in a console window in Pyplan

Keep in mind that the id name of the node in the properties panel is how you will call it in the code:

Properties panel of a node

Remember that any node must end defining the variable result, and indicating which output will be displayed when the node is evaluated (by doing double click or ctrl+R). In this case, if we evaluate the created node, the result will be as follows:

Result view of a table in Pyplan

Now we will create a selector to choose the products about we want to inspect price evolution:

Let’s drag and drop a decision node “Decision” (rectangular shape) and define it as:

list_of_products = product_df["product_title"].unique().tolist() result = selector(list_of_products, [0,5], True)

That node will help us select the items we want to inspect.

Then we will create the table of filtered items. Let’s drag e new node and define it as “product df filter” and define it as:

# Filter database by the elements contained in the selector _filter = product_df['product_title'].isin( product_selector.value )

df = product_df[_filter] df = df.sort_values('datetime', ascending=False) result = df

And last, let’s create two outputs, dragging and dropping two new nodes: Product rating defined as:

result = product_df_filter[['product_title', 'rating_count']].set_index('product_title')

And Product Price Trends defined as:

result = product_df_filter[['product_title', 'datetime', 'product_price']].set_index(['product_title', 'datetime'])

We should end up with a diagram like this:

You can toggle the view of the diagram between titles and ids with Ctrl+Y:

With Ctrl+Y you can toggle between titles an ids views

Now we are ready to create our user interface.

In order to do that we will click on the “Interfaces” icon menu and then on “New Interface”. We will name our interface as Price Optimization Dashboard.

Creating a new interface in Pyplan

Now that we have an empty interface we will create the app and share it in just three steps. No coding required!!!.

Step 1 — Designing the UI layout

Start by making double click in the new interface to open it.

Once in the Interface canvas, let’s first add a new widget (click on +) and then choose the diagram icon. We will use the diagram later to drag nodes from it.

Now let’s split the upper widget vertically (right arrow on the top right menu) and then the split the left widget horizontally. The image below shows this process.

Designing the interface layout in Pyplan

Step 2 — Add I/O elements to the UI

Now Shift+Click on the selector (green node “Choose a product name”) and then click on the destination widget (upper left corner) and then click on “Format” and then select “Multi select”

Configuring the selector

The next step will be to drag the “product df filtered” node to the upper right corner to display the list of attributes filtered by the selector. We will keep that widget as a table.

Next let’s drag the “Product Rating” to the empty widget and configure it as horizontal bar. Let’s also drag the “product_title” dimension as the header of the bars.

Configuring a widget on the interface layout in Pyplan

Finally, let’s display in the dashboard the Price Trend. In order to do that, start clearing the content of the diagram widget in the dashboard, next in the options menu, choose the graph and you will be prompted to select a node, search for product_price_trends and then change graph type from bars to linear and accept it to save the new UI configuration.

Changing the type of graphic element in a Pyplan Interface

Step 3 — Share the App

Now that we have the final UI we are ready to share our app. Just click on the share icon and select “Share external” so the user not need to be logged into Pyplan to use the app. Copy and share the link with anyone to allow for instant access to a full operational app.