versión de la gráfica compuesta con elementos más ordenados

los dos dropdowns quedan arriba, en un único row
luego la gráfica
luego los dos sliders, en un row cada uno.
parent 48fdda09
...@@ -111,59 +111,67 @@ app.layout = html.Div(children=[ ...@@ -111,59 +111,67 @@ app.layout = html.Div(children=[
], className="wrapper"), ], className="wrapper"),
], className="wrapper"), ], className="wrapper"),
# cobertura por fuente de datos, working # cobertura por fuente de datos, working
# es una sucesión de divs.
# el titulo.
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: un dropdown en cada una, con su respectivo título.
html.Div(children=[ html.Div(children=[
html.Div(children="Etapa", className="menu-title"), html.Div(children=[
dcc.Dropdown( html.P("Etapa", className="menu-title"),
id="etapas_serie", dcc.Dropdown(
options=[ id="etapas_serie",
{"label":1, "value":1}, options=[
{"label":2, "value":2}, {"label":1, "value":1},
{"label":3, "value":3}, {"label":2, "value":2},
], {"label":3, "value":3},
value=1, ],
clearable=False, value=1,
searchable=False, clearable=False,
className="dropdown", searchable=False,
), className="dropdown",
],className="wrapper"), ),
],className="wrapper"),
html.Div(children=[
html.P(children="Distribución", className="menu-title"),
dcc.Dropdown(
id="distribucion_serie",
options=[
{"label":"Comidas por paciente", "value":1},
{"label":"Días de glucómetro por paciente", "value":2},
],
value=1,
clearable=False,
searchable=False,
className="dropdown",
),
],className="wrapper"),
],style={'display':'flex', 'flexDirection':'row','justify-content': 'center',
'align-items': 'center'},
className="wrapper"),
# la gráfica
html.Div(children=[dcc.Graph(id="cover_series")],className="wrapper"),
# el dropdwon de comidas
html.Div(children=[ html.Div(children=[
html.Div(children="Comidas", className="menu-title"), html.P(children="Número mínimo de comidas", className="menu-title"),
dcc.Slider( dcc.Slider(
id="min_comidas_serie", id="min_comidas_serie",
min=1, min=1,
max=Comidas_totales_e, max=Comidas_totales_e,
value=15, value=15,
marks={1:"1",15:"15", 21:"21",30:"30",42:"42", Comidas_totales_e:str(Comidas_totales_e)} marks={1:"1",5:"5",10:"10",15:"15", 21:"21",30:"30", Comidas_totales_e:str(Comidas_totales_e)}
), ),
],className="wrapper"), ],className="wrapper"),
# el dropdown de glucómetro
html.Div(children=[ html.Div(children=[
html.Div(children="Días con glucómetro", className="menu-title"), html.P(children="Númer mínimo de días con glucómetro", className="menu-title"),
dcc.Slider( dcc.Slider(
id="min_glucosa_serie", id="min_glucosa_serie",
min=1, min=1,
max=Glucometro_e, max=Glucometro_e,
value=7, value=7,
marks={1:"1", 7:"7", 14:"14", 28:"28", 42:"+42"} marks={1:"1", 5:"5", 7:"7", 10:"10",14:"14"}, className="slider",
), ),
],className="wrapper"), ],className="wrapper"),
html.Div(children=[
html.Div(children="Distribución", className="menu-title"),
dcc.Dropdown(
id="distribucion_serie",
options=[
{"label":"Comidas por paciente", "value":1},
{"label":"Días de glucómetro por paciente", "value":2},
],
value=1,
clearable=False,
searchable=False,
className="dropdown",
),
],className="wrapper"),
#gráfica
html.Div(children=[dcc.Graph(id="cover_series")],className="wrapper"),
# cobertura de pacientes por prueba. working. # cobertura de pacientes por prueba. working.
html.Div(children=[ html.Div(children=[
html.H1("Cobertura de pacientes por protocolo.", className="header-title2"), html.H1("Cobertura de pacientes por protocolo.", className="header-title2"),
...@@ -258,7 +266,7 @@ def update_cobertura_series(etapaSel=1, min_comidas=10, min_glucosa=7, distribuc ...@@ -258,7 +266,7 @@ def update_cobertura_series(etapaSel=1, min_comidas=10, min_glucosa=7, distribuc
) )
multi.update_xaxes(title_text=f'{N_etapa} pacientes', row=2, col=1) multi.update_xaxes(title_text=f'{N_etapa} pacientes', row=2, col=1)
multi.update_yaxes(title_text=medCadena, row=2, col=1) multi.update_yaxes(title_text=medCadena, row=2, col=1)
multi.add_shape(go.layout.Shape(type='line', yref='y1', xref='x1', x0=0, x1=800, xsizemode='pixel', y0=minimo, y1=minimo, multi.add_shape(go.layout.Shape(type='line', yref='y1', xref='x1', x0=0, x1=1000, xsizemode='pixel', y0=minimo, y1=minimo,
line=dict(color='red', width=1, dash='dot'))) line=dict(color='red', width=1, dash='dot')))
return multi return multi
......
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