news-chart.html 16.7 KB
Newer Older
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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">
<link rel="import" href="/bower_components/iron-collapse/iron-collapse.html">


<dom-module id="news-chart">

<link rel="import" type="css" href="tweet-chart.css">

  <template>

    <!-- Shadow DOM -->
    <paper-material elevation="1">
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
15
        <div id="nodata">No entries match the current filters</div>
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
16
17
18
        <div style="height: 600px; overflow-x: hidden; overflow-y: auto;">
        <template is="dom-repeat" items="{{data}}" as="news"> 

Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
19
20
          <div class$="tweet {{checkSentiment(news.sentiments)}} same-height" ident$="subitem[[index]]" style=" text-align: center;">
            <div class="row">
21
              <button data-toggle="modal" data-target$="#subitem[[index]]" style="background: none; border: none; cursor: pointer; width: 100%;" title="Check the new">
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
22
23
24
25
                <div class="col-md-12 headline">
                  <div class="col-md-2 img-wrapper">
                    <img src={{checkSource(news)}} style="width: 100%; display:block; position: relative;" align="left">
                  </div>
26
                  <div class="col-md-10">
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
27
28
29
30
31
                    <span class="text" style="font-size:15px; display:inline-block; vertical-align: middle;">{{getHeadline(news)}}</span>
                  </div>
                </div>
              </button>
                              <!-- Modal -->
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
32
              <div class="modal fade" id$="subitem[[index]]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow: hidden;">
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
33
                <div class="modal-dialog modal-lg">
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
34
                  <div class="modal-content" style="height: fit-content;">
35
36
37
38
39
40
                    <div class="modal-header" style="height:80px;background-color: #449DD5; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); border-radius: 5px 5px 0 0;">
                     <!--  <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;opacity: inherit;"><span aria-hidden="true">&times;</span></button> -->
                      <div class="col-md-12" style="display: flex;flex-direction: row;justify-content: space-around;align-content: center;">
                        <div class="col-md-2 img-wrapper" style="width:13%">
                          <img src="{{checkSource(news)}}" style="width: 100%; display:block; position: relative;" align="left">
                        </div>
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
41
42
                        <div class="col-md-10" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
                          <h4 class="modal-title" id="myModalLabel" style="display: flex; justify-self: center; align-self: center;">
43
44
45
46
47
48
                            <a target="_blank" rel="noopener noreferrer"href$="{{getID(news)}}" style=" color: #fff; outline: 0 !important; text-decoration: none !important; display:inline-block; vertical-align: middle;" title="Open the new">{{getHeadline(news)}}</a>
                          </h4>
                  
                        </div>
                        
                      </div> 
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
49
                    </div>
50
                    <div class="modal-body" style="height: 520px" >
51

52
53
                      <div class="col-md-5" style=" overflow-x: hidden; overflow-y: auto; height: 100%;">
                        <div class="content" style="text-align:center; margin: 0 auto;">
54
55
56
57
58
59
60
61
62
63
64
65
66
67
                          <br>
                          <div class="leyend" style="display: flex; flex-direction: row; justify-content: center; margin-bottom: 5px">
                            <div class="leyend_place" style="display: flex; flex-direction: row;">
                              <div style="width: 7px;height: 7px;background-color: #f90; float: left;    margin-top: 7px;margin-right: 3px; margin-left: 6px" class="style-scope news-chart"></div>
                              Places
                            </div>
                            <div class="leyend_org" style="display: flex; flex-direction: row;">
                              <div style="width: 7px;height: 7px;background-color: #dd4b39; float: left;    margin-top: 7px;margin-right: 3px; margin-left: 6px" class="style-scope news-chart"></div>
                              Organization
                            </div>
                            <div class="leyend_person" style="display: flex; flex-direction: row;">
                              <div style="width: 7px;height: 7px;background-color: #00c0ef; float: left;    margin-top: 7px;margin-right: 3px; margin-left: 6px" class="style-scope news-chart"></div>
                              Person
                            </div>
Daniel Suarez's avatar
Daniel Suarez committed
68
69
70
71
                            <div class="leyend_person" style="display: flex; flex-direction: row;">
                              <div style="width: 7px;height: 7px;background-color: #9b009b; float: left;    margin-top: 7px;margin-right: 3px; margin-left: 6px" class="style-scope news-chart"></div>
                              Category
                            </div>
72
73
74
75
76
77
78
79

                          </div>
                         
                          <template is="dom-repeat" items="{{news.entities}}" as="entity"> 
                            
                            <span class="badge badge-secondary" on-tap="highlightEntity" data-id$= "{{getID(news)}}" data-text$="{{getNew(news)}}" style$="{{getBg(entity)}} cursor:pointer;">{{entity.schema:name}}</span>
                            
                          </template>
Daniel Suarez's avatar
Daniel Suarez committed
80
81
82
83
84
                          <template is="dom-repeat" items="{{news.taxonomies}}" as="category"> 
                            
                            <span class="badge badge-secondary" on-tap="highlightCategory" data-id$= "{{getID(news)}}" data-text$="{{getNew(news)}}" style="background-color: #9b009b;margin-bottom:5px; cursor:pointer;">{{getCategory(category)}}</span>
                            
                          </template>
85
                        </div>                        
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
86
                      </div>
87
                      <div class="col-md-7" style="overflow: hidden; height: 100%;">
88
89
90
                        <div id$="text[[index]]" class="tab-pane fade in active" style="background-color: #eeeeee96; float: right; border: 1px solid #B3BFC7; padding: 20px; padding-top: 0px; overflow-y: auto; height: fit-content; max-height: 100%; ">
                          <div id$="{{getID(news)}}" class="text-hightlight" style="text-align: justify; white-space: pre-line;">
                            {{getNew(news)}}
91
                          </div>
92
                          
93
                        </div>
94
                     
95
96
                      </div>

Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
97
98
99
100
101
102
103
                    </div>

                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
104
              </div>
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
105

Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
106
            </div>        
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
107
          </div>
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
108
109

        </template>
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
110
        </div>
111
    
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
112

Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
    </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"
        },
        buttontext:{
          type: String,
          value : "See more"
        },

        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() {
197
        //console.log("Tweet Chart")
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
198
199
200
        var that = this
        var hits = this.datos.hits.hits;
        var results = []
Daniel Suarez's avatar
Daniel Suarez committed
201
        console.log(hits)
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
202
203
        hits.forEach(function(entry) {
          //console.log(entry._source)
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
204
          if(entry._source['@type']=='schema:NewsArticle') results.push(entry._source);
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
205
        });
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
206
207
208
209
210
        if(results.length==0){
          this.$.nodata.style.visibility = 'visible';
        }else{
          this.$.nodata.style.visibility = 'hidden';
        }
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
211
212
213
        //console.log(results)
        that.data = results
      },
214
215
216
      getID: function(news){
        return news['@id']
      },
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
217
218
      getHeadline: function(news){
        //console.log(news['http://schema.org/headline'][0]['@value'])
219
220
        //console.log(news)
        return news['schema:headline']
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
221
      },
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
222
      getNew: function(news){
223
224
        text = news['schema:articleBody']
        //console.log(text)
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
225
        /*if(news['schema:author']=='cnn'){
226
          text=text.replace(/[ ]{2,}/g,'\n')
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
227
        }*/
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
228
        text=text.replace(/[ ]{2,}/g,'\n')
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
229
        //else{
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
230
        text=text.replace(/\n\n/g,'\n')
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
231
        //}
232
        //console.log(text)
233

234
        return text
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
235
      },
236
237
238
      getEntityName: function(entity){
        return entity['schema:name']
      },
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
239
240
241
242
243
244
245
246
247
      getDate: function(date){
        if(fecha == null){
          return("-");
        }
        var fecha = date.toString().split("-");
        //console.log(fecha)
        return fecha[2].split("T")[0]+"-"+fecha[1]+"-"+fecha[0]
      },
      getBg: function(entity){
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
248
        //console.log(entity)
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
249
250
        if(!("@type" in entity)){
          return "background-color: brown;margin-bottom:5px;"
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
251
        } else if(entity["@type"][0] == "schema:Place") {
252
          return "background-color: #f90;margin-bottom:5px;"
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
253
        } else if(entity["@type"][0] == "schema:Organization") {
254
          return "background-color: #dd4b39;margin-bottom:5px;"
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
255
        } else {
256
          return "background-color: #00c0ef;margin-bottom:5px;"
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
        }
      },
      checkSentiment: function(sentiment) {
        //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)
        return emotion[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].split(':')[1]
      },
      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) {
289
290
        //console.log(source)
        source = source['schema:author']
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
291
        if(source.indexOf("CNN") > -1 || source.indexOf("cnn") > -1 )
292
          return "/images/cnn_blanco.svg"
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
293
        else if(source.indexOf("Times") > -1)
294
          return "/images/times1.png"
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
295
        else if(source.indexOf("Al") > -1)
296
          return "/images/Aljazeera_blanco.svg"
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
        else 
          return "/images/news.ico"
      },
      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"
      },
      checkEntity: function(source) {
        if(source == "ODENTITY_City"){
          return "background-color:yellow"
        } else {
          return "background-color:blue"
319
      }
320
      },
Daniel Suarez's avatar
Daniel Suarez committed
321
322
323
324
325
      getCategory: function(category){
        var arr=category["rdfs:label"].split("/")
         //console.log(arr[arr.length-1])
         return arr[arr.length-1]
      },
326
      highlightEntity: function(e) {
327

328
329
330
        var id = e.target.dataset.id 
        var element = document.getElementById(id)
        var text = e.target.dataset.text
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
331
        var text_highlighted= ""
332
        var beginIndex = e.model.__data__.entity["nif:beginIndex"]
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
333
        var endIndex = e.model.__data__.entity["nif:endIndex"] 
334
        var cnt=0
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
335
336
337
        console.log(beginIndex)
        console.log(endIndex)
        //var subtext = text.substring(0,beginIndex)
338
 
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
339
        if (beginIndex[0] >= 0) { 
340
341
         if(text[beginIndex[0]]===' ') cnt+=1
         text_highlighted = text.substring(0,beginIndex[0]+cnt) + "<span class='highlight' style='background-color:yellow'>" + text.substring(beginIndex[0]+cnt,endIndex[0]+1+cnt) + "</span>"
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
342
         for(var i =1 ; i<beginIndex.length;i++){
343
344
          if(text[beginIndex[i]+cnt]===' ') cnt+=1
          text_highlighted+=text.substring(endIndex[i-1]+1+cnt,beginIndex[i]+cnt)
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
345
          text_highlighted+="<span class='highlight' style='background-color:yellow'>"
346
          text_highlighted+=text.substring(beginIndex[i]+cnt,endIndex[i]+1+cnt)
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
347
348
          text_highlighted+="</span>"
         }
349
         text_highlighted+= text.substring(endIndex[endIndex.length-1]+1+cnt)
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
350
351
         element.innerHTML = text_highlighted
         //console.log(text_highlighted)
352
         //console.log(cnt)
353
354
355

         //console.log($('#'+element.parentElement.id+' span').position().top)
         $('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
356
        }
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
357
      },
Daniel Suarez's avatar
Daniel Suarez committed
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
       highlightCategory: function(e) {
        console.log(e)
        var id = e.target.dataset.id 
        var element = document.getElementById(id)
        var text = e.target.dataset.text
        var text_highlighted= ""
        var beginIndex = e.model.__data__.category["nif:beginIndex"]
        var endIndex = e.model.__data__.category["nif:endIndex"]+1 
        var cnt=0
        
        console.log(beginIndex)
        console.log(endIndex)
        var subtext = text.substring(0,beginIndex)
 
        if (beginIndex >= 0) { 
         text = text.substring(0,beginIndex) + "<span class='highlight' style='background-color:yellow'>" + text.substring(beginIndex,endIndex) + "</span>" + text.substring(endIndex)
         element.innerHTML = text
         //console.log(text)

         //console.log($('#'+element.parentElement.id+' span').position().top)
         $('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
        }

        //var subtext = text.substring(0,beginIndex)
 
        /*if (beginIndex[0] >= 0) { 
         if(text[beginIndex[0]]===' ') cnt+=1
         text_highlighted = text.substring(0,beginIndex[0]+cnt) + "<span class='highlight' style='background-color:yellow'>" + text.substring(beginIndex[0]+cnt,endIndex[0]+1+cnt) + "</span>"
         for(var i =1 ; i<beginIndex.length;i++){
          if(text[beginIndex[i]+cnt]===' ') cnt+=1
          text_highlighted+=text.substring(endIndex[i-1]+1+cnt,beginIndex[i]+cnt)
          text_highlighted+="<span class='highlight' style='background-color:yellow'>"
          text_highlighted+=text.substring(beginIndex[i]+cnt,endIndex[i]+1+cnt)
          text_highlighted+="</span>"
         }
         text_highlighted+= text.substring(endIndex[endIndex.length-1]+1+cnt)
         element.innerHTML = text_highlighted*/
         //console.log(text_highlighted)
         //console.log(cnt)


         //console.log($('#'+element.parentElement.id+' span').position().top)
         $('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
        
      },
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
403
     
404
      
Daniel Suarez Souto's avatar
Daniel Suarez Souto committed
405
406
407
408
    });
  </script>

</dom-module>