dashboard-tourpedia.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../material-search/material-search.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../google-chart-elasticsearch/google-chart.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../reviews-table/reviews-table.html">
<link rel="import" href="../number-chart/number-chart.html">


<dom-module id="dashboard-tourpedia">

  <style is="custom-style">
    @import url("../../styles/app-theme.html");
  </style>
  <link rel="import" type="css" href="dashboard-tourpedia.css">

  <template>
    <iron-ajax auto
        url="queries.json"
        handle-as="json"
        last-response="{{queries}}"></iron-ajax>
    <iron-ajax auto
        url="/endpoint.json"
        handle-as="json"
        last-response="{{endpoint}}"></iron-ajax>
	<!--    <template is="dom-repeat" items="{{ids}}" as="id"> 
      <iron-ajax auto 
        url="{{getName(id)}}"
        handle-as="json"
        on-response="addPlace"></iron-ajax>
	</template> -->

    <paper-tabs selected="{{selected}}">
      <paper-tab>Dashboard</paper-tab>
      <paper-tab>Sparql Editor</paper-tab>
    </paper-tabs>

    <iron-pages selected="{{selected}}">
      <div>
        <material-search search-value="{{query}}"></material-search>
        <br>
        <div style="width: 100%; display: inline-block">
          <div style="width: 23%; margin-right: 2.6%; float: left">
            <number-chart 
              icon="info"
              stylebg="bg-red"
              data="{{data}}">
            </number-chart>
          </div>
          <div style="width: 23%; margin-right: 2.6%; float: left">
            <number-chart 
              data="{{data}}"
              object="todayilearned"
              aggKey="subredditName"
              title="Restaurants"
              icon="maps:local-dining"
              stylebg="bg-yellow">
            </number-chart>
          </div>
        </div>
        <!-- <div style="width: 100%; display: inline-block"> -->
        <!--   <div style="width: 23%; margin-right: 2.6%; float: left"> -->
        <!--     <number-chart  -->
        <!--       data="{{data}}" -->
        <!--       object="londres" -->
        <!--       title="Londres" -->
        <!--       icon="maps:local-dining" -->
        <!--       aggkey="location" -->
        <!--       stylebg="bg-yellow"> -->
        <!--     </number-chart> -->
        <!--   </div> -->
        <!--   <div style="width: 23%; margin-right: 2.6%; float: left"> -->
        <!--     <number-chart  -->
        <!--       data="{{data}}" -->
        <!--       object="madrid" -->
        <!--       aggkey="location" -->
        <!--       title="Madrid" -->
        <!--       icon="social:whatshot" -->
        <!--       stylebg="bg-green"> -->
        <!--     </number-chart> -->
        <!--   </div> -->
        <!--   <div style="width: 23%; float: left"> -->
        <!--     <number-chart  -->
        <!--       icon="maps:hotel" -->
        <!--       data="{{data}}" -->
        <!--       title="Paris" -->
        <!--       object="paris" -->
        <!--       aggkey="location" -->
        <!--       stylebg="bg-aqua"> -->
        <!--     </number-chart> -->
        <!--   </div> -->
        <!-- </div> -->
        <div style="width: 100%; display: inline-block">
          <div class="chart_container" style="right: 0; float: right">

		  <!--
            <google-chart
              data="{{data}}"
              field="subredditName"
              id='pie-chart4'
              extra-id='pie-chart4'
              type='pie'
              filters="{{filters}}"
              icon='maps:my-location'
              param='{{param}}'
              options='{"title": "Places at different cities"}'
              cols='[{"label": "subredditName", "type": "string"},{"label": "Count", "type": "number"}]'
            </google-chart>
          </div>
		  -->
          <div class="chart_container" style="left: 0; float: left">
            <google-chart
              field="subredditName"
              data="{{data}}"             
              id='pie-chart3'
              extra-id='pie-chart3'
              type='pie'
              filters="{{filters}}"
              icon='room'
              options='{"title": "Different types of places"}'
              cols='[{"label": "Sentiment", "type": "string"},{"label": "Count", "type": "number"}]'
            </google-chart>
          </div>
        </div>
      </div>
    </iron-pages>
  </template>

  <script>
  var ready = false;
    Polymer({
      is: 'dashboard-tourpedia',
      properties: {
        selected: {
          type: Number,
          value: 0
        }, 

        ids:{
          type: Array
          /*value: ["481","482","32512","32420","91963","96677","160677","131425","322429","322612"]*/
           
        },
        data:{
          type: Object
        },
        client: {
          type: Object,
          notify: true,
          observer: '_clientChanged'              
        },
        fields: {
          type: Array,
          value: function() { return []; }
        },

        places: {
          type: Array,
          notify: true,
          value: []
        },

        filters: {
          type: Array,
          notify: true,
          value: function() { return []; }
        }
      },
    
      observers: [
      '_filtersChange(filters.*)'
      ],

      ready: function(){
        console.log("ready");
      },
      
      addPlace: function(event) {
        this.set('places', this.places.concat(event.detail.response))
        console.log(this.places)
      },
      
      getName: function(id) {
        return "http://tour-pedia.org/api/getPlaceDetails?id=" + id
      },
      
      getPoints: function(f) {
        return f.base;
      },

      _clientChanged: function() {
        console.log("ClientChanged");
        ready = true;
        this._query();
      },
      _filtersChange: function() {
        this._query();
       },
       _query: function() {
        console.log("_filtersChangedash")
        var that = this;
        console.log("Ready?: ", ready);
        if(ready){
          this.client.search({
          // undocumented params are appended to the query string
          index: "reddit",
          type: "article",
          body: {
            size: 10,
            query: {
              bool: {
                must: this.filters,
              }
            },
            aggs: {
              subredditName: {
                terms: {
                  field: "subredditName",
                  order: {
                    _count: "desc"
                  }
                }
              }
            }      
          }
          }).then(function (resp) {
            var myids = []
            resp.hits.hits.forEach(function(entry){myids.push(entry._id)})
            that.ids = myids;
            //console.log(that.ids)
            that.data = resp;
			console.log("DATA");
            console.log(that.data);
            
            });
        }
      }
    });
  </script>

</dom-module>