Improve plot appearance

[anebz]

The plots don't look good on small screens: read Streamlit design guide part 1 and part 2. Maybe we'll have to use another plot library?

Guides read, did some improvements but there was nothing on plots

Somehow color code columns (time ranges) with weather status? green:sunny, yellow:cloud, orange:rain, red:thunderstorm

st.plotly_chart(plot_data(givendaydf), width=800) ?

[AnglinaBhambra]

@anebz Would this solve the problem? https://discuss.streamlit.io/t/plotly-not-responsive-mobile-screen/2731/2

[anebz]

@anebz Would this solve the problem? https://discuss.streamlit.io/t/plotly-not-responsive-mobile-screen/2731/2

Yes this makes the plot narrower, which in mobile makes it even narrower. I don't think our plots need to be so sophisticated with all the cool thing that plotly gives us, a simple plot is enough. We'll have to investigate a simple plot that lets us plot 2 things (occupancy and temperature), and maybe also a vertical bar with weather status

[AnglinaBhambra]

I've made changes so that you can use a line plot with 2 lines. For the colour changing - what do you think about this: https://altair-viz.github.io/user_guide/customization.html#encoding ?

It would mean that the plot isn't a simple line chart though, so I'm not sure how it would look on small screens. Let me know how the modified line chart looks - then I will try with Altair.

[anebz]

I've made changes so that you can use a line plot with 2 lines. For the colour changing - what do you think about this: https://altair-viz.github.io/user_guide/customization.html#encoding ?

It would mean that the plot isn't a simple line chart though, so I'm not sure how it would look on small screens. Let me know how the modified line chart looks - then I will try with Altair.

Can you check and paste here how the plots look? you can run the app.py file right? I gave you the credentials and all the keys? 🤔 if I didn't, let me know and I'll resend

[AnglinaBhambra]

(Sorry it's not in dark mode haha)

Yes, but I thought it would be more useful to see what it looks like on a smaller screen.

[anebz]

Improve website layout: https://docs.streamlit.io/library/api-reference#layouts-and-containers st.line_chart? https://docs.streamlit.io/library/api-reference/charts/st.line_chart -> too simple, can't choose axis

Try altair chart https://github.com/streamlit/streamlit/issues/1129 https://discuss.streamlit.io/t/how-to-build-line-chart-with-two-values-on-y-axis-and-sorded-x-axis-acording-string/9490/3 https://altair-viz.github.io/gallery/line_with_ci.html