dynamicResize for chart-wrapper
Serg-Mois opened this issue · 3 comments
Why do we have dynamicResize for google-charts, but don't for chart-wrapper?
Hi @Serg-Mois, sorry for not responding that long.
The main reason is that the GoogleChartComponent
is intended to hide the internals of Google Charts and ease the developer's life by providing convenience functions, such as dynamic resize. The
ChartWrapperComponent` is more of a direct wrapper around Google Charts, providing more granular control but also less convenience.
For dynamicResize
specifically, I'd be willing to accept a PR if you think it's a valuable addition!
@FERNman How does one use the ChartWrapperComponent? is it an internal componenet to be created inside the html of the google-chart html element? The readme simply states that ChartWrapperComponent exists but not how to use it or how to access the underlying google-chart object to use methods such as setSelection, etc...
I wish there was a small example provided :)
Anyways, thanks for your library!
@FERNman Oh! I found out!
Going to copy paste the same method i commented on another issue in case this helps someone!
So I got it by using a reference with the '#' character, and digging deeper in its subcomponenet aptly named 'chart' with :
<google-chart *ngIf="chartOptions && widgetData.widgetReady"
#dashboardChart
[data]="chartData"
[type]="chartType"
[columns]="chartColumns"
[dynamicResize]="true"
(select)="selectedElement($event, dashboardChart)"
[options]="chartOptions"></google-chart>
and then in code I could refer to the element passed as dashboardChart (which i needed when reacting to select)
for which i just needed to reset selection in my user case. but this shows how to access the real google-chart underneath. (as described in the ChartBase interface: chart-base.component.d.ts)
public selectedElement(
p_event: ChartSelectionChangedEvent,
p_chart: ChartBase
): void {
console.log('onSelect', p_event);
console.log('chart', p_chart.chart);
p_chart.chart.setSelection([]); // Proof that i can access it !
}