sustituimos las gráficas de pie individuales por un subplot

dinamyc.py

@@ -65,7 +65,7 @@ num_secuencias = [get_secuenciaciones_data(visita) for visita in [1,2,3,4]]
 
 
 # grafica de tres pies
 # grafica de tres pies
 
 
-tres_pies = make_subplots(rows=1, cols=2, specs=[[{"type": "domain"}, {"type": "domain"}]], subplot_titles=["Etapas terminadas", "Comidas por etapa"])
+tres_pies = make_subplots(rows=1, cols=3, specs=[[{"type":"domain"},{"type": "domain"}, {"type": "domain"}]], subplot_titles=["Pacientes por etapas terminadas", "Comidas por etapa", "Comidas por modo de recolección"])
 tres_pies.add_trace(
 tres_pies.add_trace(
     go.Pie(values=reclutados["finished_periods"].value_counts(), labels=reclutados["finished_periods"].value_counts().index),
     go.Pie(values=reclutados["finished_periods"].value_counts(), labels=reclutados["finished_periods"].value_counts().index),
     col=1, row=1
     col=1, row=1
@@ -74,14 +74,13 @@ tres_pies.add_trace(
     go.Pie(values=comidas_df["etapas"].value_counts(), labels=comidas_df["etapas"].value_counts().index),
     go.Pie(values=comidas_df["etapas"].value_counts(), labels=comidas_df["etapas"].value_counts().index),
     col=2, row=1
     col=2, row=1
 )
 )
+tres_pies.add_trace(
+    go.Pie(values=comidas_df["Source"].value_counts(), labels=comidas_df["Source"].value_counts().index),
+    col=3, row=1
+)
 tres_pies.update_traces(textinfo='value+label+percent')
 tres_pies.update_traces(textinfo='value+label+percent')
 tres_pies.update_layout(showlegend=False)
 tres_pies.update_layout(showlegend=False)
 
 
-# grafica estática de desempeño de reclutados.
-desempenio = px.pie(reclutados, names="finished_periods",  title="Etapas terminadas por la población reclutada", labels={'finished_periods':'Etapas concluidas'})
-# gráfica estática de distribución de comidas
-comidas_dist = px.pie(comidas_df, names="etapas", title="Comidas por etapa")
-comidas_por_fuente = px.pie(comidas_df, names="Source", title="Comidas por fuente")
 external_stylesheets = [
 external_stylesheets = [
     {
     {
         "href": (
         "href": (
@@ -96,7 +95,6 @@ app = Dash(__name__, external_stylesheets=external_stylesheets, server=server, u
 app.title = "NutrINDmex. Inventario de datos"
 app.title = "NutrINDmex. Inventario de datos"
 
 
 app.layout = html.Div(children=[
 app.layout = html.Div(children=[
-    html.Div(children=[dcc.Graph(figure=tres_pies)]),
     #encabezado
     #encabezado
     html.Div(children=[
     html.Div(children=[
         html.P(children="🥑", className="header-emoji"),
         html.P(children="🥑", className="header-emoji"),
@@ -105,23 +103,12 @@ app.layout = html.Div(children=[
         html.P(children=(str(len(participantes.index)) + " están incluidos en el estudio."),className="header-description"),
         html.P(children=(str(len(participantes.index)) + " están incluidos en el estudio."),className="header-description"),
     ],
     ],
     className="header",),
     className="header",),
-
     html.Div(children=[
     html.Div(children=[
         html.Div(children=[
         html.Div(children=[
-            html.H1("Desempeño de la población reclutada", className="header-title2"),
-            dcc.Graph(figure=desempenio)
-        ],         
-        className="wrapper"),
-        html.Div(children=[
-            html.H1("Datos para Análisis de comidas", className="header-title2"),
-            dcc.Graph(figure=comidas_dist)                
+            html.H1("Datos Generales", className="header-title2"),
+            dcc.Graph(figure=tres_pies)                
         ], className="wrapper"),
         ], className="wrapper"),
-        html.Div(children=[
-            html.H1("Datos para Análisis de comidas", className="header-title2"),
-            dcc.Graph(figure=comidas_por_fuente)                
-        ], className="wrapper"),
-
-    ],style={'display': 'flex', 'flexDirection': 'row'}, className="wrapper"),
+    ], className="wrapper"),
     # cobertura por fuente de datos
     # cobertura por fuente de datos
     html.Div(children=[ html.H1("Cobertura de pacientes por fuente de datos", className="header-title2") ]),
     html.Div(children=[ html.H1("Cobertura de pacientes por fuente de datos", className="header-title2") ]),
     # dos columnas: controles y gráfica de pacientes por fuente de datos
     # dos columnas: controles y gráfica de pacientes por fuente de datos