1 - Visual Elements
Let's start by creating a simple page with 3 components: a selector to select a category of items, a bar chart which displays the sales of the top 10 countries for this category and a table which displays data for the selected category
Let's start by importing the necessary libraries:
from taipy.gui import Gui
import taipy.gui.builder as tgb
import pandas as pd
from taipy.gui import Gui
import pandas as pd
We can now start creating the page. We will first add a selector.
with tgb.Page() as page:
tgb.selector(value="{selected_category}", lov="{categories}", on_change=change_category)
page = """
<|{selected_category}|selector|lov={categories}|on_change=change_category|>
"""
Taipy visual elements take many properties.
Note that dynamic properties use a quote and brackets syntax. We use value="{selected_category}"
to signal to Taipy that selected_category
should change when the user uses the selector.
Likewise, if categories
changes, the selector will get updated with the new values.
Here, selector needs an associated string variable which will change when a user selects a value, a list of values (lov) to choose from, and a callback function to call when the value changes. We can define them above:
data = pd.read_csv("data.csv")
selected_category = "Furniture"
categories = list(data["Category"].unique())
def change_category(state):
# Do nothing for now, we will implement this later
return None
We can now add a chart to display the sales of the top 10 countries for the selected category.
tgb.chart(
data="{chart_data}",
x="State",
y="Sales",
type="bar",
layout="{layout}",
)
<|{chart_data}|chart|x=State|y=Sales|type=bar|layout={layout}|>
Taipy charts have many properties. You can create multiple traces, add styling, change the type of chart, etc.
data = {"x_col": [0, 1, 2], "y_col1": [4, 1, 2], "y_col_2": [3, 1, 2]}
with tgb.Page() as page:
tgb.chart("{data}", x="x_col", y__1="y_col1", y__2="y_col_2", type__1="bar", color__2="red")
data = {"x_col": [0, 1, 2], "y_col_1": [4, 2, 1], "y_col_2":[3, 1, 2]}
Gui("<|{data}|chart|x=x_col|y[1]=y_col_1|y[2]=y_col_2|type[1]=bar|color[2]=red|>").run()
You can check the syntax for charts here.
You
can also directly embed Plotly charts using the figure
property as we will do in Step 3.
Here we need to provide a Pandas Dataframe with the data to display, the x and y columns to use, the type of chart, and a layout dictionary with additional properties.
chart_data = (
data.groupby("State")["Sales"]
.sum()
.sort_values(ascending=False)
.head(10)
.reset_index()
)
layout = {"yaxis": {"title": "Revenue (USD)"}, "title": "Sales by State"}
Lastly, we can add a table to display the data for the selected category.
tgb.table(data="{data}")
<|{data}|table|>
We can now run the application using:
if __name__ == "__main__":
Gui(page=page).run(title="Sales", dark_mode=False, debug=True)
debug=True
will display a stack trace of the errors if any occur.
You can also set use_reloader=True
to automatically reload the page
when you save changes to the code and port=XXXX
to change the server port.
The application runs but has no interaction. We need to code the callback function to update the chart and table when the user selects a category.
def change_category(state):
state.data = data[data["Category"] == state.selected_category]
state.chart_data = (
state.data.groupby("State")["Sales"]
.sum()
.sort_values(ascending=False)
.head(10)
.reset_index()
)
state.layout = {
"yaxis": {"title": "Revenue (USD)"},
"title": f"Sales by State for {state.selected_category}",
}
State¶
Taipy uses a state
object to store the variables per client.
The syntax to update a variable will always be state.variable = new_value
.
State holds the value of all the variables used in the user interface for one specific connection.
Modifying state.data
will update data for one specific user, without modifying state.data
for other users
or the global data
variable. You can test this by opening the application in a separate incognito window.