news-chart element added

news-chart @ bcdae15b

-Subproject commit bcdae15bd6ee3320db2ef9ba55cce400b8521afd

demo/elements/news-chart/news-chart.html

+<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>

demo/elements/news-chart/tweet-chart.css

+: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