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

概要

DASHはPythonで書かれたウェブアプリケーションフレームワークで、データ分析等にも使われています。グラフやデザインはPlotlyやDash Bootstrap Componentsなどライブラリも使用できるため柔軟にカスタマイズも可能です。順次コードを紹介していくつもりです。今回はアプリについての説明になります。

アプリの紹介

紹介ページ Python DASHでリアルタイム通信分析

とりあえずコードの内容は少しづつQiitaがマークダウン形式で書けるので
こちらで紹介していきたいと思います。

DASHの基本的な構文は他のサイトで紹介されているのでここでは割愛します。
今回は全体のレイアウトの説明になります

画面レイアウト

BootstrapのGRIDレイアウトで以下の様に画面を分割しています。

コード

以下レイアウトのコードです。

app.layout = dbc.Container(
    [
        dbc.Row(topbar,className='bg-dark text-white',style={"height": "3vh"}),
        dbc.Row(
            [dbc.Col(content1, width=2, className="bg-secondary"), 
             dbc.Col(content2, width=5, className="FLATLY"),
             dbc.Col(content3, width=5, className="FLATLY"),
            ],
            style={"height": "47vh"}
        ),
        dbc.Row(
            [dbc.Col(content4, width=2, className="bg-secondary"), 
             dbc.Col(content5, width=5, className="FLATLY"),
             dbc.Col(content6, width=5, className="FLATLY"),
            ],
            style={"height": "47vh"}
        ),
        dbc.Row(bottombar,className='bg-dark text-white',style={"height": "3vh"}),
        dcc.Interval(id='interval-component', interval=5*1000, n_intervals=0),
    ],
    fluid=True,
)

縦に４分割（topbar,content1～3,content4～6,bottombar）
さらに中央部分だけ横に３分割（content1～3とcontent4～6）
に分割してレイアウトしています。

さらに画面の比率をwidthで指定しています。
GRIDレイアウトでは横は最大で全12分割なので横幅の合計が12になるよう指定します。
縦は"height":"47vh"(=47%の意味)みたいな感じで全100％にします。
さらにfluid=Trueを使用することで、画面幅に合わせて自動的に調整されるようになります。便利ですね。

---

他の記事も挟みながら、少しづつ時間があるとき紹介していきたいと思います。
あとサイト分けると管理もあるのでどうするか迷いますね。
引き続きよろしくお願いいたします。

---

【続き】