目標

　下図の赤枠部分を作成します．

開発環境

　前回の通りです．Pythonでpandasとdashをインストールして下さい．

アプリ作成

グラフ描画エリアの確保

　次のコードを追加してグラフ描画エリアを作成します．グラフ本体のdbc.Col(dcc.Graph(id='graph'))を2つのdbc.Col(width=0)`で挟むという一見無意味なレイアウトですがちゃんと理由はあります．これはグラフをエリアの中央に配置するための苦肉の策です． dash-bootstrap-componentsのレイアウトの水平配置の説明を見て頂くと察しがつくかもしれませんが，グリッド配置の位置を明示的に指定せずに水平位置を均等配置するには2つ以上のコンポーネントが必要なようです．このため空要素で挟んで全体を中央揃えにしました．空要素なしで頑張っても見ましたが，どうにもうまくできませんでした．

graph = [dbc.Row(dbc.Col(html.H5(['Graph']))),
         dbc.Row(
            [dbc.Col(width=0), dbc.Col(dcc.Graph(id='graph')), dbc.Col(width=0)],
            justify='center'# dbc.Rowの中身を中央揃えにする
            ),
        ]

　できたらcontainerに追加します．

container = [
    dbc.Row(
        [dbc.Col([], width=3, class_name='bg-secondary',
                 style={'height': '60vh', 'overflow': 'scroll'},
            ),
         dbc.Col(
             graph, width=9, style={'height': '60vh', 'overflow': 'scroll'}),
        ],
        ),
    dbc.Row(
        [dbc.Col(table_info, width=8, class_name='bg-info text-black'),
         dbc.Col(table_detail, width=4, class_name='bg-primary text-black'),
        ], style={'height': '40vh'},
        ),
]

　これでグラフの領域が確保できました．

表中のデータのグラフ化

　アプリ中の表に出力中のデータをグラフにするために，次のコールバック関数を定義します．

@app.callback(
    Output('graph', 'figure'),
    inputs={
        # フィルタ中のデータを使用するためにderived_virtual_dataを使用する
        'data_info': Input('table_info', 'derived_virtual_data'),
        'data_detail': Input('table_detail', 'derived_virtual_data'),
        },
    prevent_initial_call=True,
)
def update_graph(
        data_info, data_detail
    ):
    if len(data_info)==0:
        return go.Figure()
    df = pd.DataFrame(data_info)
    if len(data_detail)!=0:
        df = df.join(pd.DataFrame(data_detail).set_index('Filename'),
                     on='Filename', how='inner'
              ).reset_index()
    try:
        fig = px.scatter(df, x='Date', y='Requiring inpatient care',
                         color='Filename',
                        )
    except:
        fig = go.Figure()
    return fig