📖

ダッシュボードっぽくレイアウトを作成しました

2024/01/08に公開

データ分析

dash

ダッシュボード

tech

前回の記事

前回の記事はこちら

さて、これからダッシュボードを作成していきたいので、まずはレイアウトを作成していきたいと思います。

要素の作成

まずは要素を作成します

私が作成したいダッシュボードでは、ヘッダー部分とサイドバー部分とコンテンツ部分の要素を作成していきます

# 必要なモジュールのインポート
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

# アプリの定義
app = Dash(__name__)

# ヘッダー部分のCSS
header_style = {
    "background-color": "red",
    "color": "#ffffff"
}

# サイドバー部分のCSS
sidebar_style = {
    "background-color": "green",
    "color": "#ffffff"
}

# コンテンツ部分のCSS
contents_style = {
    "background-color": "blue",
    "color": "#ffffff"
}

# アプリのレイアウト
app.layout = html.Div(
    [
        # ヘッダー部分
        html.Div(
            html.P(
                "Header"
            ),
            style = header_style
        ),
        # サイドバー部分
        html.Div(
            html.P(
                "Sidebar"
            ),
            style = sidebar_style
        ),
        # コンテンツ部分
        html.Div(
            html.P(
                "Contents"
            ),
            style = contents_style
        )
    ]
)

# アプリの起動
if __name__ == '__main__':
    app.run(debug = True)

要素が分かりやすいように色分けしています

ヘッダー部分の調整

まずはヘッダー部分を調整していきます

header_styleを変更します

header_style = {
    "background-color": "red",
    "color": "#ffffff"
    "display": "flex",
    "position": "fixed",
    "top": "0",
    "left": "0",
    "width": "100%",
    "height": "56px",
}

こういう感じです

サイドバー部分が隠れちゃってますが、ひとまず無視しておきます

ヘッダーなので、基本的にwidthは100％で良いかと思いますが、heightは任意の値に調整してください

サイドバー部分の調整

続いてサイドバー部分を調整していきます

sidebar_styleを次のように変更します

sidebar_style = {
    "background-color": "green",
    "color": "#ffffff",
    "display": "flex",
    "position": "fixed",
    "top": "6vh",
    "left": "0",
    "height": "94vh",
    "width": "200px"
}

今回はサイドバーの幅を200pxにしています

ヘッダー部分やサイドバー部分は今のところ固定させておきたいので、positionをfixedに設定しています

コンテンツ部分の調整

最後にコンテンツ部分の調整です

contents_styleを次のように調整します

    "background-color": "blue",
    "color": "#ffffff",
    "position": "absolute",
    "height": "94vh",
    "width": "86.4%",
    "top": "6vh",
    "left": "0",
    "padding-left": "200px",
    "z-index": "0"
}

widthの部分がキレイじゃないのがアレですが、ひとまずこのままいきたいと思います

heightは９４vhとしてますが、今後はコンテンツ部分に表示する要素次第で変わります

また、コンテンツ部分をスクロールした際にヘッダー部分・サイドバー部分が隠れないようにしたいので、それぞれz-indexを指定しました

最終的には以下のようなコードになります

# 必要なモジュールのインポート
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

# アプリの定義
app = Dash(__name__)

# ヘッダー部分のCSS
header_style = {
    "background-color": "red",
    "color": "#ffffff",
    "display": "flex",
    "position": "fixed",
    "top": "0",
    "left": "0",
    "height": "6vh",
    "width": "100%",
    "z-index": "1"
}

# サイドバー部分のCSS
sidebar_style = {
    "background-color": "green",
    "color": "#ffffff",
    "display": "flex",
    "position": "fixed",
    "top": "6vh",
    "left": "0",
    "height": "94vh",
    "width": "200px",
    "z-index": "1"
}

# コンテンツ部分のCSS
contents_style = {
    "background-color": "blue",
    "color": "#ffffff",
    "position": "absolute",
    "height": "94vh",
    "width": "86.4%",
    "top": "6vh",
    "left": "0",
    "padding-left": "200px",
    "z-index": "0"
}

# アプリのレイアウト
app.layout = html.Div(
    [
        # ヘッダー部分
        html.Div(
            html.P(
                "Header"
            ),
            style = header_style
        ),
        # サイドバー部分
        html.Div(
            html.P(
                "Sidebar"
            ),
            style = sidebar_style
        ),
        # コンテンツ部分
        html.Div(
            html.P(
                "Contents"
            ),
            style = contents_style
        )
    ]
)

# アプリの起動
if __name__ == '__main__':
    app.run(debug = True)

ひとまずおおまかなレイアウトが完成しました

今後はヘッダー部分、コンテンツ部分を作り込んでいきたいと思います