How to pull slice of pie chart when user clicks it

[rajarajan08p213]

Hi,

I am new to taipy frontend framework. I have built the booking dashboard for my application to display two charts (pie chart by booking type and bar chart to display top 10 customers). I wanted to add a callback on the click pie chart section. When user clicks the pie chart then it should pull, so that we know what slice user clicked and based on that need to change the top 10 customers list of a selected booking type. Attached the screenshot of the dashboard, i have developed

After going through another QA discussion(#299). I understood that we can use the selected parameter to handle the click. i was able to get data on click but not able to pull the clicked pie section. Tried multiple ways, nothing is working. can you please help me on this?

from datetime import datetime

import numpy as np
import pandas as pd
import plotly.express as px

import taipy.gui.builder as tgb
from taipy import Gui
from taipy.gui import Gui, State

end_date = datetime.today().date()
start_date = end_date.replace(day=1)
dates = [start_date, end_date]

df_total_bkgs = pd.read_csv(r"total_bookings.csv")
df_summary = pd.read_csv(r"summary_1.csv")

convert_start = str(start_date.strftime("%b %d %Y"))
convert_end = str(end_date.strftime("%b %d %Y"))
cnv_start_date = start_date.strftime("%Y-%m-%d")
cnv_end_date = end_date.strftime("%Y-%m-%d")


def pie_charts(dates):
    cnv_start_date = dates[0].strftime("%Y-%m-%d")
    cnv_end_date = dates[1].strftime("%Y-%m-%d")

    intial_flter_bkgs = df_total_bkgs.query(
        "cw_booked_date >= @cnv_start_date and cw_booked_date <= @cnv_end_date"
    )
    bkgs_ct = (
        intial_flter_bkgs.groupby(["Booking_type"]).size().reset_index(name="count")
    )
    total_bkgs = bkgs_ct["count"].sum()

    return bkgs_ct


def base_online_bkgs(dates):
    cnv_start_date = dates[0].strftime("%Y-%m-%d")
    cnv_end_date = dates[1].strftime("%Y-%m-%d")
    df_summary_2 = df_summary.query(
        "booked_date >= @cnv_start_date and booked_date <= @cnv_end_date"
    )
    fltr_base_bkgs = df_summary_2.groupby(["Customer_code"]).size()
    top_ten_customers = (
        fltr_base_bkgs.reset_index(name="Bookings_Count")
        .sort_values("Bookings_Count", ascending=False)
        .head(10)
    )
    customer = px.bar(
        top_ten_customers,
        x="Bookings_Count",
        y="Customer_code",
        orientation="h",
        color="Customer_code",
        text="Bookings_Count",
    )
    customer.update_traces(
        width=0.8,
        textposition="inside",
    )
    customer.update_layout(bargap=0.6)
    return customer


base_bkg_fig = base_online_bkgs(dates)

pie_data = pie_charts(dates)

selected = []

intial_options = {"hole": 0.6, "pull": [0, 0, 0]}


def button_click(state):
    state = state
    state.pie_data = pie_charts(state.dates)
    state.convert_start = str(state.dates[0].strftime("%b %d %Y"))
    state.convert_end = str(state.dates[1].strftime("%b %d %Y"))
    state.base_bkg_fig = base_online_bkgs(state.dates)


def on_change(state: State, var_name: str, var_value):
    print("Selected Index:", state.selected)  # Debugging

    # Check if a section was selected
    if state.selected and len(state.selected) > 0:
        selected_index = state.selected[0]  # Get the selected section index

        # Define new pull values based on selection
        opt = [
            0.2 if i == selected_index else 0
            for i in range(len(state.pie_data["Booking_type"]))
        ]

        # Assign a NEW dictionary to ensure UI update
        state.initial_options = {
            "hole": state.initial_options["hole"],  # Keep existing hole size
            "pull": opt,  # Update pull effect
        }

        print("Updated Options:", state.initial_options)  # Debugging


with tgb.Page() as page:
    with tgb.part(class_name="container"):
        tgb.text(
            value="# Booking Dashboard",
            mode="md",
            class_name="text-center text-color",
        )
        with tgb.layout(columns="0.8 1", class_name="card"):  # custom-bkg
            with tgb.part():
                tgb.date_range(
                    "{dates}", label_start="Start-date", label_end="End-date"
                )
            with tgb.part():
                tgb.button(
                    "Apply",
                    class_name="plain",
                    on_action=button_click,
                )

        tgb.html("br")
        with tgb.layout(columns="1 1"):
            with tgb.part(class_name="card text-center"):
                tgb.text(
                    "Bookings from {convert_start} - {convert_end}",
                    class_name="text-chnges",
                )
                tgb.chart(
                    "{pie_data}",
                    type="pie",
                    values="count",
                    labels="Booking_type",
                    options="{intial_options}",
                    # on_click=pie_click,
                    selected="{selected}",
                )

            with tgb.part(class_name="card "):
                tgb.text(
                    "Top 10 Booking customers",
                    class_name="text-chnges",
                )
                tgb.chart(figure="{base_bkg_fig}")


Gui(page=page).run(debug=True, port=5004, use_reloader=True, dark_mode=True)