stacked indicators para comidas y glucosa.

se agregagó una gráfica "stacked" y dos sliders, uno para cada gráfica
en el stacked graph.

dinamyc.py

@@ -40,18 +40,37 @@ app.layout = html.Div(
             ],
             className="header",
         ),
+        html.Div(children=[
+            html.Div(children=[
+                "Min. Comidas",
+                dcc.Slider(
+                    id="comida-slider",
+                    min=1,
+                    max=42,
+                    value=10,
+                #    marks={10:"babjo", 50:"medio", 100:"alto"}
+                ),
+                "Dias con Glucómetro",
+                dcc.Slider(
+                    id="glucosa-slider",
+                    min=1,
+                    max=42,
+                    value=7,
+                    #marks={10:"low", 50:"medium", 100:"alto"})
+                    )
+            ]
+            ),
+            dcc.Graph(id="multi-chart")],
+                 className="wrapper"),
         html.Div(
             children=[
                 html.Div(children="Mínimo de comidas", className="menu-title"),
-                dcc.Dropdown(
+                dcc.Slider(
                     id="comidas-filter",
-                    options=[
-                        {"label": comida, "value": comida}
-                        for comida in comidas
-                    ],
+                    min=0,
+                    max=40,
                     value=10,
-                    clearable=False,
-                    className="dropdown",
+                    marks={10:"10", 20:"20", 30:"30", 40:"40"},
                 ),
                 dcc.Graph(
                     id="comidas-chart",
@@ -107,22 +126,25 @@ app.layout = html.Div(
 @app.callback(
     Output("comidas-chart", "figure"),
     Output("glucosa-chart", "figure"),
-    Output("visitas-chart", "figure"),        
+    Output("visitas-chart", "figure"),
+    Output("multi-chart", "figure"),    
     Input("comidas-filter", "value"),
     Input("glucosa-filter", "value"),
-    Input("visitas-filter", "value"),    
+    Input("visitas-filter", "value"),
+    Input("comida-slider", "value"),
+    Input("glucosa-slider", "value"),            
 )
-def update_charts(ncomidas, glucosa, nvisitas):
+def update_charts(ncomidas, glucosa, nvisitas, comidaslider, glucosaslider):
     filtered_data = data.query(
-        "medibles >= @ncomidas"
+        "Selectedfoods >= @ncomidas"
     )
     total_data = len(data.index)
     comidas_chart_figure = go.Figure(go.Indicator(
-    mode = "gauge+number",
-    value = filtered_data["medibles"].count(),
-    domain = {'x': [0, 1], 'y': [0, 1]},
+        mode = "gauge+number",
+        value = filtered_data["medibles"].count(),
+        domain = {'x': [0, 1], 'y': [0, 1]},
         title = {'text': "Ptes"},
-    gauge = {'axis': {'range': [None, total_data]}, 'shape': 'bullet'}))
+        gauge = {'axis': {'range': [None, total_data]}, 'shape': 'bullet'}))
 
     glucosa_data = data.query("Days_glucose >= @glucosa")
     glucosa_chart_figure = go.Figure(go.Indicator(
@@ -139,10 +161,51 @@ def update_charts(ncomidas, glucosa, nvisitas):
     domain = {'x': [0, 1], 'y': [0, 1]},
         title = {'text': "Ptes"},
     gauge = {'axis': {'range': [None, total_data]}, 'shape': 'bullet'}))
+
+
+    multi = go.Figure()
+
+
+    comidas_data = data.query("Selectedfoods >= @comidaslider")
+    multi.add_trace(go.Indicator(
+        mode = "number+gauge+delta", value = comidas_data["medibles"].count(),
+        delta = {'reference': 200},
+        domain = {'x': [0.25, 1], 'y': [0.08, 0.25]},
+        title = {'text': "Con comidas"},
+        gauge = {
+            'shape': "bullet",
+            'axis': {'range': [None, total_data]},
+            'threshold': {
+                'line': {'color': "black", 'width': 2},
+                'thickness': 0.75,
+                'value': total_data*0.75},
+            'steps': [
+                {'range': [0, total_data*0.25], 'color': "gray"},
+                {'range': [total_data*0.25, total_data*0.75], 'color': "lightgray"}],
+            'bar': {'color': "black"}}))
+
+    glucosa_data2 = data.query("Days_glucose >= @glucosaslider") 
+    multi.add_trace(go.Indicator(
+        mode = "number+gauge+delta", value = glucosa_data2["medibles"].count(),
+        delta = {'reference': 200},
+        domain = {'x': [0.25, 1], 'y': [0.4, 0.6]},
+        title = {'text': "Glucómetro"},
+        gauge = {
+            'shape': "bullet",
+            'axis': {'range': [None, total_data]},
+            'threshold': {
+                'line': {'color': "black", 'width': 2},
+                'thickness': 0.75,
+                'value': total_data*0.75},
+            'steps': [
+                {'range': [0, total_data*0.25], 'color': "gray"},
+                {'range': [total_data*0.25, total_data*0.75], 'color': "lightgray"}],
+            'bar': {'color': "black"}}))
+
     
 
-    return comidas_chart_figure, glucosa_chart_figure, visitas_chart_figure
+    return  comidas_chart_figure, glucosa_chart_figure, visitas_chart_figure, multi
 
 
 if __name__ == "__main__":
-    app.run_server(debug=True)
+    app.run_server(debug=True, port=8051)