Black Lives Matter. Please consider donating to Black Girls Code today.

Only DAQ Tank is Visible in Tab

Hi All,

I’ve been playing a lot with Dash lately and could always find an answer to my numerous questions on the forum.
Today is the day I am facing a new issue but cannot find any answer.

Here is the problem: I built a Dashboard displaying multiple DAQ’s in a div. It worked perfectly fine.
I then decided to place all these DAQ’s in a tab so that I can add more and switch from one tab to the other, in the same html.div !

Unfortunately, when doing so, only the daq.Tank are displayed (but daq.Gauge and daq.Thermometer do not).

Here is what it looks like before putting it into a tab:


And here is what it looks like after:

Here are snippets of code:

Where I’ll place my DAQ’s:

#Health and Alarms            
                html.Div([ #div for dash daq --> indicators for the day
                
                        dcc.Tabs(id="tabs-health", value='tab_metrics', children=[
                            dcc.Tab(label='Metrics', value='tab_metrics',style=tab_style,selected_style=tab_selected_style),
                            dcc.Tab(label='Alarms', value='tab_alarms',style=tab_style,selected_style=tab_selected_style)
                        ], style=tabs_styles),
                        
                        html.Div(id='container-health')]),

And here is for the callback when selecting a Tab (the exact same structure as I used previously):

@app.callback(
        Output('container-health','children'),
        [Input('metrics_data','children'),
        Input('tabs-health','value')]
        )
def pick_tab(metrics_data_json,tab):
    metrics =pd.read_json(metrics_data_json)
    if tab == 'tab_metrics':
        return html.Div([
                    html.Div([
                            daq.Gauge(
                                id='gauge1',
                                size=180,
                                style={'margin-top':'20px'},
                                color={"gradient":True,"ranges":{"red":[0,3],"orange":[3,4],"yellow":[4,4.5],"green":[4.5,5]}},
                                value=metrics['val_gauge1'],
                                max=5,
                                min=0,
                                )
                            ],style={'width': '18%', 'display': 'inline-block','verticalAlign':'middle'}),
                            
                    html.Div([
                            daq.Gauge(
                                id='gauge2',
                                size=180,
                                style={'margin-top':'20px'},
                                color={"gradient":True,"ranges":{"red":[0,3],"orange":[3,4],"yellow":[4,4.5],"green":[4.5,5]}},
                                value=metrics['val_gauge2'],
                                max=5,
                                min=0,
                                )
                            ],style={'width': '18%', 'display': 'inline-block','verticalAlign':'middle'}),
                
                    html.Div([
                            daq.Thermometer(
                                id='thermometer1',
                                style={'margin-top':'20px'},
                                value=metrics['temp'],
                                showCurrentValue=True,
                                units='°C',
                                height=180,
                                max=0,
                                min=-20,
                                scale={'interval':2, 'labelInterval':4}
                                )
                            ],style={'width': '12%', 'display': 'inline-block','verticalAlign':'middle'}),
                         
                    html.Div([
                            daq.Tank(
                                id='Tank1',
                                value=metrics['va_T1'],
                                max=metrics['max_T1'],
                                min=0,
                                showCurrentValue=True,
                                units='kWh',
                                color='powderblue'
                                )
                            ],style={'width': '15%', 'display': 'inline-block','verticalAlign':'middle'}),
#                        
                    html.Div([
                            daq.Tank(
                                id='Tank2',
                                value=metrics['val_T2'],
                                max=metrics['max_T2'],
                                min=0,
                                showCurrentValue=True,
                                units='kWh',
                                color='orangered'
                                )
                            ],style={'width': '15%', 'display': 'inline-block','verticalAlign':'middle'}),
                            
                    html.Div([
                            daq.Gauge(
                                id='Gauge3',
                                size=180,
                                style={'margin-top':'20px'},
                                color={"gradient":True,"ranges":{"red":[0,1],"orange":[1,2],"yellow":[2,3],"green":[3,6]}},
                                value=metrics['Gauge3_val'],
                                max=6,
                                min=0,
                                showCurrentValue=True
                                )
                            ],style={'width': '18%', 'display': 'inline-block','verticalAlign':'middle'}),                     
                        
                    ], style={
                        'borderBottom': 'thin lightgrey solid',
                        'backgroundColor': 'rgb(242, 242, 242)',
                        'padding': '10px 5px'
                        })
     
    elif tab=='tab_alarms':
         return html.Div(['ALARMS'])

Did I miss something there ?

Thanks a lot for your help :)!

Just found my mistake.
Forcing values to be float solved the issue --> value = float(metrics[‘my_value’]).

The reason it did not work has nothing to do with the fact that I now use tabs.

When I switched to using tabs, instead of setting all values from my multiple indicators using the Output(‘Indicator_id’,‘value’), I decided to write everything in a hidden container, in Json format.
But when reading this Json data and using it, I did not force the type to float. It prevented indicators from displaying.
NB: when inspecting the page and looking at my JSON data, it was impossible to identify.