dashboard-reddit.html 8.15 KB
Newer Older
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
1
2
3
4
5
6
7
8
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../material-search/material-search.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../google-chart-elasticsearch/google-chart.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../reviews-table/reviews-table.html">
<link rel="import" href="../number-chart/number-chart.html">

9

militarpancho's avatar
militarpancho committed
10
<dom-module id="dashboard-reddit">
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

  <style is="custom-style">
    @import url("../../styles/app-theme.html");
  </style>
  <link rel="import" type="css" href="dashboard-tourpedia.css">

  <template>
    <iron-ajax auto
        url="queries.json"
        handle-as="json"
        last-response="{{queries}}"></iron-ajax>
    <iron-ajax auto
        url="/endpoint.json"
        handle-as="json"
        last-response="{{endpoint}}"></iron-ajax>
26
	<!--    <template is="dom-repeat" items="{{ids}}" as="id"> 
27
28
29
30
      <iron-ajax auto 
        url="{{getName(id)}}"
        handle-as="json"
        on-response="addPlace"></iron-ajax>
31
	</template> -->
32
33
34
35
36
37
38
39
40
41
42

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

    <iron-pages selected="{{selected}}">
      <div>
        <material-search search-value="{{query}}"></material-search>
        <br>
        <div style="width: 100%; display: inline-block">
militarpancho's avatar
militarpancho committed
43
          <div style="width: 23%; margin-right: 2%; float: left">
44
45
46
47
48
49
            <number-chart 
              icon="info"
              stylebg="bg-red"
              data="{{data}}">
            </number-chart>
          </div>
militarpancho's avatar
militarpancho committed
50
          <div style="width: 23%; margin-right: 2%; float: left">
51
52
            <number-chart 
              data="{{data}}"
militarpancho's avatar
militarpancho committed
53
54
55
56
              object="article"
              aggKey="type"
              title="Articles"
              icon="icons:receipt"
57
58
59
              stylebg="bg-yellow">
            </number-chart>
          </div>
militarpancho's avatar
militarpancho committed
60
61
62
63
64
65
66
67
68
69
70
71
72
           <div style="width: 23%; margin-right: 2%; float: left"> 
             <number-chart  
               data="{{data}}" 
               object="comment"
			   aggKey="type"
               title="Comments" 
               icon="maps:rate-review"
               aggkey="location"
               stylebg="bg-green"> 
             </number-chart>
           </div>
         </div>

73
74
75
        <div style="width: 100%; display: inline-block">
          <div class="chart_container" style="right: 0; float: right">
            <google-chart
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
76
              data="{{data}}"
militarpancho's avatar
militarpancho committed
77
              field="subreddit"
78
79
80
81
82
83
              id='pie-chart4'
              extra-id='pie-chart4'
              type='pie'
              filters="{{filters}}"
              icon='maps:my-location'
              param='{{param}}'
militarpancho's avatar
militarpancho committed
84
              options='{"title": "Comments Subreddits"}'
85
              cols='[{"label": "subredditName", "type": "string"},{"label": "Count", "type": "number"}]'
86
            </google-chart>
militarpancho's avatar
militarpancho committed
87
		  </div>
88
89
          <div class="chart_container" style="left: 0; float: left">
            <google-chart
90
              field="subredditName"
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
91
92
93
94
              data="{{data}}"             
              id='pie-chart3'
              extra-id='pie-chart3'
              type='pie'
95
              filters="{{filters}}"
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
96
              icon='room'
militarpancho's avatar
militarpancho committed
97
              options='{"title": "Articles Subreddits"}'
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
98
              cols='[{"label": "Sentiment", "type": "string"},{"label": "Count", "type": "number"}]'
99
100
101
            </google-chart>
          </div>
        </div>
militarpancho's avatar
militarpancho committed
102
103
104
105
106
107
108
109
110
111
112
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
		 <div style="width: 100%">
          <div class="chart_container" style="left: 0; float: left">
           <google-chart
              id='column-chart1'
              extra-id='column-chart1'
              type='column'
              filters="{{filters}}"
              icon='maps:rate-review'
              data = {{data}}
			  field = num_comments
			  param='{{param}}'
              optionsbi='{"legend": "none"}'
              options='{"title": "Count of number of comments"}'
              cols='[{"label": "Reviews", "type": "number"},{"label": "Count", "type": "number"}]'
              rows='[ [0, 31],[1, 28],[2, 31],[3, 30],[4, 30],[5, 31],[6, 30] ]'>
            </google-chart>
          </div>
          <div class="chart_container" style="right: 0; float: right">
            <!--<google-chart
              data = {{data}}
              field = "sentiment"
			  id='bar-chart3'
              extra-id='bar-chart3'
              type='bar'
              filters="{{filters}}"
              icon='maps:local-play'
              optionsbi='{"legend": "none"}'
              options='{"title": "Count of different polarities"}'
              cols='[{"label": "Polarity", "type": "number"},{"label": "Count", "type": "number"}]'
              rows='[ ["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30] ]'>
            </google-chart>
		  </div>-->
            <div style="clear: both"></div>
        </div>
        <div style="width: 100%">
          <div class="chart_container" style="left: 0; float: left">
            <reviews-table 
                data = "{{data}}"
				field = "title"
                filters="{{filters}}"
                fields='["category", "location"]'
                icon='social:people'>
            </reviews-table>
          </div>
		</div>
147
148
149
150
151
      </div>
    </iron-pages>
  </template>

  <script>
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
152
  var ready = false;
153
    Polymer({
militarpancho's avatar
militarpancho committed
154
      is: 'dashboard-reddit',
155
156
157
158
159
160
161
      properties: {
        selected: {
          type: Number,
          value: 0
        }, 

        ids:{
162
163
164
          type: Array
          /*value: ["481","482","32512","32420","91963","96677","160677","131425","322429","322612"]*/
           
165
166
167
168
        },
        data:{
          type: Object
        },
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
169
170
171
172
        client: {
          type: Object,
          notify: true,
          observer: '_clientChanged'              
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
        },
        fields: {
          type: Array,
          value: function() { return []; }
        },

        places: {
          type: Array,
          notify: true,
          value: []
        },

        filters: {
          type: Array,
          notify: true,
          value: function() { return []; }
        }
      },
    
      observers: [
      '_filtersChange(filters.*)'
      ],

      ready: function(){
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
197
        console.log("ready");
198
199
200
201
      },
      
      addPlace: function(event) {
        this.set('places', this.places.concat(event.detail.response))
202
        console.log(this.places)
203
204
205
206
207
208
209
210
211
212
      },
      
      getName: function(id) {
        return "http://tour-pedia.org/api/getPlaceDetails?id=" + id
      },
      
      getPoints: function(f) {
        return f.base;
      },

J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
213
214
215
216
      _clientChanged: function() {
        console.log("ClientChanged");
        ready = true;
        this._query();
217
218
      },
      _filtersChange: function() {
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
219
220
221
        this._query();
       },
       _query: function() {
222
        console.log("_filtersChangedash")
223
        var that = this;
J. Fernando Sánchez's avatar
J. Fernando Sánchez committed
224
225
226
        console.log("Ready?: ", ready);
        if(ready){
          this.client.search({
227
          // undocumented params are appended to the query string
228
          index: "reddit",
militarpancho's avatar
militarpancho committed
229
          type: ["article","comment"],
230
231
232
233
234
235
236
237
          body: {
            size: 10,
            query: {
              bool: {
                must: this.filters,
              }
            },
            aggs: {
238
              subredditName: {
239
                terms: {
240
                  field: "subredditName",
241
242
243
244
                  order: {
                    _count: "desc"
                  }
                }
militarpancho's avatar
militarpancho committed
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
              },
             type: {
               terms: {
                 field: "_type",
                 order: {
                   _count: "desc"
                 }
               }
             },
             subreddit: {
               terms: {
                 field: "subreddit",
                 order: {
                   _count: "desc"
                 } 
               }
             }
262
263
264
            }      
          }
          }).then(function (resp) {
265
266
267
268
            var myids = []
            resp.hits.hits.forEach(function(entry){myids.push(entry._id)})
            that.ids = myids;
            //console.log(that.ids)
269
            that.data = resp;
militarpancho's avatar
militarpancho committed
270
            //console.log(that.data);
271
            
272
273
274
275
276
277
278
            });
        }
      }
    });
  </script>

</dom-module>