Commit f8f10d1a authored by Alberto Pascual's avatar Alberto Pascual
Browse files

first draft dashboard tourpedia

parents
: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
<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>
<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}}'