search

seattleflu / genomic-incidence-tracker

https://genomic-incidence-tracker.herokuapp.com
GNU Affero General Public License v3.0
1 stars 0 forks source link

Handle window resizes & chart sizing #3

Open jameshadfield opened 5 years ago

jameshadfield commented 5 years ago

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 commented 5 years ago

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

jameshadfield commented 5 years ago

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

jotasolano commented 5 years ago

@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 commented 5 years ago

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