Commit 63dfd3f2 authored by Alberto Pascual's avatar Alberto Pascual
Browse files

tutorial code added, news-chart updated

parent 8bc6b6c3
...@@ -34,13 +34,15 @@ ...@@ -34,13 +34,15 @@
<iron-pages selected="{{selected}}"> <iron-pages selected="{{selected}}">
<div> <div>
<div class="row">
<material-search search-value="{{query}}"></material-search> <material-search search-value="{{query}}"></material-search>
<br> </div>
<div style="width: 100%; display: inline-block"> <br>
<div class="row" style="width: 100%; display: inline-block">
<div style="width: 32%; margin-right: 2%; float: left"> <div style="width: 32%; margin-right: 2%; float: left">
<number-chart <number-chart
icon="/images/news.ico" icon="/images/news.ico"
stylebg="bg-red" stylebg="bg-yellow"
title="Items selected" title="Items selected"
data="{{data}}"> data="{{data}}">
</number-chart> </number-chart>
...@@ -51,8 +53,8 @@ ...@@ -51,8 +53,8 @@
object="cnn" object="cnn"
aggKey="schema:author" aggKey="schema:author"
title="CNN" title="CNN"
icon="/images/cnn.png" icon="/images/cnn1.png"
stylebg="bg-yellow"> stylebg="bg-red">
</number-chart> </number-chart>
</div> </div>
<div style="width: 32%; float: left"> <div style="width: 32%; float: left">
...@@ -61,14 +63,14 @@ ...@@ -61,14 +63,14 @@
object="The New York Times" object="The New York Times"
aggKey="schema:author" aggKey="schema:author"
title="The New York Times" title="The New York Times"
icon="/images/times.png" icon="/images/times1.png"
aggkey="location" aggkey="location"
stylebg="bg-green"> stylebg="bg-green">
</number-chart> </number-chart>
</div> </div>
</div> </div>
<div style="width: 100%; display: inline-block"> <div class="row" style="width: 100%; display: inline-block">
<div class="chart_container" style="right: 0; float: right"> <div class="chart_container" style="right: 0; float: right">
<entities-chart <entities-chart
field="entities.dbps:anyURI" field="entities.dbps:anyURI"
...@@ -79,7 +81,7 @@ ...@@ -79,7 +81,7 @@
id="entitieschart" id="entitieschart"
filters="{{filters}}"> filters="{{filters}}">
</entities-chart> </entities-chart>
</div> </div>
<div class="chart_container" style="left: 0; float: left"> <div class="chart_container" style="left: 0; float: left">
<google-chart <google-chart
field="schema:author" field="schema:author"
...@@ -89,19 +91,19 @@ ...@@ -89,19 +91,19 @@
type='pie' type='pie'
filters="{{filters}}" filters="{{filters}}"
icon='icons:reorder' icon='icons:reorder'
options='{"title": "Newspapers"}' options='{"title": "Source"}'
cols='[{"label": "type", "type": "string"},{"label": "Count", "type": "number"}]' cols='[{"label": "type", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart> </google-chart>
</div> </div>
</div> </div>
<div style="width: 100%"> <div class="row" style="width: 100%">
<div class="chart_container" style="left: 0; float: left"> <div class="chart_container" style="left: 0; float: left">
<google-chart <google-chart
field="sentiment" field="sentiment"
data="{{data}}" data="{{data}}"
id='pie-chart5' id='pie-chart5'
extra-id='pie-chart5' extra-id='pie-chart5'
type='pie' type='column'
filters="{{filters}}" filters="{{filters}}"
icon='social:mood' icon='social:mood'
options='{"title": "Sentiments"}' options='{"title": "Sentiments"}'
...@@ -109,21 +111,11 @@ ...@@ -109,21 +111,11 @@
</google-chart> </google-chart>
</div> </div>
<div class="chart_container" style="left: 0; float: right"> <div class="chart_container" style="left: 0; float: right">
<google-chart <leaflet-maps></leaflet-maps>
field="emotion"
data="{{data}}"
id='pie-chart5'
extra-id='pie-chart5'
type='pie'
filters="{{filters}}"
icon='social:sentiment-very-dissatisfied'
options='{"title": "Emotions"}'
cols='[{"label": "Sentiment", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</div> </div>
</div> </div>
<div class="chart_container" style="left: 0; float: left; width: 100%"> <div class="chart_container row" style="left: 0; float: left; width: 100%">
<google-chart <google-chart
field="schema:datePublished" field="schema:datePublished"
data="{{data}}" data="{{data}}"
...@@ -136,24 +128,39 @@ ...@@ -136,24 +128,39 @@
cols='[{"label": "Date", "type": "string"},{"label": "Count", "type": "number"}]' cols='[{"label": "Date", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart> </google-chart>
</div> </div>
<div class="chart_container" style="left: 0; float: left; width: 100%"> <div class="row">
<news-chart <div class="chart_container col-md-6" style="left: 0; float: left;">
datos = "{{data}}" <paper-tabs selected="{{selectedpage}}">
title="List of news" <paper-tab><iron-icon icon="icons:receipt"></iron-icon> List of news</paper-tab>
filters="{{filters}}" <paper-tab>Social Media</paper-tab>
icon='icons:receipt'> </paper-tabs>
</news-chart> <iron-pages class="lists" selected="{{selectedpage}}">
<div>
<news-chart
datos = "{{data}}"
title="List of news"
filters="{{filters}}"
icon='icons:receipt'>
</news-chart>
</div>
<div></div>
</iron-pages>
</div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<yasgui-ui <yasgui-ui
endpoint="http:///krusti.gsi/gsicrawler/query" endpoint="http:///krusti.gsi:13030/gsicrawler/query"
queries="{{queries}}"> queries="{{queries}}">
</yasgui-ui> </yasgui-ui>
</div> </div>
</iron-pages> </iron-pages>
<div style="background-color:#ccc; padding: 1%;">
<div style="width:32%; margin: 0 auto">
<img height="60px" src="/images/gsi.png"> © 2017 Grupo de Sistemas Inteligentes GSI-UPM
</div>
</div>
</template> </template>
...@@ -166,6 +173,10 @@ ...@@ -166,6 +173,10 @@
type: Number, type: Number,
value: 0 value: 0
}, },
selectedpage: {
type: Number,
value: 0
},
query: { query: {
type: String, type: String,
}, },
...@@ -240,6 +251,7 @@ ...@@ -240,6 +251,7 @@
fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about'] fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about']
} }
}, },
sort:{'schema:datePublished':{order: "desc"}},
aggs: { aggs: {
type: { type: {
terms: { terms: {
...@@ -316,6 +328,7 @@ ...@@ -316,6 +328,7 @@
must: this.filters, must: this.filters,
} }
}, },
sort:{'schema:datePublished':{order: "desc"}},
aggs: { aggs: {
type: { type: {
terms: { terms: {
......
...@@ -34,13 +34,15 @@ ...@@ -34,13 +34,15 @@
<iron-pages selected="{{selected}}"> <iron-pages selected="{{selected}}">
<div> <div>
<div class="row">
<material-search search-value="{{query}}"></material-search> <material-search search-value="{{query}}"></material-search>
<br> </div>
<div style="width: 100%; display: inline-block"> <br>
<div class="row" style="width: 100%; display: inline-block">
<div style="width: 32%; margin-right: 2%; float: left"> <div style="width: 32%; margin-right: 2%; float: left">
<number-chart <number-chart
icon="/images/news.ico" icon="/images/news.ico"
stylebg="bg-red" stylebg="bg-yellow"
title="Items selected" title="Items selected"
data="{{data}}"> data="{{data}}">
</number-chart> </number-chart>
...@@ -51,8 +53,8 @@ ...@@ -51,8 +53,8 @@
object="cnn" object="cnn"
aggKey="schema:author" aggKey="schema:author"
title="CNN" title="CNN"
icon="/images/cnn.png" icon="/images/cnn1.png"
stylebg="bg-yellow"> stylebg="bg-red">
</number-chart> </number-chart>
</div> </div>
<div style="width: 32%; float: left"> <div style="width: 32%; float: left">
...@@ -61,14 +63,14 @@ ...@@ -61,14 +63,14 @@
object="The New York Times" object="The New York Times"
aggKey="schema:author" aggKey="schema:author"
title="The New York Times" title="The New York Times"
icon="/images/times.png" icon="/images/times1.png"
aggkey="location" aggkey="location"
stylebg="bg-green"> stylebg="bg-green">
</number-chart> </number-chart>
</div> </div>
</div> </div>
<div style="width: 100%; display: inline-block"> <div class="row" style="width: 100%; display: inline-block">
<div class="chart_container" style="right: 0; float: right"> <div class="chart_container" style="right: 0; float: right">
<entities-chart <entities-chart
field="entities.dbps:anyURI" field="entities.dbps:anyURI"
...@@ -79,7 +81,7 @@ ...@@ -79,7 +81,7 @@
id="entitieschart" id="entitieschart"
filters="{{filters}}"> filters="{{filters}}">
</entities-chart> </entities-chart>
</div> </div>
<div class="chart_container" style="left: 0; float: left"> <div class="chart_container" style="left: 0; float: left">
<google-chart <google-chart
field="schema:author" field="schema:author"
...@@ -89,19 +91,19 @@ ...@@ -89,19 +91,19 @@
type='pie' type='pie'
filters="{{filters}}" filters="{{filters}}"
icon='icons:reorder' icon='icons:reorder'
options='{"title": "Newspapers"}' options='{"title": "Source"}'
cols='[{"label": "type", "type": "string"},{"label": "Count", "type": "number"}]' cols='[{"label": "type", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart> </google-chart>
</div> </div>
</div> </div>
<div style="width: 100%"> <div class="row" style="width: 100%">
<div class="chart_container" style="left: 0; float: left"> <div class="chart_container" style="left: 0; float: left">
<google-chart <google-chart
field="sentiment" field="sentiment"
data="{{data}}" data="{{data}}"
id='pie-chart5' id='pie-chart5'
extra-id='pie-chart5' extra-id='pie-chart5'
type='pie' type='column'
filters="{{filters}}" filters="{{filters}}"
icon='social:mood' icon='social:mood'
options='{"title": "Sentiments"}' options='{"title": "Sentiments"}'
...@@ -109,21 +111,11 @@ ...@@ -109,21 +111,11 @@
</google-chart> </google-chart>
</div> </div>
<div class="chart_container" style="left: 0; float: right"> <div class="chart_container" style="left: 0; float: right">
<google-chart <leaflet-maps></leaflet-maps>
field="emotion"
data="{{data}}"
id='pie-chart5'
extra-id='pie-chart5'
type='pie'
filters="{{filters}}"
icon='social:sentiment-very-dissatisfied'
options='{"title": "Emotions"}'
cols='[{"label": "Sentiment", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</div> </div>
</div> </div>
<div class="chart_container" style="left: 0; float: left; width: 100%"> <div class="chart_container row" style="left: 0; float: left; width: 100%">
<google-chart <google-chart
field="schema:datePublished" field="schema:datePublished"
data="{{data}}" data="{{data}}"
...@@ -136,24 +128,39 @@ ...@@ -136,24 +128,39 @@
cols='[{"label": "Date", "type": "string"},{"label": "Count", "type": "number"}]' cols='[{"label": "Date", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart> </google-chart>
</div> </div>
<div class="chart_container" style="left: 0; float: left; width: 100%"> <div class="row">
<news-chart <div class="chart_container col-md-6" style="left: 0; float: left;">
datos = "{{data}}" <paper-tabs selected="{{selectedpage}}">
title="List of news" <paper-tab><iron-icon icon="icons:receipt"></iron-icon> List of news</paper-tab>
filters="{{filters}}" <paper-tab>Social Media</paper-tab>
icon='icons:receipt'> </paper-tabs>
</news-chart> <iron-pages class="lists" selected="{{selectedpage}}">
<div>
<news-chart
datos = "{{data}}"
title="List of news"
filters="{{filters}}"
icon='icons:receipt'>
</news-chart>
</div>
<div></div>
</iron-pages>
</div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<yasgui-ui <yasgui-ui
endpoint="http:///krusti.gsi/gsicrawler/query" endpoint="http:///krusti.gsi:13030/gsicrawler/query"
queries="{{queries}}"> queries="{{queries}}">
</yasgui-ui> </yasgui-ui>
</div> </div>
</iron-pages> </iron-pages>
<div style="background-color:#ccc; padding: 1%;">
<div style="width:32%; margin: 0 auto">
<img height="60px" src="/images/gsi.png"> © 2017 Grupo de Sistemas Inteligentes GSI-UPM
</div>
</div>
</template> </template>
...@@ -166,6 +173,10 @@ ...@@ -166,6 +173,10 @@
type: Number, type: Number,
value: 0 value: 0
}, },
selectedpage: {
type: Number,
value: 0
},
query: { query: {
type: String, type: String,
}, },
...@@ -240,6 +251,7 @@ ...@@ -240,6 +251,7 @@
fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about'] fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about']
} }
}, },
sort:{'schema:datePublished':{order: "desc"}},
aggs: { aggs: {
type: { type: {
terms: { terms: {
...@@ -260,7 +272,6 @@ ...@@ -260,7 +272,6 @@
'entities.dbps:anyURI': { 'entities.dbps:anyURI': {
terms: { terms: {
field: "entities.dbps:anyURI.keyword", field: "entities.dbps:anyURI.keyword",
size: 20,
order: { order: {
_count: "desc" _count: "desc"
} }
...@@ -317,6 +328,7 @@ ...@@ -317,6 +328,7 @@
must: this.filters, must: this.filters,
} }
}, },
sort:{'schema:datePublished':{order: "desc"}},
aggs: { aggs: {
type: { type: {
terms: { terms: {
...@@ -337,7 +349,6 @@ ...@@ -337,7 +349,6 @@
'entities.dbps:anyURI': { 'entities.dbps:anyURI': {
terms: { terms: {
field: "entities.dbps:anyURI.keyword", field: "entities.dbps:anyURI.keyword",
size: 20,
order: { order: {
_count: "desc" _count: "desc"
} }
......
...@@ -12,6 +12,10 @@ ...@@ -12,6 +12,10 @@
margin: 0 auto; margin: 0 auto;
} }
.lists{
padding: 0px;
}
.chart_container { .chart_container {
width: 49%; width: 49%;
margin-bottom: 20px; margin-bottom: 20px;
...@@ -27,6 +31,7 @@ ...@@ -27,6 +31,7 @@
background-color: #04419B; background-color: #04419B;
color: #fff; color: #fff;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 0 0;
} }
paper-tabs[noink][no-bar] paper-tab.iron-selected { paper-tabs[noink][no-bar] paper-tab.iron-selected {
...@@ -104,6 +109,6 @@ ...@@ -104,6 +109,6 @@
color: #080; color: #080;
} }
iron-pages { iron-pages {
padding: 48px 62px; padding: 48px 62px 10px;
} }
...@@ -12,31 +12,26 @@ ...@@ -12,31 +12,26 @@
<!-- Shadow DOM --> <!-- Shadow DOM -->
<paper-material elevation="1"> <paper-material elevation="1">
<div class="top-bar"> <table class="table table-striped">
<iron-icon icon="{{icon}}"></iron-icon> <tr>
<span>{{title}}</span> <th style="width: 20%; text-align: center">Source</th>
</div> <th style="width: 50%; text-align: center">Headline</th>
<th style="width: 30%; text-align: center">Date</th>
</tr>
</table>
<template is="dom-repeat" items="{{data}}" as="news"> <template is="dom-repeat" items="{{data}}" as="news">
<div class$="tweet {{checkSentiment(news.sentiments)}} same-height" style="border: 2px dashed rgba(96, 125, 139, .5); text-align: center;"> <div class$="tweet {{checkSentiment(news.sentiments)}} same-height" ident$="subitem[[index]]" on-click="toggle" aria-expanded$="[[opened]]" aria-controls="collapse" style=" text-align: center;" data-toggle="tooltip" data-placement="top" title="Click for details">
<div class="row"><div class="col-md-7 headline"> <div class="row"><div class="col-md-12 headline">
<div class="col-md-4"> <div class="col-md-2">
<img src="{{news.schema:thumbnailUrl}}" style="width: 100%; display:inline-block; left: 0%; position: relative; "> <img src={{checkSource(news.schema:author)}} style="width: 100%; display:block; position: relative;" align="left">
</div> </div>
<div class="col-md-8"> <div class="col-md-7">
<span style="font-weight: bold; font-size:30px; display:inline-block; vertical-align: middle;">{{news.schema:headline}}</span> <span style="font-size:15px; display:inline-block; vertical-align: middle;">{{news.schema:headline}}</span>
</div> </div>
</div> <div class="col-md-3">
<div class="col-md-1 see-more"> <span style="text-align:center;padding-left: 16%;">{{getDate(news.schema:datePublished)}}</span>
<img src={{checkSource(news.schema:author)}} style="width: 100%; display:block; position: relative;" align="left"> </div>
</div> </div>
<div class="col-md-2 emotion-box">
<img src={{checkEmotion(news.emotions)}} style="width: 30%; margin: 0 auto; display: block; position:relative;" data-toggle="tooltip" data-placement="top" title="{{getemotion(news.emotions)}}">
<p class$="emotion {{getemotion(news.emotions)}}">Emotion: {{getemotion(news.emotions)}}</p></br>
</div>
<div class="see-more col-md-2">
<button class="btn btn-primary" ident$="subitem[[index]]" on-click="toggle" aria-expanded$="[[opened]]" aria-controls="collapse">{{buttontext}}<iron-icon icon="expand-more"></iron-icon></button>
</div>
</div> </div>
<iron-collapse ident$="subitem[[index]]"> <iron-collapse ident$="subitem[[index]]">
...@@ -49,7 +44,7 @@ ...@@ -49,7 +44,7 @@
</template> </template>
</div> </div>
</template> </template>
<div style="width:100%; clear: both"></div> <br>
</paper-material> </paper-material>
</template> </template>
...@@ -136,9 +131,6 @@ ...@@ -136,9 +131,6 @@
toggle: function(event) { toggle: function(event) {
var id = event.currentTarget.getAttribute('ident'); var id = event.currentTarget.getAttribute('ident');
var collapse = this.$$('iron-collapse[ident="' + id + '"]'); var collapse = this.$$('iron-collapse[ident="' + id + '"]');