Py.Cafe

############ Imports ##############
import vizro.models as vm
from vizro.models.types import capture
from vizro import Vizro
import pandas as pd
from vizro.managers import data_manager
import plotly.graph_objects as go
from vizro.models.types import capture


####### Function definitions ######
@capture("graph")
def line_chart(data_frame):
    fig = go.Figure()
    colors = {
        "Product A": "#60A5FA",
        "Product B": "#818CF8",
        "Product C": "#A78BFA",
        "Product D": "#C084FC",
    }
    for product in data_frame["product"].unique():
        product_data = data_frame[data_frame["product"] == product]
        fig.add_trace(
            go.Scatter(
                x=product_data["month"],
                y=product_data["sales"],
                name=product,
                mode="lines+markers",
                line=dict(color=colors.get(product, "#60A5FA"), width=3),
                marker=dict(size=8, symbol="circle", line=dict(width=2, color="white")),
                hovertemplate="%{x}<br>Sales: $%{y:,.0f}<extra></extra>",
            )
        )
    fig.update_layout(
        xaxis=dict(
            title="Month",
            gridcolor="rgba(255, 255, 255, 0.1)",
            titlefont=dict(family="Aptos, sans-serif", size=14, color="#E0E7FF"),
            tickfont=dict(family="Aptos, sans-serif", size=12, color="#CBD5E1"),
        ),
        yaxis=dict(
            title="Sales ($)",
            gridcolor="rgba(255, 255, 255, 0.1)",
            titlefont=dict(family="Aptos, sans-serif", size=14, color="#E0E7FF"),
            tickfont=dict(family="Aptos, sans-serif", size=12, color="#CBD5E1"),
        ),
        font=dict(family="Aptos, sans-serif", size=12, color="#E0E7FF"),
        paper_bgcolor="rgba(10, 14, 39, 0)",
        plot_bgcolor="rgba(15, 23, 42, 0.5)",
        legend=dict(
            font=dict(family="Aptos, sans-serif", size=11, color="#E0E7FF"),
            bgcolor="rgba(15, 23, 42, 0.8)",
            bordercolor="rgba(96, 165, 250, 0.3)",
            borderwidth=1,
        ),
        hoverlabel=dict(
            bgcolor="#1E293B",
            font=dict(family="Aptos, sans-serif", size=11, color="#E0E7FF"),
            bordercolor="#60A5FA",
        ),
        hovermode="x unified",
    )
    return fig


@capture("graph")
def bump_chart(data_frame):
    fig = go.Figure()
    colors = {
        "Team A": "#60A5FA",
        "Team B": "#818CF8",
        "Team C": "#A78BFA",
        "Team D": "#C084FC",
        "Team E": "#F472B6",
    }
    for team in data_frame["team"].unique():
        team_data = data_frame[data_frame["team"] == team].sort_values("quarter")
        fig.add_trace(
            go.Scatter(
                x=team_data["quarter"],
                y=team_data["rank"],
                name=team,
                mode="lines+markers",
                line=dict(color=colors.get(team, "#60A5FA"), width=4),
                marker=dict(
                    size=12, symbol="circle", line=dict(width=2, color="white")
                ),
                hovertemplate="%{x}<br>Rank: %{y}<extra></extra>",
            )
        )
    fig.update_layout(
        xaxis=dict(
            title="Quarter",
            gridcolor="rgba(255, 255, 255, 0.1)",
            titlefont=dict(family="Aptos, sans-serif", size=14, color="#E0E7FF"),
            tickfont=dict(family="Aptos, sans-serif", size=12, color="#CBD5E1"),
        ),
        yaxis=dict(
            title="Rank",
            autorange="reversed",
            gridcolor="rgba(255, 255, 255, 0.1)",
            titlefont=dict(family="Aptos, sans-serif", size=14, color="#E0E7FF"),
            tickfont=dict(family="Aptos, sans-serif", size=12, color="#CBD5E1"),
            dtick=1,
        ),
        font=dict(family="Aptos, sans-serif", size=12, color="#E0E7FF"),
        paper_bgcolor="rgba(10, 14, 39, 0)",
        plot_bgcolor="rgba(15, 23, 42, 0.5)",
        legend=dict(
            font=dict(family="Aptos, sans-serif", size=11, color="#E0E7FF"),
            bgcolor="rgba(15, 23, 42, 0.8)",
            bordercolor="rgba(96, 165, 250, 0.3)",
            borderwidth=1,
        ),
        hoverlabel=dict(
            bgcolor="#1E293B",
            font=dict(family="Aptos, sans-serif", size=11, color="#E0E7FF"),
            bordercolor="#60A5FA",
        ),
    )
    return fig


@capture("graph")
def mekko_chart(data_frame):
    fig = go.Figure()
    segment_totals = (
        data_frame.groupby("segment")["value"].sum().sort_values(ascending=False)
    )
    segments = segment_totals.index.tolist()
    x_positions = [0]
    for val in segment_totals.values:
        x_positions.append(x_positions[-1] + val)
    colors = {
        "North": "#60A5FA",
        "South": "#818CF8",
        "East": "#A78BFA",
        "West": "#C084FC",
    }
    for i, segment in enumerate(segments):
        segment_data = data_frame[data_frame["segment"] == segment]
        segment_total = segment_data["value"].sum()
        y_bottom = 0
        for _, row in segment_data.iterrows():
            region = row["region"]
            value = row["value"]
            height = (value / segment_total) * 100
            fig.add_trace(
                go.Bar(
                    x=[segment_total],
                    y=[height],
                    base=y_bottom,
                    name=region,
                    marker_color=colors.get(region, "#60A5FA"),
                    orientation="v",
                    width=segment_total,
                    offset=x_positions[i],
                    showlegend=(i == 0),
                    hovertemplate=f"{segment}<br>{region}<br>Value: {value}<br>Share: {height:.1f}%<extra></extra>",
                    text=f"{region}<br>{height:.1f}%",
                    textposition="inside",
                    textfont=dict(color="white", size=10, family="Aptos, sans-serif"),
                )
            )
            y_bottom += height
    fig.update_layout(
        barmode="stack",
        xaxis=dict(
            title="Market Size by Segment",
            tickvals=[sum(x_positions[i : i + 2]) / 2 for i in range(len(segments))],
            ticktext=segments,
            gridcolor="rgba(255, 255, 255, 0.1)",
            titlefont=dict(family="Aptos, sans-serif", size=14, color="#E0E7FF"),
            tickfont=dict(family="Aptos, sans-serif", size=12, color="#CBD5E1"),
        ),
        yaxis=dict(
            title="Market Share (%)",
            range=[0, 100],
            gridcolor="rgba(255, 255, 255, 0.1)",
            titlefont=dict(family="Aptos, sans-serif", size=14, color="#E0E7FF"),
            tickfont=dict(family="Aptos, sans-serif", size=12, color="#CBD5E1"),
        ),
        font=dict(family="Aptos, sans-serif", size=12, color="#E0E7FF"),
        paper_bgcolor="rgba(10, 14, 39, 0)",
        plot_bgcolor="rgba(15, 23, 42, 0.5)",
        legend=dict(
            font=dict(family="Aptos, sans-serif", size=11, color="#E0E7FF"),
            bgcolor="rgba(15, 23, 42, 0.8)",
            bordercolor="rgba(96, 165, 250, 0.3)",
            borderwidth=1,
        ),
        hoverlabel=dict(
            bgcolor="#1E293B",
            font=dict(family="Aptos, sans-serif", size=11, color="#E0E7FF"),
            bordercolor="#60A5FA",
        ),
    )
    return fig


####### Data Manager Settings #####
data_manager["mekko_data"] = pd.read_csv(
    "https://gist.githubusercontent.com/datasciencedojo/3166975e8364b8cd87e27a0e0e23cb7b/raw/mekko_sample.csv"
)
data_manager["sales_data"] = pd.read_csv(
    "https://gist.githubusercontent.com/datasciencedojo/3166975e8364b8cd87e27a0e0e23cb7b/raw/sales_sample.csv"
)
data_manager["ranking_data"] = pd.read_csv(
    "https://gist.githubusercontent.com/datasciencedojo/3166975e8364b8cd87e27a0e0e23cb7b/raw/ranking_sample.csv"
)

########### Model code ############
model = vm.Dashboard(
    pages=[
        vm.Page(
            components=[
                vm.Graph(
                    id="mekko_graph",
                    type="graph",
                    figure=mekko_chart(data_frame="mekko_data"),
                    title="Market Share Analysis (Mekko Chart)",
                ),
                vm.Graph(
                    id="line_graph",
                    type="graph",
                    figure=line_chart(data_frame="sales_data"),
                    title="Sales Trends (Line Chart)",
                ),
                vm.Graph(
                    id="bump_graph",
                    type="graph",
                    figure=bump_chart(data_frame="ranking_data"),
                    title="Performance Rankings (Bump Chart)",
                ),
            ],
            title="Advanced Charts Dashboard",
            layout=vm.Flex(type="flex"),
        )
    ],
    theme="vizro_dark",
    title="Multi-Chart Analytics",
)

Vizro().build(model).run()