使用Dash Mantine Components实现动态表格与下拉选择器联动

pip install dash pandas dash-mantine-components

import pandas as pd
from dash import Dash, html, dcc, Input, Output
import dash_mantine_components as dmc

# 假设您的数据文件名为 'spotify_songs.csv'
# 请替换为您的实际数据加载路径
data = pd.read_csv('spotify_songs.csv')

# 示例：获取唯一的流派和子流派用于下拉菜单
all_genres = data['Genre'].unique().tolist()
all_subgenres = data['Subgenre'].unique().tolist() # 这通常需要根据选择的Genre动态更新

app = Dash(__name__)

app.layout = dmc.Container(
    [
        dmc.Title("Spotify Top 10 艺术家分析", order=1),
        dmc.Space(h="md"),

        dmc.Grid(
            [
                dmc.Col(
                    dcc.Dropdown(
                        id="genre-dropdown",
                        options=[{"label": g, "value": g} for g in all_genres],
                        placeholder="选择流派",
                        value=all_genres[0] if all_genres else None, # 初始值
                    ),
                    span=6,
                ),
                dmc.Col(
                    dcc.Dropdown(
                        id="subgenre-dropdown",
                        options=[{"label": sg, "value": sg} for sg in all_subgenres], # 初始加载所有，后续通过回调更新
                        placeholder="选择子流派",
                        value=all_subgenres[0] if all_subgenres else None, # 初始值
                    ),
                    span=6,
                ),
            ]
        ),
        dmc.Space(h="md"),

        dmc.Card(
            children=[
                dmc.Text("Top 10 艺术家", size='lg', color='dimmed', weight=500, align='center'),
                # dmc.Table 组件将在这里接收动态内容
                dmc.Table(id='top_10_artists', striped=True, highlightOnHover=True, withBorder=True, withColumnBorders=True),
            ],
            withBorder=True, shadow='lg', radius='md', mt="lg"
        ),
    ],
    fluid=True,
)

@app.callback(
    Output("top_10_artists", "children"),
    Input("genre-dropdown", "value"),
    Input("subgenre-dropdown", "value")
)
def update_top_10_artists_table(selected_genre, selected_subgenre):
    # 1. 数据筛选
    if not selected_genre or not selected_subgenre:
        # 如果没有选择，可以返回空表格或提示信息
        return [html.Thead(html.Tr([html.Th("请选择流派和子流派")])), html.Tbody([])]

    filtered_df = data.copy()
    filtered_df = filtered_df[
        (filtered_df['Genre'] == selected_genre) &
        (filtered_df['Subgenre'] == selected_subgenre)
    ]

    # 2. 计算Top 10艺术家
    artist_counts = filtered_df['Artist'].value_counts().reset_index()
    artist_counts.columns = ['Artist', 'Number of songs']
    top_10_artists = artist_counts.head(10)

    # 3. 构建表格头部
    header = [
        html.Thead(
            html.Tr(
                [
                    html.Th('艺术家'),
                    html.Th('歌曲数量')
                ]
            )
        )
    ]

    # 4. 构建表格体
    if top_10_artists.empty:
        body = [html.Tbody([html.Tr([html.Td("无数据", colSpan=2)])])]
    else:
        rows = []
        for index, row in top_10_artists.iterrows():
            rows.append(
                html.Tr([
                    html.Td(row['Artist']),
                    html.Td(row['Number of songs'])
                ])
            )
        body = [html.Tbody(rows)]

    # 5. 返回表格头和表格体
    return header + body

# 额外回调：根据选择的流派更新子流派下拉菜单选项
@app.callback(
    Output("subgenre-dropdown", "options"),
    Output("subgenre-dropdown", "value"),
    Input("genre-dropdown", "value")
)
def set_subgenre_options(selected_genre):
    if selected_genre:
        available_subgenres = data[data['Genre'] == selected_genre]['Subgenre'].unique().tolist()
        options = [{"label": sg, "value": sg} for sg in available_subgenres]
        # 尝试选择第一个子流派作为默认值，如果没有则为None
        default_value = available_subgenres[0] if available_subgenres else None
        return options, default_value
    return [], None # 如果没有选择流派，则子流派为空

if __name__ == '__main__':
    app.run_server(debug=True)

python app.py