autoResize not working

[kjschiroo]

autoResize doesn't appear to be working, and it looks like it might be a two part issue.

In this commit the code went from using the function generated by debounce as the event listener, to accidentally throwing that function away. The result here is that this.react never ends up getting called because the generated debouncing function never got called.

I would suspect that this snippet would fix that aspect of the problem

this.__resizeListener = debounce(() => {
  this.internalLayout.datarevision++
  this.react()
}, 200)

however javascript isn't my strongest language.

The second part of it is that even once this change is made and react gets called, it still doesn't appear to successfully resize the image. I haven't ruled out that just being part of my specific setup though. Thoughts?

[kjschiroo]

Falling back to 0.2.0 does work in my setup.

[spacemudd]

I had some issues regarding the responsiveness, this works for me on latest:

options: {
            responsive: true,
          }

[glorat]

autoResize doesn't appear to be working, and it looks like it might be a two part issue.

In this commit the code went from using the function generated by debounce as the event listener, to accidentally throwing that function away. The result here is that this.react never ends up getting called because the generated debouncing function never got called.

I would suspect that this snippet would fix that aspect of the problem

this.__resizeListener = debounce(() => {
  this.internalLayout.datarevision++
  this.react()
}, 200)

however javascript isn't my strongest language.

The second part of it is that even once this change is made and react gets called, it still doesn't appear to successfully resize the image. I haven't ruled out that just being part of my specific setup though. Thoughts?

This in conjunction with layout: {autosize:true} fixed everything for me

[ghost]

autoResize doesn't appear to be working, and it looks like it might be a two part issue.
In this commit the code went from using the function generated by debounce as the event listener, to accidentally throwing that function away. The result here is that this.react never ends up getting called because the generated debouncing function never got called.
I would suspect that this snippet would fix that aspect of the problem

this.__resizeListener = debounce(() => {
  this.internalLayout.datarevision++
  this.react()
}, 200)

however javascript isn't my strongest language.
The second part of it is that even once this change is made and react gets called, it still doesn't appear to successfully resize the image. I haven't ruled out that just being part of my specific setup though. Thoughts?

This in conjunction with layout: {autosize:true} fixed everything for me

I am using this with Vuetify and the following code is resizing is working; options: { responsive: true }.

[glorat]

@JLBlueDom that doesn't have effect for me. I suspect the difference is that you're putting the graph in a responsive layout (e.g. Vuetify/Bootstrap) whereas I'm using old school fixed container sizes.

Either way, if you agree this snippet is required, I'll create a fork and PR

[ghost]

@JLBlueDom that doesn't have effect for me. I suspect the difference is that you're putting the graph in a responsive layout (e.g. Vuetify/Bootstrap) whereas I'm using old school fixed container sizes.

Either way, if you agree this snippet is required, I'll create a fork and PR

Your suspicion may be correct. All I really know is it works perfectly in Vuetify. :)

[Tehsurfer]

I use css-element-queries for this and it works smoothly with good performance

import ReziseSensor from "css-element-queries/src/ResizeSensor";
//....
mounted() {
 new ReziseSensor(this.$el, () => {
   this.$refs.plotly.relayout({
      width: this.$el.clientWidth,
      height: this.$el.parentElement.clientHeight
    })
  })
}

[SumNeuron]

@kjschiroo the solution is relatively simple. Wherever you make you component, on the component itself set:

<Plotly :autoResize="true"/>

See: #27 for more details as to why.