[Library | Trunk]: Add openaire metrics.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58598 d315682c-612b-4755-9ff5-7f18f6832af3

landingPages/annotation/annotation.component.ts

@@ -93,10 +93,20 @@ export class AnnotationComponent implements OnInit, OnDestroy {
         id = this.landingInfo.deletedByInferenceIds[0];
         this.url = this.url.replace(this.id, id);
       }
-      this.pid = this.url;
+      if (this.landingInfo.identifiers && this.landingInfo.identifiers.size > 0) {
+        if (this.landingInfo.identifiers.get('doi')) {
+          this.pid = this.landingInfo.identifiers.get('doi')[0];
+        } else {
+          const key: string = this.landingInfo.identifiers.keys().next().value;
+          if (key) {
+            this.pid = this.landingInfo.identifiers.get(key)[0];
+          }
+        }
+      } else {
+        this.pid = id;
+      }
       this.annotationService.getAllAnnotations(this.properties, this.url).subscribe(annotations => {
         this.annotations = annotations;
-        console.log(this.annotations);
       });
     }
   }

landingPages/dataProvider/dataProvider.component.html

@@ -582,6 +582,20 @@
                 <div class="sideInfoTitle uk-margin-small-bottom uk-margin-small-top">Share - Bookmark</div>
                 <addThis></addThis>
               </div>
+              <!-- Metrics -->
+              <div *ngIf="hasMetrics" class="uk-margin-top">
+                <div class="sideInfoTitle uk-margin-small-bottom">Metrics</div>
+                <div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">
+                  <div></div><!-- Open Citations-->
+                  <div>
+                    <metrics [pageViews]="pageViews"
+                             [id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
+                             [viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"
+                             (metricsResults)="metricsResults($event)" [properties]=properties>
+                    </metrics>
+                  </div>
+                </div>
+              </div>
 <!--              <metrics [pageViews]="pageViews" shortView=true-->
 <!--                       [id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"-->
 <!--                       (metricsResults)="metricsResults($event)" [properties]=properties>-->

landingPages/dataProvider/dataProvider.component.ts

@@ -600,6 +600,10 @@ export class DataProviderComponent {
     this.totalDownloads = $event.totalDownloads;
     this.pageViews = $event.pageViews;
   }
+  
+  public get hasMetrics(): boolean {
+    return !(this.totalViews && this.totalDownloads && this.pageViews) || this.totalViews > 0 || this.totalDownloads > 0||this.pageViews > 0;
+  }
 
   public openStatistics() {
     this.statsClicked = true;

landingPages/dataProvider/dataProvider.module.ts

@@ -7,7 +7,7 @@ import {IFrameModule} from '../../utils/iframe.module';
 import {ErrorMessagesModule} from '../../utils/errorMessages.module';
 // import { ResultLandingModule } from '../resultLanding.module';
 import {TabResultModule } from '../../searchPages/searchUtils/tabResult.module';
-import {MetricsModule} from '../landing-utils/metrics.module';
+import {MetricsModule} from '../landing-utils/metrics/metrics.module';
 import {LandingModule} from '../landing-utils/landing.module';
 import {PagingModule} from '../../utils/paging.module';
 

landingPages/landing-utils/metrics.component.ts

@@ -1,170 +0,0 @@
-import {Component, Input, Output, EventEmitter} from '@angular/core';
-import {Metrics} from '../../utils/entities/metrics';
-import {MetricsService } from '../../services/metrics.service';
-import {ErrorCodes} from '../../utils/properties/errorCodes';
-
-import { Subscription }   from 'rxjs';
-import{EnvProperties} from '../../utils/properties/env-properties';
-
-@Component({
-    selector: 'metrics',
-    template: `
-    <div *ngIf="!shortView">
-      <errorMessages [status]="[status]" [type]="'metrics'" tab_error_class=true></errorMessages>
-
-      <div *ngIf="metrics && pageViews == 0 && metrics.totalViews == 0 && metrics.totalDownloads == 0" class="uk-alert uk-alert-primary">
-        No metrics available
-      </div>
-      <div *ngIf="metrics != undefined  && (pageViews >0 || metrics.totalViews > 0|| metrics.totalDownloads >0)" class="uk-child-width-1-3@m uk-grid-small uk-grid-match uk-grid" uk-grid="">
-          <div *ngIf="entityType == 'projects'" class="uk-width-1-1 uk-text-center uk-text-meta uk-margin">Project metrics are derived from aggregating individual research results metrics.</div>
-          <div class="metrics-openaire uk-first-column">
-              <div class="uk-tile uk-tile-default uk-padding-small">
-                <div class="uk-text-center">{{pageViews | number}}</div>
-                <div class="uk-text-center">views in OpenAIRE</div>
-              </div>
-          </div>
-          <div class="metrics-views">
-              <div class="uk-tile uk-tile-muted uk-padding-small">
-                  <div class="uk-text-center">  {{metrics.totalViews | number}}
-                  <span *ngIf="metrics.totalViews > 0 && metrics.totalOpenaireViews > 0">
-                  ( {{metrics.totalOpenaireViews | number}} from OpenAIRE )
-                  </span></div>
-                  <div  class="uk-text-center">views in local repository</div>
-              </div>
-          </div>
-          <div class="metrics-downloads">
-              <div class="uk-tile uk-tile-primary uk-padding-small">
-                  <div class="uk-text-center">  {{metrics.totalDownloads | number}}
-                  <span *ngIf="metrics.totalDownloads > 0 && metrics.totalOpenaireDownloads > 0">
-                  ( {{metrics.totalOpenaireDownloads | number}} from OpenAIRE )
-                  </span></div>
-                  <div class="uk-text-center">downloads in local repository</div>
-              </div>
-          </div>
-
-      </div>
-
-      <p *ngIf="metrics != undefined && metrics.infos.size > 0" >The information is available from the following content providers: </p>
-      <table *ngIf="metrics != undefined && metrics.infos.size > 0"
-              class="uk-table uk-table-small uk-table-striped">
-          <thead>
-              <tr>
-                  <th class="uk-text-center uk-text-bold">From</th>
-                  <th class="uk-text-center  uk-text-bold">Number Of Views</th>
-                  <th class="uk-text-center  uk-text-bold">Number Of Downloads</th>
-              </tr>
-          </thead>
-          <tbody>
-              <tr *ngFor="let key of getKeys(metrics.infos)">
-                  <td class="uk-text-center">
-                      <a href="{{metrics.infos.get(key).url}}">
-                          {{metrics.infos.get(key).name}}
-                      </a>
-                  </td>
-                  <td class="uk-text-center">
-                      {{metrics.infos.get(key).numOfViews | number}}
-                      <span *ngIf="metrics.infos.get(key).numOfViews > 0 && metrics.infos.get(key).openaireViews > 0">
-                        ( {{metrics.infos.get(key).openaireViews | number}} from OpenAIRE )
-                      </span>
-                  </td>
-                  <td class="uk-text-center">
-                      {{metrics.infos.get(key).numOfDownloads | number}}
-                      <span *ngIf="metrics.infos.get(key).numOfDownloads > 0 && metrics.infos.get(key).openaireDownloads > 0">
-                        ( {{metrics.infos.get(key).openaireDownloads | number}} from OpenAIRE )
-                      </span>
-                  </td>
-              </tr>
-          </tbody>
-      </table>
-    </div>
-    <div *ngIf="shortView && metrics && (metrics.pageViews >0 || metrics.totalViews > 0|| metrics.totalDownloads >0)">
-      <dl *ngIf="metrics" class="uk-description-list-line">
-        <dt class="sideInfoTitle">Metrics</dt>
-        <dd class="line" >
-          {{metrics.pageViews | number}} views in OpenAIRE
-        </dd>
-        <dd class="line">
-           {{metrics.totalViews | number}}
-          <span *ngIf="metrics.totalViews > 0 && metrics.totalOpenaireViews > 0">
-          ( {{metrics.totalOpenaireViews | number}} from OpenAIRE )
-          </span>
-          views in local repository
-        </dd>
-        <dd class="line">
-          {{metrics.totalDownloads | number}}
-          <span *ngIf="metrics.totalDownloads > 0 && metrics.totalOpenaireDownloads > 0">
-          ( {{metrics.totalOpenaireDownloads | number}} from OpenAIRE )
-          </span> downloads in local repository
-        </dd>
-      </dl>
-    </div>
-    `
-    })
-
-export class MetricsComponent {
-    @Output() metricsResults = new EventEmitter();
-    @Input() id: string;
-    @Input() entityType: string;
-    @Input() entity: string;
-    //@Input() name: string = "";
-    @Input() pageViews: number = 0;
-    @Input() properties:EnvProperties;
-    @Input() shortView:boolean = false;
-
-    public metrics: Metrics;
-    public errorCodes:ErrorCodes;
-    private sub: Subscription;
-
-    public status: number;
-
-    constructor (private _metricsService: MetricsService) {}
-
-    ngOnInit() {
-        this.errorCodes = new ErrorCodes();
-        this.status = this.errorCodes.LOADING;
-        this.getMetrics();
-    }
-
-    ngOnDestroy() {
-        this.sub.unsubscribe();
-    }
-
-    private getMetrics() {
-        //if(this.id == undefined || this.id == "") {
-        //    console.log("supplied id in metrics is not acceptable");
-        //}
-        //if(this.type == undefined || this.type == "") {
-        //    console.log("supplied id in metrics is not acceptable");
-        //}
-
-        this.sub = this._metricsService.getMetrics(this.id, this.entityType, this.properties).subscribe(
-         data => {
-             this.metrics = data;
-             this.status = this.errorCodes.DONE;
-             this.metricsResults.emit({
-                 totalViews: this.metrics.totalViews,
-                 totalDownloads: this.metrics.totalDownloads,
-                 pageViews: this.metrics.pageViews
-             });
-         },
-         err => {
-           console.log(err);
-           if(err.status == '404') {
-             this.status = this.errorCodes.NOT_FOUND;
-           } else if(err.status == '500') {
-             this.status = this.errorCodes.ERROR;
-           } else {
-             this.status = this.errorCodes.NOT_AVAILABLE;
-           }
-           this.metricsResults.emit({
-               totalViews: 0,
-               totalDownloads: 0
-           });
-         }
-       );
-    }
-
-    public getKeys( map) {
-      return Array.from(map.keys());
-    }
-}

landingPages/landing-utils/metrics.module.ts

@@ -1,26 +0,0 @@
-/* This module contains all common components for all landing pages */
-
-import { NgModule}            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-
- import {MetricsComponent} from './metrics.component';
- import { MetricsService } from '../../services/metrics.service';
-
- import {ErrorMessagesModule} from '../../utils/errorMessages.module';
-
-@NgModule({
-  imports: [
-    CommonModule, FormsModule, ErrorMessagesModule
-  ],
-  declarations: [
-    MetricsComponent
-  ],
-  providers:[
-    MetricsService
-   ],
-  exports: [
-    MetricsComponent
-  ]
-})
-export class MetricsModule { }

landingPages/landing-utils/metrics/metrics.component.css

@@ -0,0 +1,91 @@
+.metrics {
+  position: relative;
+  display: inline-block;
+}
+
+.metrics .widget {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-85%);
+  margin-top: 20px;
+  margin-left: 20px;
+  width: 350px;
+  z-index: 1;
+}
+
+.metrics .widget:after {
+  position: absolute;
+  left: 80%;
+  transform: translateX(-65%);
+  top: -10px;
+  width: 0;
+  height: 0;
+  content: '';
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid #2E2D7A;
+}
+
+.metrics .m-badge .number {
+  font-size: 18px;
+  color: #222080;
+  font-weight: 700;
+  text-align: center;
+}
+
+.metrics .widget > .body {
+  box-shadow: 0 3px 6px #00000029;
+  border-radius: 4px 4px 0 4px;
+  padding: 10px 18px;
+  background: #2E2D7A no-repeat padding-box;
+  color: white;
+  font-size: 12px;
+  height: inherit;
+}
+
+.metrics .widget > .body > div {
+  opacity: 0;
+  height: inherit;
+  overflow: hidden;
+}
+
+.metrics .widget > .body .charts {
+  margin-top: 10px;
+  opacity: 0;
+}
+
+.metrics .widget > .body .charts .uk-slidenav {
+  background-color: #bbbbca;
+  color: #49494f;
+  padding: 5px 10px;
+  border-radius: 50%;
+}
+
+.metrics .widget > .footer {
+  background: #FFFFFF;
+  box-shadow: 0 3px 6px #00000029;
+  border-radius: 0 0 4px 4px;
+  font-size: 11px;
+  padding: 5px 10px;
+  color: rgba(126, 126, 126, 0.80);
+  display: inline-block;
+  float: right;
+  position: relative;
+  z-index: -1;
+  transform: translateY(-80px);
+}
+
+.metrics .widget .footer > *:first-child {
+  margin-right: 10px;
+  line-height: 33px;
+  vertical-align: middle;
+}
+
+.metrics .widget .number {
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.metrics .uk-grid-divider>:not(.uk-first-column)::before {
+  border-left: 1px solid #ffffff;
+}

landingPages/landing-utils/metrics/metrics.component.ts

@@ -0,0 +1,255 @@
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {Metrics} from '../../../utils/entities/metrics';
+import {MetricsService} from '../../../services/metrics.service';
+import {ErrorCodes} from '../../../utils/properties/errorCodes';
+
+import {Subscription} from 'rxjs';
+import {EnvProperties} from '../../../utils/properties/env-properties';
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+@Component({
+  selector: 'metrics',
+  styleUrls: ['metrics.component.css'],
+  template: `
+    <div *ngIf="metrics && (pageViews >0 || metrics.totalViews > 0|| metrics.totalDownloads >0)" class="metrics"
+         click-outside-or-esc (clickOutside)="close($event)"
+         id="metrics" targetId="metrics">
+      <div class="m-badge clickable" (click)="toggle($event)">
+        <img src="assets/common-assets/metrics-icon.svg">
+        <div class="number">{{total | number}}</div>
+      </div>
+      <div class="widget" [@widget]="state.toString()">
+        <div class="body">
+          <div [@body]="state.toString()">
+            <div *ngIf="entityType == 'projects'" class="uk-margin-bottom">
+              <i class="uk-text-center">Project metrics
+                are derived from aggregating individual research results metrics.
+              </i>
+            </div>
+            <div class="uk-child-width-1-3@m uk-grid-small uk-grid-divider uk-grid-match" uk-grid>
+              <div class="uk-text-center uk-first-column">
+                <div class="number">{{metrics.totalDownloads | number}}</div>
+                <div>Downloads</div>
+              </div>
+              <div class="uk-text-center">
+                <div class="number">{{pageViews | number}}</div>
+                <div>OpenAIRE views</div>
+              </div>
+              <div class="uk-text-center">
+                <div class="number">{{metrics.totalViews | number}}</div>
+                <div>Total views</div>
+              </div>
+            </div>
+            <div *ngIf="(metrics.totalViews > 0 && viewsFrameUrl) || (metrics.totalDownloads > 0 && downloadsFrameUrl)"
+                 [@charts]="state.toString()"
+                 class="charts uk-visible-toggle" tabindex="-1" uk-slider>
+              <ul class="uk-slider-items uk-child-width-1-1 uk-grid">
+                <li>
+                  <i-frame *ngIf="metrics.totalViews > 0 && viewsFrameUrl"
+                           [width]="325" [height]="200"
+                           [url]=viewsFrameUrl>
+                  </i-frame>
+                </li>
+                <li>
+                  <i-frame *ngIf="metrics.totalDownloads > 0 && downloadsFrameUrl"
+                           [width]="325" [height]="200"
+                           [url]=downloadsFrameUrl>
+                  </i-frame>
+                </li>
+              </ul>
+              <div class="uk-text-right">
+                <a href="#" uk-slidenav-previous uk-slider-item="previous"></a>
+                <a href="#" class="space" uk-slidenav-next uk-slider-item="next"></a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="footer uk-flex uk-flex-middle" [@footer]="state.toString()">
+          <span>Powered by</span>
+          <img width="120" src="assets/common-assets/openaire-metrics.png">
+        </div>
+      </div>
+    </div>
+  `,
+  animations: [
+    trigger('widget', [
+      state('-1', style({
+        width: '150px',
+        opacity: 0,
+        height: '60px',
+      })),
+      state('0', style({
+        width: '150px',
+        opacity: 0,
+        height: '60px',
+        "margin-top": '-25px'
+      })),
+      state('1', style({
+        width: '150px',
+        opacity: 1,
+        height: '60px',
+      })),
+      state('2', style({
+        width: '350px',
+        height: 'auto',
+      })),
+      state('3', style({
+        width: '350px',
+        height: 'auto',
+      })),
+      state('4', style({
+        width: '350px',
+        height: 'auto',
+      })),
+      transition('0 => 1', [
+        animate('300ms ease-out')
+      ]),
+      transition('1 => 2', [
+        animate('400ms cubic-bezier(.18,.89,.56,1)')
+      ])
+    ]),
+    trigger('body', [
+      state('2', style({
+        opacity: 1,
+        height: 'auto',
+      })),
+      state('3', style({
+        opacity: 1,
+        height: 'auto'
+      })),
+      state('4', style({
+        opacity: 1,
+        height: 'auto'
+      })),
+      transition('* => 2', [
+        animate('400ms cubic-bezier(.18,.89,.56,1)')
+      ])
+    ]),
+    trigger('charts', [
+      state('3', style({
+        opacity: 1
+      })),
+      state('4', style({
+        opacity: 1
+      })),
+      transition('* => 3', [
+        animate('800ms ease-out')
+      ])
+    ]),
+    trigger('footer', [
+      state('4', style({
+        transform: 'translateY(0)'
+      })),
+      transition('3 => 4', [
+        animate('800ms ease-out')
+      ])
+    ])
+  ]
+})
+
+export class MetricsComponent {
+  @Output() metricsResults = new EventEmitter();
+  @Input() id: string;
+  @Input() entityType: string;
+  @Input() entity: string;
+  //@Input() name: string = "";
+  @Input() pageViews: number = 0;
+  @Input() properties: EnvProperties;
+  @Input() shortView: boolean = false;
+  @Input() open = false;
+  @Input() viewsFrameUrl: string;
+  @Input() downloadsFrameUrl: string;
+  
+  public metrics: Metrics;
+  public errorCodes: ErrorCodes;
+  private sub: Subscription;
+  private timeouts: any[] = [];
+  
+  public status: number;
+  public state: number = -1;
+  
+  constructor(private _metricsService: MetricsService) {
+  }
+  
+  ngOnInit() {
+    this.errorCodes = new ErrorCodes();
+    this.status = this.errorCodes.LOADING;
+    this.getMetrics();
+  }
+  
+  ngOnDestroy() {
+    this.sub.unsubscribe();
+  }
+  
+  public get total(): number {
+    return +this.pageViews + +this.metrics.totalViews + +this.metrics.totalDownloads;
+  }
+  
+  private getMetrics() {
+    this.sub = this._metricsService.getMetrics(this.id, this.entityType, this.properties).subscribe(
+      data => {
+        this.metrics = data;
+        this.status = this.errorCodes.DONE;
+        this.metricsResults.emit({
+          totalViews: this.metrics.totalViews,
+          totalDownloads: this.metrics.totalDownloads,
+          pageViews: this.metrics.pageViews
+        });
+      },
+      err => {
+        console.log(err);
+        if (err.status == '404') {
+          this.status = this.errorCodes.NOT_FOUND;
+        } else if (err.status == '500') {
+          this.status = this.errorCodes.ERROR;
+        } else {
+          this.status = this.errorCodes.NOT_AVAILABLE;
+        }
+        this.metricsResults.emit({
+          totalViews: 0,
+          totalDownloads: 0
+        });
+      }
+    );
+  }
+  
+  public close(event) {
+    if(event.value && this.state !== -1) {
+      this.timeouts.forEach(timeout => {
+        clearTimeout(timeout);
+      });
+      this.state = -1;
+      this.timeouts = [];
+    }
+  }
+  
+  
+  public toggle(event) {
+    event.stopPropagation();
+    if(this.state !== -1) {
+      this.timeouts.forEach(timeout => {
+        clearTimeout(timeout);
+      });
+      this.state = -1;
+      this.timeouts = [];
+    } else {
+      this.state++;
+      this.timeouts.push(setTimeout(() => {
+        this.state++;
+        this.timeouts.push(setTimeout(() => {
+          this.state++;
+          this.timeouts.push(setTimeout(() => {
+            this.state++;
+            this.timeouts.push(setTimeout(() => {
+              this.state++;
+            }, 400));
+          }, 800));
+        }, 300));
+      }, 100));
+    }
+  }
+  
+  public getKeys(map) {
+    return Array.from(map.keys());
+  }
+}

landingPages/landing-utils/metrics/metrics.module.ts

@@ -0,0 +1,28 @@
+/* This module contains all common components for all landing pages */
+
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+
+import {MetricsComponent} from './metrics.component';
+import {MetricsService} from '../../../services/metrics.service';
+
+import {ErrorMessagesModule} from '../../../utils/errorMessages.module';
+import {IFrameModule} from "../../../utils/iframe.module";
+import {ClickModule} from "../../../utils/click/click.module";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, ErrorMessagesModule, IFrameModule, ClickModule
+  ],
+  declarations: [
+    MetricsComponent
+  ],
+  providers:[
+    MetricsService
+   ],
+  exports: [
+    MetricsComponent
+  ]
+})
+export class MetricsModule { }

landingPages/project/project.component.html

@@ -544,6 +544,20 @@
                 <div class="sideInfoTitle uk-margin-small-bottom uk-margin-small-top">Share - Bookmark</div>
                 <div class="uk-margin-small-left uk-margin-small-right"><addThis></addThis></div>
               </div>
+              <!-- Metrics -->
+              <div *ngIf="hasMetrics" class="uk-margin-top">
+                <div class="sideInfoTitle uk-margin-small-bottom">Metrics</div>
+                <div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">
+                  <div></div><!-- Open Citations-->
+                  <div>
+                    <metrics [pageViews]="pageViews"
+                             [id]="projectId" [entityType]="'projects'" [entity]="'project'"
+                             [viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"
+                             (metricsResults)="metricsResults($event)" [properties]=properties>
+                    </metrics>
+                  </div>
+                </div>
+              </div>
               <div class="uk-margin-top">
                 <div class="sideInfoTitle uk-margin-small-bottom uk-margin-small-top">Share project's content</div>
                 <div class="app-box uk-padding-small uk-margin-small-left uk-margin-small-right">
@@ -642,19 +656,6 @@
                   </div>
                 </div>
               </div>
-              <!-- Metrics -->
-<!--              <div *ngIf="hasAltMetrics" class="uk-margin-top">-->
-<!--                <div class="sideInfoTitle uk-margin-small-bottom">Metrics</div>-->
-<!--                <div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">-->
-<!--                  <div></div>&lt;!&ndash; Open Citations&ndash;&gt;-->
-<!--                  <div>-->
-<!--                    <altmetrics *ngIf="hasAltMetrics" id="{{resultLandingInfo.identifiers.get('doi')[0]}}" type="doi">-->
-<!--                    </altmetrics>-->
-<!--                  </div>-->
-<!--                  <div></div>&lt;!&ndash; OpenAIRE Metrics &ndash;&gt;-->
-<!--                </div>-->
-<!--              </div>-->
-
               <!--              <div class="uk-margin-top">-->
 <!--                <div class="sideInfoTitle uk-margin-small-bottom">Share project's research results</div>-->
 <!--                <div>-->

landingPages/project/project.component.ts

@@ -447,6 +447,10 @@ export class ProjectComponent {
     this.totalDownloads = $event.totalDownloads;
     this.pageViews = $event.pageViews;
   }
+  
+  public get hasMetrics(): boolean {
+    return !(this.totalViews && this.totalDownloads && this.pageViews) || this.totalViews > 0 || this.totalDownloads > 0||this.pageViews > 0;
+  }
 
   public openStatistics() {
     this.statsClicked = true;

landingPages/project/project.module.ts

@@ -11,7 +11,7 @@ import {HtmlProjectReportService} from "../htmlProjectReport/htmlProjectReport.s
 import {ReportsServiceModule} from '../../services/reportsService.module';
 import {SearchResearchResultsServiceModule} from '../../services/searchResearchResultsService.module';
 
-import {MetricsModule} from '../landing-utils/metrics.module';
+import {MetricsModule} from '../landing-utils/metrics/metrics.module';
 import {LandingModule } from '../landing-utils/landing.module';
 import {LandingHeaderModule} from "../landing-utils/landing-header/landing-header.module";
 
@@ -26,6 +26,7 @@ import {IsRouteEnabled} from '../../error/isRouteEnabled.guard';
 import {Schema2jsonldModule} from '../../sharedComponents/schema2jsonld/schema2jsonld.module';
 import {SEOServiceModule } from '../../sharedComponents/SEO/SEOService.module';
 import {FeedbackModule} from "../feedback/feedback.module";
+import {AltMetricsModule} from "../../utils/altmetrics.module";
 
 @NgModule({
   imports: [
@@ -34,7 +35,7 @@ import {FeedbackModule} from "../feedback/feedback.module";
     IFrameModule, MetricsModule, ReportsServiceModule,
     SearchResearchResultsServiceModule, ProjectServiceModule,
     Schema2jsonldModule, SEOServiceModule, HelperModule,
-    LandingHeaderModule, MatSelectModule, FeedbackModule
+    LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule
   
   ],
   declarations: [

landingPages/result/resultLanding.component.html

@@ -195,232 +195,7 @@
               <b2note [id]="id" [properties]="properties"
                       [landingInfo]="resultLandingInfo"></b2note>
             </div>
-            <!--<ul #accordions class="custom-accordion" uk-accordion>
+          <!--  <ul #accordions class="custom-accordion" uk-accordion>
-              <li *ngIf="resultLandingInfo.references" (click)="activeTab='References'">
-                <a class="uk-accordion-title" href="#">
-                  References
-                  ({{resultLandingInfo.references.length | number}})
-                </a>
-                <div class="uk-accordion-content">
-                  <div>
-                    <div *ngIf="resultLandingInfo.references.length > pageSize" class="uk-margin-bottom">
-                      <span class="uk-h6">{{resultLandingInfo.references.length | number}}
-                        references, page {{referencesPage | number}}
-                        of {{totalPages(resultLandingInfo.references.length) | number}}</span>
-                      <paging-no-load class="uk-float-right" [currentPage]="referencesPage"
-                                      [totalResults]="resultLandingInfo.references.length" [size]="pageSize"
-                                      (pageChange)="updateReferencesPage($event)"></paging-no-load>
-                    </div>
-
-                    <div
-                        *ngFor="let item of resultLandingInfo.references.slice((referencesPage-1)*pageSize, referencesPage*pageSize)">
-                      <p *ngIf=" item && item['url']"
-                         class="custom-external custom-icon">
-                        <a href="{{item['url']}}" target="_blank">
-                          {{item['name']}}
-                        </a>
-                      </p>
-                      <p *ngIf="!item['url']" class="pseudo-external custom-icon">
-                        {{item['name']}}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </li>
-              <li *ngIf="resultLandingInfo.similarResearchResults" (click)="activeTab='Similar Research Results'">
-                <a class="uk-accordion-title" href="#">
-                  Similar Research Results
-                  ({{resultLandingInfo.similarResearchResults.length | number}})
-                </a>
-                <div class="uk-accordion-content">
-                  <div>
-                    <tabTable percentageName="similarity" [info]="resultLandingInfo.similarResearchResults"
-                              [properties]=properties></tabTable>
-                  </div>
-                </div>
-              </li>
-
-              <li *ngIf="resultLandingInfo.supplementaryResearchResults"
-                  (click)="activeTab='Supplementary Research Results'">
-                <a class="uk-accordion-title" href="#">
-                  Supplementary Research Results
-                  ({{resultLandingInfo.supplementaryResearchResults.length | number}})
-                </a>
-                <div class="uk-accordion-content">
-                  <div>
-                    <tabTable percentageName="trust" [info]="resultLandingInfo.supplementaryResearchResults"
-                              [properties]=properties></tabTable>
-                  </div>
-                </div>
-              </li>
-
-              <li *ngIf="resultLandingInfo.supplementedByResearchResults"
-                  (click)="activeTab='Research Results supplemented by this product'">
-                <a class="uk-accordion-title" href="#">
-                  Research Results supplemented by this
-                  <span *ngIf="type == 'publication' || type == 'software'">{{type}}</span>
-                  <span *ngIf="type == 'dataset'">research data</span>
-                  <span *ngIf="type == 'orp'">research product</span>
-                  ({{resultLandingInfo.supplementedByResearchResults.length | number}})
-                </a>
-                <div class="uk-accordion-content">
-                  <div>
-                    <tabTable percentageName="trust" [info]="resultLandingInfo.supplementedByResearchResults"
-                              [properties]=properties></tabTable>
-                  </div>
-                </div>
-              </li>
-
-              <li *ngIf="resultLandingInfo.organizations" (click)="activeTab='Related Organizations'">
-                <a class="uk-accordion-title" href="#">
-                  Related Organizations
-                  ({{resultLandingInfo.organizations.length | number}})
-                </a>
-                <div class="uk-accordion-content">
-                  <div>
-                    <div *ngIf="resultLandingInfo.organizations.length > pageSize" class="uk-margin-bottom">
-                      <span class="uk-text-bold">{{resultLandingInfo.organizations.length | number}}
-                        organizations, page {{organizationsPage | number}}
-                        of {{totalPages(resultLandingInfo.organizations.length) | number}}</span>
-                      <paging-no-load class="uk-float-right" [currentPage]="organizationsPage"
-                                      [totalResults]="resultLandingInfo.organizations.length" [size]="pageSize"
-                                      (pageChange)="updateOrganizationsPage($event)"></paging-no-load>
-                    </div>
-
-                    <table class="uk-table uk-table-small uk-table-divider uk-table-middle ">
-                      <tbody>
-                      <tr
-                          *ngFor="let organization of resultLandingInfo.organizations.slice((organizationsPage-1)*pageSize, organizationsPage*pageSize)">
-                        <td>
-                          <a *ngIf="(organization['id']) && ((organization['name']) || (organization['shortname']))"
-                             [queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active"
-                             routerLink="/search/organization">
-                            {{organization['name']}}
-                            <span *ngIf="organization.name && organization.shortname"> ( </span>
-                            <span *ngIf="organization.shortname">{{organization.shortname}}</span>
-                            <span *ngIf="organization.name && organization.shortname"> ) </span>
-                          </a>
-                          <p *ngIf="(!organization['id']) && ((organization['name']) || (organization['shortname']))">
-                            {{organization['name']}}
-                            <span *ngIf="organization.name && organization.shortname"> ( </span>
-                            <span *ngIf="organization.shortname">{{organization.shortname}}</span>
-                            <span *ngIf="organization.name && organization.shortname"> ) </span>
-                          </p>
-                          <div *ngIf="organization.country">{{organization.country}}</div>
-                          <div *ngIf="organization.websiteUrl">Website url:
-                            <a href="{{organization.websiteUrl}}" target="_blank">{{organization.websiteUrl}}</a>
-                          </div>
-                        </td>
-                        <td>
-                          <div *ngIf="organization['trust']" title="{{organization['trust']}}%">
-                            <div class="uk-text-center">{{organization['trust']}}%</div>
-                            <progress class="uk-progress uk-margin-remove" value="{{organization['trust']}}"
-                                      max="100"></progress>
-                          </div>
-                          <div *ngIf="!organization['trust']">
-                            <p>no trust available</p>
-                          </div>
-                        </td>
-                      </tr>
-                      </tbody>
-                    </table>
-
-                  </div>
-                </div>
-              </li>
-
-              <li *ngIf="resultLandingInfo.bioentities" (click)="activeTab='Bioentities'">
-                <a class="uk-accordion-title" href="#">
-                  Bioentities
-                  ({{bioentitiesNum | number}})
-                </a>
-                <div class="uk-accordion-content">
-                  <div *ngIf="resultLandingInfo.bioentities && bioentitiesNum > pageSize" class="uk-margin-bottom">
-                    <span class="uk-text-bold"> {{bioentitiesNum | number}}
-                      bioentities, page {{bioentitiesPage | number}} of {{totalPages(bioentitiesNum) | number}}</span>
-                    <paging-no-load class="uk-float-right" [currentPage]="bioentitiesPage"
-                                    [totalResults]="bioentitiesNum" [size]="pageSize"
-                                    (pageChange)="updateBioentitiesPage($event)"></paging-no-load>
-                  </div>
-
-                  <table id="bioentitiesTable" class="uk-table ">
-                    <tbody>
-                    <ng-container *ngFor="let key of getKeys(resultLandingInfo.bioentities) let i=index">
-                      <tr
-                          *ngFor="let keyIn of keysToArray(resultLandingInfo.bioentities.get(key)).slice((bioentitiesPage-1)*pageSize, bioentitiesPage*pageSize)">
-                        <td class="uk-text-center" *ngIf="keyIn">
-                                         <span class="custom-external custom-icon">
-                                             <a href="{{resultLandingInfo.bioentities.get(key).get(keyIn)}}"
-                                                target="_blank">
-                                                 {{keyIn}}
-                                             </a>
-                                         </span>
-                        </td>
-                        <td class="uk-text-center">
-                          {{key}}
-                        </td>
-                      </tr>
-                    </ng-container>
-                    </tbody>
-                  </table>
-                </div>
-              </li>
-
-              <li (click)="activeTab='Other Citations'"
-                  *ngIf="resultLandingInfo.openCitations && resultLandingInfo.openCitations.length > 0">
-                <a class="uk-accordion-title" href="#">
-                  Open Citations
-                  ({{resultLandingInfo.openCitations.length | number}})
-                </a>
-                <div class="uk-accordion-content">
-                  <div *ngIf="resultLandingInfo.openCitations.length > pageSize" class="uk-margin-bottom">
-                    <span class="uk-h6">{{resultLandingInfo.openCitations.length | number}}
-                      open citations, page {{openCitationsPage | number}}
-                      of {{totalPages(resultLandingInfo.openCitations.length) | number}}</span>
-                    <paging-no-load class="uk-float-right" [currentPage]="openCitationsPage"
-                                    [totalResults]="resultLandingInfo.openCitations.length" [size]="pageSize"
-                                    (pageChange)="updateOpenCitationsPage($event)"></paging-no-load>
-                  </div>
-
-                  <ul class="uk-list uk-list-divider  uk-margin">
-                    <li
-                        *ngFor="let result of resultLandingInfo.openCitations.slice((openCitationsPage-1)*pageSize, openCitationsPage*pageSize)">
-                      <h5 *ngIf="result.title">
-                              <span *ngIf="result.url"
-                                    class="custom-external">
-
-                                  <a *ngIf="result.title" href="{{result.url}}" target="_blank"
-                                     [innerHTML]="result.title">
-                                  </a>
-                                  <a *ngIf="!result.title" href="{{result.url}}" target="_blank">
-                                      [no title available]
-                                  </a>
-                              </span>
-                        <span *ngIf="result.title && !result.url" [innerHTML]="result.title"></span>
-                        <span *ngIf="!result.title && !result.url">
-                                  [no title available]
-                              </span>
-                      </h5>
-
-                      <div>
-                              <span *ngIf="result['authors']">
-                                  <span *ngFor="let author of result['authors'].slice(0,15)">
-                                      {{author}};
-                                  </span>
-                                  <span *ngIf="result['authors'].length > 15">...</span>
-                              </span>
-                        <span *ngIf="result.year">
-                                  ({{result.year}})
-                              </span>
-                      </div>
-                      <span *ngIf="result.doi">Identifier: <a *ngIf="result.doi" target="_blank"
-                                                              class="custom-external custom-icon"
-                                                              href="{{doiURL}}{{result.doi}}">doi: {{result.doi}}</a></span>
-                    </li>
-                  </ul>
-                </div>
-              </li>
-
               <li (click)="metricsClicked=true; activeTab='Metrics'">
                 <a class="uk-accordion-title" href="#">
                   Metrics
@@ -510,15 +285,21 @@
                              [availableOn]="resultLandingInfo.hostedBy_collectedFrom"></availableOn>
               </div>
               <!-- Metrics -->
-              <div *ngIf="hasAltMetrics" class="uk-margin-top">
+              <div *ngIf="hasAltMetrics || hasMetrics" class="uk-margin-top">
                 <div class="sideInfoTitle uk-margin-small-bottom">Metrics</div>
                 <div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">
                   <div></div><!-- Open Citations-->
-                  <div>
+                  <div *ngIf="hasAltMetrics">
                     <altmetrics *ngIf="hasAltMetrics" id="{{resultLandingInfo.identifiers.get('doi')[0]}}" type="doi">
                     </altmetrics>
                   </div>
-                  <div></div><!-- OpenAIRE Metrics -->
+                  <div *ngIf="hasMetrics">
+                    <metrics [pageViews]="pageViews"
+                             [id]="id" [entityType]="'results'" [entity]="title"
+                             [viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"
+                             (metricsResults)="metricsResults($event)" [properties]=properties>
+                    </metrics>
+                  </div>
                 </div>
               </div>
               <div class="uk-margin-top">

landingPages/result/resultLanding.component.ts

@@ -334,6 +334,10 @@ export class ResultLandingComponent {
     this.totalDownloads = $event.totalDownloads;
     this.pageViews = $event.pageViews;
   }
+  
+  public get hasMetrics(): boolean {
+    return !(this.totalViews && this.totalDownloads && this.pageViews) || this.totalViews > 0 || this.totalDownloads > 0||this.pageViews > 0;
+  }
 
   public buildCurationTooltip(): string {
     let tooltipContent: string = "<div class='uk-margin uk-padding-small'>";

landingPages/result/resultLanding.module.ts

@@ -4,7 +4,7 @@ import {FormsModule}                  from '@angular/forms';
 import {RouterModule}                 from '@angular/router';
 
 import {SharedModule}                 from '../../shared/shared.module';
-import {MetricsModule}                from '../landing-utils/metrics.module';
+import {MetricsModule}                from '../landing-utils/metrics/metrics.module';
 import {LandingModule}                from '../landing-utils/landing.module';
 import {CiteThisModule}               from '../landing-utils/citeThis/citeThis.module';
 import {IFrameModule}                 from '../../utils/iframe.module';

utils/click/click-outside-or-esc.directive.ts

@@ -61,17 +61,21 @@ export class ClickOutsideOrEsc implements OnInit, OnDestroy {
 
   onGlobalClick(event: MouseEvent) {
     if (event instanceof MouseEvent && this.listening === true) {
-      if (event.target['id'] != this.targetId) {
+      let element: HTMLElement = <HTMLElement>event.target;
-        this.clickOutside.emit({
+      while (element) {
-          target: (event.target || null),
+        if(element.id === this.targetId) {
-          value: false
+          this.clickOutside.emit({
-        });
+            target: (event.target || null),
-      } else {
+            value: false
-        this.clickOutside.emit({
+          });
-          target: (event.target || null),
+          return;
-          value: true
+        }
-        });
+        element = element.parentElement;
       }
+      this.clickOutside.emit({
+        target: (event.target || null),
+        value: true
+      });
     }
   }
 }

utils/iframe.component.ts

@@ -4,19 +4,30 @@ import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
 @Component({
   selector: 'i-frame',
   template: `
-    <div  class="iframeContainer uk-height-large" >
+    <div  *ngIf="!style" class="iframeContainer uk-height-large">
-      <iframe [src]="safeUrl"></iframe>  
+      <iframe  [src]="safeUrl"></iframe>
+    </div>
+    <div *ngIf="style"  class="iframeContainer" [ngStyle]="style">
+      <iframe [src]="safeUrl"></iframe>
     </div>
-    
   `
 })
 export class IFrameComponent {
   public safeUrl: SafeResourceUrl;
   @Input() url ;
+  @Input() width: number;
+  @Input() height: number;
+  public style: any;
+  
   constructor(private sanitizer: DomSanitizer) {
   }
   ngOnInit() {
     this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
-    //console.info("URL:" + this.safeUrl);
+    if(this.width && this.height) {
+      this.style = {
+        "width.px": this.width,
+        "height.px": this.height
+      }
+    }
   }
 }