Reputation: 17
I am developing a dashboard using the Streamlit package, and I'm embedding it into a WordPress site via a URL. For the charts, I'm using the Plotly package.
I would like to customize the chart configurations based on the user's device. Specifically, I want one set of configuration when the dashboard is viewed on a desktop, and a different set when viewed on a mobile device.
Is there a way to dynamically adjust the chart settings in Plotly based on whether the user is on a desktop or mobile device? I'm looking for a solution that allows for responsive behavior in the visualizations.
In the code below, how can I adjust a function to return 'mobile' or 'desktop' based on the device it is been displayed?
!pip install streamlit
!pip install plotly
!pip install numpy
import streamlit as st
import plotly.graph_objs as go
import numpy as np
def is_mobile():
# here is necessary a code to define if the device is a mobile or a desktop
# Exibir título da aplicação
st.title('Gráfico Interativo com Plotly e Streamlit')
# Dados de exemplo para o gráfico
x = [1, 2, 3, 4, 5]
y = [10, 11, 12, 13, 14]
# Criação do gráfico com Plotly
fig = go.Figure(data=go.Scatter(x=x, y=y, mode='lines+markers', name='Exemplo'))
# Atualizando layout do gráfico
fig.update_layout(
title='Gráfico de Exemplo',
xaxis_title='Eixo X',
yaxis_title='Eixo Y',
)
# Configuração condicional do gráfico baseado no dispositivo
if is_mobile():
print('mobile')
# Ajuste para dispositivos móveis
st.plotly_chart(fig, use_container_width=True)
else:
print('desktop')
# Ajuste para desktop
col1, col2 = st.columns([2, 1]) # Layout com 2 colunas, a maior ocupa mais espaço
with col1:
st.plotly_chart(fig, use_container_width=True)
with col2:
st.write("Aqui poderia ter outro conteúdo ou informações adicionais.")
Upvotes: -1
Views: 28