DASH de ダッシュボード【3．レイアウト編_その２】

概要

前回に引き続きフレームワークDASHを使ったPythonでのwebアプリケーションを説明します。今回はレイアウト編（その２）についての説明になります。

アプリの紹介

紹介ページ/

画面レイアウト

前回の続きですが説明のため載せておきます。

コンポーネント作成

以下コンポーネントの一例を紹介します。

# components/layouts.py
########################################################### メッセージ
message_filter = "データテーブルのStatus項目で選択したものが表示されます"
message_table  = (
    "現在通信中のIPアドレスが表示されます。5秒毎に情報が更新されます。COUNT列は接続時間（秒）",
    "一度通信したIP情報は切断後もデータとして保存されます(ESTABLISHED=接続)",
)
message_location = "選択中のＩＰアドレスの通信先サーバの位置情報が表示されます"
message_geoip    = "通信先サーバー情報が表示されます"
message_ipgraph  = "IPaddress毎のメモリ使用量の上位が表示されます。同一プロセスだと使用量は同じになります。"
                                #  省略   
########################################################### タイトル
title_Status = html.Div(
    [
        html.H6("表示ステータス選択", id="title1", className="bg-info text-white"),
        dbc.Tooltip(message_filter, target="title1", placement="bottom"),
    ],
    style={"margin": "5px 0px -10px 0px"},
)
title_table = html.Div(
    [
        html.H6("通信中データ", id="title2", className="bg-info text-white"),
        dbc.Tooltip(message_table, target="title2", placement="bottom"),
    ]
)
title_location = html.Div(
    [
        html.H6("通信先サーバー", id="title3", className="bg-info text-white"),
        dbc.Tooltip(message_location, target="title3", placement="bottom"),
    ]
)
                                #  省略   
########################################################## インフォメーション
info_geolocation = html.Div([html.H6(message7, id="lbl1", className="lbl1")])
info_process = html.Div([html.H6(message8, id="lbl2", className="lbl2")])
info_duplicate = html.Div([html.H6(message9, id="lbl3", className="lbl3")])
########################################################### cpu memry graph
cpumem = html.Div(
    [
        html.Div(
            [
                dcc.Graph(id="cpu-graph"),
            ],
        ),
        html.Div(
            [
                dcc.Graph(id="memory-graph")
            ],
        ),
    ]
)

とりあえずコンポーネントが多いので省略しますが、
全てのコンポーネントを分割することで、可読性が向上します。
さらに次のようにしてコンポーネントを結合して一つの要素にします。

---

コンポーネント構築

以下先ほどのコンポーネントを組み合わせます。

# components/layouts.py
#################################################　コンポーネント構築▽
content_top = html.Div([title_select, select_function, title_Status, select_value])
content_bottom = html.Div([title_geo, info_geolocation, title_process, info_process])
contentlist = [
    html.Div([title_table, ip_table]),
    html.Div([title_location, world_map]),
    html.Div([title_ipgraph, mem_rate]),
    html.Div([title_cpumem, cpu_mem_graph]),
    html.Div([title_event, eventviewer1,eventviewer2]),
    html.Div([title_traffic, trafficdata]),
]

ここではcontent_topとcontent_bottomは前回のレイアウト編のcontent1とcontent4に対応します。この二つは常に表示される部分なのでlistには入れていません。
逆に動的にコンテンツを入れ替える必要があるものはcontentlistに入れています。

---

コンポーネント配置

以下構築したコンポーネントを配置します。

# components/layouts.py
#################################################　コンポーネント配置▽
topbar = html.Div(
    [
        html.H4("TITLE_name SAMPLE"),
        dcc.Store(id="all-data-store"),  # dfデータ保持用
    ]
)
content1 = html.Div([content_top])                          # フィルタリング
content2 = html.Div([content_base1], id="content_baseid1")  # datatable
content3 = html.Div([content_base2], id="content_baseid2")  # 位置情報
content4 = html.Div([content_bottom])                       # geo情報
content5 = html.Div([content_base3], id="content_baseid3")  # IPメモリ
content6 = html.Div([content_base4], id="content_baseid4")  # CPU/メモリ
bottombar = html.Div([])

そして最後に先ほどの構築したコンポーネントをcontent1～6に配置していきます。こうすることで、layouts.pyにはフロントエンド側の記述もあるので、
ネストが深くなりがちで、pythonはインデントにも意識する必要がありますが、それらを解消することができます。またCSSについてもstyle.cssに出来る限り記述します。

---

とりあえずレイアウト編を紹介しました。コード量が多いのでとりあえず枠組みの部分の作成を紹介していこうと思います。次はコールバック編になります。説明していて感じましたが、簡単に紹介できるようにコンパクトな省略したアプリ作った方がいいかもしれないですね。初めてだったのでそこまで考えてなかった件。

【アプリその１】 DASH de ダッシュボード【4.コールバック編_その1】

---

【アプリその２】 AI Numbers de 10万円【1.概要編】

---

参考にさせて戴いたサイト様
https://qiita.com/chromia/items/4b91d8b6ca520782672c
https://qiita.com/Yusuke_Pipipi/items/b74f269d112f180d2131
https://note.com/mapps/n/n549926d7e9c3