From b66975fd07228621d742b2069b56ea770e11c6b0 Mon Sep 17 00:00:00 2001
From: Wes Alvaro <git@wesalvaro.com>
Date: Wed, 16 Mar 2016 17:48:47 +0900
Subject: [PATCH] Adds support for Dashboards and Controls.

Moves data handling to a behavior to be shared between Charts and
Dashboards.
---
 demo/index.html   |  24 ++++
 google-chart.html | 322 ++++++++++++++++++++++++++++++----------------
 2 files changed, 232 insertions(+), 114 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index fd3bfc4..631d132 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -28,6 +28,30 @@
     rows='[["Something", 1]]'>
   </google-chart>
 
+  <p>A simple <code>google-chart-dashboard</code> looks like this:</p>
+
+  <google-chart-dashboard
+      data='[
+          ["Name", "Donuts eaten"],
+          ["Michael" , 5],
+          ["Elisa", 7],
+          ["Robert", 3],
+          ["John", 2],
+          ["Jessica", 6],
+          ["Aaron", 1],
+          ["Margareth", 8]
+        ]'>
+    <google-chart type="pie" options='{
+            "width": 300,
+            "height": 300,
+            "pieSliceText": "value",
+            "legend": "right"
+          }'></google-chart>
+    <google-chart-control
+        type="number-range-filter"
+        options='{ "filterColumnLabel": "Donuts eaten" }'></google-chart-control>
+  </google-chart-dashboard>
+
   <p>Charts can be resized with CSS, but you'll need to call the <code>drawChart</code> method when the size changes.</p>
   <p>Here's a basic responsive example using only CSS and JS (You could also use <code>&lt;iron-media-query&gt;</code>):</p>
 
diff --git a/google-chart.html b/google-chart.html
index d18aaa1..6ad7a39 100644
--- a/google-chart.html
+++ b/google-chart.html
@@ -54,6 +54,18 @@
     <div id="chartdiv"></div>
   </template>
 </dom-module>
+<dom-module id="google-chart-control">
+  <template>
+    <div id="control"></div>
+  </template>
+</dom-module>
+<dom-module id="google-chart-dashboard">
+  <template>
+    <div id="dashboard">
+      <content></content>
+    </div>
+  </template>
+</dom-module>
 
 <script>
 (function() {
@@ -121,7 +133,10 @@
     }, 'gauge'),
     'treemap': chartConstructor(function(pkg) {
       return pkg.TreeMap;
-    }, 'treemap')
+    }, 'treemap'),
+    'dashboard': chartConstructor(function(pkg) {
+      return pkg.Dashboard;
+    }, 'controls')
   };
 
   // A cache of Package Promises so we can re-use them between charts.
@@ -152,60 +167,8 @@
   // 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.
-     *
-     * @event google-chart-render
-     */
-
-    /**
-     * 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.
-     */
-
+  var DataLoadingBehavior = {
     properties: {
-      /**
-       * Sets the type of the chart.
-       *
-       * Should be one of:
-       * - `area`, `bar`, `bubble`, `candlestick`, `column`, `combo`, `geo`,
-       *   `histogram`, `line`, `pie`, `scatter`, `stepped-area`, `treemap`
-       *
-       * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a> for details.
-       *
-       */
-      type: {
-        type: String,
-        value: 'column',
-        observer: '_typeChanged'
-      },
-
-      /**
-       * Sets the options for the chart.
-       *
-       * Example:
-       * <pre>{
-       *   title: "Chart title goes here",
-       *   hAxis: {title: "Categories"},
-       *   vAxis: {title: "Values", minValue: 0, maxValue: 2},
-       *   legend: "none"
-       * };</pre>
-       * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a>
-       * for the options available to each chart type.
-       *
-       */
-      options: {
-        type: Object,
-        observer: 'drawChart'
-      },
-
       /**
        * A Promise for the Google Visualization library.
        *
@@ -300,6 +263,130 @@
       view: {
         type: Object,
         observer: '_viewChanged'
+      }
+    },
+    // Promise for the DataView with which the chart is drawn.
+    _dataView: null,
+
+    // Handles changes to the DataView object attribute.
+    _viewChanged: function() {
+      if (!this.view) return;
+      this._dataView = Promise.resolve(this.view);
+      this.draw();
+    },
+
+    // Handles changes to the rows & columns attributes.
+    _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.draw();
+    },
+
+    // Handles changes to the data attribute.
+    _dataChanged: function() {
+      var data = this.data;
+      if (!data) return;
+      var dataTable;
+      if (typeof data == 'string' || data instanceof String) {
+        // Load data asynchronously, from external URL.
+        dataTable = this.$.xhr.send({url: data, handleAs: 'json'})
+            .then(function(xhr) {
+              return xhr.response;
+            });
+      } else {
+        // Data is all ready to be processed.
+        dataTable = 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.draw();
+    },
+    draw: function() {
+      throw Error('Should be overridden');
+    }
+  };
+
+  Polymer({
+
+    is: 'google-chart',
+    behaviors: [DataLoadingBehavior],
+
+    /**
+     * Fired when a new chart type is created and rendered.
+     *
+     * @event google-chart-render
+     */
+
+    /**
+     * 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: {
+      /**
+       * Sets the type of the chart.
+       *
+       * Should be one of:
+       * - `area`, `bar`, `bubble`, `candlestick`, `column`, `combo`, `geo`,
+       *   `histogram`, `line`, `pie`, `scatter`, `stepped-area`, `treemap`
+       *
+       * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a> for details.
+       *
+       */
+      type: {
+        type: String,
+        value: 'column',
+        observer: '_typeChanged'
+      },
+
+      /**
+       * Sets the options for the chart.
+       *
+       * Example:
+       * <pre>{
+       *   title: "Chart title goes here",
+       *   hAxis: {title: "Categories"},
+       *   vAxis: {title: "Values", minValue: 0, maxValue: 2},
+       *   legend: "none"
+       * };</pre>
+       * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a>
+       * for the options available to each chart type.
+       *
+       */
+      options: {
+        type: Object,
+        observer: 'drawChart'
       },
 
       /**
@@ -335,9 +422,6 @@
     // Promise for the chart object that we will draw.
     _chart: null,
 
-    // Promise for the DataView with which the chart is drawn.
-    _dataView: null,
-
     // The chart type was changed.
     // We need to create a new chart and redraw.
     _typeChanged: function() {
@@ -374,7 +458,7 @@
      *
      * @method drawChart
      */
-    drawChart: function() {
+    draw: function() {
       if (!this._chart || !this._dataView) return;
       Promise.all([this._chart, this._dataView])
           .then(function(chartAndData) {
@@ -394,6 +478,10 @@
           }.bind(this));
     },
 
+    drawChart: function() {
+      this.draw();
+    },
+
     /**
      * Returns the chart serialized as an image URI.
      *
@@ -405,66 +493,72 @@
       return this._chartObject.getImageURI();
     },
 
-    // Handles changes to the DataView object attribute.
-    _viewChanged: function() {
-      if (!this.view) return;
-      this._dataView = Promise.resolve(this.view);
-      this.drawChart();
+  });
+  Polymer({
+    is: 'google-chart-control',
+    properties: {
+      type: {
+        type: String
+      },
+      options: {
+        type: Object
+      }
+    }
+  });
+  var CHART_TYPES = {
+    'bar': 'BarChart',
+    'column': 'ColumnChart',
+    'pie': 'PieChart',
+    'md-bar': 'google.charts.Bar'
+  };
+  var CONTROL_TYPES = {
+    'number-range-filter': 'NumberRangeFilter'
+  };
+  var DEFACTO_CHART_TYPE = 'column';
+  Polymer({
+    is: 'google-chart-dashboard',
+    behaviors: [DataLoadingBehavior],
+    properties: {
     },
-
-    // Handles changes to the rows & columns attributes.
-    _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.drawChart();
+    _dashboard: null,
+    draw: function() {
+      if (!this._dataView || !this._dashboard) return;
+      Promise.all([this._dashboard, this._dataView]).then(function(dashboardAndData) {
+        var dashboard = dashboardAndData[0];
+        var data = dashboardAndData[1];
+        dashboard.draw(data, this.options);
+      }.bind(this));
     },
-
-    // Handles changes to the data attribute.
-    _dataChanged: function() {
-      var data = this.data;
-      if (!data) return;
-      var dataTable;
-      if (typeof data == 'string' || data instanceof String) {
-        // Load data asynchronously, from external URL.
-        dataTable = this.$.xhr.send({url: data, handleAs: 'json'})
-            .then(function(xhr) {
-              return xhr.response;
-            });
-      } else {
-        // Data is all ready to be processed.
-        dataTable = 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.');
+    ready: function() {
+      this._dashboard = createChart('dashboard', this.$.dashboard).then(function(dashboard) {
+        console.log('controls', Polymer.dom(this).querySelectorAll('google-chart-control'));
+        var id = 0;
+        var charts = Polymer.dom(this).querySelectorAll('google-chart').map(function(chart) {
+          if (!chart.id) {
+            chart.id = 'chart-' + ++id;
           }
-          return Promise.reject('Data format was not recognized.');
+          console.log('chart', chart);
+          return new google.visualization.ChartWrapper({
+            chartType: CHART_TYPES[chart.type] || DEFACTO_CHART_TYPE,
+            containerId: chart.id
+          });
         });
-      }
-      this._dataView = dataTable.then(function(dataTable) {
-        return new google.visualization.DataView(dataTable);
-      });
-      this.drawChart();
+        id = 0;
+        var controls = Polymer.dom(this).querySelectorAll('google-chart-control').map(function(control) {
+          if (!control.id) {
+            control.id = 'control-' + ++id;
+          }
+          return new google.visualization.ControlWrapper({
+            controlType: CONTROL_TYPES[control.type],
+            containerId: control.id,
+            options: control.options || {filterColumnIndex: 1, ui: {chartView: {columns: [0, 1]}}},
+            state: control.state || {}
+          });
+        });
+        dashboard.bind(controls, charts);
+        return dashboard;
+      }.bind(this));
+      this.draw();
     }
   });
 })();