Commit 6104b930 authored by Alberto Pascual's avatar Alberto Pascual
Browse files

news-chart element added

parent 56b4ce36
news-chart @ bcdae15b
Subproject commit bcdae15bd6ee3320db2ef9ba55cce400b8521afd
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
<dom-module id="news-chart">
<link rel="import" type="css" href="tweet-chart.css">
<template>
<!-- Shadow DOM -->
<paper-material elevation="1">
<div class="top-bar">
<iron-icon icon="{{icon}}"></iron-icon>
<span>{{title}}</span>
</div>
<template is="dom-repeat" items="{{data}}" as="news">
<div class="tweet same-height" style="background: rgba(204, 207, 208, 0.5); border: 2px dashed rgba(96, 125, 139, .5);">
<span style="font-weight: bold; font-size:20px; text-align:center; margin: 0 auto; display:block;">{{news.headline}}</span></br>
<img src={{checkSource(news.creator)}} style="width: 10%; display:block;" data-tooltip="I’m the tooltip text.">
<img src={{checkEmotion(news.emotions)}} style="width: 3%; margin: 0 auto; display:block; float:right;">
</br>
<template is="dom-repeat" items="{{news.sentiments}}" as="sentiment">
<span class$="{{checkSpanSentiment(sentiment.marl:hasPolarity)}}">{{sentiment.nif:anchorOf}}</span>
</template>
</div>
</template>
<div style="width:100%; clear: both"></div>
</paper-material>
</template>
<script>
var filtered = false;
Polymer({
is: 'news-chart',
properties: {
data: {
type: Array,
value: [] //default value for data array.
},
icon: {
type: String,
value: "face"
},
title: {
type: String,
value: "List of different tweets"
},
brand: {
type: String,
value: "Undefined"
},
query: {
type: String,
observer: '_queryChanged'
},
index: {
type: String
},
subindex: {
type: String
},
fields: {
type: Array,
value: function() { return []; }
},
datos:{
type: Object,
observer: '_dataChanged'
},
field: {
type: String
},
host: {
type: String
},
param: {
type: String,
notify: true
},
filters: {
type: Array,
notify: true,
value: function() { return []; }
}
},
ready: function() {
},
_dataChanged: function() {
var that = this
var hits = this.datos.hits.hits;
var results = []
hits.forEach(function(entry) {
results.push(entry._source);
});
that.data = results
},
checkSentiment: function(sentiment) {
console.log(sentiment)
if (sentiment == "marl:Positive")
return "tweet positive"
else if (sentiment == "marl:Negative")
return "tweet negative"
else
return "tweet neutral"
},
checkSpanSentiment: function(sentiment) {
console.log(sentiment)
if (sentiment == "marl:Positive")
return "span positive"
else if (sentiment == "marl:Negative")
return "span negative"
else
return "span neutral"
},
checkSource: function(source) {
if(source.indexOf("CNN") > -1 || source.indexOf("cnn") > -1 )
return "/images/cnn.png"
else if(source.indexOf("Times") > -1)
return "/images/times.png"
else
return ""
},
checkEmotion: function(source) {
if(source[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].indexOf("anger") > -1)
return "/images/emotion/anger.png"
else if(source[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].indexOf("disgust") > -1)
return "/images/emotion/disgust.png"
else if(source[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].indexOf("fear") > -1)
return "/images/emotion/fear.png"
else if(source[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].indexOf("joy") > -1)
return "/images/emotion/joy.png"
else if(source[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].indexOf("neutral") > -1)
return "/images/emotion/neutral.png"
else if(source[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].indexOf("sadness") > -1)
return "/images/emotion/sadness.png"
}
});
</script>
</dom-module>
:host {
margin: 0;
padding: 0;
width: 400px;
height: 300px;
}
.top-bar{
width: 100%;
background-color: var(--dark-primary-color);
border-radius: 5px 5px 0 0;
color: white;
text-align: center;
height: 35px;
line-height: 35px;
}
.top-bar span {
vertical-align: middle;
}
paper-icon-button.green {
color: var(--paper-green-500);
}
paper-icon-button.green:hover {
background: var(--paper-green-50);
border-radius: 50%;
}
.tweet {
margin: 10px;
padding: 10px;
border-radius: 5px;
}
.positive {
background: rgba(76, 175, 80, .5);
}
.negative {
background: rgba(255, 82, 82, .5);
}
.neutral {
background: rgba(96, 125, 139, .5);;
}
.text {
font-size: 17px;
font-weight: bold;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment