From 525003aa82461f214c23a97caf009d47ec38cf0b Mon Sep 17 00:00:00 2001
From: Wes Alvaro <git@wesalvaro.com>
Date: Tue, 18 Oct 2016 20:54:33 +0900
Subject: [PATCH 1/2] Moves data construction to a separate element.

---
 google-chart-data.html | 144 +++++++++++++++++++++++++++++++++++++++++
 google-chart.html      | 136 +++++++++++---------------------------
 test/basic-tests.html  |   4 +-
 3 files changed, 184 insertions(+), 100 deletions(-)
 create mode 100644 google-chart-data.html

diff --git a/google-chart-data.html b/google-chart-data.html
new file mode 100644
index 0000000..4a1b48a
--- /dev/null
+++ b/google-chart-data.html
@@ -0,0 +1,144 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-request.html">
+<link rel="import" href="../promise-polyfill/promise-polyfill-lite.html">
+<link rel="import" href="google-chart-loader.html">
+
+<dom-module id="google-chart-data">
+  <template>
+    <google-chart-loader id="loader"></google-chart-loader>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'google-chart-data',
+  properties: {
+    /**
+     * Sets the data columns for this object.
+     *
+     * When specifying data with `cols` you must also specify `rows`, and
+     * not specify `data`.
+     *
+     * Example:
+     * <pre>[{label: "Categories", type: "string"},
+     *  {label: "Value", type: "number"}]</pre>
+     * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable_addColumn">Google Visualization API reference (addColumn)</a>
+     * for column definition format.
+     *
+     * @attribute cols
+     * @type {!Array|undefined}
+     */
+    cols: {
+      type: Array,
+      observer: '_rowsOrColumnsChanged',
+    },
+
+    /**
+     * Sets the data rows for this object.
+     *
+     * When specifying data with `rows` you must also specify `cols`, and
+     * not specify `data`.
+     *
+     * Example:
+     * <pre>[["Category 1", 1.0],
+     *  ["Category 2", 1.1]]</pre>
+     * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#addrow">Google Visualization API reference (addRow)</a>
+     * for row format.
+     *
+     * @attribute rows
+     * @type {!Array<!Array>|undefined}
+     */
+    rows: {
+      type: Array,
+      observer: '_rowsOrColumnsChanged',
+    },
+
+    /**
+     * Sets the entire dataset for this object.
+     * Can be used to provide the data directly, or to provide a URL from
+     * which to request the data.
+     *
+     * The data format can be a two-dimensional array or the DataTable format
+     * expected by Google Charts.
+     * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable">Google Visualization API reference (DataTable constructor)</a>
+     * for data table format details.
+     *
+     * When specifying data with `data` you must not specify `cols` or `rows`.
+     *
+     * Example:
+     * <pre>[["Categories", "Value"],
+     *  ["Category 1", 1.0],
+     *  ["Category 2", 1.1]]</pre>
+     *
+     * @attribute data
+     * @type {!google.visualization.DataTable|
+     *        !Array<!Array>|
+     *        !{cols: !Array, rows: (!Array<!Array>|undefined)}|
+     *        string|
+     *        undefined}
+     */
+    data: {
+      type: Object,
+      observer: '_dataChanged'
+    },
+    view: {
+      type: Object,
+      readOnly: true,
+      notify: true
+    }
+  },
+
+  _toView(dataTablePromise) {
+    dataTablePromise
+      .then(this.$.loader.dataView.bind(this.$.loader))
+      .then(function(dataView) {
+        this._setView(dataView);
+      }.bind(this))
+      .catch(function(reason) {
+        this.fire('google-chart-data-error', reason);
+      }.bind(this));
+  },
+
+  /**
+   * Handles changes to the `rows` & `columns` attributes.
+   */
+  _rowsOrColumnsChanged() {
+    var rows = this.rows, cols = this.cols;
+    if (!rows || !cols) { return; }
+    this._toView(this.$.loader.dataTable()
+      .then(function(dataTable) {
+        cols.forEach(function(col) {
+          dataTable.addColumn(col);
+        });
+        dataTable.addRows(rows);
+        return dataTable;
+      }.bind(this)));
+  },
+
+  /**
+   * Handles changes to the `data` attribute.
+   *
+   * @param {
+   *     !google.visualization.DataTable|
+   *     !Array<!Array>|
+   *     !{cols: !Array, rows: (!Array<!Array>|undefined)}|
+   *     string|
+   *     undefined} data The new data value
+   */
+  _dataChanged(data) {
+    var dataPromise;
+    if (!data) { return; }
+    if (typeof data == 'string' || data instanceof String) {
+      // Load data asynchronously, from external URL.
+      var request = /** @type {!IronRequestElement} */ (document.createElement('iron-request'));
+      dataPromise = request.send({
+        url: /** @type string */(data), handleAs: 'json'
+      }).then(function(xhr) { return xhr.response; });
+    } else {
+      // Data is all ready to be processed.
+      dataPromise = Promise.resolve(data);
+    }
+    this._toView(dataPromise.then(this.$.loader.dataTable.bind(this.$.loader)));
+  }
+});
+</script>
diff --git a/google-chart.html b/google-chart.html
index 654b285..555125a 100644
--- a/google-chart.html
+++ b/google-chart.html
@@ -1,7 +1,6 @@
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../iron-ajax/iron-request.html">
-<link rel="import" href="../promise-polyfill/promise-polyfill-lite.html">
 <link rel="import" href="google-chart-loader.html">
+<link rel="import" href="google-chart-data.html">
 
 <!--
 `google-chart` encapsulates Google Charts as a web component, allowing you to easily visualize
@@ -59,6 +58,7 @@
 <dom-module id="google-chart">
   <link rel="import" type="css" href="google-chart.css">
   <template>
+    <google-chart-data rows="[[rows]]" cols="[[cols]]" data="[[data]]" view="{{view}}"></google-chart-data>
     <google-chart-loader id="loader" type="[[type]]"></google-chart-loader>
     <div id="chartdiv"></div>
   </template>
@@ -165,8 +165,7 @@
        * @type {!Array|undefined}
        */
       cols: {
-        type: Array,
-        observer: '_rowsOrColumnsChanged',
+        type: Array
       },
 
       /**
@@ -185,8 +184,7 @@
        * @type {!Array<!Array>|undefined}
        */
       rows: {
-        type: Array,
-        observer: '_rowsOrColumnsChanged',
+        type: Array
       },
 
       /**
@@ -208,14 +206,14 @@
        *
        * @attribute data
        * @type {!google.visualization.DataTable|
+       *        !google.visualization.DataView|
        *        !Array<!Array>|
        *        !{cols: !Array, rows: (!Array<!Array>|undefined)}|
        *        string|
        *        undefined}
        */
       data: {
-        type: Object,
-        observer: '_dataChanged'
+        type: Object
       },
 
       /**
@@ -230,8 +228,7 @@
        * @type {!google.visualization.DataView|undefined}
        */
       view: {
-        type: Object,
-        observer: '_viewChanged'
+        type: Object
       },
 
       /**
@@ -271,42 +268,41 @@
     },
 
     observers: [
-      '_draw(_chart, _dataView)',
+      '_draw(_chart, view)',
       '_subOptionChanged(options.*)'
     ],
 
     listeners: {
       'google-chart-select': '_updateSelection',
-      'google-chart-ready': '_onChartReady'
+      'google-chart-ready': '_onChartReady',
+      'google-chart-data-error': '_onDataError'
     },
 
     /** @type Object Internal Google Visualization chart object */
     _chart: null,
-    /** @type google.visualization.DataView Internal data state */
-    _dataView: null,
     /** @type Array Internal selection state */
     _selection: null,
 
     // The chart type was changed.
     // We need to create a new chart and redraw.
-    _typeChanged: function() {
+    _typeChanged() {
       this.$.loader.create(this.type, this.$.chartdiv)
-          .then(function(chart) {
-            var loader = this.$.loader;
-            Object.keys(this.events.concat(['select', 'ready'])
-                .reduce(function(set, eventName) {
-                  set[eventName] = true;
-                  return set;
-                }, {}))
-                .forEach(function(eventName) {
-                  loader.fireOnChartEvent(chart, eventName);
-                });
-            this._setDrawn(false);
-            this._chart = chart;
-          }.bind(this));
+        .then(function(chart) {
+          var loader = this.$.loader;
+          Object.keys(this.events.concat(['select', 'ready'])
+              .reduce(function(set, eventName) {
+                set[eventName] = true;
+                return set;
+              }, {}))
+              .forEach(function(eventName) {
+                loader.fireOnChartEvent(chart, eventName);
+              });
+          this._setDrawn(false);
+          this._chart = chart;
+        }.bind(this));
     },
 
-    _subOptionChanged: function(optionChangeDetails) {
+    _subOptionChanged(optionChangeDetails) {
       this.options = optionChangeDetails.base;
       // Debounce to allow for multiple option changes in one redraw
       this.debounce('optionChangeRedraw', function() {
@@ -314,7 +310,7 @@
       }, 5);
     },
 
-    _setSelection: function() {
+    _setSelection() {
       // Note: Some charts (e.g. TreeMap) must have a selection.
       if (!this.drawn || !this.selection || this.selection === this._selection) {
         return;
@@ -326,16 +322,22 @@
       this._selection = this.selection;
     },
 
-    _updateSelection: function() {
+    _updateSelection() {
       this.selection = this._selection = this._chart.getSelection();
     },
 
-    _onChartReady: function() {
+    _onChartReady() {
+      google.visualization.errors.removeAll(this.$.chartdiv);
       this._setDrawn(true);
       this._selection = null;
       this._setSelection();
     },
 
+    _onDataError(error) {
+      google.visualization.errors.addError(
+          this.$.chartdiv, error.detail.message);
+    },
+
     /**
      * Redraws the chart.
      *
@@ -344,12 +346,12 @@
      *
      * @method redraw
      */
-    redraw: function() {
-      if (!this._chart || !this._dataView) { return; }
-      this._draw(this._chart, this._dataView);
+    redraw() {
+      if (!this._chart || !this.view) { return; }
+      this._draw(this._chart, this.view);
     },
 
-    _draw: function(chart, data) {
+    _draw(chart, data) {
       try {
         this._setDrawn(false);
         chart.draw(data, this.options || {});
@@ -369,68 +371,6 @@
       if (!this._chart) { return null; }
       return this._chart.getImageURI();
     },
-
-    /**
-     * Handles changes to the `view` attribute.
-     *
-     * @param {!google.visualization.DataView|undefined} view The new view value
-     */
-    _viewChanged: function(view) {
-      if (!view) { return; }
-      this._dataView = view;
-    },
-
-    // Handles changes to the rows & columns attributes.
-    _rowsOrColumnsChanged: function() {
-      var rows = this.rows, cols = this.cols;
-      if (!rows || !cols) { return; }
-      this.$.loader.dataTable()
-        .then(function(dataTable) {
-          cols.forEach(function(col) {
-            dataTable.addColumn(col);
-          });
-          dataTable.addRows(rows);
-          return dataTable;
-        }.bind(this))
-        .then(this.$.loader.dataView.bind(this.$.loader))
-        .then(function(dataView) {
-          this._dataView = dataView;
-        }.bind(this))
-        .catch(function(reason) {
-          this.$.chartdiv.innerHTML = reason;
-        }.bind(this));
-    },
-
-    /**
-     * Handles changes to the `data` attribute.
-     *
-     * @param {
-     *     !google.visualization.DataTable|
-     *     !Array<!Array>|
-     *     !{cols: !Array, rows: (!Array<!Array>|undefined)}|
-     *     string|
-     *     undefined} data The new data value
-     */
-    _dataChanged: function(data) {
-      var dataPromise;
-      if (!data) { return; }
-      if (typeof data == 'string' || data instanceof String) {
-        // Load data asynchronously, from external URL.
-        var request = /** @type {!IronRequestElement} */ (document.createElement('iron-request'));
-        dataPromise = request.send({
-          url: /** @type string */(data), handleAs: 'json'
-        }).then(function(xhr) { return xhr.response; });
-      } else {
-        // Data is all ready to be processed.
-        dataPromise = Promise.resolve(data);
-      }
-      dataPromise
-        .then(this.$.loader.dataTable.bind(this.$.loader))
-        .then(this.$.loader.dataView.bind(this.$.loader))
-        .then(function(dataView) {
-          this._dataView = dataView;
-        }.bind(this));
-    }
   });
 })();
 </script>
diff --git a/test/basic-tests.html b/test/basic-tests.html
index 0cebf24..d32db7f 100644
--- a/test/basic-tests.html
+++ b/test/basic-tests.html
@@ -173,8 +173,8 @@
       chart.cols = [ { 'type': 'date' } ];
       chart.rows = [ ['Date(1789, 3, 30)'] ];
       waitCheckAndDone(function() {
-        return chart.$$('#chartdiv').innerHTML ==
-          'Error: Type mismatch. Value Date(1789, 3, 30) ' +
+        return chart.$$('#google-visualization-errors-0').innerText ==
+          'Type mismatch. Value Date(1789, 3, 30) ' +
           'does not match type date in column index 0';
       }, done);
     });

From 3a44c36ca9d95edbafe9063d1780d8713b6322f8 Mon Sep 17 00:00:00 2001
From: Wes Alvaro <git@wesalvaro.com>
Date: Tue, 18 Oct 2016 20:54:48 +0900
Subject: [PATCH 2/2] Adds an element for the Query class.

---
 google-chart-query.html | 91 +++++++++++++++++++++++++++++++++++++++++
 test/index.html         |  3 +-
 test/query-tests.html   | 65 +++++++++++++++++++++++++++++
 3 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 google-chart-query.html
 create mode 100644 test/query-tests.html

diff --git a/google-chart-query.html b/google-chart-query.html
new file mode 100644
index 0000000..6f2b465
--- /dev/null
+++ b/google-chart-query.html
@@ -0,0 +1,91 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="google-chart-loader.html">
+
+<dom-module id="google-chart-query">
+  <template>
+    <google-chart-loader id="loader"></google-chart-loader>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'google-chart-query',
+  properties: {
+    url: {
+      type: String,
+      observer: '_urlChanged',
+    },
+    query: {
+      type: String,
+      value: null
+    },
+    refresh: Number,
+    /**
+     * @attribute data
+     * @type {!google.visualization.DataTable}
+     */
+    data: {
+      type: Object,
+      notify: true,
+      readOnly: true
+    },
+    lastResponse: {
+      type: Object,
+      readOnly: true
+    },
+    loading: {
+      type: Boolean,
+      notify: true,
+      readOnly: true,
+      value: false
+    }
+  },
+  observers: [
+    '_debounceQuery(_queryObject, query)'
+  ],
+  _queryObject: null,
+
+  _urlChanged(url) {
+    this.$.loader.query(url).then(function(queryObject) {
+      this._queryObject = queryObject;
+    }.bind(this))
+  },
+
+  _doQuery(queryObject, queryString) {
+    if (queryString) {
+      queryObject.setQuery(queryString);
+    }
+    if (this.refresh) {
+      queryObject.setRefreshInterval(this.refresh);
+    }
+    this.send();
+  },
+
+  _debounceQuery(queryObject, queryString) {
+    this.debounce('query', function() {
+      this._doQuery(queryObject, queryString);
+    }.bind(this), 100);
+  },
+
+  _handleQueryResponse(res) {
+    this._setLoading(false);
+    if (res.isError()) {
+      return;
+    }
+    this._setData(res.getDataTable());
+    this.fire('google-chart-query-response', res);
+  },
+
+  send() {
+    this._queryObject.send(this._handleQueryResponse.bind(this));
+    this._setLoading(true);
+  },
+
+  abort() {
+    if (this._queryObject) {
+      this._queryObject.abort();
+      this._setLoading(false);
+    }
+  }
+});
+</script>
diff --git a/test/index.html b/test/index.html
index 27cd300..a46b3b8 100644
--- a/test/index.html
+++ b/test/index.html
@@ -22,7 +22,8 @@
     <script>
       // Load and run all tests (.html, .js) as one suite:
       WCT.loadSuites([
-        'basic-tests.html'
+        'basic-tests.html',
+        'query-tests.html'
       ]);
     </script>
   </body>
diff --git a/test/query-tests.html b/test/query-tests.html
new file mode 100644
index 0000000..97958cd
--- /dev/null
+++ b/test/query-tests.html
@@ -0,0 +1,65 @@
+<!--
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at https://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at https://polymer.github.io/PATENTS.txt
+-->
+<!doctype html>
+<html>
+<head>
+  <script src="../../webcomponentsjs/webcomponents.min.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+
+  <link rel="import" href="../google-chart-query.html">
+</head>
+
+<body>
+
+<test-fixture id="chart-fixture">
+  <template>
+    <google-chart-query
+      url="https://spreadsheets.google.com/pub?key=rCaVQNfFDMhOM6ENNYeYZ9Q"></google-chart-query>
+  </template>
+</test-fixture>
+
+<script>
+suite('<google-chart-query>', function() {
+  var query;
+  setup(function() {
+    query = fixture('chart-fixture');
+  });
+  test('without a query string', function(done) {
+    query.addEventListener('data-changed', function() {
+      assert.isAtLeast(query.data.getNumberOfRows(), 1);
+      assert.isAtLeast(query.data.getNumberOfColumns(), 1);
+      done();
+    });
+  });
+  test('with a query string', function(done) {
+    query.query = 'LIMIT 3';
+    query.addEventListener('data-changed', function() {
+      assert.isAtMost(query.data.getNumberOfRows(), 3);
+      assert.isAtLeast(query.data.getNumberOfColumns(), 1);
+      done();
+    });
+  });
+  test('with a low refresh interval', function(done) {
+    query.refresh = 1;
+    query.query = 'LIMIT 1';
+    var changes = 0;
+    query.addEventListener('data-changed', function() {
+      assert.isAtMost(query.data.getNumberOfRows(), 1);
+      if (++changes == 2) {
+        query.abort();
+        done();
+      }
+    });
+  });
+});
+</script>
+
+</body>
+</html>