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 :)!