Description
See current example site:
https://nucivic.github.io/react-dash/
And take a look at code here:
https://github.com/NuCivic/react-dash/blob/gh-pages/src/components/BaseComponent.js#L36-L47
BaseComponent calculates widths based on DOM element, but on page load / component didMount it is calculating the width before the bootstrap classes are applied.
I think this is primarily affecting components that are generated by svg - charts and maps
They grab the component width and use it to calculate paths, but the widths they are using are full width - not the width based on the column classes. After resize the component widths adjust properly.
This leads to mis-rendering of charts and graphs when they are represented in columns.
Steps to reproduce
Take a look at the current example site - gh-pages branch:
This is as close as I could get it.
It loads incorrectly (using incorrect widths)
On resize (manually resize browser window) it re-renders using the correct widths
Probably should start here:
Acceptance critera
Create a row of two component with cardClasses: ['col-md-6'] type multiBarChart - height and width should render relative to columnar width and not overflow columns
Description
See current example site:
https://nucivic.github.io/react-dash/
And take a look at code here:
https://github.com/NuCivic/react-dash/blob/gh-pages/src/components/BaseComponent.js#L36-L47
BaseComponent calculates widths based on DOM element, but on page load / component didMount it is calculating the width before the bootstrap classes are applied.
I think this is primarily affecting components that are generated by svg - charts and maps
They grab the component width and use it to calculate paths, but the widths they are using are full width - not the width based on the column classes. After resize the component widths adjust properly.
This leads to mis-rendering of charts and graphs when they are represented in columns.
Steps to reproduce
Take a look at the current example site - gh-pages branch:
This is as close as I could get it.
It loads incorrectly (using incorrect widths)
On resize (manually resize browser window) it re-renders using the correct widths
Probably should start here:
Acceptance critera
Create a row of two component with
cardClasses: ['col-md-6']type multiBarChart - height and width should render relative to columnar width and not overflow columns