optimización de identación del layout

para que sea más fácil de leer/modificar.

también se le agregaron algunos comentarios para identificar las
diferentes secciones y sus componentes.
parent 6b30b121
...@@ -89,213 +89,174 @@ external_stylesheets = [ ...@@ -89,213 +89,174 @@ external_stylesheets = [
app = Dash(__name__, external_stylesheets=external_stylesheets) app = Dash(__name__, external_stylesheets=external_stylesheets)
app.title = "NutrINDmex. Inventario de datos" app.title = "NutrINDmex. Inventario de datos"
app.layout = html.Div( app.layout = html.Div(children=[
children=[ #encabezado
#encabezado html.Div(children=[
html.Div( html.P(children="🥑", className="header-emoji"),
children=[ html.H1(children="Inventario de datos", className="header-title"),
html.P(children="🥑", className="header-emoji"), html.P(children=(str(Total_pacientes) + " participantes."),className="header-description"),
html.H1(children="Inventario de datos", className="header-title"), html.P(children=(str(Total_incluidos) + " están incluidos en el análisis."),className="header-description"),
html.P(children=(str(Total_pacientes) + " participantes."),className="header-description"), ],
html.P(children=(str(Total_incluidos) + " están incluidos en el análisis."),className="header-description"), className="header",),
], html.Div(children=[ html.H1("Cobertura de pacientes por fuente de datos", className="header-title2") ]),
className="header", # dos columnas: controles y gráfica de pacientes por fuente de datos
), html.Div(children=[
html.Div(children=[ html.H1("Cobertura de pacientes por fuente de datos", className="header-title2") ]), #controles
html.Div( html.Div(children=[
children=[ html.Div(children="Etapa", className="menu-title"),
html.Div( dcc.Dropdown(
children=[ id="etapaSel",
html.Div(children="Etapa", className="menu-title"), options=[
dcc.Dropdown( {"label":1, "value":1},
id="etapaSel", {"label":2, "value":2},
options=[ {"label":3, "value":3},
{"label":1, "value":1}, ],
{"label":2, "value":2}, value=1,
{"label":3, "value":3}, clearable=False,
], searchable=False,
value=1, className="dropdown",
clearable=False,
searchable=False,
className="dropdown",
),
"Comidas",
dcc.Slider(
id="min_comidas",
min=1,
max=Comidas_totales_e,
value=15,
marks={1:"1",15:"15", 21:"21",30:"30",42:"42", Comidas_totales_e:str(Comidas_totales_e)}
),
"Dias con Glucómetro",
dcc.Slider(
id="min_glucosa",
min=1,
max=Glucometro_e,
value=7,
marks={1:"1", 7:"7", 14:"14", 28:"28", 42:"+42"}
),
]
),
html.Div(children=[dcc.Graph(id="multi-chart")],)
],style={'display': 'flex', 'flexDirection': 'row'},
className="wrapper"
),
html.Div(
children=[
html.H1("Cantidad de datos por paciente", className="header-title2"),
html.Div(
children=[
html.Div(
children=[
html.Div(
children=[
html.Div(children="Etapa", className="menu-title"),
dcc.Dropdown(
id="etapaDet",
options=[
{"label":1, "value":1},
{"label":2, "value":2},
{"label":3, "value":3},
{"label":"No-Clas.", "value":99}
],
value=1,
clearable=False,
searchable=False,
className="dropdown",
),
],
className="wrapper"
),
html.Div(
children=[
html.Div(children="Fuente", className="menu-title"),
dcc.Dropdown(
id="medidaDet",
options=[
{"label":"Comidas", "value":1},
{"label":"Glucómetro", "value":2},
],
value=1,
clearable=False,
searchable=False,
className="dropdown",
),
],
className="wrapper",
),
],
style={"display":"flex", "flexDirection": "row"},
),
],
),
dcc.Graph(id="detalle_figura"),
],
className="wrapper"
), ),
"Comidas",
html.Div( dcc.Slider(
children=[ id="min_comidas",
html.H1("Visitas / Secuenciaciones", className="header-title2"), min=1,
max=Comidas_totales_e,
value=15,
marks={1:"1",15:"15", 21:"21",30:"30",42:"42", Comidas_totales_e:str(Comidas_totales_e)}
),
"Dias con Glucómetro",
dcc.Slider(
id="min_glucosa",
min=1,
max=Glucometro_e,
value=7,
marks={1:"1", 7:"7", 14:"14", 28:"28", 42:"+42"}
),
]),
#gráfica
html.Div(children=[dcc.Graph(id="multi-chart")],)
],style={'display': 'flex', 'flexDirection': 'row'}, className="wrapper"),
# segundo 'panel': datos existentes por paciente.
html.Div(children=[
html.H1("Cantidad de datos por paciente", className="header-title2"),
# controles y gráfica
html.Div(children=[
# controles
html.Div(children=[
#dropdown etapa
html.Div(children=[
html.Div(children="Etapa", className="menu-title"),
dcc.Dropdown(
id="etapaDet",
options=[
{"label":1, "value":1},
{"label":2, "value":2},
{"label":3, "value":3},
{"label":"No-Clas.", "value":99}
],
value=1,
clearable=False,
searchable=False,
className="dropdown",
),
], className="wrapper"),
# dropdown fuente
html.Div(children=[ html.Div(children=[
html.Div(children="Fuente", className="menu-title"),
dcc.Dropdown(
id="medidaDet",
options=[
{"label":"Comidas", "value":1},
{"label":"Glucómetro", "value":2},
],
value=1,
clearable=False,
searchable=False,
className="dropdown",
),
],className="wrapper",),
], style={"display":"flex", "flexDirection": "row"},),
],),
#grafica
dcc.Graph(id="detalle_figura"),
], className="wrapper"),
# gráficas de visitas
html.Div(children=[
html.H1("Visitas / Secuenciaciones", className="header-title2"),
html.Div(children=[
dcc.Graph(figure=vis_sec), dcc.Graph(figure=vis_sec),
# dcc.Graph( ], className="wrapper"),
# figure=scat), ]),
#gráficas de visitas
], html.Div(children=[
className="wrapper" html.H1("Detalle de visitas", className="header-title2"),
), html.P("..en construcción..", style={"color":"red", "font-style":"italic"}),
] html.Div(children="Visita", className="menu-title"),
), dcc.Dropdown(
id="visitaSel",
options=[
html.Div( {"label":1, "value":1},
children=[ {"label":2, "value":2},
html.H1("Detalle de visitas", className="header-title2"), {"label":3, "value":3},
html.P("..en construcción..", style={"color":"red", "font-style":"italic"}), {"label":4, "value":4}
html.Div(children="Visita", className="menu-title"),
dcc.Dropdown(
id="visitaSel",
options=[
{"label":1, "value":1},
{"label":2, "value":2},
{"label":3, "value":3},
{"label":4, "value":4}
],
value=1,
clearable=False,
searchable=False,
className="dropdown",
),
dcc.Graph(id="multi-visitas"),
], ],
className="wrapper", value=1,
clearable=False,
searchable=False,
className="dropdown",
), ),
html.Div( dcc.Graph(id="multi-visitas"),
children=[ ], className="wrapper",),
html.H1("Cobertura de pacientes por prueba", className="header-title2"), # cobertura de pacientes por prueba
html.Div(children=[
html.H1("Cobertura de pacientes por prueba", className="header-title2"),
# selector de etapa y gráfica
html.Div(children=[
html.Div(children=[
html.Div(children=[ html.Div(children=[
html.Div( html.Div(children="Etapa", className="menu-title"),
children=[ dcc.Dropdown(
html.Div( id="visitaPruebas",
children=[ options=[
html.Div(children="Etapa", className="menu-title"), {"label":1, "value":1},
dcc.Dropdown( {"label":2, "value":2},
id="visitaPruebas", {"label":3, "value":3},
options=[ {"label":4, "value":4}
{"label":1, "value":1}, ],
{"label":2, "value":2}, value=1,
{"label":3, "value":3}, clearable=False,
{"label":4, "value":4} searchable=False,
], className="dropdown",
value=1,
clearable=False,
searchable=False,
className="dropdown",
),
], className="wrapper"
),
], style={"display":"flex", "flexDirection": "row"},
), ),
], className="wrapper"),
], style={"display":"flex", "flexDirection": "row"},),
],),
dcc.Graph(id="detalle_pruebas"),
], className="wrapper"),
# datos para análisis de comidas
html.Div(children=[
html.H1("Datos para Análisis de comidas", className="header-title2"),
html.P("..en construcción..", style={"color":"red", "font-style":"italic"}),
# dropdown
html.Div(children=[
html.Div(children="Etapa", className="menu-title"),
dcc.Dropdown(
id="mesurableEt",
options=[
{"label":"1", "value":1},
{"label":"2", "value":2},
{"label":"3", "value":3},
{"label":"Total", "value":5},
], ],
), value=1,
dcc.Graph(id="detalle_pruebas"), clearable=False,
], searchable=False,
className="wrapper" className="dropdown",
), ),
html.Div( ], className="wrapper"),
children=[ dcc.Graph(id="mesurables")
html.H1("Datos para Análisis de comidas", className="header-title2"), ], className="wrapper")
html.P("..en construcción..", style={"color":"red", "font-style":"italic"}), ]) # cierre del layout
html.Div(
children=[
html.Div(children="Etapa", className="menu-title"),
dcc.Dropdown(
id="mesurableEt",
options=[
{"label":"1", "value":1},
{"label":"2", "value":2},
{"label":"3", "value":3},
{"label":"Total", "value":5},
],
value=1,
clearable=False,
searchable=False,
className="dropdown",
),
], className="wrapper"
),
dcc.Graph(id="mesurables")
], className="wrapper"
)
]
)
@app.callback( @app.callback(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment