From f3a9a1d6eaab3cf9a5f4ce526f21dc382db70edf Mon Sep 17 00:00:00 2001
From: Wes Alvaro <hello@wesalvaro.com>
Date: Wed, 13 Jul 2016 21:51:34 +0900
Subject: [PATCH 1/2] Adds loader element.

Handles loading the necessary packages for charts.
---
 demo/index.html          |  91 +++++++-------
 google-chart-loader.html | 261 +++++++++++++++++++++++++++++++++++++++
 google-chart.html        | 205 ++++++------------------------
 test/basic-tests.html    |  67 +++++-----
 4 files changed, 375 insertions(+), 249 deletions(-)
 create mode 100644 google-chart-loader.html

diff --git a/demo/index.html b/demo/index.html
index af0d24d..00093d7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -46,14 +46,6 @@
     }
   </style>
 
-  <script>
-    var media = window.matchMedia('(min-width: 1024px)');
-
-    media.addListener(function() {
-      document.getElementById('resizing_chart').drawChart();
-    });
-  </script>
-
   <google-chart
     id="resizing-chart"
     type="column"
@@ -63,6 +55,14 @@
     rows='[ ["Col1", 5.0],["Col2", 5.0],["Col3", 5.0] ]'>
   </google-chart>
 
+  <script>
+    var media = window.matchMedia('(min-width: 1024px)');
+
+    media.addListener(function() {
+      document.getElementById('resizing-chart').drawChart();
+    });
+  </script>
+
   <p>Here's a chart that changes data every 3 seconds:</p>
 
   <google-chart
@@ -131,7 +131,7 @@
       label.textContent = chart.selection[0].row;
 
       chart.addEventListener('google-chart-select', function(e) {
-        var newSelection = e.detail.selection[0];  // From the event details
+        var newSelection = e.detail.chart.getSelection()[0];  // From the event details
         label.textContent = newSelection ? newSelection.row : 'None';
       });
 
@@ -327,13 +327,13 @@ <h2>Chart gallery</h2>
   <script>
     (function() {
       var chart = document.getElementById('timeline');
-      chart.pkg.then(function(viz) {
-        chart.data = [
-          ['Name', 'Start', 'End'],
-          ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
-          ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
-          ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
-        ];
+      document.createElement('google-chart-loader').dataTable([
+        ['Name', 'Start', 'End'],
+        ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
+        ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
+        ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
+      ]).then(function(dataTable) {
+        chart.data = dataTable;
       });
     }());
   </script>
@@ -432,13 +432,13 @@ <h2>Chart gallery</h2>
   <script>
     (function() {
       var chart = document.getElementById('source-datatable');
-      chart.pkg.then(function(viz) {
-        chart.data = viz.arrayToDataTable([
-          ['Label', 'Value'],
-          ['Memory', 10],
-          ['CPU', 12],
-          ['Network', 14]
-        ]);
+      document.createElement('google-chart-loader').dataTable([
+        ['Label', 'Value'],
+        ['Memory', 10],
+        ['CPU', 12],
+        ['Network', 14]
+      ]).then(function(dataTable) {
+        chart.data = dataTable;
       });
     }());
   </script>
@@ -455,40 +455,39 @@ <h2>Chart gallery</h2>
   <script>
     (function() {
       var chart = document.getElementById('source-dataview');
-      chart.pkg.then(function(viz) {
-        var dataTable = viz.arrayToDataTable([
-          ['Label', 'Value'],
-          ['Memory', 10],
-          ['CPU', 12],
-          ['Network', 14]
-        ]);
-        chart.view = new google.visualization.DataView(dataTable);
-        var setRandomRow = function() {
-          var rowCount = dataTable.getNumberOfRows();
-          var row = Math.floor(Math.random() * rowCount);
-          var row2 = (row + 1) % rowCount;
-          chart.view.setRows([row, row2]);
-          chart.drawChart();
-        };
-        setInterval(setRandomRow, 3000);
+      var loader = document.createElement('google-chart-loader');
+      loader.dataTable([
+        ['Label', 'Value'],
+        ['Memory', 10],
+        ['CPU', 12],
+        ['Network', 14]
+      ]).then(function(dataTable) {
+        loader.dataView(dataTable).then(function(dataView) {
+          chart.view = dataView;
+          var setRandomRow = function() {
+            var rowCount = dataTable.getNumberOfRows();
+            var row = Math.floor(Math.random() * rowCount);
+            var row2 = (row + 1) % rowCount;
+            chart.view.setRows([row, row2]);
+            chart.drawChart();
+          };
+          setInterval(setRandomRow, 3000);
+        });
       });
     }());
   </script>
 
   <p>Here's an image of the line chart:</p>
 
-  <div id='line-chart-img-container'></div>
+  <img id="line-chart-img">
 
   <script>
     (function() {
       var chart = document.getElementById('line-chart');
-      var imgContainer = document.getElementById('line-chart-img-container');
+      var img = document.getElementById('line-chart-img');
 
-      chart.addEventListener('google-chart-render', function() {
-        var img = document.createElement('img');
-        img.src = chart.getImageURI();
-        imgContainer.innerHTML = '';
-        imgContainer.appendChild(img);
+      chart.addEventListener('google-chart-ready', function() {
+        img.src = chart.imageURI;
       });
     }());
   </script>
diff --git a/google-chart-loader.html b/google-chart-loader.html
new file mode 100644
index 0000000..ddb7270
--- /dev/null
+++ b/google-chart-loader.html
@@ -0,0 +1,261 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../promise-polyfill/promise-polyfill-lite.html">
+<link rel="import" href="charts-loader.html">
+
+<script>
+(function() {
+  "use strict";
+
+  // Most charts use this package.
+  var DEFACTO_CHART_PACKAGE = 'corechart';
+
+  // A collection of chart types associated with a function that returns a
+  // Promise for the chart type's constructor.
+  var CHART_CONSTRUCTORS = {
+    'area': {
+      ctor: 'AreaChart',
+    },
+    'bar': {
+      ctor: 'BarChart',
+    },
+    'bubble': {
+      ctor: 'BubbleChart',
+    },
+    'candlestick': {
+      ctor: 'CandlestickChart',
+    },
+    'column': {
+      ctor: 'ColumnChart',
+    },
+    'combo': {
+      ctor: 'ComboChart',
+    },
+    'geo': {
+      ctor: 'GeoChart',
+    },
+    'histogram': {
+      ctor: 'Histogram',
+    },
+    'line': {
+      ctor: 'LineChart',
+    },
+    'pie': {
+      ctor: 'PieChart',
+    },
+    'scatter': {
+      ctor: 'ScatterChart',
+    },
+    'stepped-area': {
+      ctor: 'SteppedAreaChart',
+    },
+    'table': {
+      ctor: 'Table',
+      pkg: 'table',
+    },
+    'timeline': {
+      ctor: 'Timeline',
+      pkg: 'timeline',
+    },
+    'gauge': {
+      ctor: 'Gauge',
+      pkg: 'gauge',
+    },
+    'treemap': {
+      ctor: 'TreeMap',
+      pkg: 'treemap',
+    },
+  };
+
+  function namespaceForType(type) {
+    return google[type.startsWith('md-') ? 'charts' : 'visualization'];
+  }
+
+  var packagesToLoad = {};
+  var promises = {};
+  var resolves = {};
+
+  Polymer({
+    is: 'google-chart-loader',
+    properties: {
+      /**
+       * Adds packages to the list of packages to load.
+       *
+       * This is an array consisting of any Google Visualization package names.
+       *
+       */
+      packages: {
+        type: Array,
+        value: function() { return []; },
+        observer: '_loadPackages',
+      },
+      /**
+       * Loads the package for the chart type specified.
+       *
+       * This may be any of the supported `google-chart` types.
+       * This is mainly used by the `google-chart` element internally.
+       *
+       */
+      type: {
+        type: String,
+        observer: '_loadPackageForType',
+      },
+    },
+
+    get _corePackage() {
+      if (promises[DEFACTO_CHART_PACKAGE]) {
+        return promises[DEFACTO_CHART_PACKAGE];
+      }
+      return this._loadPackages([DEFACTO_CHART_PACKAGE]).then(function(pkgs) {
+        return pkgs[0];
+      });
+    },
+
+    _loadPackagesDebounce: function() {
+      this.debounce('loadPackages', function() {
+        var packages = Object.keys(packagesToLoad);
+        if (!packages.length) {
+          return;
+        }
+        packagesToLoad = {};
+        google.charts.load('current', {'packages': packages});
+        google.charts.setOnLoadCallback(function() {
+          packages.forEach(function(pkg) {
+            this.fire('loaded', pkg);
+            resolves[pkg](google.visualization);
+          }.bind(this));
+        }.bind(this));
+      }, 100);
+    },
+
+    _loadPackages: function(pkgs) {
+      var returns = [];
+      pkgs.forEach(function(pkg) {
+        if (!promises[pkg]) {
+          packagesToLoad[pkg] = true;
+          promises[pkg] = new Promise(function(resolve) {
+            resolves[pkg] = resolve;
+          });
+          this._loadPackagesDebounce();
+        }
+        returns.push(promises[pkg]);
+      }.bind(this));
+      return Promise.all(returns);
+    },
+
+    _loadPackageForType: function(type) {
+      var chartData = CHART_CONSTRUCTORS[type];
+      return this._loadPackages([chartData.pkg || DEFACTO_CHART_PACKAGE])
+        .then(function() {
+          return namespaceForType(type)[chartData.ctor];
+        });
+    },
+
+    /**
+     * Creates a chart object by type in the specified element.
+     * Use *only* if you need total control of a chart object.
+     * Most should just use the `google-chart` element.
+     *
+     * @param {string} type the type of chart to create
+     * @param {!Element} el the element in which to create the chart
+     * @return {!Promise} promise for the created chart object
+     */
+    create: function(type, el) {
+      return this._loadPackageForType(type).then(function(ctor) {
+        return new ctor(el);
+      });
+    },
+
+    /**
+     * Begins firing Polymer events for the requested chart event.
+     * Use *only* if you have control of a chart object.
+     * Most should just use the `google-chart` element.
+     *
+     * Events fired all have the same detail object:
+     *   {{
+     *     chart: !Object,  // The chart target object
+     *     data: (Object|undefined),  // The chart event details
+     *   }}
+     *
+     * @param {!Object} chart the chart object to which we should listen
+     * @param {string} eventName the name of the chart event
+     * @param {boolean=} opt_once whether to listen only one time
+     * @return {!Promise} promise resolved when listener is attached
+     */
+    fireOnChartEvent: function(chart, eventName, opt_once) {
+      return this._corePackage.then(function(viz) {
+        var adder = opt_once ?
+            viz.events.addOneTimeListener : viz.events.addListener;
+        adder(chart, eventName, function(event) {
+          this.fire('google-chart-' + eventName, {
+            chart: chart,
+            data: event,
+          });
+        }.bind(this));
+      }.bind(this));
+    },
+
+    /**
+     * Creates a DataTable object for use with a chart.
+     *
+     * Multiple different argument types are supported. This is because the
+     * result of loading the JSON data URL is fed into this function for
+     * DataTable construction and its format is unknown.
+     *
+     * The data argument can be one of a few options:
+     *
+     * - null/undefined: An empty DataTable is created. Columns must be added
+     * - !DataTable: The object is simply returned
+     * - {{cols: !Array, rows: !Array}}: A DataTable in object format
+     * - {{cols: !Array}}: A DataTable in object format without rows
+     * - !Array<!Array>: A DataTable in 2D array format
+     *
+     * Un-supported types:
+     *
+     * - Empty !Array<!Array>: (e.g. `[]`) While technically a valid data
+     *   format, this is rejected as charts will not render empty DataTables.
+     *   DataTables must at least have columns specified. An empty array is most
+     *   likely due to a bug or bad data. If one wants an empty DataTable, pass
+     *   no arguments.
+     * - Anything else
+     *
+     * @param {(Object|Array)} data the data with which we should use to
+     *     construct the new DataTable object
+     * @return {!Promise} promise for the created DataTable
+     */
+    dataTable: function(data) {
+      return this._corePackage.then(function(viz) {
+        if (data == null) {
+          return new viz.DataTable();
+        } else if (data.getNumberOfRows) {
+          // Data is already a DataTable
+          return data;
+        } else if (data.cols) {  // data.rows may also be specified
+          // Data is in the form of object DataTable structure
+          return new viz.DataTable(data);
+        } else if (data.length > 0) {
+          // Data is in the form of a two dimensional array.
+          return viz.arrayToDataTable(data);
+        } else if (data.length === 0) {
+          // Chart data was empty.
+          // We return null instead of creating an empty DataTable because most
+          // (if not all) charts will render a sticky error in this situation.
+          return Promise.reject('Data was empty.');
+        }
+        return Promise.reject('Data format was not recognized.');
+      });
+    },
+
+    /**
+     * Creates a DataView object from a DataTable for use with a chart.
+     *
+     * @param {!Object} data the DataTable to use
+     * @return {!Promise} promise for the created DataView
+     */
+    dataView: function(data) {
+      return this._corePackage.then(function(viz) {
+        return new viz.DataView(data);
+      });
+    },
+  });
+})();
+</script>
diff --git a/google-chart.html b/google-chart.html
index e6dd09e..462f08e 100644
--- a/google-chart.html
+++ b/google-chart.html
@@ -1,7 +1,7 @@
 <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="charts-loader.html">
+<link rel="import" href="google-chart-loader.html">
 
 <!--
 `google-chart` encapsulates Google Charts as a web component, allowing you to easily visualize
@@ -52,6 +52,7 @@
 <dom-module id="google-chart">
   <link rel="import" type="css" href="google-chart.css">
   <template>
+    <google-chart-loader id="loader" type="[[type]]"></google-chart-loader>
     <div id="chartdiv"></div>
   </template>
 </dom-module>
@@ -60,113 +61,19 @@
 (function() {
   "use strict";
 
-  // Most charts use this package.
-  var DEFACTO_CHART_PACKAGE = 'corechart';
-
-  // Loads a chart package and then calls the callback.
-  var chartConstructor = function(callback, opt_pkg) {
-    return function(chartElement) {
-      return getChartPackage(opt_pkg).then(callback).then(function(ctor) {
-        return new ctor(chartElement);
-      });
-    };
-  };
-
-  // A collection of chart types associated with a function that returns a
-  // Promise for the chart type's constructor.
-  var CHART_CONSTRUCTORS = {
-    'area': chartConstructor(function(pkg) {
-      return pkg.AreaChart;
-    }),
-    'bar': chartConstructor(function(pkg) {
-      return pkg.BarChart;
-    }),
-    'bubble': chartConstructor(function(pkg) {
-      return pkg.BubbleChart;
-    }),
-    'candlestick': chartConstructor(function(pkg) {
-      return pkg.CandlestickChart;
-    }),
-    'column': chartConstructor(function(pkg) {
-      return pkg.ColumnChart;
-    }),
-    'combo': chartConstructor(function(pkg) {
-      return pkg.ComboChart;
-    }),
-    'geo': chartConstructor(function(pkg) {
-      return pkg.GeoChart;
-    }),
-    'histogram': chartConstructor(function(pkg) {
-      return pkg.Histogram;
-    }),
-    'line': chartConstructor(function(pkg) {
-      return pkg.LineChart;
-    }),
-    'pie': chartConstructor(function(pkg) {
-      return pkg.PieChart;
-    }),
-    'scatter': chartConstructor(function(pkg) {
-      return pkg.ScatterChart;
-    }),
-    'stepped-area': chartConstructor(function(pkg) {
-      return pkg.SteppedAreaChart;
-    }),
-    'table': chartConstructor(function(pkg) {
-      return pkg.Table;
-    }, 'table'),
-    'timeline': chartConstructor(function(pkg) {
-      return pkg.Timeline;
-    }, 'timeline'),
-    'gauge': chartConstructor(function(pkg) {
-      return pkg.Gauge;
-    }, 'gauge'),
-    'treemap': chartConstructor(function(pkg) {
-      return pkg.TreeMap;
-    }, 'treemap')
-  };
-
-  // A cache of Package Promises so we can re-use them between charts.
-  var pkgPromises = {};
-
-  // Returns a Promise for a Chart package.
-  var getChartPackage = function(opt_pkg) {
-    var pkg = opt_pkg || DEFACTO_CHART_PACKAGE;
-    if (pkgPromises[pkg]) return pkgPromises[pkg];
-    pkgPromises[pkg] = new Promise(function(resolve) {
-      google.charts.load('current', {packages: [pkg]});
-      google.charts.setOnLoadCallback(function() {
-        resolve(google.visualization);
-      });
-    });
-    return pkgPromises[pkg];
-  };
-
-  // Creates a chart of type on the chartElement.
-  // Returns a Promise for the new chart.
-  var createChart = function(type, chartElement) {
-    return CHART_CONSTRUCTORS[type](chartElement);
-  };
-
-  // We can go ahead and load the defacto package because we'll need it to do
-  // anything (e.g. creating the DataTable to render).
-  var vizPkg = getChartPackage();
-
   Polymer({
-
     is: 'google-chart',
 
     /**
-     * Fired when a new chart type is created and rendered.
+     * Fired after a chart type is rendered and ready for interaction.
      *
-     * @event google-chart-render
+     * @event google-chart-ready
      */
 
     /**
      * Fired when the user makes a selection in the chart.
      *
      * @event google-chart-select
-     * @param {object} detail
-     *   @param {array} detail.selection The user-defined selection.
      */
 
     properties: {
@@ -205,22 +112,6 @@
         observer: 'drawChart'
       },
 
-      /**
-       * A Promise for the Google Visualization library.
-       *
-       * Example:
-       * <pre>myChart.pkg.then(function(viz) {
-       *   // `viz` is equivalent to `google.visualization`
-       *   myChart.view = new viz.DataView(myData);
-       * });</pre>
-       *
-       */
-      pkg: {
-        type: Object,
-        value: vizPkg,
-        readOnly: true
-      },
-
       /**
        * Sets the data columns for this object.
        *
@@ -240,6 +131,7 @@
         type: Array,
         observer: '_rowsOrColumnsChanged',
       },
+
       /**
        * Sets the data rows for this object.
        *
@@ -326,10 +218,12 @@
       },
     },
 
-    observers: [],
+    listeners: {
+      'google-chart-select': '_updateSelection',
+    },
 
     // Used to get the ImageURI to maintain the old API.
-    _chartObject: null,  // not accessible before render event.
+    _chartObject: null,  // not accessible before ready event.
 
     // Promise for the chart object that we will draw.
     _chart: null,
@@ -346,7 +240,7 @@
     // The chart type was changed.
     // We need to create a new chart and redraw.
     _typeChanged: function() {
-      this._chart = createChart(this.type, this.$.chartdiv)
+      this._chart = this.$.loader.create(this.type, this.$.chartdiv)
           .then(this._setupChart.bind(this));
       this.drawChart();
     },
@@ -370,25 +264,17 @@
     // Sets up a chart after construction.
     // @return {Object} The chart.
     _setupChart: function(chart) {
-      // Some charts (e.g. Gauge) do not support selection
-      if (chart.getSelection) {
-        google.visualization.events.addListener(chart, 'select', function() {
-          this.selection = this._selection = chart.getSelection();
-          // This should be deprecated.
-          // The value for the new selection is here:
-          // event.detail.selection
-          // with property notification, the path is:
-          // event.detail.value
-          this.fire('google-chart-select', {
-             selection: this.selection
-          });
-        }.bind(this));
-      }
+      this.$.loader.fireOnChartEvent(chart, 'select');
+      this.$.loader.fireOnChartEvent(chart, 'ready');
       this._chartObject = chart;
       this._selection = null;  // Reset the internal selection value.
       return chart;
     },
 
+    _updateSelection: function() {
+      this.selection = this._selection = this._chartObject.getSelection();
+    },
+
     /**
      * Redraws the chart.
      *
@@ -403,9 +289,6 @@
           .then(function(chartAndData) {
             var chart = chartAndData[0];
             var data = chartAndData[1];
-            google.visualization.events.addOneTimeListener(chart, 'ready', function() {
-              this.fire('google-chart-render');
-            }.bind(this));
             chart.draw(data, this.options || {});
             return chart;
           }.bind(this), function(error) {
@@ -422,7 +305,7 @@
      *
      * @return {string} Returns image URI.
      */
-    getImageURI: function() {
+    get imageURI() {
       return this._chartObject.getImageURI();
     },
 
@@ -437,14 +320,14 @@
     _rowsOrColumnsChanged: function() {
       var rows = this.rows, cols = this.cols;
       if (!rows || !cols) return;
-      this._dataView = vizPkg.then(function(viz) {
-        var dataTable = new viz.DataTable();
-        for (var i = 0; i < cols.length; i++) {
-          dataTable.addColumn(cols[i]);
-        }
-        dataTable.addRows(rows);
-        return new viz.DataView(dataTable);
-      });
+      this._dataView = this.$.loader.dataTable()
+        .then(function(dataTable) {
+          cols.forEach(function(col) {
+            dataTable.addColumn(col);
+          });
+          dataTable.addRows(rows);
+          return this.$.loader.dataView(dataTable);
+        }.bind(this));
       this.drawChart();
     },
 
@@ -452,40 +335,22 @@
     _dataChanged: function() {
       var data = this.data;
       if (!data) return;
-      var dataTable;
       if (typeof data == 'string' || data instanceof String) {
         // Load data asynchronously, from external URL.
         var request = /** @type {!IronRequestElement} */ (document.createElement('iron-request'));
-        dataTable = request.send({url: data, handleAs: 'json'})
-            .then(function(xhr) {
-              return xhr.response;
-            });
+        data = request.send({url: data, handleAs: 'json'})
+            .then(function(xhr) { return xhr.response; });
       } else {
         // Data is all ready to be processed.
-        dataTable = Promise.resolve(data);
+        data = Promise.resolve(data);
       }
-      if (!data.getNumberOfRows) {  // Data not already a DataTable
-        dataTable = Promise.all([vizPkg, dataTable]).then(function(vizAndData) {
-          var viz = vizAndData[0];
-          data = vizAndData[1];
-          if (data.rows && data.cols) {
-            // Data is in the form of object DataTable structure
-            return new viz.DataTable(data);
-          } else if (data.length > 0) {
-            // Data is in the form of a two dimensional array.
-            return viz.arrayToDataTable(data);
-          } else if (data.length === 0) {
-            // Chart data was empty.
-            // We return null instead of creating an empty DataTable because most
-            // (if not all) charts will render a sticky error in this situation.
-            return Promise.reject('Data was empty.');
-          }
-          return Promise.reject('Data format was not recognized.');
-        });
-      }
-      this._dataView = dataTable.then(function(dataTable) {
-        return new google.visualization.DataView(dataTable);
-      });
+      this._dataView = data
+        .then(function(data) {
+          return this.$.loader.dataTable(data);
+        }.bind(this))
+        .then(function(dataTable) {
+          return this.$.loader.dataView(dataTable);
+        }.bind(this));
       this.drawChart();
     }
   });
diff --git a/test/basic-tests.html b/test/basic-tests.html
index 5304690..7a3e956 100644
--- a/test/basic-tests.html
+++ b/test/basic-tests.html
@@ -43,20 +43,19 @@
     setup(function() {
       chart.data = [ ['Data', 'Value'], ['Something', 1] ];
     });
-    test('fires google-chart-render event for initial load', function(done) {
-      chart.addEventListener('google-chart-render', function() {
+    test('fires google-chart-ready event for initial load', function(done) {
+      chart.addEventListener('google-chart-ready', function() {
         done();
       });
     });
-    test('fires google-chart-render event for drawChart call', function(done) {
+    test('fires google-chart-ready event for drawChart call', function(done) {
       var drawCount = 0;
-      chart.addEventListener('google-chart-render', function() {
+      chart.addEventListener('google-chart-ready', function() {
         ++drawCount;
         if (drawCount == 4) done();
+        else chart.drawChart();
       });
-      chart.drawChart();  // 2
-      chart.drawChart();  // 3
-      chart.drawChart();  // 4
+
     });
     test('default type is column', function() {
       assert.equal(chart.type, 'column');
@@ -88,14 +87,9 @@
         return chart.$$('text').innerHTML == expectedTitle;
       }, done);
     });
-    test('visualization package loads', function(done) {
-      chart.pkg.then(function() {
-        done();
-      });
-    });
     test('creates png chart uri', function (done) {
-      chart.addEventListener('google-chart-render', function(event) {
-        var uri = chart.getImageURI();
+      chart.addEventListener('google-chart-ready', function(event) {
+        var uri = chart.imageURI;
         assert.isString(uri);
         assert.match(uri, /^data:image\/png;base64/, 'png regexp matches');
         done();
@@ -106,7 +100,7 @@
       secondChart.data = [ ['Data', 'Value'], ['Something', 1] ];
 
       // Ensure second chart is rendered. Clean up test.
-      secondChart.addEventListener('google-chart-render', function() {
+      secondChart.addEventListener('google-chart-ready', function() {
         document.body.removeChild(secondChart);
         done();
       });
@@ -124,7 +118,7 @@
       chart.rows = [
         ['Something', 1]
       ];
-      chart.addEventListener('google-chart-render', function() {
+      chart.addEventListener('google-chart-ready', function() {
         done();
       });
     });
@@ -133,7 +127,6 @@
       chart.cols = [ { 'type': 'date' } ];
       chart.rows = [ ['Date(1789, 3, 30)'] ];
       waitCheckAndDone(function() {
-        console.log(chart.$$('#chartdiv').innerHTML)
         return chart.$$('#chartdiv').innerHTML ==
           'Error: Type mismatch. Value Date(1789, 3, 30) ' +
           'does not match type date in column index 0';
@@ -141,7 +134,7 @@
     });
     var setDataAndWaitForRender = function(data, done) {
       chart.data = data;
-      chart.addEventListener('google-chart-render', function() {
+      chart.addEventListener('google-chart-ready', function() {
         done();
       });
     };
@@ -160,11 +153,15 @@
       }, done);
     });
     test('[data] is DataTable', function(done) {
-      chart.pkg.then(function(viz) {
-        setDataAndWaitForRender(viz.arrayToDataTable([
-          ['Data', 'Value'],
-          ['Something', 1]
-        ]), done);
+      chart.addEventListener('google-chart-ready', function() {
+        done();
+      });
+      var loader = document.createElement('google-chart-loader');
+      loader.dataTable([
+        ['Data', 'Value'],
+        ['Something', 1]
+      ]).then(function(dataTable) {
+        chart.data = dataTable;
       });
     });
     test('[data] is JSON URL for 2D Array', function(done) {
@@ -174,19 +171,23 @@
       setDataAndWaitForRender('test-data-object.json', done);
     });
     test('[view] is DataView', function(done) {
-      chart.pkg.then(function(viz) {
-        chart.view = new viz.DataView(viz.arrayToDataTable([
-          ['Data', 'Value'],
-          ['Something', 1]
-        ]));
-        chart.addEventListener('google-chart-render', function() {
-          done();
-        });
+      chart.addEventListener('google-chart-ready', function() {
+        done();
+      });
+      var loader = document.createElement('google-chart-loader');
+      loader.dataTable([
+        ['Data', 'Value'],
+        ['Something', 1]
+      ])
+      .then(loader.dataView.bind(loader))
+      .then(function(dataView) {
+        chart.view = dataView;
       });
     });
     test('multiple calls to JSON URL', function(done) {
-      setDataAndWaitForRender('test-data-array.json', done);
-      setDataAndWaitForRender('test-data-object.json', done);
+      setDataAndWaitForRender('test-data-array.json', function() {
+        setDataAndWaitForRender('test-data-object.json', done);
+      });
     });
   });
 });

From bec220f38148fc25f901b2d273c22ad2a88a7e65 Mon Sep 17 00:00:00 2001
From: Wes Alvaro <hello@wesalvaro.com>
Date: Wed, 13 Jul 2016 22:02:23 +0900
Subject: [PATCH 2/2] Adds the Material Bar chart.

---
 demo/index.html          | 8 ++++++++
 google-chart-loader.html | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/demo/index.html b/demo/index.html
index 00093d7..c8ab4a1 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -190,6 +190,14 @@ <h2>Chart gallery</h2>
     rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
   </google-chart>
 
+  <p>And here is the material bar chart:</p>
+
+  <google-chart
+    type="md-bar"
+    options='{"title": "Days in a month"}'
+    cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
+    rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'></google-chart>
+
   <p>Here's a bubble chart:</p>
 
   <google-chart
diff --git a/google-chart-loader.html b/google-chart-loader.html
index ddb7270..f66810f 100644
--- a/google-chart-loader.html
+++ b/google-chart-loader.html
@@ -18,6 +18,10 @@
     'bar': {
       ctor: 'BarChart',
     },
+    'md-bar': {
+      ctor: 'Bar',
+      pkg: 'bar',
+    },
     'bubble': {
       ctor: 'BubbleChart',
     },