cirogalvao
cirogalvao

Reputation: 17

How to customize Plotly charts for desktop and mobile views in a Streamlit dashboard?

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

Answers (0)

Related Questions