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