first draft dashboard tourpedia

dashboard-tourpedia.css

+:root {
+      --paper-tab-ink: var(--accent-color);
+
+      --paper-tabs-selection-bar-color: var(--accent-color);
+    } 
+
+    paper-material{
+      background: white;
+    }
+
+    google-chart {
+      margin: 0 auto;
+    }
+
+    .chart_container {
+      width: 49%;
+      margin-bottom: 20px; 
+    }
+
+    /* Tablet+ */
+    @media (min-width: 601px) {
+      paper-tabs, paper-toolbar {
+        margin-top: -48px;
+        margin-bottom: 48px;
+        margin-left: -62px;
+        margin-right: -62px;
+      }
+    }
+
+    paper-tabs, paper-toolbar {
+      background-color: #04419B; 
+      color: #fff;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
+    }
+
+    paper-tabs[noink][no-bar] paper-tab.iron-selected {
+      color: #04419B;
+    }
+      #content, .announcement {
+        max-width: 790px;
+        background-color: #FFF;
+        padding: 1em;
+        margin: 0 auto;
+        box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
+      }
+      
+      .announcement {
+        margin: 1em auto;
+        border: 2px solid #0A0;
+      }
+      
+      h2 {
+        font-size: 1.8em;
+        margin: 1.5em 0 0.5em -2px;
+        font-weight: bold;
+        padding: .2em .5em;
+        background: #edeeef;
+        border-right: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        color: #fff;
+        background-color: #b0de5c;
+        background-image: -moz-linear-gradient(top, #b0de5c, #82cb00);
+        background-image: -o-linear-gradient(top, #b0de5c, #82cb00);
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#b0de5c), to(#82cb00));
+        background-image: -webkit-linear-gradient(top, #b0de5c, #82cb00);
+        background-image: linear-gradient(top, #b0de5c, #82cb00);
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b0de5c', EndColorStr='#82cb00');
+        border-radius: 5px;
+        text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
+        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
+      }
+      .nav {
+        color: #000;
+        text-decoration: none;
+        border-bottom: 1px dashed #000;
+        display: inline-block;
+        padding: 3px;
+      }
+      .nav:hover {
+        background-color: #DDF;
+      }
+      
+      leaflet-map,
+      geolocation-sample {
+        max-width: 100%;
+        height: 30em;
+        border: 1px solid #aaa;
+      }
+      geolocation-sample {
+        height: 21em;
+      }
+      pre {
+        font-size: large;
+        padding: 0.5em 1em;
+        background-color: #DDD;
+        clear: all;
+      }
+      .i {
+        color: #00D
+      }
+      .a {
+        color: #008;
+      }
+      .v {
+        color: #800;
+      }
+      .c {
+        color: #080;
+      }
\ No newline at end of file

dashboard-tourpedia.html

+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/material-search/material-search.html">
+<link rel="import" href="../../bower_components/paper-material/paper-material.html">
+<link rel="import" href="../../bower_components/google-chart-elk/google-chart.html">
+<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
+<link rel="import" href="../../bower_components/yasgui/yasgui.html">
+<link rel="import" href="../../bower_components/reviews-table/reviews-table.html">
+<link rel="import" href="../../bower_components/number-chart/number-chart.html">
+<link rel="import" href="../../bower_components/leaflet-map/leaflet-map.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="restaurant"
+              title="Restaurants"
+              icon="maps:local-dining"
+              stylebg="bg-yellow">
+            </number-chart>
+          </div>
+          <div style="width: 23%; margin-right: 2.6%; float: left">
+            <number-chart 
+              data="{{data}}"
+              object="poi"
+              title="POIs"
+              icon="social:whatshot"
+              stylebg="bg-green">
+            </number-chart>
+          </div>
+          <div style="width: 23%; float: left">
+            <number-chart 
+              icon="maps:hotel"
+              data="{{data}}"
+              title="Accommodations"
+              object="accommodation"
+              stylebg="bg-aqua">
+            </number-chart>
+          </div>
+        </div>
+        <div style="width: 100%; display: inline-block">
+          <div class="chart_container" style="left: 0; float: left">
+            <google-chart
+              field="category"
+              datos="{{data}}"             
+              id='pie-chart3'
+              extra-id='pie-chart3'
+              type='pie'
+              filters="{{filters}}"
+              icon='room'
+              param="{{param}}"
+              options='{"title": "Different types of places"}'
+              cols='[{"label": "Sentiment", "type": "string"},{"label": "Count", "type": "number"}]'
+              rows='[ ["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30] ]'>
+            </google-chart>
+          </div>
+          <div class="chart_container" style="right: 0; float: right">
+            <google-chart
+              query="{{query}}"
+              index="tourpedia"
+              subindex="places"
+              field="location"
+              fields='["category", "location"]'
+              host='{{endpoint}}'
+              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": "Place", "type": "string"},{"label": "Count", "type": "number"}]'
+              rows='[ ["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30] ]'>
+            </google-chart>
+          </div>
+        </div>
+        <div style="width: 100%">
+          <div class="chart_container" style="left: 0; float: left">
+           <google-chart
+              query="{{query}}"
+              index="tourpedia"
+              subindex="places"
+              field="numReviews"
+              fields='["category", "location"]'
+              host='{{endpoint}}'
+              id='column-chart1'
+              extra-id='column-chart1'
+              type='column'
+              filters="{{filters}}"
+              icon='maps:rate-review'
+              param='{{param}}'
+              optionsbi='{"legend": "none"}'
+              options='{"title": "Count of number of reviews"}'
+              cols='[{"label": "Reviews", "type": "number"},{"label": "Count", "type": "number"}]'
+              rows='[ [0, 31],[1, 28],[2, 31],[3, 30],[4, 30],[5, 31],[6, 30] ]'>
+            </google-chart>
+          </div>
+          <div class="chart_container" style="right: 0; float: right">
+            <google-chart
+              query="{{query}}"
+              index="tourpedia"
+              subindex="places"
+              field="polarity"
+              fields='["category", "location"]'
+              host='{{endpoint}}'
+              id='bar-chart3'
+              extra-id='bar-chart3'
+              type='bar'
+              filters="{{filters}}"
+              icon='maps:local-play'
+              param='{{param}}'
+              optionsbi='{"legend": "none"}'
+              options='{"title": "Count of different polarities"}'
+              cols='[{"label": "Polarity", "type": "number"},{"label": "Count", "type": "number"}]'
+              rows='[ ["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30] ]'>
+            </google-chart>
+          </div>
+            <div style="clear: both"></div>
+        </div>
+        <div style="width: 100%">
+          <div class="chart_container" style="left: 0; float: left">
+            <reviews-table 
+                index="tourpedia"
+                subindex="places"
+                query="{{query}}"
+                filters="{{filters}}"
+                fields='["category", "location"]'
+                icon='social:people'>
+            </reviews-table>
+          </div>
+          <div class="chart_container" style="right: 0; float: right"> 
+            <leaflet-map fit-to-markers>      
+              <template is="dom-repeat" items="[[getPoints(places.*)]]" as="place">      
+                <leaflet-marker latitude="{{place.lat}}" longitude="{{place.lng}}" title="{{place.name}}"> 
+                    <b>Name:</b>
+                    <span>{{place.name}}</span>
+                </leaflet-marker>
+              </template>
+            </leaflet-map>
+          </div>
+          <div style="clear: both"></div>
+        </div>
+      </div>
+      <div>
+        <yasgui-ui
+            endpoint="http://fuseki-tourpedia.cluster.gsi.dit.upm.es/tourpedia/query"
+            queries="{{queries}}">
+        </yasgui-ui>
+      </div>
+    </iron-pages>
+  </template>
+
+  <script>
+  var filtered = 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
+        },
+
+        query: {
+          type: String,
+          observer: '_queryChanged'
+        },
+
+        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(){
+        this.queryDefault();
+      },
+      
+      addPlace: function(event) {
+        this.set('places', this.places.concat(event.detail.response))
+      },
+      
+      getName: function(id) {
+        return "http://tour-pedia.org/api/getPlaceDetails?id=" + id
+      },
+      
+      getPoints: function(f) {
+        return f.base;
+      },
+
+      _queryChanged: function() {
+        console.log("_queryChanged")
+        this.query ? this.queryChange(this.query) : this.queryDefault();
+      },
+
+      queryChange: function(value) {
+        console.log("_filtersChange")
+        var that = this;
+        var client = new $.es.Client({
+            hosts: this.host
+          });
+          client.search({
+          // undocumented params are appended to the query string
+          index: "tourpedia",
+          type: "places",
+          body: {
+            size: 10,
+            query: {
+              multi_match: {
+                fields: ["category","location"],
+                query: this.query
+
+              }
+            },
+            aggs: {
+              category: {
+                terms: {
+                  field: "category",
+                  order: {
+                    _count: "desc"
+                  }
+                }
+              },
+              location: {
+                terms: {
+                  field: "location",
+                  order: {
+                    _count: "desc"
+                  }
+                }
+              }
+            }      
+          }
+          }).then(function (resp) {
+            that.data = resp;
+        });
+        
+      },
+     
+      queryDefault: function() {
+        var that = this;
+        var client = new $.es.Client({
+          hosts: this.host
+        });
+        client.search({
+          // undocumented params are appended to the query string
+          index: "tourpedia",
+          type: "places",
+          body: {
+            size: 10,
+            query: {
+              match_all: {}
+            },
+            aggs: {
+              category: {
+                terms: {
+                  field: "category",
+                  order: {
+                    _count: "desc"
+                  }
+                }
+              },
+              location: {
+                terms: {
+                  field: "location",
+                  order: {
+                    _count: "desc"
+                  }
+                }
+              }
+            }      
+          }
+        }).then(function (resp) {
+          that.data = resp;
+          console.log(that.data)
+        });
+      },
+
+      _filtersChange: function() {
+        console.log("_filtersChange")
+        var that = this;
+        if(filtered){
+          var client = new $.es.Client({
+            hosts: this.host
+          });
+          client.search({
+          // undocumented params are appended to the query string
+          index: "tourpedia",
+          type: "places",
+          body: {
+            size: 10,
+            query: {
+              bool: {
+                must: this.filters,
+              }
+            },
+            aggs: {
+              category: {
+                terms: {
+                  field: "category",
+                  order: {
+                    _count: "desc"
+                  }
+                }
+              },
+              location: {
+                terms: {
+                  field: "location",
+                  order: {
+                    _count: "desc"
+                  }
+                }
+              }
+            }      
+          }
+          }).then(function (resp) {
+            that.data = resp;
+            });
+        }
+      }
+    });
+  </script>
+
+</dom-module>

dashboard-tourpedia.html~

+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/material-search/material-search.html">
+<link rel="import" href="../../bower_components/paper-material/paper-material.html">
+<link rel="import" href="../../bower_components/google-chart-elk/google-chart.html">
+<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
+<link rel="import" href="../../bower_components/yasgui/yasgui.html">
+<link rel="import" href="../../bower_components/reviews-table/reviews-table.html">
+<link rel="import" href="../../bower_components/number-chart/number-chart.html">
+<link rel="import" href="../../bower_components/leaflet-map/leaflet-map.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 
+              index="tourpedia"
+              subindex="places"
+              fields='["category"]'
+              query="{{query}}"
+              icon="info"
+              filters="{{filters}}"
+              stylebg="bg-red">
+            </number-chart>
+          </div>
+          <div style="width: 23%; margin-right: 2.6%; float: left">
+            <number-chart 
+              index="tourpedia"
+              subindex="places"
+              fields='["category"]'
+              query="{{query}}"
+              is-aggregated
+              field="category"
+              object="restaurant"
+              title="Restaurants"
+              filters="{{filters}}"
+              icon="maps:local-dining"
+              stylebg="bg-yellow">
+            </number-chart>
+          </div>
+          <div style="width: 23%; margin-right: 2.6%; float: left">
+            <number-chart 
+              index="tourpedia"
+              subindex="places"
+              fields='["category"]'
+              query="{{query}}"
+              is-aggregated
+              field="category"
+              object="poi"
+              title="POIs"
+              filters="{{filters}}"
+              icon="social:whatshot"
+              stylebg="bg-green">
+            </number-chart>
+          </div>
+          <div style="width: 23%; float: left">
+            <number-chart 
+              index="tourpedia"
+              subindex="places"
+              fields='["category"]'
+              query="{{query}}"
+              icon="maps:hotel"
+              is-aggregated
+              field="category"
+              filters="{{filters}}"
+              title="Accommodations"
+              object="accommodation"
+              stylebg="bg-aqua">
+            </number-chart>
+          </div>
+        </div>
+        <div style="width: 100%; display: inline-block">
+          <div class="chart_container" style="left: 0; float: left">
+            <google-chart
+              query="{{query}}"
+              index="tourpedia"
+              subindex="places"
+              field="category"
+              fields='["category", "location"]'
+              host='{{endpoint}}'
+              id='pie-chart3'
+              extra-id='pie-chart3'
+              type='pie'
+              filters="{{filters}}"
+              icon='room'
+              param="{{param}}"
+              options='{"title": "Different types of places"}'
+              cols='[{"label": "Sentiment", "type": "string"},{"label": "Count", "type": "number"}]'
+              rows='[ ["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30] ]'>
+            </google-chart>
+          </div>
+          <div class="chart_container" style="right: 0; float: right">
+            <google-chart
+              query="{{query}}"
+              index="tourpedia"
+              subindex="places"
+              field="location"
+              fields='["category", "location"]'
+              host='{{endpoint}}'
+              id='pie-chart4'
+              extra-id='pie-chart4'
+              type='pie'
+              filters="{{filters}}"
+              icon='maps:my-location'
+              param='{{param}}'