MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix for 'collected from' link that was not working, coloring of new access icons and bip/usage icons, metrics tabs and charts - all landing pages

This commit is contained in:
Alex Martzios 2023-02-13 15:51:15 +02:00
parent 6551fc73d3
commit 5c9470a959
10 changed files with 581 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
landingPages/dataProvider/dataProvider.component.html
View File

@ -79,7 +79,7 @@
<!-- Actions --> <!-- Actions -->
<a (click)="openAddThisModal()" <a (click)="openAddThisModal()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="share" visuallyHidden="share"></icon> <icon [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-xsmall-left">Share</span> <span class="uk-margin-xsmall-left">Share</span>
</a> </a>
</div> </div>
@ -90,93 +90,121 @@
<div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'"> <div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="dataProviderInfo"> <ng-container *ngIf="dataProviderInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')"> <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<!-- schema.org--> <div class="uk-grid" uk-grid>
<schema2jsonld [data]=dataProviderInfo <div class="uk-width-expand">
[URL]="canonicalUrl" <!-- schema.org-->
type="datasource" <schema2jsonld [data]=dataProviderInfo
[otherURL]="(dataProviderInfo.provenance)?provenanceUrls:null"></schema2jsonld> [URL]="canonicalUrl"
<!-- Actions for mobile viewport --> type="datasource"
<div class="uk-flex uk-flex-right uk-margin-medium-bottom uk-hidden@s"> [otherURL]="(dataProviderInfo.provenance)?provenanceUrls:null"></schema2jsonld>
<div> <!-- Actions for mobile viewport -->
<a (click)="openAddThisModal()" <div class="uk-flex uk-flex-right uk-margin-medium-bottom uk-hidden@s">
[title]="'Share this '+openaireEntities.DATASOURCE+' in your social networks'"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'">
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<icon name="share" visuallyHidden="share"></icon>
</span>
</a>
</div>
</div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<landing-header [properties]="properties" [title]="dataProviderInfo.title.name"
[subTitle]="(dataProviderInfo.officialName
&& dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"
[types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"
[entityType]="getTypeName()"
[compatibility]="dataProviderInfo.compatibility" [aggregationStatus]="dataProviderInfo.aggregationStatus"
[thematic]="dataProviderInfo.thematic" [type]="type">
</landing-header>
<!-- Labels -->
<!-- To be moved inside the landing-header -->
<!-- <div class="uk-margin-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="dataProviderInfo.compatibility &&
!(dataProviderInfo.compatibility.info == 'not available' && type == 'service')">
<div>
<span class="uk-label uk-text-truncate" [class.uk-label-danger]="dataProviderInfo.compatibility.info == 'not available'" title="Compatibility">
<a *ngIf="dataProviderInfo.compatibility.id"
[queryParams]="{datasourceId: dataProviderInfo.compatibility.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToDataProvider.split('?')[0]">
{{dataProviderInfo.compatibility.info}}
<ng-container *ngIf="dataProviderInfo.compatibility.name">{{dataProviderInfo.compatibility.name}}</ng-container>
</a>
<span *ngIf="!dataProviderInfo.compatibility.id">
<ng-container *ngIf="dataProviderInfo.compatibility.info.toLowerCase() != 'not yet registered'">{{dataProviderInfo.compatibility.info}}</ng-container>
<ng-container *ngIf="dataProviderInfo.compatibility.info.toLowerCase() == 'not yet registered'">
{{dataProviderInfo.compatibility.info}} <span *ngIf="properties.adminToolsPortalType == 'eosc'">in OpenAIRE</span>
</ng-container>
</span>
<span *ngIf="dataProviderInfo.compatibility.name && !dataProviderInfo.compatibility.id">
{{dataProviderInfo.compatibility.name}}
</span>
</span>
</div>
</ng-container>
<ng-container *ngIf="dataProviderInfo.aggregationStatus && dataProviderInfo.aggregationStatus.fulltexts && dataProviderInfo.aggregationStatus.fulltexts > 0">
<div>
<span class="uk-label uk-text-truncate">OpenAIRE Text Mining</span>
</div>
</ng-container>
<ng-container *ngIf="dataProviderInfo.countries && removeUnknown(dataProviderInfo.countries).length > 0">
<ng-container *ngFor="let country of removeUnknown(dataProviderInfo.countries)">
<div> <div>
<span class="uk-label label-country" title="Country">{{country}}</span> <a (click)="openAddThisModal()"
[title]="'Share this '+openaireEntities.DATASOURCE+' in your social networks'"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'">
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<icon name="share" visuallyHidden="share"></icon>
</span>
</a>
</div> </div>
</ng-container>
</ng-container>
<ng-container *ngIf="dataProviderInfo.thematic">
<div>
<span class="uk-label uk-text-truncate">Thematic</span>
</div> </div>
</ng-container>
</div> --> <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<!-- Web Page -->
<div *ngIf="dataProviderInfo.title && dataProviderInfo.title.url" <landing-header [properties]="properties" [title]="dataProviderInfo.title.name"
class="uk-text-small uk-margin-small-top"> [subTitle]="(dataProviderInfo.officialName
<span class="uk-text-meta">Web page: </span> && dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"
<a [href]="dataProviderInfo.title.url" target="_blank" [types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"
class="uk-button uk-button-text uk-text-lowercase uk-text-normal custom-external"> [entityType]="getTypeName()"
{{dataProviderInfo.title.url}} [compatibility]="dataProviderInfo.compatibility"
</a> [aggregationStatus]="dataProviderInfo.aggregationStatus"
</div> [thematic]="dataProviderInfo.thematic" [type]="type">
</landing-header>
<!-- Identifiers -->
<div *ngIf="dataProviderInfo.identifiers && dataProviderInfo.identifiers.size > 0" class="uk-margin-small-top uk-text-small"> <!-- Labels -->
<showIdentifiers [identifiers]="dataProviderInfo.identifiers" [showViewAll]="true"></showIdentifiers> <!-- Moved inside the landing-header -->
<!-- <div class="uk-margin-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="dataProviderInfo.compatibility &&
!(dataProviderInfo.compatibility.info == 'not available' && type == 'service')">
<div>
<span class="uk-label uk-text-truncate" [class.uk-label-danger]="dataProviderInfo.compatibility.info == 'not available'" title="Compatibility">
<a *ngIf="dataProviderInfo.compatibility.id"
[queryParams]="{datasourceId: dataProviderInfo.compatibility.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToDataProvider.split('?')[0]">
{{dataProviderInfo.compatibility.info}}
<ng-container *ngIf="dataProviderInfo.compatibility.name">{{dataProviderInfo.compatibility.name}}</ng-container>
</a>
<span *ngIf="!dataProviderInfo.compatibility.id">
<ng-container *ngIf="dataProviderInfo.compatibility.info.toLowerCase() != 'not yet registered'">{{dataProviderInfo.compatibility.info}}</ng-container>
<ng-container *ngIf="dataProviderInfo.compatibility.info.toLowerCase() == 'not yet registered'">
{{dataProviderInfo.compatibility.info}} <span *ngIf="properties.adminToolsPortalType == 'eosc'">in OpenAIRE</span>
</ng-container>
</span>
<span *ngIf="dataProviderInfo.compatibility.name && !dataProviderInfo.compatibility.id">
{{dataProviderInfo.compatibility.name}}
</span>
</span>
</div>
</ng-container>
<ng-container *ngIf="dataProviderInfo.aggregationStatus && dataProviderInfo.aggregationStatus.fulltexts && dataProviderInfo.aggregationStatus.fulltexts > 0">
<div>
<span class="uk-label uk-text-truncate">OpenAIRE Text Mining</span>
</div>
</ng-container>
<ng-container *ngIf="dataProviderInfo.countries && removeUnknown(dataProviderInfo.countries).length > 0">
<ng-container *ngFor="let country of removeUnknown(dataProviderInfo.countries)">
<div>
<span class="uk-label label-country" title="Country">{{country}}</span>
</div>
</ng-container>
</ng-container>
<ng-container *ngIf="dataProviderInfo.thematic">
<div>
<span class="uk-label uk-text-truncate">Thematic</span>
</div>
</ng-container>
</div> -->
<!-- Web Page -->
<div *ngIf="dataProviderInfo.title && dataProviderInfo.title.url"
class="uk-text-small uk-margin-small-top">
<span class="uk-text-meta">Web page: </span>
<a [href]="dataProviderInfo.title.url" target="_blank"
class="uk-button uk-button-text uk-text-lowercase uk-text-normal custom-external">
{{dataProviderInfo.title.url}}
</a>
</div>
<!-- Identifiers -->
<div *ngIf="dataProviderInfo.identifiers && dataProviderInfo.identifiers.size > 0" class="uk-margin-small-top uk-text-small">
<showIdentifiers [identifiers]="dataProviderInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div>
</div>
<div *ngIf="dataProviderInfo && hasMetrics">
<div class="landing-metrics-card uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
<div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
<div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" [ratio]="0.8" [flex]="true"></icon></div>
<div *ngIf="totalViews" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div>
</div>
<div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">Downloads</div>
<div *ngIf="totalViews" class="cell">Views</div>
</div>
<div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">{{totalDownloads | number}}</div>
<div *ngIf="totalViews" class="cell">{{totalViews | number}}</div>
</div>
</div>
</div>
<div class="uk-width-1-5 uk-flex uk-flex-bottom">
<img src="assets/common-assets/metrics-badge.svg" loading="lazy" alt="Metrics badge">
</div>
</div>
</div>
</div> </div>
</div> </div>
@ -220,6 +248,9 @@
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)" || fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Related '+openaireEntities.DATASOURCES" [tabId]="'relatedDatasources'"> [tabTitle]="'Related '+openaireEntities.DATASOURCES" [tabId]="'relatedDatasources'">
</my-tab> </my-tab>
<my-tab *ngIf="dataProviderInfo && hasMetrics"
[tabTitle]="'Metrics'" [tabId]="'metrics'">
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)" || fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Statistics'" customClass="statistics" [tabId]="'statistics'" [active]="false"> [tabTitle]="'Statistics'" customClass="statistics" [tabId]="'statistics'" [active]="false">
@ -436,6 +467,93 @@
</relatedDatasourcesTab> </relatedDatasourcesTab>
</div> </div>
</ng-container> </ng-container>
<!-- Metrics -->
<ng-container *ngIf="dataProviderInfo && hasMetrics">
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li>
<a href="#">Overview</a>
</li>
<li *ngIf="totalDownloads ||totalViews">
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
</li>
</ul>
<ul class="uk-switcher uk-margin-large-top">
<!-- overview -->
<li>
<div *ngIf="totalDownloads || totalViews">
<div class="uk-grid-divider" uk-grid>
<div>
<div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
<span class="uk-display-block uk-text-bolder">UsageCounts</span>
</div>
<div>
<table class="uk-table uk-table-small">
<tbody>
<tr *ngIf="totalDownloads">
<td class="uk-padding-remove-top">
<icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-top">
Downloads
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{totalDownloads | number}}
</td>
</tr>
<tr *ngIf="totalViews">
<td class="uk-padding-remove-bottom">
<icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-bottom">
Views
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{totalViews | number}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</li>
<!-- usage -->
<li>
<div class="uk-flex uk-flex-center uk-flex-middle">
<div class="uk-margin-large-right">
<div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(totalDownloads)}}</div>
<div class="uk-text-bold">Downloads</div>
</div>
<div *ngIf="totalViews" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(totalViews)}}</div>
<div class="uk-text-bold">Views</div>
</div>
</div>
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
<div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right">
<i-frame [height]="300" [url]="downloadsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
<div *ngIf="metricsClicked && viewsFrameUrl && totalViews" class="uk-margin-large-right">
<i-frame [height]="300" [url]="viewsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1">
</i-frame>
</div>
</ng-container>
</div>
<div class="uk-text-center uk-margin-large-top">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
</li>
</ul>
</div>
</ng-container>
<!--Statistics--> <!--Statistics-->
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"> || fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">

36
landingPages/dataProvider/dataProvider.component.ts
View File

@ -25,9 +25,11 @@ import {SearchResult} from "../../utils/entities/searchResult";
import {ResultPreview} from "../../utils/result-preview/result-preview"; import {ResultPreview} from "../../utils/result-preview/result-preview";
import {IndexInfoService} from "../../utils/indexInfo.service"; import {IndexInfoService} from "../../utils/indexInfo.service";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {Subscriber} from "rxjs"; import {Subscriber, Subscription, zip} from "rxjs";
import {TabComponent} from "../../utils/tabs/tab.component"; import {TabComponent} from "../../utils/tabs/tab.component";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
import {MetricsService} from '../../services/metrics.service';
import {NumberUtils} from '../../utils/number-utils.class';
declare var ResizeObserver; declare var ResizeObserver;
@ -63,7 +65,7 @@ export class DataProviderComponent {
public downloadsFrameUrl: string; public downloadsFrameUrl: string;
public totalViews: number; public totalViews: number;
public totalDownloads: number; public totalDownloads: number;
public pageViews: number; // public pageViews: number;
// Statistics tab variables // Statistics tab variables
public statsClicked: boolean = false; public statsClicked: boolean = false;
@ -141,6 +143,7 @@ export class DataProviderComponent {
// public shouldSticky: boolean = true; // public shouldSticky: boolean = true;
subscriptions = []; subscriptions = [];
private sub: Subscription;
properties: EnvProperties = properties; properties: EnvProperties = properties;
public openaireEntities = OpenaireEntities; public openaireEntities = OpenaireEntities;
@ -157,6 +160,7 @@ export class DataProviderComponent {
private helper: HelperService, private helper: HelperService,
private _location: Location, private _location: Location,
private indexInfoService: IndexInfoService, private indexInfoService: IndexInfoService,
private metricsService: MetricsService,
private cdr: ChangeDetectorRef) { private cdr: ChangeDetectorRef) {
this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService); this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService);
this.fetchDatasets = new FetchResearchResults(this._searchResearchResultsService); this.fetchDatasets = new FetchResearchResults(this._searchResearchResultsService);
@ -210,6 +214,7 @@ export class DataProviderComponent {
} }
}); });
} }
this.getMetrics();
})); }));
} }
@ -665,11 +670,23 @@ export class DataProviderComponent {
public metricsResults($event) { public metricsResults($event) {
this.totalViews = $event.totalViews; this.totalViews = $event.totalViews;
this.totalDownloads = $event.totalDownloads; this.totalDownloads = $event.totalDownloads;
this.pageViews = $event.pageViews; // this.pageViews = $event.pageViews;
} }
private getMetrics() {
let obs;
obs = zip(this.metricsService.getMetricsNumber(this.datasourceId, "usagestats.views.repository.local", this.properties),
this.metricsService.getMetricsNumber(this.datasourceId, "usagestats.downloads.repository.local", this.properties));
this.sub = obs.subscribe(data => {
console.log(data);
this.totalViews = data[0];
this.totalDownloads = data[1];
this.cdr.detectChanges();
});
}
public get hasMetrics(): boolean { public get hasMetrics(): boolean {
return !(this.totalViews != null && this.totalDownloads != null && this.pageViews != null) || this.totalViews > 0 || this.totalDownloads > 0 || this.pageViews > 0; return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0;
} }
// public openStatistics() { // public openStatistics() {
@ -827,4 +844,15 @@ export class DataProviderComponent {
this.descriptionModal.alertTitle = "Description"; this.descriptionModal.alertTitle = "Description";
this.descriptionModal.open(); this.descriptionModal.open();
} }
public clickedUsageMetrics() {
setTimeout( () => {
this.metricsClicked = true;
});
}
public formatNumber(num: number | string) {
let formatted = NumberUtils.roundNumber(+num);
return formatted.number + formatted.size;
}
} }

12
landingPages/landing-utils/availableOn.component.ts
View File

@ -11,9 +11,9 @@ declare var UIkit;
<div class="uk-flex uk-flex-middle uk-flex-center"> <div class="uk-flex uk-flex-middle uk-flex-center">
<a *ngIf="availableOn[0].downloadUrl" [href]="availableOn[0].downloadUrl" target="_blank" <a *ngIf="availableOn[0].downloadUrl" [href]="availableOn[0].downloadUrl" target="_blank"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder custom-external"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder custom-external">
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'uk-text-success' : 'uk-text-meta')" <span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'uk-text-meta')"
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'"> uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
<icon [name]="availableOn[0].accessRightIcon" flex="true" ratio="0.8"></icon> <icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="0.8"></icon>
</span> </span>
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span> <span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
</a> </a>
@ -24,9 +24,9 @@ declare var UIkit;
<div #dropElement uk-drop="mode: click; pos: bottom-left;" class="download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small"> <div #dropElement uk-drop="mode: click; pos: bottom-left;" class="download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small">
<div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top"> <div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top">
<span [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')" <span [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'open_access' ? 'open-access' : 'uk-text-meta')"
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'"> uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
<icon [name]="instance.accessRightIcon" flex="true"></icon> <icon [name]="instance.accessRightIcon" [flex]="true"></icon>
</span> </span>
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical"> <div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
<span class="uk-text-emphasis"> <span class="uk-text-emphasis">
@ -63,7 +63,7 @@ declare var UIkit;
<!-- <div class="uk-margin-small-bottom uk-flex uk-flex-between"> <!-- <div class="uk-margin-small-bottom uk-flex uk-flex-between">
<span *ngIf="viewAll && !lessBtn" class="clickable uk-h6 uk-flex uk-flex-middle" (click)="viewLessClick()"> <span *ngIf="viewAll && !lessBtn" class="clickable uk-h6 uk-flex uk-flex-middle" (click)="viewLessClick()">
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon> <icon class="uk-margin-small-right" name="arrow_back" [flex]="true" ratio="1.2"></icon>
{{title}} {{title}}
</span> </span>
<span *ngIf="!viewAll || lessBtn" class="uk-margin-small-bottom uk-flex uk-flex-middle"> <span *ngIf="!viewAll || lessBtn" class="uk-margin-small-bottom uk-flex uk-flex-middle">
@ -80,7 +80,7 @@ declare var UIkit;
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'"> uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
<span [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')" <span [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')"
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'"> uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
<icon [name]="instance.accessRightIcon" flex="true" type="outlined"></icon> <icon [name]="instance.accessRightIcon" [flex]="true" type="outlined"></icon>
</span> </span>
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical"> <div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
<span class="uk-text-emphasis"> <span class="uk-text-emphasis">

25
landingPages/landing-utils/landing-header/landing-header.component.ts
View File

@ -17,9 +17,9 @@ import {OpenaireEntities} from "src/app/openaireLibrary/utils/properties/searchF
<div class="uk-margin-bottom uk-text-xsmall uk-text-emphasis uk-flex uk-flex-middle uk-flex-wrap"> <div class="uk-margin-bottom uk-text-xsmall uk-text-emphasis uk-flex uk-flex-middle uk-flex-wrap">
<!-- oa --> <!-- oa -->
<ng-container <ng-container
*ngIf="(openAccessMandatePublications != undefined && openAccessMandatePublications) || (openAccessMandateDatasets != undefined && openAccessMandateDatasets)"> *ngIf="(openAccessMandatePublications != undefined && openAccessMandatePublications) || (openAccessMandateDatasets != undefined && openAccessMandateDatasets)">
<span class="uk-margin-xsmall-right uk-text-success"> <span class="uk-margin-xsmall-right open-access">
<icon name="open_access" flex="true" ratio="0.8"></icon> <icon name="open_access" [flex]="true" [ratio]="0.8"></icon>
</span> </span>
<span class="uk-text-bolder" <span class="uk-text-bolder"
*ngIf="openAccessMandatePublications != undefined && openAccessMandatePublications && openAccessMandateDatasets != undefined && openAccessMandateDatasets"> *ngIf="openAccessMandatePublications != undefined && openAccessMandatePublications && openAccessMandateDatasets != undefined && openAccessMandateDatasets">
@ -38,25 +38,25 @@ import {OpenaireEntities} from "src/app/openaireLibrary/utils/properties/searchF
<!-- types --> <!-- types -->
<span *ngIf="entityType" class="uk-margin-xsmall-right"> <span *ngIf="entityType" class="uk-margin-xsmall-right">
<icon *ngIf="entityType.toLowerCase() == 'publication'" name="description" type="outlined" <icon *ngIf="entityType.toLowerCase() == 'publication'" name="description" type="outlined"
[flex]="true" ratio="0.8"></icon> [flex]="true" [ratio]="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'research data'" name="database" type="outlined" <icon *ngIf="entityType.toLowerCase() == 'research data'" name="database" type="outlined"
[flex]="true" ratio="0.8"></icon> [flex]="true" [ratio]="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'research software'" name="integration_instructions" <icon *ngIf="entityType.toLowerCase() == 'research software'" name="integration_instructions"
type="outlined" [flex]="true" ratio="0.8"></icon> type="outlined" [flex]="true" [ratio]="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'other research product'" name="apps" type="outlined" <icon *ngIf="entityType.toLowerCase() == 'other research product'" name="apps" type="outlined"
[flex]="true" ratio="0.8"></icon> [flex]="true" [ratio]="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'project'" name="assignment_turned_in" type="outlined" <icon *ngIf="entityType.toLowerCase() == 'project'" name="assignment_turned_in" type="outlined"
[flex]="true" ratio="0.8"></icon> [flex]="true" [ratio]="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'data source'" name="note_add" type="outlined" <icon *ngIf="entityType.toLowerCase() == 'data source'" name="note_add" type="outlined"
[flex]="true" ratio="0.8"></icon> [flex]="true" [ratio]="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'organization'" name="corporate_fare" type="outlined" <icon *ngIf="entityType.toLowerCase() == 'organization'" name="corporate_fare" type="outlined"
[flex]="true" ratio="0.8"></icon> [flex]="true" [ratio]="0.8"></icon>
</span> </span>
<span *ngIf="entityType" class="uk-text-capitalize uk-text-bolder" style="text-decoration: underline;"> <span *ngIf="entityType" class="uk-text-capitalize uk-text-bolder" style="text-decoration: underline;">
{{entityType}} {{entityType}}
</span> </span>
<span *ngIf="entityType && types && removeUnknown(types, true).length > 0"> <span *ngIf="entityType && types && removeUnknown(types, true).length > 0">
<icon name="keyboard_double_arrow_right" [flex]="true" ratio="0.8"></icon> <icon name="keyboard_double_arrow_right" [flex]="true" [ratio]="0.8"></icon>
</span> </span>
<span *ngIf="types && removeUnknown(types, true).length > 0" class="uk-text-italic"> <span *ngIf="types && removeUnknown(types, true).length > 0" class="uk-text-italic">
{{removeUnknown(types, true).join(' , ')}} {{removeUnknown(types, true).join(' , ')}}
@ -120,8 +120,7 @@ import {OpenaireEntities} from "src/app/openaireLibrary/utils/properties/searchF
<!-- data provider labels --> <!-- data provider labels -->
<ng-container *ngIf="compatibility && !(compatibility.info == 'not available' && type == 'service')"> <ng-container *ngIf="compatibility && !(compatibility.info == 'not available' && type == 'service')">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span> <span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span> <span title="Compatibility">
<!-- link not working - dont know why -->
<a *ngIf="compatibility.id" <a *ngIf="compatibility.id"
[queryParams]="{datasourceId: compatibility.id}" routerLinkActive="router-link-active" [queryParams]="{datasourceId: compatibility.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToDataProvider.split('?')[0]"> [routerLink]="properties.searchLinkToDataProvider.split('?')[0]">

3
landingPages/landing-utils/landing-header/landing-header.module.ts
View File

@ -5,9 +5,10 @@ import {LandingModule} from "../landing.module";
import {ShowAuthorsModule} from "../../../utils/authors/showAuthors.module"; import {ShowAuthorsModule} from "../../../utils/authors/showAuthors.module";
import {IconsModule} from "src/app/openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "src/app/openaireLibrary/utils/icons/icons.module";
import {ShowPublisherModule} from "../showPublisher.module"; import {ShowPublisherModule} from "../showPublisher.module";
import {RouterModule} from "@angular/router";
@NgModule({ @NgModule({
imports: [CommonModule, LandingModule, ShowAuthorsModule, IconsModule, ShowPublisherModule], imports: [CommonModule, LandingModule, ShowAuthorsModule, IconsModule, ShowPublisherModule, RouterModule],
declarations: [LandingHeaderComponent], declarations: [LandingHeaderComponent],
exports: [LandingHeaderComponent] exports: [LandingHeaderComponent]
}) })

131
landingPages/project/project.component.html
View File

@ -152,7 +152,7 @@
<ng-container *ngIf="projectInfo"> <ng-container *ngIf="projectInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')"> <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<div class="uk-grid" uk-grid> <div class="uk-grid" uk-grid>
<div class="info uk-width-expand"> <div class="uk-width-expand">
<!-- schema.org--> <!-- schema.org-->
<schema2jsonld [data]=projectInfo <schema2jsonld [data]=projectInfo
[URL]="properties.domain+properties.baseLink+properties.searchLinkToProject+projectId" [URL]="properties.domain+properties.baseLink+properties.searchLinkToProject+projectId"
@ -331,30 +331,28 @@
</div> </div>
</div> </div>
</div> </div>
<div class="metrics-box"> <div *ngIf="projectInfo && hasMetrics">
<!-- <div *ngIf="projectInfo"> <div class="landing-metrics-card uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
<div class="uk-card uk-card-secondary uk-flex uk-padding-small metrics-background"> <div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-width-expand"> <div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell"> <div>
<div> <div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" [ratio]="0.8" [flex]="true"></icon></div>
<div class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" ratio="0.8" [flex]="true"></icon></div> <div *ngIf="totalViews" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div>
<div class="cell uk-flex uk-flex-middle"><icon name="visibility" ratio="0.8" [flex]="true"></icon></div> </div>
</div> <div>
<div> <div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">Downloads</div>
<div class="cell uk-margin-xsmall-bottom">Downloads</div> <div *ngIf="totalViews" class="cell">Views</div>
<div class="cell">Views</div> </div>
</div> <div class="uk-text-uppercase uk-text-bolder">
<div class="uk-text-uppercase uk-text-bolder"> <div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">{{totalDownloads | number}}</div>
<div class="cell uk-margin-xsmall-bottom"> - </div> <div *ngIf="totalViews" class="cell">{{totalViews | number}}</div>
<div class="cell"> - </div>
</div>
</div> </div>
</div> </div>
<div class="uk-width-1-5 uk-flex uk-flex-bottom">
<img src="assets/common-assets/metrics-badge.svg" loading="lazy" alt="Metrics badge">
</div>
</div> </div>
</div> --> <div class="uk-width-1-5 uk-flex uk-flex-bottom">
<img src="assets/common-assets/metrics-badge.svg" loading="lazy" alt="Metrics badge">
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -386,6 +384,9 @@
[tabTitle]="openaireEntities.OTHER" [tabNumber]="fetchOrps.searchUtils.totalResults" [tabTitle]="openaireEntities.OTHER" [tabNumber]="fetchOrps.searchUtils.totalResults"
[tabId]="'other'"></my-tab> [tabId]="'other'"></my-tab>
<my-tab [tabTitle]="'Dmps'" [tabNumber]="fetchDmps.searchUtils.totalResults > 0 ? fetchDmps.searchUtils.totalResults : ''" [tabId]="'dmps'"></my-tab> <my-tab [tabTitle]="'Dmps'" [tabNumber]="fetchDmps.searchUtils.totalResults > 0 ? fetchDmps.searchUtils.totalResults : ''" [tabId]="'dmps'"></my-tab>
<my-tab *ngIf="projectInfo && hasMetrics"
[tabTitle]="'Metrics'" [tabId]="'metrics'">
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)" || fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Statistics'" customClass="statistics" [tabId]="'statistics'" [active]="false"></my-tab> [tabTitle]="'Statistics'" customClass="statistics" [tabId]="'statistics'" [active]="false"></my-tab>
@ -500,6 +501,92 @@
</search-tab> </search-tab>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="projectInfo && hasMetrics">
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li>
<a href="#">Overview</a>
</li>
<li *ngIf="totalDownloads ||totalViews">
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
</li>
</ul>
<ul class="uk-switcher uk-margin-large-top">
<!-- overview -->
<li>
<div *ngIf="totalDownloads || totalViews">
<div class="uk-grid-divider" uk-grid>
<div>
<div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
<span class="uk-display-block uk-text-bolder">UsageCounts</span>
</div>
<div>
<table class="uk-table uk-table-small">
<tbody>
<tr *ngIf="totalDownloads">
<td class="uk-padding-remove-top">
<icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-top">
Downloads
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{totalDownloads | number}}
</td>
</tr>
<tr *ngIf="totalViews">
<td class="uk-padding-remove-bottom">
<icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-bottom">
Views
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{totalViews | number}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</li>
<!-- usage -->
<li>
<div class="uk-flex uk-flex-center uk-flex-middle">
<div class="uk-margin-large-right">
<div *ngIf="totalDownloads" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(totalDownloads)}}</div>
<div class="uk-text-bold">Downloads</div>
</div>
<div *ngIf="totalViews" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(totalViews)}}</div>
<div class="uk-text-bold">Views</div>
</div>
</div>
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
<div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right">
<i-frame [height]="300" [url]="downloadsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
<div *ngIf="metricsClicked && viewsFrameUrl && totalViews" class="uk-margin-large-right">
<i-frame [height]="300" [url]="viewsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1">
</i-frame>
</div>
</ng-container>
</div>
<div class="uk-text-center uk-margin-large-top">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
</li>
</ul>
</div>
</ng-container>
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"> || fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<div id="statistics" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="statistics" class="landing-section uk-padding uk-padding-remove-horizontal">

36
landingPages/project/project.component.ts
View File

@ -25,10 +25,12 @@ import {StringUtils} from "../../utils/string-utils.class";
import {ResultPreview} from "../../utils/result-preview/result-preview"; import {ResultPreview} from "../../utils/result-preview/result-preview";
import {SearchResult} from "../../utils/entities/searchResult"; import {SearchResult} from "../../utils/entities/searchResult";
import {IndexInfoService} from "../../utils/indexInfo.service"; import {IndexInfoService} from "../../utils/indexInfo.service";
import {Subscriber} from "rxjs"; import {Subscriber, zip, Subscription} from "rxjs";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {Option} from "../../sharedComponents/input/input.component"; import {Option} from "../../sharedComponents/input/input.component";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
import {MetricsService} from '../../services/metrics.service';
import {NumberUtils} from '../../utils/number-utils.class';
declare var ResizeObserver; declare var ResizeObserver;
@ -50,7 +52,7 @@ export class ProjectComponent {
public downloadsFrameUrl: string; public downloadsFrameUrl: string;
public totalViews: number; public totalViews: number;
public totalDownloads: number; public totalDownloads: number;
public pageViews: number; // public pageViews: number;
// Statistics tab variables // Statistics tab variables
public statsClicked: boolean; public statsClicked: boolean;
@ -160,6 +162,7 @@ export class ProjectComponent {
// public shouldSticky: boolean = true; // public shouldSticky: boolean = true;
subscriptions = []; subscriptions = [];
private sub: Subscription;
properties: EnvProperties; properties: EnvProperties;
public openaireEntities = OpenaireEntities; public openaireEntities = OpenaireEntities;
@ -176,6 +179,7 @@ export class ProjectComponent {
private _reportsService: ReportsService, private _reportsService: ReportsService,
private htmlService: HtmlProjectReportService, private htmlService: HtmlProjectReportService,
private indexInfoService: IndexInfoService, private indexInfoService: IndexInfoService,
private metricsService: MetricsService,
private cdr: ChangeDetectorRef) {} private cdr: ChangeDetectorRef) {}
ngOnInit() { ngOnInit() {
@ -230,6 +234,8 @@ export class ProjectComponent {
this.downloadURLAPI = this.properties.csvAPIURL; this.downloadURLAPI = this.properties.csvAPIURL;
this.createClipboard(); this.createClipboard();
this.getMetrics();
})); }));
} }
@ -552,11 +558,22 @@ export class ProjectComponent {
public metricsResults($event) { public metricsResults($event) {
this.totalViews = $event.totalViews; this.totalViews = $event.totalViews;
this.totalDownloads = $event.totalDownloads; this.totalDownloads = $event.totalDownloads;
this.pageViews = $event.pageViews; // this.pageViews = $event.pageViews;
} }
private getMetrics() {
let obs;
obs = zip(this.metricsService.getMetricsNumber(this.projectId, "usagestats.projects.views", this.properties),
this.metricsService.getMetricsNumber(this.projectId, "usagestats.projects.downloads", this.properties));
this.sub = obs.subscribe(data => {
this.totalViews = data[0];
this.totalDownloads = data[1];
this.cdr.detectChanges();
});
}
public get hasMetrics(): boolean { public get hasMetrics(): boolean {
return !(this.totalViews != null && this.totalDownloads != null && this.pageViews != null) || this.totalViews > 0 || this.totalDownloads > 0||this.pageViews > 0; return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0;
} }
public viewAllOrganizationsClick() { public viewAllOrganizationsClick() {
@ -961,4 +978,15 @@ export class ProjectComponent {
this.descriptionModal.alertTitle = "Description"; this.descriptionModal.alertTitle = "Description";
this.descriptionModal.open(); this.descriptionModal.open();
} }
public clickedUsageMetrics() {
setTimeout( () => {
this.metricsClicked = true;
});
}
public formatNumber(num: number | string) {
let formatted = NumberUtils.roundNumber(+num);
return formatted.number + formatted.size;
}
} }

325
landingPages/result/resultLanding.component.html
View File

@ -115,7 +115,7 @@
<!-- Versions --> <!-- Versions -->
<a *ngIf="resultLandingInfo?.deletedByInferenceIds" (click)="openDeletedByInference()" <a *ngIf="resultLandingInfo?.deletedByInferenceIds" (click)="openDeletedByInference()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="versions" visuallyHidden="versions"></icon> <icon [flex]="true" [ratio]="0.8" name="versions" visuallyHidden="versions"></icon>
<span class="uk-margin-xsmall-left"> <span class="uk-margin-xsmall-left">
View all {{resultLandingInfo.deletedByInferenceIds.length}} versions View all {{resultLandingInfo.deletedByInferenceIds.length}} versions
</span> </span>
@ -127,17 +127,17 @@
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])" [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim" routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.7" name="link_to" visuallyHidden="link"></icon> <icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
<span class="uk-margin-xsmall-left">Link to</span> <span class="uk-margin-xsmall-left">Link to</span>
</a> </a>
<a (click)="openAddThisModal()" <a (click)="openAddThisModal()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="share" visuallyHidden="share"></icon> <icon [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-xsmall-left">Share</span> <span class="uk-margin-xsmall-left">Share</span>
</a> </a>
<a (click)="openCiteModal()" <a (click)="openCiteModal()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.7" name="cite" visuallyHidden="cite"></icon> <icon [flex]="true" [ratio]="0.7" name="cite" visuallyHidden="cite"></icon>
<span class="uk-margin-xsmall-left">Cite</span> <span class="uk-margin-xsmall-left">Cite</span>
</a> </a>
<ng-container *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'" > <ng-container *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'" >
@ -464,14 +464,14 @@
<a href="#">Social</a> <a href="#">Social</a>
</li> </li>
<li *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views"> <li *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
<a href="#">Usage</a> <a href="#" (click)="clickedUsageMetrics()">Usage</a>
</li> </li>
</ul> </ul>
<ul class="uk-switcher uk-margin-large-top"> <ul class="uk-switcher uk-margin-large-top">
<!-- overview --> <!-- overview -->
<li> <li>
<div class="uk-flex uk-flex-wrap landing-metrics-overview"> <div class="uk-flex uk-flex-wrap landing-metrics-overview">
<div id="bip" *ngIf="resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse"> <div *ngIf="resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse">
<div class="uk-grid-divider" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
@ -486,18 +486,18 @@
<tbody> <tbody>
<tr> <tr>
<td class="uk-padding-remove-top"> <td class="uk-padding-remove-top">
<icon name="cite" [flex]="true"></icon> <icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td class="uk-padding-remove-top"> <td class="uk-padding-remove-top">
Citations Citations
</td> </td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"> <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.citations}} {{resultLandingInfo.measure.citations | number}}
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<icon name="fire" [flex]="true"></icon> <icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td> <td>
Popularity Popularity
@ -508,7 +508,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<icon name="landmark" [flex]="true"></icon> <icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td> <td>
Influence Influence
@ -519,7 +519,7 @@
</tr> </tr>
<tr> <tr>
<td class="uk-padding-remove-bottom"> <td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true"></icon> <icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td class="uk-padding-remove-bottom"> <td class="uk-padding-remove-bottom">
Impulse Impulse
@ -533,10 +533,10 @@
</div> </div>
</div> </div>
</div> </div>
<div id="altmetrics" *ngIf="hasAltMetrics"> <div *ngIf="hasAltMetrics">
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics> <altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics>
</div> </div>
<div id="usagecounts" *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views"> <div *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
<div class="uk-grid-divider" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
@ -548,26 +548,26 @@
<div> <div>
<table class="uk-table uk-table-small"> <table class="uk-table uk-table-small">
<tbody> <tbody>
<tr> <tr *ngIf="resultLandingInfo.measure.downloads">
<td class="uk-padding-remove-top"> <td class="uk-padding-remove-top">
<icon name="download" [flex]="true" customClass="uk-text-background"></icon> <icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td> </td>
<td class="uk-padding-remove-top"> <td class="uk-padding-remove-top">
Downloads Downloads
</td> </td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"> <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.downloads}} {{resultLandingInfo.measure.downloads | number}}
</td> </td>
</tr> </tr>
<tr> <tr *ngIf="resultLandingInfo.measure.views">
<td class="uk-padding-remove-bottom"> <td class="uk-padding-remove-bottom">
<icon name="visibility" [flex]="true" customClass="uk-text-background"></icon> <icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td> </td>
<td class="uk-padding-remove-bottom"> <td class="uk-padding-remove-bottom">
Views Views
</td> </td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"> <td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.views}} {{resultLandingInfo.measure.views | number}}
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -585,7 +585,7 @@
<tbody> <tbody>
<tr> <tr>
<td class="uk-padding-remove-top"> <td class="uk-padding-remove-top">
<icon name="cite" [flex]="true"></icon> <icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td class="uk-padding-remove-top"> <td class="uk-padding-remove-top">
Citations Citations
@ -596,7 +596,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<icon name="fire" [flex]="true"></icon> <icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td> <td>
Popularity Popularity
@ -607,7 +607,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<icon name="landmark" [flex]="true"></icon> <icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td> <td>
Influence Influence
@ -618,7 +618,7 @@
</tr> </tr>
<tr> <tr>
<td class="uk-padding-remove-bottom"> <td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true"></icon> <icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td> </td>
<td class="uk-padding-remove-bottom"> <td class="uk-padding-remove-bottom">
Impulse Impulse
@ -630,12 +630,12 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="uk-margin-large-left"> <div *ngIf="bipFrameUrl" class="uk-margin-large-left">
<i-frame [height]="300" [url]=bipFrameUrl [addClass]="false" <i-frame [height]="300" [url]="bipFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame> customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div> </div>
</div> </div>
<div class="uk-text-center uk-margin-top"> <div class="uk-text-center" [ngClass]="bipFrameUrl ? 'uk-margin-top' : 'uk-margin-large-top'">
<span class="uk-text-meta">Powered by</span> <span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!" <img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
style="width: 61px; height: 43px;"> style="width: 61px; height: 43px;">
@ -649,22 +649,29 @@
<!-- usage --> <!-- usage -->
<li *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views"> <li *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
<div class="uk-flex uk-flex-center uk-flex-middle"> <div class="uk-flex uk-flex-center uk-flex-middle">
<div> <div class="uk-margin-large-right">
Stats <div *ngIf="resultLandingInfo.measure.downloads" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>
<div class="uk-text-bold">Downloads</div>
</div>
<div *ngIf="resultLandingInfo.measure.views" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number">{{formatNumber(resultLandingInfo.measure.views)}}</div>
<div class="uk-text-bold">Views</div>
</div>
</div> </div>
<div *ngIf="viewsFrameUrl || downloadsFrameUrl" class="uk-margin-large-left"> <ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
<div *ngIf="viewsFrameUrl"> <div *ngIf="metricsClicked && downloadsFrameUrl && resultLandingInfo.measure.downloads" class="uk-margin-large-right">
<i-frame [height]="200" [url]=viewsFrameUrl [addClass]="false" <i-frame [height]="300" [url]="downloadsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"> customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
<div *ngIf="metricsClicked && viewsFrameUrl && resultLandingInfo.measure.views" class="uk-margin-large-right">
<i-frame [height]="300" [url]="viewsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1">
</i-frame> </i-frame>
</div> </div>
<div *ngIf="downloadsFrameUrl"> </ng-container>
<i-frame [height]="200" [url]=downloadsFrameUrl [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
</div>
</div>
</div> </div>
<div class="uk-text-center uk-margin-medium-top"> <div class="uk-text-center uk-margin-large-top">
<span class="uk-text-meta">Powered by</span> <span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts"> <img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div> </div>
@ -701,13 +708,13 @@
<div id="landing-right-sidebar-switcher" uk-toggle href="#right-column-offcanvas" <div id="landing-right-sidebar-switcher" uk-toggle href="#right-column-offcanvas"
class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-hidden@m" class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-hidden@m"
(click)="rightSidebarOffcanvasClicked = true;"> (click)="rightSidebarOffcanvasClicked = true;">
<icon name="more" ratio="1.5" customClass="uk-text-primary" flex="true" visuallyHidden="sidebar"></icon> <icon name="more" [ratio]="1.5" customClass="uk-text-primary" [flex]="true" visuallyHidden="sidebar"></icon>
</div> </div>
<div id="right-column-offcanvas" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;"> <div id="right-column-offcanvas" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
<div class="uk-offcanvas-bar"> <div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" <button class="uk-offcanvas-close uk-close uk-icon" type="button"
(click)="rightSidebarOffcanvasClicked = false"> (click)="rightSidebarOffcanvasClicked = false">
<icon name="close" ratio="1.5" visuallyHidden="close"></icon> <icon name="close" [ratio]="1.5" visuallyHidden="close"></icon>
</button> </button>
<div *ngIf="rightSidebarOffcanvasClicked"> <div *ngIf="rightSidebarOffcanvasClicked">
<ng-container *ngTemplateOutlet="right_column"></ng-container> <ng-container *ngTemplateOutlet="right_column"></ng-container>
@ -720,15 +727,15 @@
<!-- new metrics box --> <!-- new metrics box -->
<div *ngIf="resultLandingInfo && resultLandingInfo.measure" <div *ngIf="resultLandingInfo && resultLandingInfo.measure"
class="uk-margin-medium-top uk-padding uk-padding-remove-vertical"> class="uk-margin-medium-top uk-padding uk-padding-remove-vertical">
<div class="uk-card uk-card-secondary uk-flex uk-padding-small metrics-background"> <div class="landing-metrics-card uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
<div class="uk-width-expand"> <div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell"> <div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
<div> <div>
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="cite" ratio="0.8" [flex]="true"></icon></div> <div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="cite" [ratio]="0.8" [flex]="true"></icon></div>
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="fire" ratio="0.8" [flex]="true"></icon></div> <div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="fire" [ratio]="0.8" [flex]="true"></icon></div>
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="landmark" ratio="0.8" [flex]="true"></icon></div> <div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="landmark" [ratio]="0.8" [flex]="true"></icon></div>
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" ratio="0.8" [flex]="true"></icon></div> <div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" [ratio]="0.8" [flex]="true"></icon></div>
<div *ngIf="resultLandingInfo.measure.views" class="cell uk-flex uk-flex-middle"><icon name="visibility" ratio="0.8" [flex]="true"></icon></div> <div *ngIf="resultLandingInfo.measure.views" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div>
</div> </div>
<div> <div>
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">Citations</div> <div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">Citations</div>
@ -738,11 +745,11 @@
<div *ngIf="resultLandingInfo.measure.views" class="cell">Views</div> <div *ngIf="resultLandingInfo.measure.views" class="cell">Views</div>
</div> </div>
<div class="uk-text-uppercase uk-text-bolder"> <div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.citations}}</div> <div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.citations | number}}</div>
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.popularity}}</div> <div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.popularity}}</div>
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.influence}}</div> <div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.influence}}</div>
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.downloads}}</div> <div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.downloads | number}}</div>
<div *ngIf="resultLandingInfo.measure.views" class="cell">{{resultLandingInfo.measure.views}}</div> <div *ngIf="resultLandingInfo.measure.views" class="cell">{{resultLandingInfo.measure.views | number}}</div>
</div> </div>
</div> </div>
</div> </div>
@ -801,123 +808,125 @@
<!-- Mobile view --> <!-- Mobile view -->
<div class="uk-hidden@m uk-position-relative landing"> <div class="uk-hidden@m uk-position-relative landing">
<div class="uk-container uk-section"> <ng-container *ngIf="resultLandingInfo">
<div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0" <div class="uk-container uk-section">
class="uk-margin-small-bottom uk-flex uk-flex-middle"> <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"
<icon [name]="resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon" flex="true" ratio="1"></icon> class="uk-margin-small-bottom uk-flex uk-flex-middle">
<span class="uk-margin-xsmall-left uk-text-small uk-text-uppercase uk-text-bolder">{{resultLandingInfo.hostedBy_collectedFrom[0].accessRight}}</span> <icon [name]="resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon" [flex]="true" [ratio]="1"></icon>
</div> <span class="uk-margin-xsmall-left uk-text-small uk-text-uppercase uk-text-bolder">{{resultLandingInfo.hostedBy_collectedFrom[0].accessRight}}</span>
<landing-header [properties]="properties" [title]="resultLandingInfo.title"
[subTitle]="resultLandingInfo.subtitle"
[authors]="resultLandingInfo.authors"
[underCuration]="resultLandingInfo.underCurationMessage"
[entityType]="getTypeName()" [types]="resultLandingInfo.types"
[date]="resultLandingInfo.dateofacceptance" [embargoEndDate]="resultLandingInfo.embargoEndDate"
[publisher]="resultLandingInfo.publisher" [journal]="resultLandingInfo.journal"
[languages]="resultLandingInfo.languages" [programmingLanguages]="resultLandingInfo.programmingLanguages">
</landing-header>
<div class="uk-text-small">
<!-- Identifiers -->
<div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0" class="uk-margin-small-top">
<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div> </div>
<!-- SDGs --> <landing-header [properties]="properties" [title]="resultLandingInfo.title"
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')" class="uk-margin-small-top"> [subTitle]="resultLandingInfo.subtitle"
<sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Sustainable Development Goals (SDGs)')"></sdg> [authors]="resultLandingInfo.authors"
[underCuration]="resultLandingInfo.underCurationMessage"
[entityType]="getTypeName()" [types]="resultLandingInfo.types"
[date]="resultLandingInfo.dateofacceptance" [embargoEndDate]="resultLandingInfo.embargoEndDate"
[publisher]="resultLandingInfo.publisher" [journal]="resultLandingInfo.journal"
[languages]="resultLandingInfo.languages" [programmingLanguages]="resultLandingInfo.programmingLanguages">
</landing-header>
<div class="uk-text-small">
<!-- Identifiers -->
<div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0" class="uk-margin-small-top">
<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div>
<!-- SDGs -->
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')" class="uk-margin-small-top">
<sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Sustainable Development Goals (SDGs)')"></sdg>
</div>
<!-- FOS -->
<div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')" class="uk-margin-small-top">
<fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Fields of Science and Technology (FOS)')"></fos>
</div>
</div> </div>
<!-- FOS --> <div class="uk-section uk-margin-top uk-text-large uk-text-empashis uk-text-bold">
<div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')" class="uk-margin-small-top"> <hr>
<fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Fields of Science and Technology (FOS)')"></fos> <ng-container>
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Summary</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>References</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Related Research</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>External Databases</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="enermapsId && properties.enermapsURL">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Enermaps Tool</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc'
&& (!viewAll || viewAll=='egiNotebook')">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Compatible EOSC Services</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Funded by</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Related to Research Communities</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
</div> </div>
</div> </div>
<div class="uk-section uk-margin-top uk-text-large uk-text-empashis uk-text-bold"> <div class="landing-action-bar-mobile uk-background-default">
<hr> <div class="uk-container uk-flex uk-flex-middle uk-flex-between uk-text-xsmall uk-text-meta">
<ng-container> <div>
<div class="uk-flex uk-flex-middle uk-flex-between"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
<span>Summary</span> <icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon name="chevron_right" ratio="1.5" [flex]="true"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research software'" name="integration_instructions" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'other research product'" name="apps" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'project'" name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'data source'" name="note_add" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'organization'" name="corporate_fare" type="outlined" [flex]="true" [ratio]="2"></icon>
<span>{{getTypeName()}}</span>
</a>
</div> </div>
<hr> <div *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
</ng-container> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
<ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"> <icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2"></icon>
<div class="uk-flex uk-flex-middle uk-flex-between"> <span>Metrics</span>
<span>References</span> </a>
<icon name="chevron_right" ratio="1.5" [flex]="true"></icon>
</div> </div>
<hr> <div>
</ng-container> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
<ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0"> <icon name="pending" type="outlined" [flex]="true" [ratio]="2"></icon>
<div class="uk-flex uk-flex-middle uk-flex-between"> <span>Actions</span>
<span>Related Research</span> </a>
<icon name="chevron_right" ratio="1.5" [flex]="true"></icon>
</div> </div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>External Databases</span>
<icon name="chevron_right" ratio="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="enermapsId && properties.enermapsURL">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Enermaps Tool</span>
<icon name="chevron_right" ratio="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc'
&& (!viewAll || viewAll=='egiNotebook')">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Compatible EOSC Services</span>
<icon name="chevron_right" ratio="1.5" [flex]="true"></icon>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Funded by</span>
<icon name="chevron_right" ratio="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
<div class="uk-flex uk-flex-middle uk-flex-between">
<span>Related to Research Communities</span>
<icon name="chevron_right" ratio="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
</div>
</div>
<div class="landing-action-bar-mobile uk-background-default">
<div class="uk-container uk-flex uk-flex-middle uk-flex-between uk-text-xsmall uk-text-meta">
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
<icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" ratio="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" ratio="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research software'" name="integration_instructions" type="outlined" [flex]="true" ratio="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'other research product'" name="apps" type="outlined" [flex]="true" ratio="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'project'" name="assignment_turned_in" type="outlined" [flex]="true" ratio="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'data source'" name="note_add" type="outlined" [flex]="true" ratio="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'organization'" name="corporate_fare" type="outlined" [flex]="true" ratio="2"></icon>
<span>{{getTypeName()}}</span>
</a>
</div>
<div *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
<icon name="bar_chart" type="outlined" [flex]="true" ratio="2"></icon>
<span>Metrics</span>
</a>
</div>
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
<icon name="pending" type="outlined" [flex]="true" ratio="2"></icon>
<span>Actions</span>
</a>
</div> </div>
</div> </div>
</div> </ng-container>
</div> </div>
<!-- Other versions --> <!-- Other versions -->

12
landingPages/result/resultLanding.component.ts
View File

@ -25,6 +25,7 @@ import {ConnectHelper} from "../../connect/connectHelper";
import {UserManagementService} from "../../services/user-management.service"; import {UserManagementService} from "../../services/user-management.service";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
import {Option} from "../../sharedComponents/input/input.component"; import {Option} from "../../sharedComponents/input/input.component";
import {NumberUtils} from '../../utils/number-utils.class';
declare var ResizeObserver; declare var ResizeObserver;
@ -912,4 +913,15 @@ export class ResultLandingComponent {
this.descriptionModal.alertTitle = "Abstract"; this.descriptionModal.alertTitle = "Abstract";
this.descriptionModal.open(); this.descriptionModal.open();
} }
public clickedUsageMetrics() {
setTimeout( () => {
this.metricsClicked = true;
});
}
public formatNumber(num: number | string) {
let formatted = NumberUtils.roundNumber(+num);
return formatted.number + formatted.size;
}
} }

10
landingPages/result/resultLanding.service.ts
View File

@ -413,11 +413,12 @@ export class ResultLandingService {
this.resultLandingInfo.measure = {"downloads": null, "views": null, "popularity": null, "influence": null, "citations": null, "impulse": null}; this.resultLandingInfo.measure = {"downloads": null, "views": null, "popularity": null, "influence": null, "citations": null, "impulse": null};
for (let i = 0; i < data[0].measure.length; i++) { for (let i = 0; i < data[0].measure.length; i++) {
if (data[0].measure[i].id == 'downloads') { if (data[0].measure[i].id == 'downloads') {
// this.resultLandingInfo.measure['downloads'] = data[0].measure[i].count; // this.resultLandingInfo.measure['downloads'] = data[0].measure[i].count == 0 ? ' - ' : data[0].measure[i].count;
this.resultLandingInfo.measure['downloads'] = data[0].measure[i].count == 0 ? ' - ' : data[0].measure[i].count; this.resultLandingInfo.measure['downloads'] = data[0].measure[i].count;
} }
if (data[0].measure[i].id == 'views') { if (data[0].measure[i].id == 'views') {
this.resultLandingInfo.measure['views'] = data[0].measure[i].count == 0 ? ' - ' : data[0].measure[i].count; // this.resultLandingInfo.measure['views'] = data[0].measure[i].count == 0 ? ' - ' : data[0].measure[i].count;
this.resultLandingInfo.measure['views'] = data[0].measure[i].count;
} }
if (data[0].measure[i].id == 'influence') { if (data[0].measure[i].id == 'influence') {
if (data[0].measure[i].class == 'C1') { if (data[0].measure[i].class == 'C1') {
@ -454,7 +455,8 @@ export class ResultLandingService {
} }
} }
if (data[0].measure[i].id == 'influence_alt') { if (data[0].measure[i].id == 'influence_alt') {
this.resultLandingInfo.measure['citations'] = data[0].measure[i].score == 0 ? ' - ' : data[0].measure[i].score; // this.resultLandingInfo.measure['citations'] = data[0].measure[i].score == 0 ? ' - ' : data[0].measure[i].score;
this.resultLandingInfo.measure['citations'] = data[0].measure[i].score;
} }
if (data[0].measure[i].id == 'impulse') { if (data[0].measure[i].id == 'impulse') {
if (data[0].measure[i].class == 'C1') { if (data[0].measure[i].class == 'C1') {