viz updated, news trending added

dashboard-reddit.env.html

@@ -39,8 +39,9 @@
         <div style="width: 100%; display: inline-block">
           <div style="width: 32%; margin-right: 2%; float: left">
             <number-chart 
-              icon="info"
+              icon="/images/news.ico"
               stylebg="bg-red"
+              title="Items selected"
               data="{{data}}">
             </number-chart>
           </div>
@@ -189,19 +190,19 @@
       },
 
       ready: function(){
-        console.log("ready");
+        //console.log("ready");
       },
 
       _clientChanged: function() {
-        console.log("ClientChanged");
+        //console.log("ClientChanged");
         ready = true;
         this._query();
       },
       _search: function(){
-        console.log("search fired")
-        console.log(this.query.length)
+        //console.log("search fired")
+        //console.log(this.query.length)
         if (this.query.length == 0){
-          console.log("default search fired")
+          //console.log("default search fired")
           this._query()
         }
         else this._ESsearch()
@@ -210,9 +211,9 @@
         this._query();
        },
       _ESsearch: function() {
-        console.log("_filtersChangedash")
+        //console.log("_filtersChangedash")
         var that = this;
-        console.log("Ready?: ", ready);
+        //console.log("Ready?: ", ready);
         if(ready){
           this.client.search({
           // undocumented params are appended to the query string
@@ -274,15 +275,15 @@
             that.ids = myids;
             //console.log(that.ids)
             that.data = resp;
-            console.log(that.data);
+            //console.log(that.data);
             
             });
         }
       },
        _query: function() {
-        console.log("_query")
+        //console.log("_query")
         var that = this;
-        console.log("Ready?: ", ready);
+        //console.log("Ready?: ", ready);
         if(ready){
           this.client.search({
           // undocumented params are appended to the query string
@@ -343,7 +344,7 @@
             that.ids = myids;
             //console.log(that.ids)
             that.data = resp;
-            console.log(that.data);
+            //console.log(that.data);
             
             });
         }

dashboard-reddit.html

@@ -39,8 +39,9 @@
         <div style="width: 100%; display: inline-block">
           <div style="width: 32%; margin-right: 2%; float: left">
             <number-chart 
-              icon="info"
+              icon="/images/news.ico"
               stylebg="bg-red"
+              title="Items selected"
               data="{{data}}">
             </number-chart>
           </div>
@@ -121,13 +122,27 @@
             </google-chart>
           </div>
       </div>
+      
       <div class="chart_container" style="left: 0; float: left; width: 100%">
-            <news-chart 
-              datos = "{{data}}"
-              title="List of news"
-              filters="{{filters}}"
-              icon='icons:receipt'>
-            </news-chart>
+        <google-chart
+          field="dataPublished"
+          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>
+      </div>
+      <div class="chart_container" style="left: 0; float: left; width: 100%">
+        <news-chart 
+          datos = "{{data}}"
+          title="List of news"
+          filters="{{filters}}"
+          icon='icons:receipt'>
+        </news-chart>
        </div>
 
       </div>
@@ -189,19 +204,19 @@
       },
 
       ready: function(){
-        console.log("ready");
+        //console.log("ready");
       },
 
       _clientChanged: function() {
-        console.log("ClientChanged");
+        //console.log("ClientChanged");
         ready = true;
         this._query();
       },
       _search: function(){
-        console.log("search fired")
-        console.log(this.query.length)
+        //console.log("search fired")
+        //console.log(this.query.length)
         if (this.query.length == 0){
-          console.log("default search fired")
+          //console.log("default search fired")
           this._query()
         }
         else this._ESsearch()
@@ -210,9 +225,9 @@
         this._query();
        },
       _ESsearch: function() {
-        console.log("_filtersChangedash")
+        //console.log("_filtersChangedash")
         var that = this;
-        console.log("Ready?: ", ready);
+        //console.log("Ready?: ", ready);
         if(ready){
           this.client.search({
           // undocumented params are appended to the query string
@@ -265,8 +280,15 @@
                _count: "desc"
                      }      
                    }
-      }
+      },
+      dataPublished: {
+              date_histogram : {
+                field : "dataPublished",
+                format: "MM-yyyy",
+                interval : "month"
+            }
        }
+        }
       } 
           }).then(function (resp) {
             var myids = []
@@ -274,15 +296,15 @@
             that.ids = myids;
             //console.log(that.ids)
             that.data = resp;
-            console.log(that.data);
+            //console.log(that.data);
             
             });
         }
       },
        _query: function() {
-        console.log("_query")
+        //console.log("_query")
         var that = this;
-        console.log("Ready?: ", ready);
+        //console.log("Ready?: ", ready);
         if(ready){
           this.client.search({
           // undocumented params are appended to the query string
@@ -334,7 +356,14 @@
                _count: "desc"
                      }      
                    }
-      }
+      },
+      dataPublished: {
+              date_histogram : {
+                field : "dataPublished",
+                format: "MM-yyyy",
+                interval : "month"
+            }
+       }
        }
       } 
           }).then(function (resp) {
@@ -343,7 +372,7 @@
             that.ids = myids;
             //console.log(that.ids)
             that.data = resp;
-            console.log(that.data);
+            //console.log(that.data);
             
             });
         }

demo/elements/google-chart-elasticsearch/google-chart.css

@@ -14,6 +14,13 @@
   width: 100%;
 }
 
+#nodata {
+    position: absolute;
+    width: 100%;
+    line-height: 35px;
+    text-align: center; 
+}
+
 .top-bar{
   width: 100%; 
   background-color: var(--dark-primary-color); 

demo/elements/google-chart-elasticsearch/google-chart.html

@@ -42,6 +42,7 @@ Data can be provided in one of three ways:
       <iron-icon icon="{{icon}}"></iron-icon>
       <span>{{options.title}}</span>
     </div>
+    <div id="nodata">No entries match the current filters</div>
     <iron-ajax id="ajax" handle-as="json" url="{{data}}"
     on-response="_externalDataLoaded"></iron-ajax>
     <div id="chartdiv"></div>
@@ -289,15 +290,23 @@ Data can be provided in one of three ways:
         if (field == "sentiment") field = 'sentiments.marl:hasPolarity'
         if (field == "emotion") field = 'emotions.onyx:hasEmotion.onyx:hasEmotionCategory'
         term1[field] = param.toLowerCase().split(" ");
+        if (field == 'dataPublished'){
+           term1[field] = param.toLowerCase().split("-");
+        }
         console.log(term1)
         var object = {terms: term1}
+        if (field == 'dataPublished'){
+           var date = param.toLowerCase().toString().split("-");
+           var term = date[1]+'-'+date[0]+'-01'
+           object = {range: {dataPublished: {gte: term, boost: 5}}}
+        }
         var isInside = -1
         for(var i = 0; i < this.filters.length; i++){
           if(JSON.stringify(this.filters[i].term) === JSON.stringify(term1))
               isInside = i
         }
         if(isInside == -1){
-          this.push('filters', { terms: term1})
+          this.push('filters', object)
           this.isSelected = true
         }
       } else {
@@ -475,6 +484,8 @@ Data can be provided in one of three ways:
 
     _dataChanged: function() {
       //console.log("_dataChanged")
+      console.log(this.field)
+      console.log(this.data)
       var that = this
       var aggs = 0
       try{
@@ -484,9 +495,25 @@ Data can be provided in one of three ways:
         var hits = []
       }
       var data = [];
-      hits.forEach(function(entry) {
-        data.push([entry.key, entry.doc_count]);
-      });
+      if (this.field == "dataPublished") {
+        hits.forEach(function(entry) {
+          data.push([entry.key_as_string, entry.doc_count]);
+        });
+      }
+      else {
+        hits.forEach(function(entry) {
+          data.push([entry.key, entry.doc_count]);
+        });
+      }
+      console.log(data)
+       if(data.length == 0 ){
+          this.$.chartdiv.style.visibility = 'hidden';
+          this.$.nodata.style.visibility = 'visible';
+      } else {
+          this.$.chartdiv.style.visibility = 'visible';
+          this.$.nodata.style.visibility = 'hidden';
+      }
+
       that.rows = data;
       filtered = true;
       this._loadData();

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

@@ -19,11 +19,11 @@
         <template is="dom-repeat" items="{{data}}" as="news"> 
           <div class="tweet same-height" style="border: 2px dashed rgba(96, 125, 139, .5); text-align: center;">
             <span style="font-weight: bold; font-size:30px; text-align:center; margin: 0 auto; display:block;">{{news.headline}}</span></br>
-            <button class="btn" ident$="subitem[[index]]" on-click="toggle" aria-expanded$="[[opened]]" aria-controls="collapse">{{buttontext}}<iron-icon icon="expand-more"></iron-icon></button>
-            <img src={{checkSource(news.author)}} style="width: 10%; display:block; left: 3%; position: relative;" data-tooltip="I’m the tooltip text.">
-            <img src={{checkEmotion(news.emotions)}} style="width: 3%; margin: 0 auto; display:block; float:right; position:relative; top:-65px;left: -43px;">
+            <button class="btn btn-primary" ident$="subitem[[index]]" on-click="toggle" aria-expanded$="[[opened]]" aria-controls="collapse">{{buttontext}}<iron-icon icon="expand-more"></iron-icon></button>
+            <img src={{checkSource(news.author)}} style="width: 10%; display:block; left: 3%; position: relative;">
+            <img src={{checkEmotion(news.emotions)}} style="width: 3%; margin: 0 auto; display:block; float:right; position:relative; top:-65px;left: -43px;" data-toggle="tooltip" data-placement="top" title="{{getemotion(news.emotions)}}">
             <iron-collapse ident$="subitem[[index]]">
-              <div class="content" style="text-align:justify;">
+              <div class="content" style="text-align:justify; width: 94%; margin: 0 auto;">
                 <br>
                 <template is="dom-repeat" items="{{news.sentiments}}" as="sentiment"> 
                 <span class$="{{checkSpanSentiment(sentiment.marl:hasPolarity)}}">{{sentiment.nif:anchorOf}}</span>
@@ -146,6 +146,10 @@
         else 
           return "tweet neutral"
       },
+      getemotion: function(emotion) {
+        //console.log(sentiment)
+        return emotion[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].split('#')[1]
+      },
       checkSpanSentiment: function(sentiment) {
         //console.log(sentiment)
         if (sentiment == "marl:Positive")

demo/elements/number-chart/number-chart.html

@@ -48,7 +48,7 @@
               },
               subtitle: {
                 type: String,
-                value: 'Total elements'
+                value: 'Total items'
               },
               icon: {
                 type: String,
@@ -77,7 +77,7 @@
             },
 
             _dataChanged: function() {
-              console.log("data has changed")
+              //console.log("data has changed")
               if(this.data == undefined || this.data.hits == undefined){
                 console.log("No data");
                 return;
@@ -95,7 +95,7 @@
                     selected = entry.doc_count;
                   }
                 });
-                console.log(selected);
+                //console.log(selected);
                 idNum.innerHTML = this.kFormatter(selected);
                 progress = 100*selected/numberMax;
                 idBar.style.width = progress+"%";