Black Lives Matter. Please consider donating to Black Girls Code today.

Get into window.google namespace

Hey so ive been trying to implement the React Google Charts Material Bar Graph for Dash.

Code i have rn:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Chart} from 'react-google-charts';
/**
 * ExampleComponent is an example component.
 * It takes a property, `label`, and
 * displays it.
 * It renders an input with the property `value`
 * which is editable by the user.
 */

 function getConvertOptionsFunc(chartType) {
  return window.google && window.google.charts && window.google.charts["Bar"]
    ? window.google.charts["Bar"].convertOptions
    : null;
}

export default class BarChart extends Component {
      constructor(props) {
        super(props);

        const self = this;

        this.state = {
          convertFunc: getConvertOptionsFunc(self.props.chartType)
        };
        this.chartEvents = [
          {
            eventName: 'ready',
            callback(Chart) {
              const convertFunc = getConvertOptionsFunc(self.props.chartType) || (t => t);
              self.setState({convertFunc});
            },
          },
        ]
      }
    render() {
        const {id, setProps, value} = this.props;
        const {convertFunc} = this.state;
        console.log(convertFunc);
        const finalOptions = convertFunc ? convertFunc(this.props.options) : this.props.options;
        return (
            <Chart
              width={this.props.width}
              height={this.props.height}
              chartType="Bar"
              loader={this.props.children}
              data={this.props.data}
              options={finalOptions}
              chartEvents={convertFunc ? null : this.chartEvents}
              // For tests
              rootProps={{ 'data-testid': '2' }}
            />
        );
    }
}

BarChart.defaultProps = {};

BarChart.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks.
     */
    id: PropTypes.string,
    width: PropTypes.string,
    height: PropTypes.string,
    data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.any)),
    options: PropTypes.object,
    /**
     * Dash-assigned callback that should be called to report property changes
     * to Dash, to make them available for callbacks.
     */
    setProps: PropTypes.func
};

My Usage.py:

import googlecharts
import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    googlecharts.BarChart(
        id='input',
        height="50vh",
        width="50vw",
        options={
            'chartArea': {
                'backgroundColor':"rgb(83, 92, 96)",
             },
            "chart": {
            },
            "backgroundColor":{"fill":"rgb(83, 92, 96)"},
            "titleTextStyle":{
                "color":"#ededed",
                "marginLeft":"50%"
            },
            "titlePosition":"none",
            "color":"#ededed",
            "hAxis": {
                "textStyle": {
                    "color": "#ededed"
                }
            },
            "vAxis": {
                "textStyle":{
                    "color":"#ededed"
                },
                "title":""
            },
            "bars": 'horizontal',
            "axes": {
                  "y": {
                    0: { "side": 'left' },
                  },
                },
            "animation": {
                        "duration": 1000,
                        "easing": 'out',
                        "startup": True,
                      },
            "legend":{
                "position":"none"
            }
          },
        data=[
            ['Test', 'Test2'],
          ]
    )
])



if __name__ == '__main__':
    app.run_server(debug=True)

This example in the usage.py works a bit. It still gives me a maximum depth exceeded error cause as it seems it takes a while until i can get into google.chart.convertOptions which i need to style the material graph.
Whats weird is that, i can not install the package with another project where i wanna use this, and display the graph.

tld/dr:
Usage.py displays graph but with error.
Exporting package to another project: Infinite Loop not finding google.chart.convertOptions.

Any idea how i can fix this?