dashboard-reddit.html 14 KB
Newer Older
militarpancho's avatar
militarpancho committed
1
2
3
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/material-search/material-search.html">
<link rel="import" href="/bower_components/paper-material/paper-material.html">
4
<link rel="import" href="/elements/google-chart-elasticsearch/google-chart.html">
militarpancho's avatar
militarpancho committed
5
6
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tab.html">
7
<link rel="import" href="/elements/number-chart/number-chart.html">
militarpancho's avatar
militarpancho committed
8
<link rel="import" href="/bower_components/comment-chart/comment-chart.html">
militarpancho's avatar
militarpancho committed
9
10
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/yasgui-polymer/yasgui.html">
11
12
13
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/paper-item/paper-item.html">
<link rel="import" href="/bower_components/paper-menu/paper-menu.html">
14
<link rel="import" href="/elements/entities-chart/entities-chart.html">
15
<link rel="import" href="/elements/news-chart/news-chart.html">
16
<link rel="import" href="/elements/leaflet-maps/leaflet-map.html">
17

militarpancho's avatar
militarpancho committed
18
<dom-module id="dashboard-reddit">
19

militarpancho's avatar
militarpancho committed
20
21
22

  <link rel="import" type="css" href="dashboard-tourpedia.css" type="css">
  <link rel="import" href="/styles/app-theme.html" type="css">
23
24
25
26
27
28
29
30
31
32
33
34
35
36

  <template>
    <iron-ajax auto
        url="queries.json"
        handle-as="json"
        last-response="{{queries}}"></iron-ajax>

    <paper-tabs selected="{{selected}}">
      <paper-tab>Dashboard</paper-tab>
      <paper-tab>Sparql Editor</paper-tab>
    </paper-tabs>

    <iron-pages selected="{{selected}}">
      <div>
37
        <div class="row">
38
        <material-search search-value="{{query}}"></material-search>
39
40
41
        </div>
        <br>  
        <div class="row" style="width: 100%; display: inline-block">
militarpancho's avatar
militarpancho committed
42
          <div style="width: 32%; margin-right: 2%; float: left">
43
            <number-chart 
44
              icon="/images/news.ico"
45
              stylebg="bg-yellow"
46
              title="Items selected"
47
48
49
              data="{{data}}">
            </number-chart>
          </div>
militarpancho's avatar
militarpancho committed
50
          <div style="width: 32%; margin-right: 2%; float: left">
51
52
            <number-chart 
              data="{{data}}"
53
              object="cnn"
Alberto Pascual's avatar
Alberto Pascual committed
54
              aggKey="schema:author"
55
              title="CNN"
56
57
              icon="/images/cnn1.png"
              stylebg="bg-red">
58
59
            </number-chart>
          </div>
militarpancho's avatar
militarpancho committed
60
           <div style="width: 32%; float: left"> 
militarpancho's avatar
militarpancho committed
61
62
             <number-chart  
               data="{{data}}" 
63
               object="The New York Times"
Alberto Pascual's avatar
Alberto Pascual committed
64
               aggKey="schema:author"
65
               title="The New York Times" 
66
               icon="/images/times1.png"
militarpancho's avatar
militarpancho committed
67
68
69
70
71
72
               aggkey="location"
               stylebg="bg-green"> 
             </number-chart>
           </div>
         </div>

73
        <div class="row" style="width: 100%; display: inline-block">
74
          <div class="chart_container" style="right: 0; float: right">
75
            <entities-chart
Alberto Pascual's avatar
Alberto Pascual committed
76
                field="entities.dbps:anyURI"
77
78
79
80
81
82
83
                data="{{data}}"
                title="Entities founded"
                icon="icons:list"
                param="{{param}}"
                id="entitieschart"
                filters="{{filters}}">
            </entities-chart>
84
          </div>
85
86
          <div class="chart_container" style="left: 0; float: left">
            <google-chart
Alberto Pascual's avatar
Alberto Pascual committed
87
              field="schema:author"
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
88
89
90
91
              data="{{data}}"             
              id='pie-chart3'
              extra-id='pie-chart3'
              type='pie'
92
              filters="{{filters}}"
militarpancho's avatar
militarpancho committed
93
              icon='icons:reorder'
94
              options='{"title": "Source"}'
95
              cols='[{"label": "type", "type": "string"},{"label": "Count", "type": "number"}]'
96
97
98
            </google-chart>
          </div>
        </div>
99
     <div class="row" style="width: 100%"> 
militarpancho's avatar
militarpancho committed
100
          <div class="chart_container" style="left: 0; float: left">
militarpancho's avatar
militarpancho committed
101
102
103
104
105
            <google-chart
              field="sentiment"
              data="{{data}}"             
              id='pie-chart5'
              extra-id='pie-chart5'
106
              type='column'
militarpancho's avatar
militarpancho committed
107
              filters="{{filters}}"
militarpancho's avatar
militarpancho committed
108
109
110
              icon='social:mood'
              options='{"title": "Sentiments"}'
              cols='[{"label": "Sentiment", "type": "string"},{"label": "Count", "type": "number"}]'
militarpancho's avatar
militarpancho committed
111
            </google-chart>
112
       </div> 
militarpancho's avatar
militarpancho committed
113
          <div class="chart_container" style="left: 0; float: right">
114
          </div>
115
      </div>
116
      
117
      <div class="chart_container row" style="left: 0; float: left; width: 100%">
118
        <google-chart
Alberto Pascual's avatar
Alberto Pascual committed
119
          field="schema:datePublished"
120
121
122
123
124
125
126
127
128
          data="{{data}}"             
          id='line-chart'
          extra-id='line-chart'
          type='area'
          filters="{{filters}}"
          icon='icons:trending-up'
          options='{"title": "News rate"}'
          cols='[{"label": "Date", "type": "string"},{"label": "Count", "type": "number"}]'
        </google-chart>
129
      </div>
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
      <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>
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
       <div class="chart_container col-md-6">
        <div class="top-bar">
        <iron-icon icon="maps:my-location"></iron-icon>
          <span>Geolocated News and Social Media</span>
        </div>
        <leaflet-map fit-to-markers>
          <!--<template is="dom-repeat" items="[[getPoints(places.*)]]" as="place">
                <leaflet-marker latitude="{{place.lat}}" longitude="{{place.lng}}" title="{{place.name}}"> 
                    <b>Name:</b>
                    <span>{{place.name}}</span>
                </leaflet-marker>
              </template>-->
              <leaflet-marker latitude="40.4520074" longitude="-3.7258213" title="Demo place"> 
                    <b>Name:</b>
                    <span>Demo<span>
                </leaflet-marker>
              <leaflet-marker class="style-scope dashboard-tourpedia" latitude="41.90059" longitude="12.474896" title="Margherita">
  </leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="52.547617" longitude="13.353173" title="Hotel Arcos Appartement House">
  </leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="52.357974741256" longitude="4.9006604030728" title="ibis Styles Amsterdam City">
  </leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="52.352212775572" longitude="4.8916602507234" title="easyHotel Amsterdam">
  </leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="52.532396478848" longitude="13.380556404591" title="baxpax Mitte Hostel">
  </leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="41.908899" longitude="12.479041" title="Edy">
  </leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="48.822176" longitude="2.361568" title="Long Hoa">
  </leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="48.827534" longitude="2.370932" title="Boulangerie de Tolbiac">
  </leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="41.386084311622" longitude="2.1677023172379" title="St Christopher's Inn">
  </leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="41.38985943707" longitude="2.1471921354532" title="Sunotel Junior">
  </leaflet-marker>
        </leaflet-map>
176
       </div>
177
      </div>
178
179
180
    </div>
    <div>
        <yasgui-ui
181
       endpoint="http:///krusti.gsi:13030/gsicrawler/query"
182
       queries="{{queries}}">
183
184
        </yasgui-ui>
    </div>
185
    </iron-pages>
186
187
188
189
190
         <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>
191
  </template>
192
   
193
194

  <script>
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
195
  var ready = false;
196
    Polymer({
militarpancho's avatar
militarpancho committed
197
      is: 'dashboard-reddit',
198
199
200
201
202
      properties: {
        selected: {
          type: Number,
          value: 0
        }, 
203
204
205
206
        selectedpage: {
          type: Number,
          value: 0
        }, 
207
208
209
        query: {
          type: String,
        },
210
        ids:{
211
212
          type: Array
           
213
214
215
216
        },
        data:{
          type: Object
        },
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
217
218
219
220
        client: {
          type: Object,
          notify: true,
          observer: '_clientChanged'              
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
        },
        fields: {
          type: Array,
          value: function() { return []; }
        },

        filters: {
          type: Array,
          notify: true,
          value: function() { return []; }
        }
      },
    
      observers: [
      '_filtersChange(filters.*)'
      ],
237
238
239
240
241
242
      behaviors: [
        Polymer.IronA11yKeysBehavior
      ],
      keyBindings: {
        'enter': '_search'
      },
243
244

      ready: function(){
245
        //console.log("ready");
246
247
      },

J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
248
      _clientChanged: function() {
249
        //console.log("ClientChanged");
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
250
251
        ready = true;
        this._query();
252
      },
253
      _search: function(){
254
255
        //console.log("search fired")
        //console.log(this.query.length)
256
        if (this.query.length == 0){
257
          //console.log("default search fired")
258
259
260
261
          this._query()
        }
        else this._ESsearch()
      },
262
      _filtersChange: function() {
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
263
        this._query();
264
265
       },
      _ESsearch: function() {
266
        //console.log("_filtersChangedash")
267
        var that = this;
268
        //console.log("Ready?: ", ready);
269
270
271
272
273
274
275
276
277
        if(ready){
          this.client.search({
          // undocumented params are appended to the query string
          index: "gsicrawler",
          body: {
            size: 20,
            query: {
              multi_match:{
                query: this.query,
Alberto Pascual's avatar
Alberto Pascual committed
278
                fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about']
279
280
              }
            },
281
            sort:{'schema:datePublished':{order: "desc"}},
282
283
284
285
286
287
288
289
290
            aggs: {
             type: {
               terms: {
                 field: "@type.keyword",
                 order: {
                   _count: "desc"
                 }
               }
             },
Alberto Pascual's avatar
Alberto Pascual committed
291
             'schema:author': {
292
               terms: {
Alberto Pascual's avatar
Alberto Pascual committed
293
                 field: "schema:author.keyword",
294
295
296
297
298
                 order: {
                   _count: "desc"
                 }
               }
             },
Alberto Pascual's avatar
Alberto Pascual committed
299
             'entities.dbps:anyURI': {
300
               terms: {
Alberto Pascual's avatar
Alberto Pascual committed
301
                 field: "entities.dbps:anyURI.keyword",
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
                 order: {
                   _count: "desc"
                 } 
               }
             },
           sentiment: {
             terms: {
             field: "sentiments.marl:hasPolarity.keyword",
             order: {
               _count: "desc"
               }
             }
             },
          emotion: {
              terms: {
              field: "emotions.onyx:hasEmotion.onyx:hasEmotionCategory.keyword",
             order: {
               _count: "desc"
                     }      
                   }
322
      },
Alberto Pascual's avatar
Alberto Pascual committed
323
      'schema:datePublished': {
324
              date_histogram : {
Alberto Pascual's avatar
Alberto Pascual committed
325
                field : "schema:datePublished",
326
327
328
                format: "MM-yyyy",
                interval : "month"
            }
329
       }
330
        }
331
332
333
334
335
336
337
      } 
          }).then(function (resp) {
            var myids = []
            resp.hits.hits.forEach(function(entry){myids.push(entry._id)})
            that.ids = myids;
            //console.log(that.ids)
            that.data = resp;
338
            //console.log(that.data);
339
340
341
            
            });
        }
Alberto Pascual's avatar
Alberto Pascual committed
342
      },
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
343
       _query: function() {
344
        //console.log("_query")
345
        var that = this;
346
        //console.log("Ready?: ", ready);
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
347
348
        if(ready){
          this.client.search({
349
          // undocumented params are appended to the query string
350
          index: "gsicrawler",
351
          body: {
352
            size: 20,
353
354
355
356
357
            query: {
              bool: {
                must: this.filters,
              }
            },
358
            sort:{'schema:datePublished':{order: "desc"}},
359
            aggs: {
360
             type: {
militarpancho's avatar
militarpancho committed
361
               terms: {
362
363
364
365
366
367
                 field: "@type.keyword",
                 order: {
                   _count: "desc"
                 }
               }
             },
Alberto Pascual's avatar
Alberto Pascual committed
368
             'schema:author': {
369
               terms: {
Alberto Pascual's avatar
Alberto Pascual committed
370
                 field: "schema:author.keyword",
militarpancho's avatar
militarpancho committed
371
372
                 order: {
                   _count: "desc"
373
                 }
militarpancho's avatar
militarpancho committed
374
               }
militarpancho's avatar
militarpancho committed
375
             },
Alberto Pascual's avatar
Alberto Pascual committed
376
             'entities.dbps:anyURI': {
377
               terms: {
Alberto Pascual's avatar
Alberto Pascual committed
378
                 field: "entities.dbps:anyURI.keyword",
379
380
381
                 order: {
                   _count: "desc"
                 } 
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
382
               }
383
             },
384
385
386
387
388
389
390
391
392
393
394
395
396
           sentiment: {
             terms: {
             field: "sentiments.marl:hasPolarity.keyword",
             order: {
               _count: "desc"
               }
             }
             },
          emotion: {
              terms: {
              field: "emotions.onyx:hasEmotion.onyx:hasEmotionCategory.keyword",
             order: {
               _count: "desc"
397
398
                     }      
                   }
399
      },
Alberto Pascual's avatar
Alberto Pascual committed
400
      'schema:datePublished': {
401
              date_histogram : {
Alberto Pascual's avatar
Alberto Pascual committed
402
                field : "schema:datePublished",
403
404
405
406
                format: "MM-yyyy",
                interval : "month"
            }
       }
407
408
       }
      } 
409
          }).then(function (resp) {
410
411
412
413
            var myids = []
            resp.hits.hits.forEach(function(entry){myids.push(entry._id)})
            that.ids = myids;
            //console.log(that.ids)
414
            that.data = resp;
415
            //console.log(that.data);
416
            
417
418
419
420
421
422
423
            });
        }
      }
    });
  </script>

</dom-module>