From cfa5efe08a181922ca60341d9e03582913ab42bf Mon Sep 17 00:00:00 2001
From: musofan <muso.fan@gmail.com>
Date: Mon, 25 Jan 2016 23:47:08 -0500
Subject: [PATCH] Google Visualization GeoDiagram

---
 app/components/.DS_Store         | Bin 6148 -> 6148 bytes
 app/components/core/TestData.jsx |  73 +++++++++++++++++++++++++++----
 2 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/app/components/.DS_Store b/app/components/.DS_Store
index 5008ddfcf53c02e82d7eee2e57c38e5672ef89f6..072a070328716a1a2846691ab7dc0c405cd68f44 100644
GIT binary patch
delta 381
zcmZoMXfc=|#>B)qF;Q%yo}wrd0|Nsi1A_oVQh9MfQcivnkpFXI;&R4%kPHh$GDAK?
z5ko4nY*Il^W^svu!A(XcW)@a9b`DN1AmHN?5af#u&d4thE=epYEp|#QiU#vCQ&N+l
z?103Q3>Z5kKR*Y~PD~2ROf8QW5OL1WD@n}EODzhn2bl!X8xx+Hmy%!ZlwX>cQXB&n
z49`p{$%q#a4Jb-21L_S(%u5Z+EY3{I%*iaN<OBi^&UgWd>S{w{GaUs(1H)P!g=%wi
z104lZ1GCy%fm#j@X-!i{-^ha6u0@NNEM2yI#o?ns9|Hj+FgzF-bbweG#6SYafNXe>
zlm!>%<>cq31H~9OCSGEhY#_q2nVW-~0~oj)6TdT0<`+?91qGtQWJ3|@%>g1?m;uc;
BY5V{H

delta 70
zcmZoMXfc=|#>AjHu~2NHo+1YW5HK<@2yAv_KE|>+fcX{EW_AvK4xj>{$am(+{342+
UKzW7)kiy9(Jj$D6L{=~Z044qo@Bjb+

diff --git a/app/components/core/TestData.jsx b/app/components/core/TestData.jsx
index d491fdd..495ff8f 100644
--- a/app/components/core/TestData.jsx
+++ b/app/components/core/TestData.jsx
@@ -1,19 +1,74 @@
-var React          = require('react');
+var React = require('react');
+var $ = require('jquery');
 
 module.exports = React.createClass({
-  componentDidMount: function() {
-    var dataSchema = [['string', 'Topping'] , ['number' , 'Slices']];
-    var testData = function() {
-      return function(){
-        return [['Goats', 5], ['Burrito',3], ['Olives', 1], ['Zucchini', 1], ['Pepperoni',2]];
+  getCustomOptions: function(){
+    return {
+      'backgroundColor': 'text',
+      'datalessRegionColor': 'text',
+      'defaultColor': 'text'
+      'colorAxis1':'text'
+      'colorAxis2':'text'
+    }
+  },
+  getInitialState: function() {
+    return {
+      'backgroundColor': 'ffffff',
+      'datalessRegionColor': 'ffffff',
+      'defaultColor': 'ffffff'
+      'colorAxis1':'ffffff'
+      'colorAxis2':'ffffff'
+    }
+  },
+
+
+  drawChart: function() {
+      var dt         = new window.google.visualization.DataTable(),
+          dataSchema = this.props.dataSchema,
+          data       = this.props.data,
+          // options    = this.state,
+          chart      = new window.google.visualization.GeoChart(document.getElementById('chart-div'));
+
+      var options = {
+          colorAxis: {colors: ['blue', 'ff07f0', '#0770ff']},
+          backgroundColor: this.state.
+          datalessRegionColor: '#f5f5f5',
+          defaultColor: '#f5f5f5'
       }
+
+      dataSchema.forEach(function(column){
+        var type = column[0],
+            name = column[1];
+        dt.addColumn(type, name);
+      })
+
+      dt.addRows(data);
+
+      // Instantiate and draw our chart, passing in some options.
+      chart.draw(dt, options);
+  },
+  loadGoogleViz: function() {
+    window.google.load('visualization', '1.0',
+                       {packages:['corechart'],
+                         callback:this.drawChart
+                       });
+
+  },
+  componentDidUpdate: function() {
+    if(window.google){
+      this.drawChart();
     }
-    this.props.updateTransformFunction(testData(), dataSchema);
+  },
+  componentDidMount: function() {
+    // Inject google viz jsapi
+    // This is the method to load external dependencies when the component mounts
+    // React automagically binds this to method calls on the component so you can use
+    // this safely in callback functions to refer to component methods
+    $.getScript("https://www.google.com/jsapi").done(this.loadGoogleViz);
   },
   render: function() {
     return (
-      <div className='test-data'>
-        <div>Test Data Injected</div>
+      <div id='chart-div'>
       </div>
     )
   }