Zoom breaks after resize

[AlmaniaM]

Zoom breaks after resize

[FERNman]

Hi @almania69,

I'm sorry this took so long. I've tried to recreate your issue. In the example for this package, this doesn't happen for me, however (Google Chrome). I've zoomed in, resized the window, zoomed out and resized again and so on.

Could you please try the examples and tell me if you have the same problem with them?

If you've already solved the problem, I'd love to hear what was causing it.

Hope this helps,
FERNman

[AlmaniaM]

Hi @FERNman,

Unfortunately, I haven't found a solution for this yet but you can see in the GIF what I'm referring to. This happens to me on my project and the examples for this project. My thought is that there might be a loss of a reference pointer but that's just a guess at the moment. Here are the options that I'm using for the zoom too:

explorer: {
          actions: ['dragToZoom', 'rightClickToReset'],
          keepInBounds: true,
          maxZoomIn: 4,
          zoomDelta: 1
        }

[AlmaniaM]

@FERNman - Adding this.wrapper.clear(); to the updateChart() function clears the chart on resizing and fixes the zoom issue but doesn't seem like a practical fix since the chart looks like it redraws the entire animations when resizing.

[supruniuk]

I have the same symptoms when I just update dataTable in chartData:

    this.dataTable.subscribe(data => {
        this.chartData = { ...this.chartData, dataTable: data };
    });  

Is there a way to redraw raw-chart after dataTable is updated?

[FERNman]

Hi @supruniuk ,

I think the only solution to this is to redraw the chart on resize. As @almania69 pointed out, adding this.wrapper.clear(); to the updateChart() method fixes the problem. As pointed out in this StackOverflow answer, the official GoogleCharts code also redraws the chart on resize (zooming fires the resize event).

I don't know if the clear() method is needed or not, but maybe enabling dynamicResize on the RawChartComponent is enough. If not, I'll maybe add another boolean option to the component.

Hope this helps, and if it did I'll probably close this issue for now as I don't think there's more we can do for now.

[AlmaniaM]

@FERNman & @supruniuk,

I ended up having to reload the data server-side based on a selection so I didn't look into a solution for this. If you don't mind redrawing the chart you can use (this.wrapper as any).clear(); which fixed the issue for me.

[AlmaniaM]

Hi @FERNman,

Could the google.charts.load('45.2', config); be set to 46 instead of 45.2?
Version 46 has a fix for this exact issue here: https://developers.google.com/chart/interactive/docs/release_notes that I still can't get around without clearing the wrapper. Or, maybe provide a string parameter to pass the chart version into the module as an injectable token?

Thanks,
Alex

[AlmaniaM]

@FERNman,

I could implement the above fix if you don't have time and if you agree with it.

[FERNman]

That's great, I didn't know Google is still releasing new versions of this package. If you want, you can implement it. Otherwise, I'll have a look at it, probably during the weekend. Should be a quick fix, and I think the idea of allowing an optional parameter is the best solution.

[AlmaniaM]

@FERNman - I have some free time so I'll jump on it right now. Should I default the version to 45.2 or 46 if no parameter is provided?

[FERNman]

I think 46 is fine as long as it's not breaking anything (don't think so after reading the changelog). Please verify the demos still work and also run the tests (npm run test). Thanks a lot for the effort again!

[AlmaniaM]

@FERNman - Okay, will do. Thanks!

[AlmaniaM]

If anyone is still having this issue then here's a fix for now until the pull request to fix this is merged.
Simply rename the scripts every load a new type of chart:

this._loaderService.onReady.subscribe(() => {
      // Rename the version for the scripts
      (Object.assign([], document.head.querySelectorAll('script')) as HTMLScriptElement[])
      .filter(s => s.src.includes('https://www.gstatic.com/charts/45.2'))
      .forEach(s => s.src = s.src.replace('45.2', '46'));

      // Rename the version for the styles
      (Object.assign([], document.head.querySelectorAll('link')) as HTMLLinkElement[])
      .filter(s => s.href.includes('https://www.gstatic.com/charts/45.2'))
      .forEach(s => s.href = s.href.replace('45.2', '46'));
})

[FERNman]

The new version of angular google charts includes the PR from @almania69 , so this issue should be fixed. I'll close this now!