在Dash AgGrid中实现基于数据梯度的行颜色样式

import dash
from dash import dcc, html, Input, Output
import dash_ag_grid as dag
import pandas as pd
import numpy as np

# 示例数据
n_rows = 50
data = {
    "Company name": [f"Company {i}" for i in range(1, n_rows + 1)],
    "Years in Operation": np.random.randint(1, 20, n_rows),
    "Raised to Date": np.random.uniform(1, 100, n_rows).round(2),
    "Product": np.random.choice(["Product A", "Product B", "Product C"], n_rows),
    "Bucket": np.random.choice(["Bucket 1", "Bucket 2", "Bucket 3"], n_rows),
}
df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("Valuation Table"),
    dcc.Dropdown(id='product-dropdown', options=[{'label': 'Product A', 'value': 'Product A'}, {'label': 'Product B', 'value': 'Product B'}], value='Product A'),
    dcc.Dropdown(id='bucket-dropdown', options=[{'label': 'All', 'value': 'All'}, {'label': 'Bucket 1', 'value': 'Bucket 1'}, {'label': 'Bucket 2', 'value': 'Bucket 2'}], value='All'),
    dag.AgGrid(
        id='valuation-table',
        columnDefs=[
            {"headerName": "Company Name", "field": "Company name"},
            {"headerName": "Years in Operation (yr)", "field": "Years in Operation"},
            {"headerName": "Raised to Date ($m)", "field": "Raised to Date"},
            {"headerName": "Product", "field": "Product"},
            {"headerName": "Bucket", "field": "Bucket"},
        ],
        style={'height': '400px', 'width': '100%'},
    ),
    html.Div(id='table-heading')
])

@app.callback(
    [Output('valuation-table', 'rowData'),
     Output('valuation-table', 'getRowStyle'), # 新增输出：getRowStyle
     Output('table-heading', 'children')],
    [Input('product-dropdown', 'value'),
     Input('bucket-dropdown', 'value')]
)
def update_table(selected_product, selected_bucket):
    # 1. 数据筛选
    if selected_bucket == 'All':
        filtered_df = df[df['Product'] == selected_product]
    else:
        filtered_df = df[(df['Bucket'] == selected_bucket) & (df['Product'] == selected_product)]

    # 2. 计算组合值
    # 将“Raised to Date”和“Years in Operation”相加作为颜色梯度的基础
    filtered_df['Combined Value'] = filtered_df['Raised to Date'] + filtered_df['Years in Operation']
    # 获取当前筛选数据中组合值的最大值，用于归一化颜色强度
    max_combined_value = filtered_df['Combined Value'].max()

    # 3. 生成 getRowStyle 字典
    # 遍历所有唯一的组合值，为每个值生成一个条件样式
    getRowStyle = {
        'styleConditions': [
            {
                # JavaScript 条件表达式：当行的“Combined Value”等于当前 value 时
                'condition': f'params.data["Combined Value"] == {value}',
                # 应用背景颜色样式，使用 rgba 实现透明度（颜色深度）
                # 透明度由 (value / max_combined_value) 决定，值越大颜色越深
                'style': {'backgroundColor': f'rgba(0, 123, 255, {value / max_combined_value})'},
            }
            for value in filtered_df['Combined Value'].unique() # 确保只为唯一的组合值生成条件
        ]
    }

    # 4. 准备 rowData
    # 注意：'Combined Value' 列需要包含在 rowData 中，以便 getRowStyle 中的 JavaScript 条件可以访问它
    row_data = filtered_df.to_dict('records')

    # 5. 返回结果
    return row_data, getRowStyle, html.Div(f"Filtered by Product: {selected_product}, Bucket: {selected_bucket}")

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