Passing an object of type DataTable as a data attribute to google-chart does not work

[maxevilmind]

Passing an object of type DataTable as a data attribute to google-chart does not work.
In the network tab I see a request to localhost that looks like this:
http://localhost:9001/[object%20Object]

 /* istanbul ignore file */
 /* eslint-disable class-methods-use-this */
 import { LitElement } from 'lit-element';
 import { html } from 'lit-html';

 import '@google-web-components/google-chart';
 import { dataTable } from '@google-web-components/google-chart/loader.js';

 export class WbWebGeoChart extends LitElement {
 static get properties() {
 return {
 myDataTable: Object,
 };
 }

 async connectedCallback() {
 super.connectedCallback();
 this.myDataTable = await dataTable();
 this.myDataTable.addColumn('string','Country');
 this.myDataTable.addColumn('number','Popularity');
 this.myDataTable.addRow(['Germany', 1]);
 }

 render() {
 return html`
 <google-chart type="geo" data="${this.myDataTable}"></google-chart>
 `;
 }
 }

Documentation in google-chart.js says The data format can be a two-dimensional array or the DataTable format * expected by Google Charts.

What happens actually:

 try {
 // Try to deserialize the value of the `data` property which might be a
 // serialized array.
 data = JSON.parse(data);
 }
 catch (e) {
 isString = typeof data === 'string' || data instanceof String;
 }
 if (isString) {
 // Load data asynchronously, from external URL.
 dataPromise = fetch(data).then(response => response.json());
 }

In reality you just check if data is string and if not you fetch it (???)
This logic is not documented and looks a bit broken.

Was it done intentionally that you don't support passing of DataTable here?

[rslawik]

Hi @maxevilmind

A DataTable object cannot be passed as an attribute, it must be passed as a property: .data=${this.myDataTable}, see https://lit.dev/docs/v1/components/templates/#bind-properties-to-templated-elements.

There is documentation about the string at the class level: https://github.com/GoogleWebComponents/google-chart/blob/main/google-chart.ts#L100. It would be useful to explain that on the data property as well. Would you like to contribute that? And maybe add a demo that assigns a data table using a template?

[maxevilmind]

@rslawik ehh, I probably was too tired that day passing object as an attribute...
Good to know contributions are welcome,
I will try to find some time to work out a PR