Pass cols and rows to arrayToDataTable (#341)

* Pass cols and rows to arrayToDataTable

It allows dates to parsed and columns types to be omitted.

* Document waitForRender testing helper

Author: rslawik

demo/index.html

@@ -227,7 +227,7 @@ <h2>Chart gallery</h2>
   <google-chart
     type="bar"
     options='{"title": "Days in a month"}'
-    cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
+    cols='["Month", "Days"]'
     rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
   </google-chart>
 
@@ -441,6 +441,22 @@ <h2>Chart gallery</h2>
     });
   </script>
 
+  <p>Here's the same timeline chart that parses dates from <code>rows</code>:</p>
+
+  <google-chart
+      type="timeline"
+      cols='[
+          "Name",
+          {"type": "date", "label": "Start"},
+          {"type": "date", "label": "End"}
+      ]'
+      rows='[
+          ["Washington", "Date(1789, 3, 30)", "Date(1797, 2, 4)"],
+	  ["Adams", "Date(1797, 2, 4)", "Date(1801, 2, 4)"],
+	  ["Jefferson", "Date(1801, 2, 4)", "Date(1809, 2, 4)"]
+      ]'>
+  </google-chart>
+
   <p>Here's a wordtree:</p>
 
   <google-chart

google-chart.ts

@@ -489,8 +489,7 @@ export class GoogleChart extends LitElement {
     const {rows, cols} = this;
     if (!rows || !cols) return;
     try {
-      const dt = await dataTable({cols});
-      dt.addRows(rows);
+      const dt = await dataTable([cols, ...rows]);
       this._data = dt;
     } catch (reason) {
       this.shadowRoot!.getElementById('chartdiv')!.textContent = String(reason);

test/basic-tests.ts

@@ -231,34 +231,36 @@ suite('<google-chart>', function() {
   });
 
   suite('Data Source Types', function() {
-    test('[rows] and [cols]', function (done) {
-      chart.cols = [
-        {'label': 'Data', 'type': 'string'},
-        {'label': 'Value', 'type': 'number'}
-      ];
+    // Waits for the event reporting a successful render. Invalid or missing data sources do not
+    // trigger the event and will timeout the tests.
+    function waitForRender(done: () => void) {
+      chart.addEventListener('google-chart-ready', () => void done());
+    }
+    test('[rows] and [cols] without type', function (done) {
+      chart.cols = ['Data', 'Value'];
       chart.rows = [
         ['Something', 1]
       ];
-      chart.addEventListener('google-chart-ready', function() {
-        done();
-      });
+      waitForRender(done);
     });
 
-    test('[rows] and [cols] with date string repr is broken', function(done) {
-      chart.cols = [ { 'type': 'date' } ];
-      chart.rows = [ ['Date(1789, 3, 30)'] ];
-      waitCheckAndDone(function() {
-        const chartDiv = chart.shadowRoot!.getElementById('chartdiv')!;
-        return chartDiv.innerHTML ==
-          'Error: Type mismatch. Value Date(1789, 3, 30) ' +
-          'does not match type date in column index 0';
-      }, done);
+    test('[rows] and [cols] with type', function(done) {
+      chart.type = 'timeline';
+      chart.cols = [
+          'Data',
+	  {type: 'date', label: 'Start'},
+          {type: 'date', label: 'End'}
+      ];
+      chart.rows = [[
+	  'Something',
+	  'Date(2024, 6, 1)',
+	  'Date(2024, 7, 1)'
+      ]];
+      waitForRender(done);
     });
     var setDataAndWaitForRender = function(data: DataTableLike|string, done: () => void) {
       chart.data = data;
-      chart.addEventListener('google-chart-ready', function() {
-        done();
-      });
+      waitForRender(done);
     };
     test('[data] is 2D Array', function(done) {
       setDataAndWaitForRender([ ['Data', 'Value'], ['Something', 1] ], done);