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

tutorial code added, news-chart updated

parent 8bc6b6c3
......@@ -34,13 +34,15 @@
<iron-pages selected="{{selected}}">
<div>
<div class="row">
<material-search search-value="{{query}}"></material-search>
<br>
<div style="width: 100%; display: inline-block">
</div>
<br>
<div class="row" style="width: 100%; display: inline-block">
<div style="width: 32%; margin-right: 2%; float: left">
<number-chart
icon="/images/news.ico"
stylebg="bg-red"
stylebg="bg-yellow"
title="Items selected"
data="{{data}}">
</number-chart>
......@@ -51,8 +53,8 @@
object="cnn"
aggKey="schema:author"
title="CNN"
icon="/images/cnn.png"
stylebg="bg-yellow">
icon="/images/cnn1.png"
stylebg="bg-red">
</number-chart>
</div>
<div style="width: 32%; float: left">
......@@ -61,14 +63,14 @@
object="The New York Times"
aggKey="schema:author"
title="The New York Times"
icon="/images/times.png"
icon="/images/times1.png"
aggkey="location"
stylebg="bg-green">
</number-chart>
</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">
<entities-chart
field="entities.dbps:anyURI"
......@@ -79,7 +81,7 @@
id="entitieschart"
filters="{{filters}}">
</entities-chart>
</div>
</div>
<div class="chart_container" style="left: 0; float: left">
<google-chart
field="schema:author"
......@@ -89,19 +91,19 @@
type='pie'
filters="{{filters}}"
icon='icons:reorder'
options='{"title": "Newspapers"}'
options='{"title": "Source"}'
cols='[{"label": "type", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</div>
</div>
<div style="width: 100%">
<div class="row" style="width: 100%">
<div class="chart_container" style="left: 0; float: left">
<google-chart
field="sentiment"
data="{{data}}"
id='pie-chart5'
extra-id='pie-chart5'
type='pie'
type='column'
filters="{{filters}}"
icon='social:mood'
options='{"title": "Sentiments"}'
......@@ -109,21 +111,11 @@
</google-chart>
</div>
<div class="chart_container" style="left: 0; float: right">
<google-chart
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>
<leaflet-maps></leaflet-maps>
</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
field="schema:datePublished"
data="{{data}}"
......@@ -136,24 +128,39 @@
cols='[{"label": "Date", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</div>
<div class="chart_container" style="left: 0; float: left; width: 100%">
<news-chart
datos = "{{data}}"
title="List of news"
filters="{{filters}}"
icon='icons:receipt'>
</news-chart>
<div class="row">
<div class="chart_container col-md-6" style="left: 0; float: left;">
<paper-tabs selected="{{selectedpage}}">
<paper-tab><iron-icon icon="icons:receipt"></iron-icon> List of news</paper-tab>
<paper-tab>Social Media</paper-tab>
</paper-tabs>
<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>
<yasgui-ui
endpoint="http:///krusti.gsi/gsicrawler/query"
endpoint="http:///krusti.gsi:13030/gsicrawler/query"
queries="{{queries}}">
</yasgui-ui>
</div>
</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>
......@@ -166,6 +173,10 @@
type: Number,
value: 0
},
selectedpage: {
type: Number,
value: 0
},
query: {
type: String,
},
......@@ -240,6 +251,7 @@
fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about']
}
},
sort:{'schema:datePublished':{order: "desc"}},
aggs: {
type: {
terms: {
......@@ -316,6 +328,7 @@
must: this.filters,
}
},
sort:{'schema:datePublished':{order: "desc"}},
aggs: {
type: {
terms: {
......
......@@ -34,13 +34,15 @@
<iron-pages selected="{{selected}}">
<div>
<div class="row">
<material-search search-value="{{query}}"></material-search>
<br>
<div style="width: 100%; display: inline-block">
</div>
<br>
<div class="row" style="width: 100%; display: inline-block">
<div style="width: 32%; margin-right: 2%; float: left">
<number-chart
icon="/images/news.ico"
stylebg="bg-red"
stylebg="bg-yellow"
title="Items selected"
data="{{data}}">
</number-chart>
......@@ -51,8 +53,8 @@
object="cnn"
aggKey="schema:author"
title="CNN"
icon="/images/cnn.png"
stylebg="bg-yellow">
icon="/images/cnn1.png"
stylebg="bg-red">
</number-chart>
</div>
<div style="width: 32%; float: left">
......@@ -61,14 +63,14 @@
object="The New York Times"
aggKey="schema:author"
title="The New York Times"
icon="/images/times.png"
icon="/images/times1.png"
aggkey="location"
stylebg="bg-green">
</number-chart>
</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">
<entities-chart
field="entities.dbps:anyURI"
......@@ -79,7 +81,7 @@
id="entitieschart"
filters="{{filters}}">
</entities-chart>
</div>
</div>
<div class="chart_container" style="left: 0; float: left">
<google-chart
field="schema:author"
......@@ -89,19 +91,19 @@
type='pie'
filters="{{filters}}"
icon='icons:reorder'
options='{"title": "Newspapers"}'
options='{"title": "Source"}'
cols='[{"label": "type", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</div>
</div>
<div style="width: 100%">
<div class="row" style="width: 100%">
<div class="chart_container" style="left: 0; float: left">
<google-chart
field="sentiment"
data="{{data}}"
id='pie-chart5'
extra-id='pie-chart5'
type='pie'
type='column'
filters="{{filters}}"
icon='social:mood'
options='{"title": "Sentiments"}'
......@@ -109,21 +111,11 @@
</google-chart>
</div>
<div class="chart_container" style="left: 0; float: right">
<google-chart
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>
<leaflet-maps></leaflet-maps>
</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
field="schema:datePublished"
data="{{data}}"
......@@ -136,24 +128,39 @@
cols='[{"label": "Date", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</div>
<div class="chart_container" style="left: 0; float: left; width: 100%">
<news-chart
datos = "{{data}}"
title="List of news"
filters="{{filters}}"
icon='icons:receipt'>
</news-chart>
<div class="row">
<div class="chart_container col-md-6" style="left: 0; float: left;">
<paper-tabs selected="{{selectedpage}}">
<paper-tab><iron-icon icon="icons:receipt"></iron-icon> List of news</paper-tab>
<paper-tab>Social Media</paper-tab>
</paper-tabs>
<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>
<yasgui-ui
endpoint="http:///krusti.gsi/gsicrawler/query"
endpoint="http:///krusti.gsi:13030/gsicrawler/query"
queries="{{queries}}">
</yasgui-ui>
</div>
</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>
......@@ -166,6 +173,10 @@
type: Number,
value: 0
},
selectedpage: {
type: Number,
value: 0
},
query: {
type: String,
},
......@@ -240,6 +251,7 @@
fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about']
}
},
sort:{'schema:datePublished':{order: "desc"}},
aggs: {
type: {
terms: {
......@@ -260,7 +272,6 @@
'entities.dbps:anyURI': {
terms: {
field: "entities.dbps:anyURI.keyword",
size: 20,
order: {
_count: "desc"
}
......@@ -317,6 +328,7 @@
must: this.filters,
}
},
sort:{'schema:datePublished':{order: "desc"}},
aggs: {
type: {
terms: {
......@@ -337,7 +349,6 @@
'entities.dbps:anyURI': {
terms: {
field: "entities.dbps:anyURI.keyword",
size: 20,
order: {
_count: "desc"
}
......
......@@ -12,6 +12,10 @@
margin: 0 auto;
}
.lists{
padding: 0px;
}
.chart_container {
width: 49%;
margin-bottom: 20px;
......@@ -27,6 +31,7 @@
background-color: #04419B;
color: #fff;
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 {
......@@ -104,6 +109,6 @@
color: #080;
}
iron-pages {
padding: 48px 62px;
padding: 48px 62px 10px;
}
......@@ -12,31 +12,26 @@
<!-- Shadow DOM -->
<paper-material elevation="1">
<div class="top-bar">
<iron-icon icon="{{icon}}"></iron-icon>
<span>{{title}}</span>
</div>
<table class="table table-striped">
<tr>
<th style="width: 20%; text-align: center">Source</th>
<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">
<div class$="tweet {{checkSentiment(news.sentiments)}} same-height" style="border: 2px dashed rgba(96, 125, 139, .5); text-align: center;">
<div class="row"><div class="col-md-7 headline">
<div class="col-md-4">
<img src="{{news.schema:thumbnailUrl}}" style="width: 100%; display:inline-block; left: 0%; position: relative; ">
<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-12 headline">
<div class="col-md-2">
<img src={{checkSource(news.schema:author)}} style="width: 100%; display:block; position: relative;" align="left">
</div>
<div class="col-md-8">
<span style="font-weight: bold; font-size:30px; display:inline-block; vertical-align: middle;">{{news.schema:headline}}</span>
<div class="col-md-7">
<span style="font-size:15px; display:inline-block; vertical-align: middle;">{{news.schema:headline}}</span>
</div>
</div>
<div class="col-md-1 see-more">
<img src={{checkSource(news.schema:author)}} style="width: 100%; display:block; position: relative;" align="left">
</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 class="col-md-3">
<span style="text-align:center;padding-left: 16%;">{{getDate(news.schema:datePublished)}}</span>
</div>
</div>
</div>
<iron-collapse ident$="subitem[[index]]">
......@@ -49,7 +44,7 @@
</template>
</div>
</template>
<div style="width:100%; clear: both"></div>
<br>
</paper-material>
</template>
......@@ -136,9 +131,6 @@
toggle: function(event) {
var id = event.currentTarget.getAttribute('ident');
var collapse = this.$$('iron-collapse[ident="' + id + '"]');
var button = this.$$('button[ident="' + id + '"]');
if (button.innerHTML.indexOf("expand-more") > -1) button.innerHTML = 'See less <iron-icon icon="expand-less"></iron-icon>'
else button.innerHTML = 'See more <iron-icon icon="expand-more"></iron-icon>'
//console.log(collapse)
//console.log("id: "+id+" collapse: "+ collapse.getAttribute('ident'))
collapse.toggle();
......@@ -148,20 +140,32 @@
var that = this
var hits = this.datos.hits.hits;
var results = []
//console.log(hits)
hits.forEach(function(entry) {
results.push(entry._source);
});
//console.log(results)
that.data = results
},
getDate: function(date){
var fecha = date.toString().split("-");
//console.log(fecha)
return fecha[2].split("T")[0]+"-"+fecha[1]+"-"+fecha[0]
},
checkSentiment: function(sentiment) {
console.log(sentiment[0]['marl:hasPolarity'])
if (sentiment[0]['marl:hasPolarity'] == "marl:Positive")
return "tweet positive-news"
else if (sentiment[0]['marl:hasPolarity'] == "marl:Negative")
return "tweet negative-news"
else
//console.log(sentiment[0]['marl:hasPolarity'])
try{
if (sentiment[0]['marl:hasPolarity'] == "marl:Positive")
return "tweet positive-news"
else if (sentiment[0]['marl:hasPolarity'] == "marl:Negative")
return "tweet negative-news"
else
return "tweet neutral-news"
}
catch (e){
//console.log(e)
return "tweet neutral-news"
}
},
getemotion: function(emotion) {
//console.log(emotion)
......@@ -183,7 +187,7 @@
else if(source.indexOf("Times") > -1)
return "/images/times.png"
else
return ""
return "/images/news.ico"
},
checkEmotion: function(source) {
if(source[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].indexOf("anger") > -1)
......
......@@ -7,8 +7,7 @@
.top-bar{
width: 100%;
background-color: var(--dark-primary-color);
border-radius: 5px 5px 0 0;
background-color: #04419B;
color: white;
text-align: center;
height: 35px;
......@@ -28,7 +27,7 @@
}
.see-more{
padding-top: 3%;
padding-top: 0%;
}
.neutral-emotion{
......
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.d3||(g.d3 = {}));g=(g.layout||(g.layout = {}));g.cloud = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
// Word cloud layout by Jason Davies, https://www.jasondavies.com/wordcloud/
// Algorithm due to Jonathan Feinberg, http://static.mrfeinberg.com/bv_ch03.pdf
var dispatch = require("d3-dispatch").dispatch;
var cloudRadians = Math.PI / 180,
cw = 1 << 11 >> 5,
ch = 1 << 11;
module.exports = function() {
var size = [256, 256],
text = cloudText,
font = cloudFont,
fontSize = cloudFontSize,
fontStyle = cloudFontNormal,
fontWeight = cloudFontNormal,
rotate = cloudRotate,
padding = cloudPadding,
spiral = archimedeanSpiral,
words = [],
timeInterval = Infinity,
event = dispatch("word", "end"),
timer = null,
random = Math.random,
cloud = {},
canvas = cloudCanvas;
cloud.canvas = function(_) {
return arguments.length ? (canvas = functor(_), cloud) : canvas;
};
cloud.start = function() {
var contextAndRatio = getContext(canvas()),
board = zeroArray((size[0] >> 5) * size[1]),
bounds = null,
n = words.length,
i = -1,
tags = [],
data = words.map(function(d, i) {
d.text = text.call(this, d, i);
d.font = font.call(this, d, i);
d.style = fontStyle.call(this, d, i);
d.weight = fontWeight.call(this, d, i);
d.rotate = rotate.call(this, d, i);
d.size = ~~fontSize.call(this, d, i);
d.padding = padding.call(this, d, i);
return d;
}).sort(function(a, b) { return b.size - a.size; });
if (timer) clearInterval(timer);
timer = setInterval(step, 0);
step();
return cloud;
function step() {
var start = Date.now();
while (Date.now() - start < timeInterval && ++i < n && timer) {
var d = data[i];
d.x = (size[0] * (random() + .5)) >> 1;
d.y = (size[1] * (random() + .5)) >> 1;
cloudSprite(contextAndRatio, d, data, i);
if (d.hasText && place(board, d, bounds)) {
tags.push(d);
event.call("word", cloud, d);
if (bounds) cloudBounds(bounds, d);
else bounds = [{x: d.x + d.x0, y: d.y + d.y0}, {x: d.x + d.x1, y: d.y + d.y1}];
// Temporary hack
d.x -= size[0] >> 1;
d.y -= size[1] >> 1;
}
}
if (i >= n) {
cloud.stop();
event.call("end", cloud, tags, bounds);
}
}
}
cloud.stop = function() {
if (timer) {
clearInterval(timer);
timer = null;
}
return cloud;