一、Styling Your App

The examples in the previous section used Dash HTML Components to build a simple app layout, but you can style your app to look more professional. This section will give a brief overview of the multiple tools that you can use to enhance the layout style of a Dash app:

• HTML and CSS
• Dash Design kit (DDK)
• Dash Bootstrap Components
• Dash Mantine Components

 二、Dash Mantine Components

Dash Mantine is as community-maintained library built off of the Mantine component system. Although it is not officially maintained or supported by the Plotly team, Dash Mantine is another powerful way of customizing app layouts. The Dash Mantine Components uses the Grid module to structure the layout. Instead of defining a row, we define a dmc.Grid, within which we insert dmc.Col s and define their width by assigning a number to the span property.

For the app below to run successfully, make sure to install the Dash Mantine Components library: pip install dash-mantine-components==0.12.1

from dash import Dash, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px
import dash_mantine_components as dmc

df = pd.read_csv('https://raw.githubusercontent.com/GarciaShanCW/DATA/main/DataAnalysis01.csv')

app = Dash(__name__)

app.layout = dmc.MantineProvider(
    theme={'colorScheme': 'light'},
    children=dmc.Container([
        dmc.Title('My First App with Data, Graph, and Control', size='h3'),
        dmc.RadioGroup(
            [dmc.Radio(i, value=i) for i in ['pop', 'lifeExp', 'gdpPercap']],
            id='my-dmc-radio-item',
            value='lifeExp',
            size='sm'
        ),
        dmc.Grid([
            dmc.Col([
                dash_table.DataTable(data=df.to_dict('records'),
                                     page_size=12, style_table={'overflowX': 'auto'})
            ], span=6),
            dmc.Col([
                dcc.Graph(figure={}, id='graph-placeholder')
            ], span=6),
        ]),
    ], fluid=True)
)


@callback(
    Output(component_id='graph-placeholder', component_property='figure'),
    Input(component_id='my-dmc-radio-item', component_property='value')
)
def update_graph(col_chosen):
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    return fig


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

三、解读

dash_mantine_components 是一个基于 Mantine Design System 的 Dash 组件库。它允许开发者在 Dash 应用程序中使用 Mantine 的组件来构建用户界面。Mantine 是一个现代化的、功能丰富的 React UI 组件库。

from dash import Dash, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.expree as px
imoprt dash_mantine_components as dmc

• 导入 Dash 库中的主要组件，包括Dash 类、dash_table、dcc（Dash 核心组件库）以及回调函数所需的 Output 和 Input
• 导入 pandas 库，并简称 pd，用于数据处理
• 导入 plotly.express 库，并简称为 px，用于创建交互式图表
• 导入 dash_mantine_components 库，并简称为 dmc ，这是一个 Dash UI 组件库

app = Dash(__name__)

app.layout = dmc.MantineProvider(
    theme={'colorScheme': 'light'},
    children=dmc.Container([
        dmc.Title('My First App with Data, Graph, and Control', size='h3'),
        dmc.RadioGroup(
            [dmc.Radio(i, value=i) for i in ['pop', 'lifeExp', 'gdpPercap']],
            id='my-dmc-radio-item',
            value='lifeExp',
            size='sm'
        ),
        dmc.Grid([
            dmc.Col([
                dash_table.DataTable(data=df.to_dict('records'),
                                     page_size=12, style_table={'overflowX': 'auto'})
            ], span=6),
            dmc.Col([
                dcc.Graph(figure={}, id='graph-placeholder')
            ], span=6),
        ]),
    ], fluid=True)
)

• app.layout = dmc.MantineProvider(....) 设置 Dash 应用的布局，使用 MantineProvider 组件来提供主题样式
• theme={'colorScheme': 'light'}, 设置应用的主题色为浅色
• children=dmc.Container([...]) 在 MantineProvider 中添加一个容器组件，包含应用的主要内容
• dmc.Title(...) 添加一个标题组件，显示应用的标题
• dmc.RadioGroup([...]) 创建一个单选按钮组，允许用户选择不同的数据列进行图表展示
• dmc.Grid([...]) 创建一个网格布局，用于在页面上排列不同的组件
• dmc.Col([...]) 在网格布局中添加列组件，用户放置 DataTable 或 Graph 等组件
• dash_table.DataTable(...) 添加一个 DataTable 组件，用于显示数据表
• dcc.Graph(...) 添加 Graph 组件，用于显示图表

@callback(
    Output(component_id='graph-placeholder', component_property='figure'),
    Input(component_id='my-dmc-radio-item', component_property='value')
)
def update_graph(col_chosen):
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    return fig

• 定义一个回调函数，用于更新图表
• Output 指定回调函数的输出，即更新 graph-placeholder 组件的 figure 属性
• Input 指定回调函数的输入，即监听 my-dmc-radio-item 组件的 value 属性变化
• 定义回调函数 update_garaph，根据用户选择的列更新图表
• px.histogram(...) 使用 plotly.express 创建一个直方图，返回更新后的图表对象