[Bug] onAddListener and "click" for "ready" handler doesnt compile in typescripts

[ignacioch]

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Having looked at previous examples like #263 - I have tried the below code :

<Chart                    
        chartType="ColumnChart"
        width="80%"
        height="80%"
        data={data}
        options={options}
        chartEvents={[
            {
              eventName: "ready",
              callback: ({ chartWrapper, google }) => {
                const chart = chartWrapper.getChart();
                google.visualization.events.addListener(chart, "click", (e) => {
                  console.log("CLICK");
                });
              }
            }
          ]}
/> 

I am getting an error :

Argument of type 
    '{ removeAction: (actionID: string) => void; 
    getSelection: () => { row?: any; column?: any; }[]; 
    setAction: (ChartAction: GoogleChartAction) => void; 
    getImageURI: () => void; clearChart: () => void; }' 
is not assignable to parameter of type 'GoogleChartWrapper | GoogleChartControl | GoogleChartEditor'.

Which I can see why but I don't get how this isn't an issue for other people.

In essence, the issue is that the getChart() returns this. I don't see how this can be used to create a listener for other properties like onmouseover, click etc as the examples on other issues here - nor I see how GoogleVizEventName works for click.

I can change the type of chart to be any but then click is not a valid one - it seems the addListener is matching to this and not the addListener under google namespace.

Reproduction

https://codesandbox.io/s/weathered-fast-hrkby?file=/App.tsx

react-google-charts version

v4.0.0

Possible solution

No response

[joeythelantern]

Same issue here

[darewreck54]

any luck with this?

[eugbyte]

The workaround now is just to abuse the any type.

For example:

const readyEvent: ReactGoogleChartEvent = {
    eventName: "ready",
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();
      // the ts library is facing a type issue
      // https://github.com/rakannimer/react-google-charts/issues/545
      (google.visualization.events as any).addListener(
        chart,
        "onmouseover",
        (e: Event) => {
          console.log("onmouseover", e);
          drawCurrentTime(ref, currentTimeLabel)
        }
      );
    },
  };
  
return (
      <Chart
            chartEvents={[readyEvent]}
      />)