Commit b9916260 authored by Alberto Pascual's avatar Alberto Pascual

initial version

parents
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<dom-module id="aspect-chart">
<style is="custom-style">
@import url("../../styles/app-theme.html");
</style>
<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>
<paper-icon-button icon="icons:help-outline" on-tap="_showhelp" style="padding: 0px;"></paper-icon-button>
<div id="{{idhelp}}" style="display: none; position: absolute; padding: 10px; left: 0; top: 35px;color:#000;background:rgba(255, 255, 255, 0.8)">
<p style="text-align: right;"><span>Food Aspect&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="background-color:#FF7900;">&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
<p style="text-align: right;"><span>Drinks Aspect&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="background-color:#00C0BF;">&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
<p style="text-align: right;"><span>Ambiance Aspect&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="background-color:#D40000;">&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
<p style="text-align: right;"><span>Service Aspect&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="background-color:#FFC01B;">&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
<p style="text-align: right;"><span>Restaurant Aspect&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="background-color:#77C000;">&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
<p style="text-align: right;"><span>Location Aspect&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="background-color:#4A67B3;">&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
<br>
<p style="text-align: right;"><span>Aspect Feature&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="background-color:#000;">&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
</div>
</div>
<template is="dom-repeat" items="{{data}}" as="review">
<div class="review neutral">
<template is="dom-repeat" items="{{review.entries}}" as="entries" index-as="entries_no">
<template is="dom-repeat" items="{{entries.sentiments}}" as="sentiments" index-as="sentiments_no">
<span class$="{{checkTopic(sentiments)}}">
<template is="dom-repeat" items="{{getreviewtext(sentiments)}}" as="words" index-as="words_no">
<span class$="{{checkFeature(sentiments,words)}}">{{words}}</span>
</template>
</span>
</template>
</template>
</div>
</template>
<div style="width:100%; clear: both"></div>
</paper-material>
</template>
<script>
var filtered = false;
Polymer({
is: 'aspect-chart',
properties: {
data: {
type: Array,
value: [] //default value for data array.
},
icon: {
type: String,
value: "face"
},
title: {
type: String,
value: "List of analyzed reviews"
},
tipo: {
type: String
},
brand: {
type: String,
value: "Undefined"
},
idhelp: {
type: String
},
datos:{
type: Object,
observer: '_datachanged'
},
query: {
type: String,
observer: '_queryChanged'
},
index: {
type: String
},
subindex: {
type: String
},
fields: {
type: Array,
value: function() { return []; }
},
field: {
type: String
},
host: {
type: String
},
param: {
type: String,
notify: true
},
filters: {
type: Array,
notify: true,
value: function() { return []; }
}
},
observers: [
'_filtersChange(filters.*)'
],
ready: function() {
//console.log(this.tipo);
},
_showhelp: function(){
// console.log("disparo");
if(document.getElementById("help12").style.display == "none"){
var elemento1 = document.getElementById("help12");
elemento1.style.display = 'initial';
}
else{
var elemento1 = document.getElementById("help12");
elemento1.style.display = 'none';
}
},
_datachanged: function() {
},
getreviewtext: function(text){
return text["nif:anchorOf"].split(" ");
},
checkFeature: function(sentiment,words) {
features = sentiment["marl:describesObject"].split(" ")
for(var i = 0;i<features.length;i++){
if(words == features[i]){
return "feature"
}
}
},
checkTopic: function(sentiment) {
return sentiment["marl:describesObjectFeature"]
},
queryChange: function(value) {
},
/** Fired when a search is made.
*
* @event query-change
* @param {Object} detail
* @param {Object} detail.query The search string.
*/
_queryChanged: function() {
this.query ? this.queryChange(this.query) : this.queryDefault();
},
_filtersChange: function() {
},
checkSentiment: function(sentiment) {
if (sentiment == "marl:Positive")
return "tweet positive"
else if (sentiment == "marl:Negative")
return "tweet negative"
else
return "tweet neutral"
}
});
</script>
</dom-module>
{
"name": "aspect-chart",
"authors": [
"gsi-upm"
],
"version":"1.0.1",
"description": "TWeb Component to visualize different aspects present in a review.",
"main": "tweet-chart.html",
"keywords": [
"tweets",
"text",
"sentiment",
"polymer",
"webcomponents"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0"
},
"license": "MIT",
"homepage": "https://lab.cluster.gsi.dit.upm.es/sefarad/tweet-chart"
}
:host {
margin: 0;
padding: 0;
width: 400px;
height: 300px;
}
span{
white-space: inherit !important;
}
.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%;
}
.review {
margin: 10px;
padding: 10px;
border-radius: 5px;
width: 98%;
}
.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: 100;
}
.feature {
font-weight: bold;
font-size:1.2em;
}
.food {
background: rgba(255, 121, 0, .5);
}
.drinks {
background: rgba(0, 192, 191, .6);
}
.restaurant {
background: rgba(119, 192, 0, .5);
}
.ambience {
background: rgba(212, 0, 0, .4);
}
.service {
background: rgba(255, 192, 27, .6);
}
.location {
background: rgba(74, 103, 179, .5);
}
Markdown is supported
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