Closed ped59430 closed 4 years ago
What I mean by special is:
style="height:600px"
or in the layout
object with height : 600
.Would you have any knowledge on the responsive mechanism that would explain this behaviour?
In src/components/Plotly.vue
, I have seen:
return Object.assign(optionsFromAttrs, { responsive: false });
Is there a reason that on any passed option responsive
is set to false
?
For some unknow reasons, the autosize: true
attribute is not passed to the innerLayout
of the second graph.
When I force it in my layout
:
layout: {
autosize: true
}
I have:
And the graph extends to the current window size graph ! But it is not yet responsive to changes.
And I still have:
I removed any custom heights for the moment. I hope it is possible to see
For the record, without any options
, and my graphs being really responsive, I still have:
In
src/components/Plotly.vue
, I have seen:return Object.assign(optionsFromAttrs, { responsive: false });
Is there a reason that on any passed option
responsive
is set tofalse
?
I am not sure why but I also need to be able to pass the responsive option in. I'll create a PR for that
Added https://github.com/David-Desmaisons/vue-plotly/pull/12 Dependency updates and remove responsive: false override
@Codermar responsive is set to false because responsiveness is provided by vue-resize that offers reactivity based on resize on the main element (plotty responsiveness only reacts to window size changes - at least at the tim at testesd it). So you would not need to set { responsive: true } as a plotly options. Try the online example https://david-desmaisons.github.io/vue-plotly/ it resize without problem.
So to make yopur component responsive you just need to include it in a responsive container and it will work.
@David-Desmaisons I did try and it does not work for me actually. It does a resize on expanding the page but not on resize down and my container is responsive so something must be going on there. Maybe it is related to the fact that my code applies data and layout dynamically and the resize down does not get triggered. Regardless, I think forcing the option to false in the component goes against the claim that options are transparent though. Perhaps it can be set only if the user did not specify it.
@Codermar I don't remenber why but I had to set the responsive to false because it was not playing well with the resize provided by the directive.
Maybe it is related to the fact that my code applies data and layout dynamically and the resize down does not get triggered.
Could you provide an animated gif of the scenario with and without changing responsive to true. I am curious of you user case.
Perhaps it can be set only if the user did not specify it.
Definitivelly a better option than forcing it to true.
Sure, I just emailed you the animated gif that show the issue. In the meantime though, can you check this alternative code in my PR which will fix my problem and will be compatible with the existing implementation? https://github.com/David-Desmaisons/vue-plotly/pull/12/commits/20dbf4f4b0a17ca231bf761972b32077a14585a8 Then merge and publish if you are ok with it. Thanks
With responsive option set to false:
With responsive option set to true:
Fixed in version 1.1.0
Hi, I am under the impression that there are special cases when 2 graphs cannot update their width at the same time. I have a Vue page with 2 graphs. The size of the graph 2 is not updating. If I remove the graph 1, then the graph 2 updates properly. I really cannot figure out why !