worked on statistics monitor page

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@51163 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/statistics/statistics.component.html

@@ -3,53 +3,134 @@
 <div class="uk-container  uk-margin-bottom">
 
   <article class="uk-article ">
-    <div *ngIf="statistics" class="uk-margin uk-margin-top uk-text-lead">
+    <div *ngIf="statistics" class="uk-margin uk-margin-top">
+        <div class="uk-grid">
+            <ul class="uk-tab uk-tab-left uk-width-1-5 uk-margin-top" data-uk-tab="{connect:'#tabs'}">
+                <li (click)="charts.timelines.publications.load = true"><a href="#">Publications</a></li>
+                <li (click)="charts.timelines.datasets.load = true"><a href="#" disabled>Research Data</a></li>
+                <li (click)="charts.timelines.software.load = true"><a href="#">Software</a></li>
+            </ul>
 
+            <ul id="tabs" class="uk-switcher uk-margin uk-width-4-5" style="min-height:450px; padding-left:40px;">
+                <li>
+                    <div>
+                        <div class="uk-text-uppercase uk-text-bold uk-heading-divider">
+                            <h2>Publications statistics</h2>
+                            <div class="uk-text-small">
+                                <span>{{statistics.publications.total}} publications from {{statistics.total_projects}} projects.</span><br>
+                                <span>{{statistics.publications.open_access}} are OA</span>
+                                <span *ngIf="statistics.publications.restricted && statistics.publications.restricted > 0">,
+                                    {{statistics.publications.restricted}} are restricted
+                                </span>
+                                <span *ngIf="statistics.publications.embargo && statistics.publications.embargo > 0">
+                                    and {{statistics.publications.embargo}} are still in embargo
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div *ngIf="charts.timelines.publications.load && statistics.publications.total > 0">
+                        <i-frame  [url]=charts.timelines.publications.url width="1000" height="450"></i-frame>
+                    </div>
+                    <div *ngIf="statistics.publications.total == 0" class="uk-alert uk-alert-primary">
+                        No publications available
+                    </div>
+                    <hr>
+                    <div>
+                        <h4 class="uk-text-uppercase uk-text-bold">Publications per project</h4>
+                    </div>
+                    <div>
+                        <ul class="uk-tab uk-margin-top" data-uk-tab="{connect: '#pubTabs'">
+                            <li (click)="charts.projectPublications.columns.load = true"><a href="#">Columns</a></li>
+                            <li (click)="charts.projectPublications.pie.load = true"><a href="#">Pie</a></li>
+                            <li (click)="charts.projectPublications.table.load = true"><a href="#">Table</a></li>
+                        </ul>
+                        <ul id="pubTabs" class="uk-switcher uk-margin">
+                            <li>
+                                <div *ngIf="charts.projectPublications.columns.load">
+                                    <i-frame  [url]=charts.projectPublications.columns.url width="1000" height="450"></i-frame>
+                                </div>
+                            </li>
+                            <li>
+                                <div *ngIf="charts.projectPublications.pie.load">
+                                    <i-frame  [url]=charts.projectPublications.pie.url width="1000" height="450"></i-frame>
+                                </div>
+                            </li>
+                            <li>
+                                <div *ngIf="charts.projectPublications.table.load">
+                                    <i-frame  [url]=charts.projectPublications.table.url width="1000" height="450"></i-frame>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div *ngIf="charts.timelines.datasets.load && statistics.datasets.total > 0">
+                        <i-frame  [url]=charts.timelines.datasets.url width="1000" height="450"></i-frame>
+                    </div>
+                    <div *ngIf="statistics.datasets.total == 0" class="uk-alert uk-alert-primary">
+                        No research data available
+                    </div>
+                </li>
+                <li>
+                    <div *ngIf="charts.timelines.software.load && statistics.software.total > 0">
+                        <i-frame  [url]=charts.timelines.software.url width="1000" height="450"></i-frame>
+                    </div>
+                    <div *ngIf="statistics.software.total == 0" class="uk-alert uk-alert-primary">
+                        No software available
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <!-- ORIGINAL HTML -->
+<!--
       <div>
           {{statistics.publications.total}} publications from
-        <!--span *ngIf="statistics.virtual_organizations && statistics.virtual_organizations > 0"> {{statistics.virtual_organizations}} VOs and</span-->
+        &lt;!&ndash;span *ngIf="statistics.virtual_organizations && statistics.virtual_organizations > 0"> {{statistics.virtual_organizations}} VOs and</span&ndash;&gt;
           {{statistics.total_projects}}  projects.
       </div>
       <div>
-        {{statistics.publications.open_access}} are OA
+          {{statistics.publications.open_access}} are OA
           <span *ngIf="statistics.publications.restricted && statistics.publications.restricted > 0">, {{statistics.publications.restricted}} are restricted </span>
-         <span *ngIf="statistics.publications.embargo && statistics.publications.embargo > 0">and  {{statistics.publications.embargo}} are still in embargo  </span>
+          <span *ngIf="statistics.publications.embargo && statistics.publications.embargo > 0">and  {{statistics.publications.embargo}} are still in embargo  </span>
      </div>
     </div>
     <div *ngIf="charts && charts.timelines && statistics">
       <div class="uk-text-large" >Timelines of research results</div>
-      <ul class="uk-tab uk-margin-top" data-uk-tab="{connect:'#timelinestabs'}">
+      <div class="uk-grid">
-          <li (click)="charts.timelines.publications.load = true"><a href="#">Publications</a></li>
+          <ul class="uk-tab uk-tab-left uk-width-1-5 uk-margin-top" data-uk-tab="{connect:'#timelinestabs'}">
-          <li (click)="charts.timelines.datasets.load = true"><a href="#">Research Data</a></li>
+              <li (click)="charts.timelines.publications.load = true"><a href="#">Publications</a></li>
-          <li (click)="charts.timelines.software.load = true"><a href="#">Software</a></li>
+              <li (click)="charts.timelines.datasets.load = true"><a href="#" disabled>Research Data</a></li>
-      </ul>
+              <li (click)="charts.timelines.software.load = true"><a href="#">Software</a></li>
+          </ul>
 
-      <ul id="timelinestabs" class="uk-switcher uk-margin">
+          <ul id="timelinestabs" class="uk-switcher uk-margin uk-width-4-5" style="height:450px; padding: 5px;">
-          <li>
+              <li>
-            <div *ngIf="charts.timelines.publications.load && statistics.publications.total > 0">
+                <div *ngIf="charts.timelines.publications.load && statistics.publications.total > 0">
-              <i-frame  [url]=charts.timelines.publications.url width="1000" height="450"></i-frame>
+                  <i-frame  [url]=charts.timelines.publications.url width="1000" height="450"></i-frame>
-            </div>
+                </div>
-            <div *ngIf="statistics.publications.total == 0" class="uk-alert uk-alert-primary">
+                <div *ngIf="statistics.publications.total == 0" class="uk-alert uk-alert-primary">
-              No publications available
+                  No publications available
-            </div>
+                </div>
-          </li>
+              </li>
-          <li>
+              <li>
-            <div *ngIf="charts.timelines.datasets.load && statistics.datasets.total > 0">
+                <div *ngIf="charts.timelines.datasets.load && statistics.datasets.total > 0">
-              <i-frame  [url]=charts.timelines.datasets.url width="1000" height="450"></i-frame>
+                  <i-frame  [url]=charts.timelines.datasets.url width="1000" height="450"></i-frame>
-            </div>
+                </div>
-            <div *ngIf="statistics.datasets.total == 0" class="uk-alert uk-alert-primary">
+                <div *ngIf="statistics.datasets.total == 0" class="uk-alert uk-alert-primary">
-              No research data available
+                  No research data available
-            </div>
+                </div>
-          </li>
+              </li>
-          <li>
+              <li>
-            <div *ngIf="charts.timelines.software.load && statistics.software.total > 0">
+                <div *ngIf="charts.timelines.software.load && statistics.software.total > 0">
-              <i-frame  [url]=charts.timelines.software.url width="1000" height="450"></i-frame>
+                  <i-frame  [url]=charts.timelines.software.url width="1000" height="450"></i-frame>
-            </div>
+                </div>
-            <div *ngIf="statistics.software.total == 0" class="uk-alert uk-alert-primary">
+                <div *ngIf="statistics.software.total == 0" class="uk-alert uk-alert-primary">
-              No software available
+                  No software available
-            </div>
+                </div>
-          </li>
+              </li>
-      </ul>
+          </ul>
+      </div>
   </div>
 
   <div *ngIf="charts && charts.projectPublications && statistics && statistics.publications.total > 0">
@@ -60,7 +141,7 @@
         <li (click)="charts.projectPublications.table.load = true"><a href="#">Table</a></li>
     </ul>
 
-    <ul id="publicationtabs" class="uk-switcher uk-margin">
+    <ul id="publicationtabs" class="uk-switcher uk-margin" style="height:450px;">
         <li>
           <div *ngIf="charts.projectPublications.columns.load">
             <i-frame  [url]=charts.projectPublications.columns.url width="1000" height="450"></i-frame>
@@ -86,7 +167,7 @@
       <li (click)="charts.projectDatasets.table.load = true"><a href="#">Table</a></li>
   </ul>
 
-  <ul id="datasettabs" class="uk-switcher uk-margin">
+  <ul id="datasettabs" class="uk-switcher uk-margin" style="height:450px;">
       <li>
         <div *ngIf="charts.projectDatasets.columns.load">
           <i-frame  [url]=charts.projectDatasets.columns.url width="1000" height="450"></i-frame>
@@ -112,7 +193,7 @@
       <li (click)="charts.projectSoftware.table.load = true"><a href="#">Table</a></li>
   </ul>
 
-  <ul id="softwaretabs" class="uk-switcher uk-margin">
+  <ul id="softwaretabs" class="uk-switcher uk-margin" style="height:450px;">
       <li>
         <div *ngIf="charts.projectSoftware.columns.load">
           <i-frame  [url]=charts.projectSoftware.columns.url width="1000" height="450"></i-frame>
@@ -129,6 +210,7 @@
         </div>
       </li>
   </ul>
+-->
 </div>
   </article>
 </div>

src/app/statistics/statistics.component.ts

@@ -72,11 +72,13 @@ export class StatisticsComponent {
                     });
                     this.createCharts();
                 });
-                this._communityService.getCommunity(this.properties.communityAPI+this.communityId).subscribe (
+
+                /* NOT NEEDED ??*/
+                /*this._communityService.getCommunity(this.properties.communityAPI+this.communityId).subscribe (
                   communityInfo => {
                         this.communityInfo = communityInfo;
                         console.log(communityInfo);
-                  });
+                  });*/
       });
 
   }
@@ -92,7 +94,7 @@ export class StatisticsComponent {
      this.charts = {
        timelines: {
          publications:
-         {url: this.properties.statisticsFrameAPIURL + 'chart.php?com=query&persistent=false&data=com=query&data={"query":"comTimelinePubs","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"year","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"yaxisheaders":["Publications"],"fieldsheaders":["publications"],"in":[{"f":0,"text":"Yearly"}],"filters":[{"name":"year","max":"2013","min":"2007","to":-1},{"name":"result_projects-project-funding_lvl0","values":["FP7"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"},{"name":"result_projects-project-funding_lvl2","values":["ERC"],"to":"-1"}],"having":[],"incfilters":[],"inchaving":[],"title":"Publications through the years","subtitle":"","xaxistitle":"Year"}&w=90%&h=83%',
+         {url: this.properties.statisticsFrameAPIURL + 'chart.php?com=query&persistent=false&data=com=query&data={"query":"comTimelinePubs","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"year","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"yaxisheaders":["Publications"],"fieldsheaders":["publications"],"in":[{"f":0,"text":"Yearly"}],"filters":[{"name":"year","max":"2013","min":"2007","to":-1},{"name":"result_projects-project-funding_lvl0","values":["FP7"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"},{"name":"result_projects-project-funding_lvl2","values":["ERC"],"to":"-1"}],"having":[],"incfilters":[],"inchaving":[],"title":"Timeline of publications through the years","subtitle":"","xaxistitle":"Year"}&w=70%&h=83%',
          load:true},
          datasets:
          {url: this.properties.statisticsFrameAPIURL + 'chart.php?com=query&data={"query":"comTimelineData","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"year","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"yaxisheaders":["Datasets"],"fieldsheaders":["publications"],"in":[{"f":0,"text":"Yearly"}],"filters":[{"name":"year","max":"2013","min":"2007","to":-1},{"name":"result_projects-project-funding_lvl0","values":["FP7"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"},{"name":"result_projects-project-funding_lvl2","values":["ERC"],"to":"-1"}],"having":[],"incfilters":[],"inchaving":[],"title":"Research data through the years","subtitle":"","xaxistitle":"Year"}&w=90%&h=83%',
@@ -102,12 +104,12 @@ export class StatisticsComponent {
        },
        projectPublications: {
          columns:
-         {url: this.properties.statisticsFrameAPIURL + 'chart.php?com=query&data={"query":"comProjectPubs","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"bar","yaxis":1,"c":false}],"xaxis":{"name":"year","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"yaxisheaders":["Publications"],"fieldsheaders":["publications"],"in":[],"filters":[{"name":"year","max":"2013","min":"2007","to":-1},{"name":"result_projects-project-funding_lvl0","values":["FP7"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"},{"name":"result_projects-project-funding_lvl2","values":["ERC"],"to":"-1"}],"having":[],"incfilters":[],"inchaving":[],"title":"Publications per project","subtitle":"","xaxistitle":"Project"}&w=90%&h=83%',
+         {url: this.properties.statisticsFrameAPIURL + 'chart.php?com=query&data={"query":"comProjectPubs","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"bar","yaxis":1,"c":false}],"xaxis":{"name":"year","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"yaxisheaders":["Publications"],"fieldsheaders":["publications"],"in":[],"filters":[{"name":"year","max":"2013","min":"2007","to":-1},{"name":"result_projects-project-funding_lvl0","values":["FP7"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"},{"name":"result_projects-project-funding_lvl2","values":["ERC"],"to":"-1"}],"having":[],"incfilters":[],"inchaving":[],"title":"","subtitle":"","xaxistitle":"Project"}&w=70%&h=83%',
          load:true},
          pie:
-         {url: this.properties.statisticsFrameAPIURL + 'chart.php?com=query&data={"query":"comProjectPubs","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"pie","yaxis":1,"c":false}],"xaxis":{"name":"year","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"yaxisheaders":["Publications"],"fieldsheaders":["publications"],"in":[],"filters":[{"name":"year","max":"2013","min":"2007","to":-1},{"name":"result_projects-project-funding_lvl0","values":["FP7"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"},{"name":"result_projects-project-funding_lvl2","values":["ERC"],"to":"-1"}],"having":[],"incfilters":[],"inchaving":[],"title":"Publications per project","subtitle":"","xaxistitle":"Project"}&w=90%&h=83%',
+         {url: this.properties.statisticsFrameAPIURL + 'chart.php?com=query&data={"query":"comProjectPubs","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"pie","yaxis":1,"c":false}],"xaxis":{"name":"year","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"yaxisheaders":["Publications"],"fieldsheaders":["publications"],"in":[],"filters":[{"name":"year","max":"2013","min":"2007","to":-1},{"name":"result_projects-project-funding_lvl0","values":["FP7"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"},{"name":"result_projects-project-funding_lvl2","values":["ERC"],"to":"-1"}],"having":[],"incfilters":[],"inchaving":[],"title":"","subtitle":"","xaxistitle":"Project"}&w=100%&h=83%',
          display:false},
-         table:{url: this.properties.statisticsFrameAPIURL + 'gtable.php?com=query&data={"query":"comProjectPubs","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"bar","yaxis":1,"c":false}],"xaxis":{"name":"year","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"yaxisheaders":["Publications"],"fieldsheaders":["publications"],"in":[],"filters":[{"name":"year","max":"2013","min":"2007","to":-1},{"name":"result_projects-project-funding_lvl0","values":["FP7"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"},{"name":"result_projects-project-funding_lvl2","values":["ERC"],"to":"-1"}],"having":[],"incfilters":[],"inchaving":[],"title":"Publications per project","subtitle":"","xaxistitle":"Project"}&w=90%&h=83%',
+         table:{url: this.properties.statisticsFrameAPIURL + 'gtable.php?com=query&data={"query":"comProjectPubs","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"bar","yaxis":1,"c":false}],"xaxis":{"name":"year","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"yaxisheaders":["Publications"],"fieldsheaders":["publications"],"in":[],"filters":[{"name":"year","max":"2013","min":"2007","to":-1},{"name":"result_projects-project-funding_lvl0","values":["FP7"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"},{"name":"result_projects-project-funding_lvl2","values":["ERC"],"to":"-1"}],"having":[],"incfilters":[],"inchaving":[],"title":"","subtitle":"","xaxistitle":"Project"}&w=90%&h=83%',
          load:false}
        },
        projectDatasets: {