Handle window resizes & chart sizing

[jameshadfield]

Currently we hardcode the chart dimensions and use an overly simple watcher for window resizes. I've not used react-ruler react-measure but have heard good things about it and it seems appropriate here.

[jotasolano]

Can't seem to find this lib. I imagine it's not this one https://github.com/YanYuanFE/react-ruler?

[jameshadfield]

my mistake. https://github.com/souporserious/react-measure

[jotasolano]

@jameshadfield how were you planning on using this?

My idea would be:

1. We flexbox the container of the two charts
2. we apply flex-grow to said two containers so that they grow based on window size
3. We have an "on window resize" event (probably gotta add some timeout so that it doesn't get triggered too many times too quickly) that checks the size of the container using react-measure
4. We would then have to trigger a component update, propagate the size to the chart, and redraw the chart (i.e update all the scales, etc).

Does this sound fair to you?

[jotasolano]

The other option is to more simply, have pseudo media queries, and have different chart sizes based on the different window sizes, and pass these to the chart for re-rendering. This does not then require the use of react-measure, but we'd have to be listening to window resizes of course