The hovering over days on the right returns hover data and triggers the hourly graph to change. Like so
I tried to set a no hover data to reset the graph but couldn’t make it work. Once a day is hovered over, the graph stays that way. 100 cool points if you can tell me how to regraph original data once the user is no longer hovering of the days bar graph.
I have a button that lets a user refresh the graph to its original state. So now I would like to have it in the top corner of the graph or at least aligned to the top. I have tried quite a few ways to get to this state but the button stubbornly appears in the middle. I am assuming this might have to do with the className but that is something I have to stick with for the rest of the dashboard to retain the look.
2000 cool points if you can tell me how to put a button in the bullseye of the px.polar! Thank you!
code
def get_left_panel(data=None):
from dash import dcc, html
import dash_bootstrap_components as dbc
import dash_extensions as de
inactive_lottie_options = dict(loop=True, autoplay=True,
rendererSettings=dict(preserveAspectRatio='xMidYMid slice'))
#refresh = 'https://assets2.lottiefiles.com/packages/lf20_d1bvq3gm.json'
refresh = 'https://assets5.lottiefiles.com/packages/lf20_jvi4ucin.json'
daily_refresh_lottie = de.Lottie(options=inactive_lottie_options, width="2rem", height="2rem", url=refresh,
id='refresh_daily_lottie')
fig_daily = get_daily(data)
fig_hourly = get_hourly(data)
fig_lang = get_lang(data=data)
left_panel = [
html.Div([
dbc.Button(daily_refresh_lottie,
id="daily-refresh",
n_clicks=0, color='primary',
className="btn btn-outline-light",
style={
'textAlign': 'top',
'margin-top':'0px',
'margin-right':'-15px',
'margin-botton':'50px',
'border-radius': '5px',
'border': 'none',
'padding': '2px',
'verticalAlign': 'top',
'width': '10%'
}
),
dbc.Popover(target="daily-refresh", trigger="hover", id="popover_daily",
className="d-none"),
dcc.Graph(id='hourly',
config={'displayModeBar': False},
figure=fig_hourly,
responsive='auto',
style={
'width': '60%',
'float': 'left',
'stroke-width': '5px',
'borderWidth': '0px',
'borderRadius': '0px',
'textAlign': 'center',
'margin': '2px',
'backgroundColor': 'rgba(0,0,0,0)',
}),
dcc.Graph(id='daily',
config={'displayModeBar': False},
responsive='auto',
figure=fig_daily,
style={
'width': '26%',
'float': 'right',
'stroke-width': '5px',
'margin-left': '-15px',
'borderWidth': '0px',
'borderRadius': '0px',
'textAlign': 'center',
'margin': '2px',
'backgroundColor': 'rgba(0,0,0,0)',
}),
], className='modal-header',
style={
'verticalAlign': 'top',
'padding': '5px',
'box-shadow': '5px 5px 5px black',
'borderRadius': '10px',
}
),
html.Div([
dbc.Col([
dcc.Graph(id='language',
responsive='auto',
config={'displayModeBar': False},
figure=fig_lang),
get_tweets_table(data)], width=12)
] , className='modal-header',
style={
'margin-top':'15px',
'padding': '5px',
'box-shadow': '5px 5px 5px black',
'borderRadius': '10px',
'textAlign': 'top'
})
]
return left_panel