Component Width is calculated before bootstrap classes are applied

[starsinmypockets]

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