Hi Guys, Im back
I’m having a problem with responsiveness in my app when I modify the screen dimension for mobile display, I thought my code was right, but it’s not what it looks like… Can anyone help me?
My code for review:
opcoes = df[['Rnd','ACS','K:D','KAST','ADR','KPR','APR','FKPR','FDPR','HS%','CL%','CL','KMax','K','D','A','FK','FD']].columns.values
col_table = df[['Player', 'ACS','K:D','KAST','ADR']]
fig_pick = px.pie(map_pick, values='Total', names='Map', title='Pick Maps', height=310)
fig_pick.update_layout(margin=dict(l=40, r=55, t=45, b=20) ,autosize=True , template='slate')
#fig_pick.update_layout(margin=go.layout.Margin(l=15, r=15, t=40, b=15) ,autosize=True , template='lux')
fig_ban = px.pie(map_ban, values='Total', names='Map', title='Ban Maps', height=310)
fig_ban.update_layout(margin=dict(l=40, r=55, t=45, b=20) ,autosize=True , template='slate')
fig_atk = px.bar(map_side, x='Map', y='Atk Wins', color='Map', title='Taxa de Vitórias nos mapas no lado de ataque pelo Valorant Champions em %:',
labels={
'Atk Wins': 'Vitórias no lado de Ataque em %',
'Map': 'Mapa' }, text='Atk Wins', height=310)
fig_atk.update_traces(textposition='inside',texttemplate='%{text:.3s}' )
fig_atk.update_layout(margin=dict(l=40, r=55, t=45, b=20),autosize=True, template='slate')
fig_def = px.bar(map_side, x='Map', y='Def Wins', color='Map', title='Taxa de Vitórias nos mapas no lado de defesa pelo Valorant Champions em %:',
labels={
'Def Wins': 'Vitórias no lado de Defesa em %',
'Map': 'Mapa' }, text='Def Wins', height=310)
fig_def.update_traces(textposition='inside',texttemplate='%{text:.3s}')
fig_def.update_layout(margin=dict(l=40, r=55, t=45, b=20),autosize=True, template='slate')
image_path = 'assets/5.png'
app.layout = dbc.Container(children=[
dbc.Row([
dbc.Col([
dbc.Card([
html.Img(src=image_path, style={'padding': '2px'}),
html.Hr(),
html.H2('Dashboard Valorant Stats'),
html.Hr(),
html.H5('Opcões'),
dcc.Dropdown(opcoes, value = 'ACS' , id='check_opcao', maxHeight=300, style={'color': 'MediumTurqoise', 'font-size': 20}),
],style={'height': '94vh', 'margin': '17px', 'padding': '17px'})
], width=2, sm=2, md=2),
dbc.Col([
dbc.Row([
html.H1('Player Stats', style={'margin-top': '30px'}),
dbc.Col([dbc.Card(dcc.Graph( id='grafico_gc_players'))] , width={"size": 8}, sm=8, md=8),
dbc.Col([
dbc.Label('Click a cell in the table:'),
dash_table.DataTable(df.to_dict('records'),[{"name": i, "id": i} for i in col_table.columns], page_size=10 , id='tbl',
style_cell_conditional=[
{'if': {'column_id': 'Player'},
'width': '10%'}
],
)
],style={'padding': '30px'}, width={"size": 4}, sm=4, md=4)
]),
dbc.Row([
html.H1('Maps Stats', style={'margin-top': '10px'}),
dbc.Col([dbc.Card(dcc.Graph(id='map_pick', figure=fig_pick))], width=3, sm=3, md=3),
dbc.Col([dbc.Card(dcc.Graph(id='map_side_atk', figure=fig_atk ))], width=7, sm=7, md=7),
]),
dbc.Row([
dbc.Col([dbc.Card(dcc.Graph(id='map_ban', figure=fig_ban))], width=3, sm=3, md=3),
dbc.Col([dbc.Card(dcc.Graph(id='map_side_def', figure=fig_def ))], width=7, sm=7, md=7)
], style={'margin-top': '16px'})
],width=10, sm=10, md=10)
])
], fluid=True, className="dbc")
@app.callback(
Output('grafico_gc_players', 'figure'),
[
Input('check_opcao', 'value'),
])
def renderizar_graficos(check_opcao):
if check_opcao == 'ACS':
fig = px.bar(df.nlargest(10, 'ACS'), x= 'Player', y= 'ACS', title='Top 10 jogadores em: ' + check_opcao, color='Player', barmode = 'stack',
labels={
'Player': 'Nome e Time',
'ACS': 'ACS'}, text='ACS')
elif check_opcao == 'HS%':
fig = px.scatter(df.nlargest(10, 'HS%'), x="Player", y= check_opcao, title='Os 10 Jogadores com a maior taxa de HS e seu KD no Valorant Champions:',
color="Player",
labels={
'Player': 'Jogador',
'HS%': 'HS%'}, size='ACS',
hover_data=['Player'] , text='HS%')
else :
fig = px.bar(df.nlargest(10, check_opcao), x='Player', y= check_opcao, color= check_opcao, title='Top 10 jogadores em: ' + check_opcao, barmode = 'stack',
labels={
'Player': 'Nome e Time'}, text= check_opcao)
fig.update_layout( template='slate')
return fig
