Approach to resize

[kum-deepak]

While checking the resize test folder, I realize that we can simplify the code using ResizeObserver. This considers padding, borders, etc.

          const handleResize = (width, height) => {
            chart.width(width);
            chart.height(width * 0.6);
            chart.configure({ innerRadius: width * 0.14 });
          };

          const withoutTransitions = callback => {
            const oldVal = chart.conf().transitionDuration;
            chart.configure({ transitionDuration: 0 });
            callback();
            chart.configure({ transitionDuration: oldVal });
          };

          const resizeObserver = new ResizeObserver(entries => {
            const entry = entries[0];
            const width = entry.contentRect.width;
            const height = entry.contentRect.height;
            withoutTransitions(() => {
              handleResize(width, height);
              chart.redraw();
            });
          });

          resizeObserver.observe(document.querySelector('#test'));

I will investigate later if this can be used as default in case height and width are not explicitly set.

[gordonwoodhull]

Nods, Safari finally got ResizeObserver last year, so we can get rid of these workarounds.

[kum-deepak]

Thanks, @gordonwoodhull for the quick feedback. I am also thinking of a single callback handling both width and height. This will make sense in most of the cases. On purpose, I picked an example where innerRadius also needs to be adjusted.

I will come back to this after working on the Upgrade guide.

[kum-deepak]

Closed in favor of #1858