GibbsConsulting / django-plotly-dash

Expose plotly dash apps as django tags
MIT License
560 stars 125 forks source link

small window #450

Open mhostn3 opened 1 year ago

mhostn3 commented 1 year ago

Hello guys,

I have a problem after deploying the app to Django (on PythonAnywhere). The dash app appears in a very small window. One option to solve this is to use 'ratio' argument. But is there any option like ratio=auto?

smallwindow Thank you very much

delsim commented 1 year ago

@mhostn3 the challenge is that something has to actually pick a size - and that something is the ratio argument (for the basic tag) or the aspect (for the bootstrap tag). Dash wants to be told how big it should be, and the outer html wants to be told how big the Dash component is. We use 100% of the width of the containing element, but height is harder.

An arbitrary value of 10% for the ratio of height to width was used, not for any specific reason, other than to encourage the user to pick a value appropriate for their use case. This could be changed - although a new standard value would need to be chosen - or can be easily implemented locally by creating a new template tag that just inserts the plotly_app template tag with a different value for this ratio.

mhostn3 commented 1 year ago

@delsim Thank you very much for your answer. Ok, good to know. I was just expecting that it would automatically assume the ratio the same way as it does if I run the dash app outside Django. In case I want two different ratios depending on the device size, what should I do? Adding two tags with different ratios? Is it the same way if I use the Bootstrap tag?

Thank you again!

delsim commented 1 year ago

@mhostn3 I'd use the bootstrap variant, and then leverage how that framework allows you to set layout according to viewport side. Or at least that is what I would try - and I am interested to hear how well (or indeed if at all) this approach works.

mhostn3 commented 1 year ago

@delsim Thanks for your answer. I have tried different variants. The one that worked the best was {%plotly_direct name="SimpleExample"%}. Is there any drawback to using this method? Are they all equivalent (regarding loading, reading code etc.) except for how it is embedded in the DOM?

Thanks