Remove unnecessary divs. Pass chart styles to dashboard. #237

Author: rakannimer

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-google-charts",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "type": "react-component",
   "description": "react-google-charts React component",
   "main": "dist/index.cjs.js",

Diff for: src/ReactGoogleCharts.tsx

@@ -28,35 +28,30 @@ export class Chart extends React.Component<
       loader
     } = this.props;
     return (
-      <div>
-        <ContextProvider
-          value={this.props as ReactGoogleChartPropsWithDefaults}
-        >
-          {this.state.loadingStatus === "ready" &&
-          this.state.google !== null ? (
-            <GoogleChart
-              {...this.props as ReactGoogleChartPropsWithDefaults}
-              google={this.state.google}
-            />
-          ) : (
-            loader
-          )}
-          <GoogleChartLoader
-            {...{ chartLanguage, chartPackages, chartVersion, mapsApiKey }}
-            onLoad={google => {
-              this.setState({
-                loadingStatus: "ready",
-                google
-              });
-            }}
-            onError={() => {
-              this.setState({
-                loadingStatus: "errored"
-              });
-            }}
+      <ContextProvider value={this.props as ReactGoogleChartPropsWithDefaults}>
+        {this.state.loadingStatus === "ready" && this.state.google !== null ? (
+          <GoogleChart
+            {...this.props as ReactGoogleChartPropsWithDefaults}
+            google={this.state.google}
           />
-        </ContextProvider>
-      </div>
+        ) : (
+          loader
+        )}
+        <GoogleChartLoader
+          {...{ chartLanguage, chartPackages, chartVersion, mapsApiKey }}
+          onLoad={google => {
+            this.setState({
+              loadingStatus: "ready",
+              google
+            });
+          }}
+          onError={() => {
+            this.setState({
+              loadingStatus: "errored"
+            });
+          }}
+        />
+      </ContextProvider>
     );
   }
 }

Diff for: src/components/GoogleChart.tsx

@@ -266,9 +266,16 @@ export class GoogleChart extends React.Component<Props, State> {
     return <div ref={this.toolbar_ref} />;
   };
   render() {
+    const { width, height, options, style } = this.props;
+
+    const divStyle = {
+      height: height || (options && options.height),
+      width: width || (options && options.width),
+      ...style
+    };
     if (this.props.render !== null) {
       return (
-        <div ref={this.dashboard_ref}>
+        <div ref={this.dashboard_ref} style={divStyle}>
           <div ref={this.toolbar_ref} id="toolbar" />
           {this.props.render({
             renderChart: this.renderChart,
@@ -279,7 +286,7 @@ export class GoogleChart extends React.Component<Props, State> {
       );
     } else {
       return (
-        <div ref={this.dashboard_ref}>
+        <div ref={this.dashboard_ref} style={divStyle}>
           {this.renderControl(({ controlProp }) => {
             return controlProp.controlPosition !== "bottom";
           })}