aes-campaignfunding.html

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="../core-input/core-input.html">
<link rel="import" href="../core-selector/core-selector.html">
<link rel="import" href="../core-menu/core-menu.html"> 
<link rel="import" href="../core-item/core-item.html">


<!--
Simple API component to make API calls. If the API returns JSON with a header followed by an array of results, it will return the first array. Flattens the results to be one level deep, and sends the reuslts to <code>output</code>

##### Example

    <lens-input-simple-api url="http://api.openweathermap.org/data/2.5/weather?q=New+York&units=imperial"></lens-input-simple-api>

@element lens-input-simple-api
@blurb Simple API component to make API calls.
@status alpha
@homepage http://lenses.github.io/lens-input-simple-api
-->

<polymer-element name="aes-campaignfunding" attributes="url output outputRaw minRows">
  <template>
    <link rel="stylesheet" href="aes-campaignfunding.css">
    <div class="lens-container">
<!--       <div><label class="label">API URL: </label><input is="core-input" value="{{url}}"></div>
 -->
      <!-- no longer needed
      <div><label class="label">ORG ID: </label><input is="core-input" value="{{orgId}}"></div>
      -->

      <!-- committedValue doesn't change until user presses enter or changes focus to another feild. This is useful
           to avoid calling api with every keystroke --> 
      <div>
        <label class="label">CAMPAIGN DATA TYPE: </label>

<!--         <input is="core-input" id="politician_methods" committedValue="{{politicianMethods}}">
 -->

        <!--
          The template/repeat tag iterates over politicianMethodOptions array and renders them as a options for core-selector.
          'title' of each poriticianMethodOptions is used to be displayed in the selector and 'url' is pased to politicianMethods variable when selected 
        -->
        <core-selector class="selector" selected="{{politicianMethods}}" valueattr="label" multi="false">
          <template repeat="{{method in politicianMethodOptions}}">
            <div class="col" label="{{method.url}}">{{method.title}}</div>

          </template>

        </core-selector>


      </div>

      <br>
      <div><label class="label">POLITICIAN SEARCH: </label><input is="core-input" id="name_search" committedValue="{{nameSearch}}"></div>
      <!-- <div><label class="label">TYPE: </label><input is="core-input" value="{{idType}}"></div> -->
<!--       <div>
        <label class="label">Politician Methods: </label>
        <core-menu selected="0" selectedItem="{{selectedMenu}}">
          <core-item label="Top Contributors" id="'/contributors.json?'"></core-item>
          <core-item label="Dialog"></core-item>
          <core-item label="Search"></core-item>
        </core-menu>
        This is the selected item: {{selectedMenu.id}} -->
        <!-- This is the selected item: {{selectedMenu.id}}
        selectedItem="{{selectedMenu}}" -->
<!--        <div><label class="label">Expect at least <input class="count" is="core-input" value="{{minRows}}"> datapoints.</label></div>
 -->
  <br>
      <div><label class="label">Num Records: </label><div class="data">{{output.length}}</div></div>
    </div>

    
  </template>
  <script>
    Polymer({

      /**
       * Output data
       *
       * @property output
       * @type object
       * @default undefined
       */
      
      /**
       * Output data before flatening.
       *
       * @property outputRaw
       * @type object
       * @default undefined
       */
      

      /**
       *  URL for the API call
       *  
       *  @property url
       *  @type string
       *  @default null
       */
      url: '',//'http://makelenses.com:8000/transparencydata.com/api/1.0/aggregates/org/1b8fea7e453d4e75841eac48ff9df550/recipient_pacs.json?cycle=2012&limit=300&apikey=51e130ecf0c647f283d488f324b85d44',

      apiKey: 'apikey=51e130ecf0c647f283d488f324b85d44',
      cycle: '2012',
     // _URL: 'http://makelenses.com:8000/transparencydata.com/api/1.0/aggregates/org/',  
      _URL: 'http://makelenses.com:8000/transparencydata.com/api/1.0',

      orgId: '', //1b8fea7e453d4e75841eac48ff9df550

      //search

      nameSearch: '', //Barack Obama

      idType: '', //politician

      politicianMethods: '',

      /**
       * Different json endpoints supported by api.
       */
      politicianMethodOptions: [ 
          {title: "Top Contributors", url: "/contributors.json?"},
          {title: "Top Industries", url: "/contributors/industries.json?"},
          {title: "Unknown Industries", url: "/contributors/industries_unknown.json?"},
          {title: "Top Sectors", url: "/contributors/sectors.json?"},
          {title: "Local Breakdown", url: "/contributors/local_breakdown.json?"},
          {title: "Contributor Type Breakdown", url: "/contributors/type_breakdown.json?"},
          {title: "FEC Summary", url: "/fec_summary.json?"},
          {title: "FEC Independent Expenditures", url: "/fec_indexp.json?"}
      ],




      /**
       * Minimum number of rows to expect in the result data, otherwise ignores it
       * @type {Number}
       */
      minRows: 1,

      /**
       * Tells polymer to run nameSearchChanged function when nameSearch variable is changed
       */
      observe: {
        nameSearch: "nameSearchChanged",
        politicianMethods: "nameSearchChanged"
      },

      domReady: function() {

          var self = this;
          console.log(self.url);

          //sets the value of nameSearch input feild to nameSearch on initialization
          this.$.name_search.value = this.nameSearch;

          //http://transparencydata.org/api/1.0/entities.json?apikey=51e130ecf0c647f283d488f324b85d44&search=Barack+Obama&type=politician
          self.searchUrl = self._URL + '/entities.json?' + self.apiKey + '&search=' + self.nameSearch + '&type=' + self.idType;       

          self.lookupId();

      }, 
      /**
       * This function is called when nameSearch is changed (e.g user presses enter in the input box above)
       */
      nameSearchChanged: function() {

        var self = this;

        self.searchUrl = self._URL + '/entities.json?' + self.apiKey + '&search=' + self.nameSearch + '&type=' + self.idType;
        self.lookupId();


      },

      /**
       *  Query the API, flatten results, and set <code>output</code>.
       *  
       *  @method queryData
       */
      lookupId: function() {


          var self = this;
          //var url = self.url;
          var url = self.searchUrl;
          
          self._makeCORSCall(url, self.processLookupData);

      },


      queryData: function() {


          var self = this;
          var url = self.url;

          self._makeCORSCall(url, self.processQueryData);

      },

      urlChanged: function() {
        //this.queryData();
      },

      processLookupData: function(data, self) {
        console.log('lookup', data);
        
        // return nothing if returned lookup data is empty (e.g. name not found)
        if(data.length===0) {
          self.output = {};
          return;
        }

        var id = data[0].id;

          self.url = self._URL + '/aggregates/pol/' + id + self.politicianMethods + '&' + self.apiKey;
          console.log(self.url);

          //removed cycle=' + self.cycle from after '/contributors.json?''

          self.queryData();

      },



      processQueryData: function(data, self) {
        //var self = this;

          console.log('processQ data', data);

          self.outputRaw = data;

          var firstArray = self._findFirstArray(data, self.minRows);

          // if there is no first array, flatten the entire response
          if (!firstArray) {
            self.output = [self._flattenJSON(data)];
          }
          // otherwise, flatten the first array
          else {
            self.output = self._flattenJSONArray(firstArray);
          }

          //self.output = self._flattenFirstArrayInJSON(firstArray, 1);


      },

      _makeCORSCall: function(url, callback) {

            var self = this;
            console.log(url);
            var method = 'GET';
            var xhr = new XMLHttpRequest();
            if ("withCredentials" in xhr) {
              xhr.open(method, url, true);
            } else if (typeof XDomainRequest != "undefined") {
              xhr = new XDomainRequest();
              xhr.open(method, url);
            } else {
              // CORS not supported.
              xhr = null;
            }

            if (!xhr) {
              alert('CORS not supported');
              return;
            }

            // Response handlers.
            xhr.onload = function() {

              var data = JSON.parse(xhr.response);

              callback(data, self);
              /*
              // parse data

              self.outputRaw = data;

              var firstArray = self._findFirstArray(data, self.minRows);

              // if there is no first array, flatten the entire response
              if (!firstArray) {
                self.output = [self._flattenJSON(data)];
              }
              // otherwise, flatten the first array
              else {
                self.output = self._flattenJSONArray(firstArray);
              }

              //self.output = self._flattenFirstArrayInJSON(firstArray, 1);

              */
            };

            xhr.onerror = function() {
              alert('Woops, there was an error making the request.');
            };

            xhr.send();
      },

      /**
       *  Recursively looks for the first Array with the size 
       *  equal greater than minArraySize
       *
       *  [@method] _findFirstArray
       *  [@param]  {JSON} data         Input data, A deep JSON file including an array containing desired data
       *  [@param]  {Number} minArraySize Minimum size of the array. If function finds an array smaller than this ignores it and goes deeper to find an array with at least that minimum size
       *  [@return] {Array}              Found array
       *  @private
       **/
      _findFirstArray: function(data, minArraySize) {

        var result = {};
        var firstArray = null; 
        function recurse (cur, prop) {
            if(firstArray)
              return;

            if (Object(cur) !== cur) {
                return;
            }
            if (Array.isArray(cur) && cur.length>=minArraySize) {
                if(!firstArray) {
                  firstArray = cur;
                }
                
            } else {
                var isEmpty = true;
                for (var p in cur) {
                    isEmpty = false;
                    recurse(cur[p], prop ? prop+"."+p : p);
                }
                // if (isEmpty && prop)
                //     result[prop] = {};
            }
        }
        recurse(data, "");
        return firstArray;


      },
      /**
       * Flattens the Objects in the array. If objects within array are already flat (one level deep) doesn't do anything.
       *
       * [@method] _flattenJSONArray
       * [@param]  Array array Input array
       * [@return] Array       Flattened array
       * @private
       */
      _flattenJSONArray: function(array) {
        var flatArray = array.map(function(item,index) {
          return this._flattenJSON(item);
        }.bind(this));
        return flatArray;
      },
      /**
       * Recursively iterates over every element of the JSON object and creates a flat (one level deep) Object
       * 
       * [@method] _flattenJSON
       * [@param]  {JSON} data input
       * [@return] {JSON}      flattened output
       * @private
       */
      _flattenJSON: function(data) {
        var result = {};
        function recurse (cur, prop) {
            if (Object(cur) !== cur) {
                result[prop] = cur;
            } else if (Array.isArray(cur)) {
                 for(var i=0, l=cur.length; i<l; i++)
                     recurse(cur[i], prop + "[" + i + "]");
                if (l == 0)
                    result[prop] = [];
            } else {
                var isEmpty = true;
                for (var p in cur) {
                    isEmpty = false;
                    recurse(cur[p], prop ? prop+"."+p : p);
                }
                if (isEmpty && prop)
                    result[prop] = {};
            }
        }
        recurse(data, "");
        return result;
      },

      // fire th-output-changed when output is changed. Useful for tests.
      outputChanged: function(){
        this.fire("th-output-changed");
      }
      
    });
  </script>
</polymer-element>