Dash ウェブアプリで external_stylesheets を設定する方法

Keiji

Dataiku DSS では、Dash Python ライブラリを用いて、データの可視化などを行うウェブアプリを実装して稼働させることができます。

通常の Dash アプリでは、Dash クラスの初期化パラメータ external_stylesheets に値を設定することで、外部 CSS を設定することができます（参考: https://dash.plotly.com/external-resources#adding-external-css/javascript）。Dataiku DSS での Dash ウェブアプリでは、同様のことを、以下のように app.config.external_stylesheets に値を設定することで実現できます（参考: https://community.dataiku.com/t5/Plugins-Extending-Dataiku/Using-Bootstrap-or-external-CSS-with-Dash-WebApp/m-p/17934）。

app.config.external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

この app.config.external_stylesheets を利用することで、例えば、以下のように、Dash Bootstrap Components の外部 CSS を読み込み、この CSS を利用して Dash ウェブアプリを実装することができます。

import dash_html_components as html
import dash_bootstrap_components as dbc
import pandas as pd

app.config.external_stylesheets = [dbc.themes.BOOTSTRAP]

df = pd.DataFrame(
    {
        "First Name": ["Arthur", "Ford", "Zaphod", "Trillian"],
        "Last Name": ["Dent", "Prefect", "Beeblebrox", "Astra"],
    }
)
table = dbc.Table.from_dataframe(df, striped=True, bordered=True, hover=True)

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    html.P("This is the content of the first section"),
                    dbc.Button("Click here"),
                ],
                title="Item 1"
            ),
            dbc.AccordionItem(
                [
                    html.P("This is the content of the second section"),
                    dbc.Button("Don't click me!", color="danger"),
                ],
                title="Item 2"
            )
        ]
    )
)

alerts = html.Div(
    [
        dbc.Alert("This is a success alert! Well done!", color="success"),
        dbc.Alert("This is a warning alert... be careful...", color="warning"),
        dbc.Alert("This is a danger alert. Scary!", color="danger"),
        dbc.Alert("This is an info alert. Good to know!", color="info")
    ]
)

app.layout = html.Div(
    children=[
        table,
        accordion,
        alerts
    ]
)

Dataiku DSS での Dash ウェブアプリの基本的な実装方法は、https://knowledge.dataiku.com/latest/courses/advanced-code/visualization/dash-hands-on.html をご参照ください。