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.

dinamyc.py

@@ -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"),
-        dcc.Dropdown(
-          id="etapas_serie",
-          options=[
-            {"label":1, "value":1},
-            {"label":2, "value":2},
-            {"label":3, "value":3},
-           ],
-           value=1,
-           clearable=False,
-           searchable=False,
-           className="dropdown",
-        ),      
-    ],className="wrapper"),
+        html.Div(children=[
+            html.P("Etapa", className="menu-title"),
+            dcc.Dropdown(
+                id="etapas_serie",
+                options=[
+                    {"label":1, "value":1},
+                    {"label":2, "value":2},
+                    {"label":3, "value":3},
+                ],
+                value=1,
+                clearable=False,
+                searchable=False,
+                className="dropdown",
+            ),      
+        ],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
     )
     )
     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