Sign up to take part
Registered users can ask their own questions, contribute to discussions, and be part of the Community!
Registered users can ask their own questions, contribute to discussions, and be part of the Community!
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...)。
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 をご参照ください。