make-vis-flexible does not work with grid

The FlexibleXYPlot component does not resize correctly when using CSS grid. We suspect this is an issue within make-vis-flexible and the xy-plot component. There’s an assumption that the parent component will always, and accurately, downsize “correctly”. In the case of CSS grid, that isn’t true.

The child component’s explicitly set width will override any upstream re-flows and re-renders. In our specific case, that implies that our graph will only act responsively when the browser window is increased in size, not when it’s decreased.

Unexpected behavior:

1. use CSS grid
2. load page
3. make page smaller
4. chart overflows in the x-axis

Internally set, explicit width:

Trivial example:

https://codepen.io/anon/pen/vvJBoM?editors=1100

Naive suggestions to fix:

There’s likely context that we’re missing, but it seems peculiar to have “two separate components” for flexible and non-flexible plots. IMHO all charts should be flexible, and their size should be constrained by their parent components only. Internally, they should always strive to expand to 100%.

Calculating the the width of the component and setting it via JS (in React) is prone to exactly this type of issue. We suspect this was for a reason. Likely due to the needs of internal calculations for plotting data, animations, etc. Ideally we’d love to see (and help!) with making this styling less JS-centric, more CSS-native, and possibly condensed into one component.

This is a lot to ask, and we’re happy to help. We’ll need feedback first.

Thanks!

[raine]

Had this same issue with grid and <FlexibleXYPlot>. The plot width would only increase, and not decrease.

<AutoSizer> from react-virtualized seems to work well.

Pseudo code for the workaround I used:

import AutoSizer from 'react-virtualized-auto-sizer'

// ...

<AutoSizer>
  {({ width }) => (
    <div className="plot">
      <XYPlot
        height={150}
        width={width}
      >
        // .....
      </XYPlot>
    </div>
  )}
</AutoSizer>

[jckr]

make-vis-flexible isn’t a great wrapper. When it was written it was fairly reliable but there’s a number of occasions beyond this one when it doesn’t deliver. Meanwhile there are great solutions outside of react-vis which are better maintained, such as AutoSizer from react-virtualized. https://bvaughn.github.io/react-virtualized/#/components/AutoSizer