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 -->
<a (click)="openAddThisModal()"
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>
</a>
</div>
@ -90,93 +90,121 @@
<div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="dataProviderInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<!-- schema.org-->
<schema2jsonld [data]=dataProviderInfo
[URL]="canonicalUrl"
type="datasource"
[otherURL]="(dataProviderInfo.provenance)?provenanceUrls:null"></schema2jsonld>
<!-- Actions for mobile viewport -->
<div class="uk-flex uk-flex-right uk-margin-medium-bottom uk-hidden@s">
<div>
<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>
<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 class="uk-grid" uk-grid>
<div class="uk-width-expand">
<!-- schema.org-->
<schema2jsonld [data]=dataProviderInfo
[URL]="canonicalUrl"
type="datasource"
[otherURL]="(dataProviderInfo.provenance)?provenanceUrls:null"></schema2jsonld>
<!-- Actions for mobile viewport -->
<div class="uk-flex uk-flex-right uk-margin-medium-bottom uk-hidden@s">
<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>
</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>
<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 -->
<!-- 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>
@ -220,6 +248,9 @@
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Related '+openaireEntities.DATASOURCES" [tabId]="'relatedDatasources'">
</my-tab>
<my-tab *ngIf="dataProviderInfo && hasMetrics"
[tabTitle]="'Metrics'" [tabId]="'metrics'">
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Statistics'" customClass="statistics" [tabId]="'statistics'" [active]="false">
@ -436,6 +467,93 @@
</relatedDatasourcesTab>
</div>
</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-->
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.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 {IndexInfoService} from "../../utils/indexInfo.service";
import {properties} from "../../../../environments/environment";
import {Subscriber} from "rxjs";
import {Subscriber, Subscription, zip} from "rxjs";
import {TabComponent} from "../../utils/tabs/tab.component";
import {OpenaireEntities} from "../../utils/properties/searchFields";
import {MetricsService} from '../../services/metrics.service';
import {NumberUtils} from '../../utils/number-utils.class';
declare var ResizeObserver;
@ -63,7 +65,7 @@ export class DataProviderComponent {
public downloadsFrameUrl: string;
public totalViews: number;
public totalDownloads: number;
public pageViews: number;
// public pageViews: number;
// Statistics tab variables
public statsClicked: boolean = false;
@ -141,6 +143,7 @@ export class DataProviderComponent {
// public shouldSticky: boolean = true;
subscriptions = [];
private sub: Subscription;
properties: EnvProperties = properties;
public openaireEntities = OpenaireEntities;
@ -157,6 +160,7 @@ export class DataProviderComponent {
private helper: HelperService,
private _location: Location,
private indexInfoService: IndexInfoService,
private metricsService: MetricsService,
private cdr: ChangeDetectorRef) {
this.fetchPublications = 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) {
this.totalViews = $event.totalViews;
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 {
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() {
@ -827,4 +844,15 @@ export class DataProviderComponent {
this.descriptionModal.alertTitle = "Description";
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">
<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">
<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'">
<icon [name]="availableOn[0].accessRightIcon" flex="true" ratio="0.8"></icon>
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="0.8"></icon>
</span>
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
</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 *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'">
<icon [name]="instance.accessRightIcon" flex="true"></icon>
<icon [name]="instance.accessRightIcon" [flex]="true"></icon>
</span>
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
<span class="uk-text-emphasis">
@ -63,7 +63,7 @@ declare var UIkit;
<!-- <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()">
<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}}
</span>
<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'">
<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'">
<icon [name]="instance.accessRightIcon" flex="true" type="outlined"></icon>
<icon [name]="instance.accessRightIcon" [flex]="true" type="outlined"></icon>
</span>
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
<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">
<!-- oa -->
<ng-container
*ngIf="(openAccessMandatePublications != undefined && openAccessMandatePublications) || (openAccessMandateDatasets != undefined && openAccessMandateDatasets)">
<span class="uk-margin-xsmall-right uk-text-success">
<icon name="open_access" flex="true" ratio="0.8"></icon>
*ngIf="(openAccessMandatePublications != undefined && openAccessMandatePublications) || (openAccessMandateDatasets != undefined && openAccessMandateDatasets)">
<span class="uk-margin-xsmall-right open-access">
<icon name="open_access" [flex]="true" [ratio]="0.8"></icon>
</span>
<span class="uk-text-bolder"
*ngIf="openAccessMandatePublications != undefined && openAccessMandatePublications && openAccessMandateDatasets != undefined && openAccessMandateDatasets">
@ -38,25 +38,25 @@ import {OpenaireEntities} from "src/app/openaireLibrary/utils/properties/searchF
<!-- types -->
<span *ngIf="entityType" class="uk-margin-xsmall-right">
<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"
[flex]="true" ratio="0.8"></icon>
[flex]="true" [ratio]="0.8"></icon>
<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"
[flex]="true" ratio="0.8"></icon>
[flex]="true" [ratio]="0.8"></icon>
<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"
[flex]="true" ratio="0.8"></icon>
[flex]="true" [ratio]="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'organization'" name="corporate_fare" type="outlined"
[flex]="true" ratio="0.8"></icon>
[flex]="true" [ratio]="0.8"></icon>
</span>
<span *ngIf="entityType" class="uk-text-capitalize uk-text-bolder" style="text-decoration: underline;">
{{entityType}}
</span>
<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 *ngIf="types && removeUnknown(types, true).length > 0" class="uk-text-italic">
{{removeUnknown(types, true).join(' , ')}}
@ -120,8 +120,7 @@ import {OpenaireEntities} from "src/app/openaireLibrary/utils/properties/searchF
<!-- data provider labels -->
<ng-container *ngIf="compatibility && !(compatibility.info == 'not available' && type == 'service')">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>
<!-- link not working - dont know why -->
<span title="Compatibility">
<a *ngIf="compatibility.id"
[queryParams]="{datasourceId: compatibility.id}" routerLinkActive="router-link-active"
[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 {IconsModule} from "src/app/openaireLibrary/utils/icons/icons.module";
import {ShowPublisherModule} from "../showPublisher.module";
import {RouterModule} from "@angular/router";
@NgModule({
imports: [CommonModule, LandingModule, ShowAuthorsModule, IconsModule, ShowPublisherModule],
imports: [CommonModule, LandingModule, ShowAuthorsModule, IconsModule, ShowPublisherModule, RouterModule],
declarations: [LandingHeaderComponent],
exports: [LandingHeaderComponent]
})

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

@ -152,7 +152,7 @@
<ng-container *ngIf="projectInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<div class="uk-grid" uk-grid>
<div class="info uk-width-expand">
<div class="uk-width-expand">
<!-- schema.org-->
<schema2jsonld [data]=projectInfo
[URL]="properties.domain+properties.baseLink+properties.searchLinkToProject+projectId"
@ -331,30 +331,28 @@
</div>
</div>
</div>
<div class="metrics-box">
<!-- <div *ngIf="projectInfo">
<div class="uk-card uk-card-secondary uk-flex uk-padding-small metrics-background">
<div class="uk-width-expand">
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
<div>
<div 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-flex uk-flex-middle"><icon name="visibility" ratio="0.8" [flex]="true"></icon></div>
</div>
<div>
<div class="cell uk-margin-xsmall-bottom">Downloads</div>
<div class="cell">Views</div>
</div>
<div class="uk-text-uppercase uk-text-bolder">
<div class="cell uk-margin-xsmall-bottom"> - </div>
<div class="cell"> - </div>
</div>
<div *ngIf="projectInfo && 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 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 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>
@ -386,6 +384,9 @@
[tabTitle]="openaireEntities.OTHER" [tabNumber]="fetchOrps.searchUtils.totalResults"
[tabId]="'other'"></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
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
[tabTitle]="'Statistics'" customClass="statistics" [tabId]="'statistics'" [active]="false"></my-tab>
@ -500,6 +501,92 @@
</search-tab>
</div>
</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
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
<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 {SearchResult} from "../../utils/entities/searchResult";
import {IndexInfoService} from "../../utils/indexInfo.service";
import {Subscriber} from "rxjs";
import {Subscriber, zip, Subscription} from "rxjs";
import {properties} from "../../../../environments/environment";
import {Option} from "../../sharedComponents/input/input.component";
import {OpenaireEntities} from "../../utils/properties/searchFields";
import {MetricsService} from '../../services/metrics.service';
import {NumberUtils} from '../../utils/number-utils.class';
declare var ResizeObserver;
@ -50,7 +52,7 @@ export class ProjectComponent {
public downloadsFrameUrl: string;
public totalViews: number;
public totalDownloads: number;
public pageViews: number;
// public pageViews: number;
// Statistics tab variables
public statsClicked: boolean;
@ -160,6 +162,7 @@ export class ProjectComponent {
// public shouldSticky: boolean = true;
subscriptions = [];
private sub: Subscription;
properties: EnvProperties;
public openaireEntities = OpenaireEntities;
@ -176,6 +179,7 @@ export class ProjectComponent {
private _reportsService: ReportsService,
private htmlService: HtmlProjectReportService,
private indexInfoService: IndexInfoService,
private metricsService: MetricsService,
private cdr: ChangeDetectorRef) {}
ngOnInit() {
@ -230,6 +234,8 @@ export class ProjectComponent {
this.downloadURLAPI = this.properties.csvAPIURL;
this.createClipboard();
this.getMetrics();
}));
}
@ -552,11 +558,22 @@ export class ProjectComponent {
public metricsResults($event) {
this.totalViews = $event.totalViews;
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 {
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() {
@ -961,4 +978,15 @@ export class ProjectComponent {
this.descriptionModal.alertTitle = "Description";
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 -->
<a *ngIf="resultLandingInfo?.deletedByInferenceIds" (click)="openDeletedByInference()"
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">
View all {{resultLandingInfo.deletedByInferenceIds.length}} versions
</span>
@ -127,17 +127,17 @@
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
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>
</a>
<a (click)="openAddThisModal()"
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>
</a>
<a (click)="openCiteModal()"
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>
</a>
<ng-container *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'" >
@ -464,14 +464,14 @@
<a href="#">Social</a>
</li>
<li *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
<a href="#">Usage</a>
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
</li>
</ul>
<ul class="uk-switcher uk-margin-large-top">
<!-- overview -->
<li>
<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>
<div class="uk-text-center uk-margin-small-bottom">
@ -486,18 +486,18 @@
<tbody>
<tr>
<td class="uk-padding-remove-top">
<icon name="cite" [flex]="true"></icon>
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-top">
Citations
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.citations}}
{{resultLandingInfo.measure.citations | number}}
</td>
</tr>
<tr>
<td>
<icon name="fire" [flex]="true"></icon>
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Popularity
@ -508,7 +508,7 @@
</tr>
<tr>
<td>
<icon name="landmark" [flex]="true"></icon>
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Influence
@ -519,7 +519,7 @@
</tr>
<tr>
<td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true"></icon>
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-bottom">
Impulse
@ -533,10 +533,10 @@
</div>
</div>
</div>
<div id="altmetrics" *ngIf="hasAltMetrics">
<div *ngIf="hasAltMetrics">
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics>
</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>
<div class="uk-text-center uk-margin-small-bottom">
@ -548,26 +548,26 @@
<div>
<table class="uk-table uk-table-small">
<tbody>
<tr>
<tr *ngIf="resultLandingInfo.measure.downloads">
<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 class="uk-padding-remove-top">
Downloads
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.downloads}}
{{resultLandingInfo.measure.downloads | number}}
</td>
</tr>
<tr>
<tr *ngIf="resultLandingInfo.measure.views">
<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 class="uk-padding-remove-bottom">
Views
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.views}}
{{resultLandingInfo.measure.views | number}}
</td>
</tr>
</tbody>
@ -585,7 +585,7 @@
<tbody>
<tr>
<td class="uk-padding-remove-top">
<icon name="cite" [flex]="true"></icon>
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-top">
Citations
@ -596,7 +596,7 @@
</tr>
<tr>
<td>
<icon name="fire" [flex]="true"></icon>
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Popularity
@ -607,7 +607,7 @@
</tr>
<tr>
<td>
<icon name="landmark" [flex]="true"></icon>
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Influence
@ -618,7 +618,7 @@
</tr>
<tr>
<td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true"></icon>
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-bottom">
Impulse
@ -630,12 +630,12 @@
</tbody>
</table>
</div>
<div class="uk-margin-large-left">
<i-frame [height]="300" [url]=bipFrameUrl [addClass]="false"
<div *ngIf="bipFrameUrl" class="uk-margin-large-left">
<i-frame [height]="300" [url]="bipFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</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>
<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;">
@ -649,22 +649,29 @@
<!-- usage -->
<li *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
<div class="uk-flex uk-flex-center uk-flex-middle">
<div>
Stats
<div class="uk-margin-large-right">
<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 *ngIf="viewsFrameUrl || downloadsFrameUrl" class="uk-margin-large-left">
<div *ngIf="viewsFrameUrl">
<i-frame [height]="200" [url]=viewsFrameUrl [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply">
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
<div *ngIf="metricsClicked && downloadsFrameUrl && resultLandingInfo.measure.downloads" 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 && 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>
</div>
<div *ngIf="downloadsFrameUrl">
<i-frame [height]="200" [url]=downloadsFrameUrl [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
</div>
</div>
</ng-container>
</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>
<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>
@ -701,13 +708,13 @@
<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"
(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 id="right-column-offcanvas" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close uk-close uk-icon" type="button"
(click)="rightSidebarOffcanvasClicked = false">
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>
<icon name="close" [ratio]="1.5" visuallyHidden="close"></icon>
</button>
<div *ngIf="rightSidebarOffcanvasClicked">
<ng-container *ngTemplateOutlet="right_column"></ng-container>
@ -720,15 +727,15 @@
<!-- new metrics box -->
<div *ngIf="resultLandingInfo && resultLandingInfo.measure"
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="uk-width-expand">
<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="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.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.views" class="cell uk-flex uk-flex-middle"><icon name="visibility" 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.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.views" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div>
</div>
<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>
<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.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.views" class="cell">{{resultLandingInfo.measure.views}}</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 | number}}</div>
</div>
</div>
</div>
@ -801,123 +808,125 @@
<!-- Mobile view -->
<div class="uk-hidden@m uk-position-relative landing">
<div class="uk-container uk-section">
<div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"
class="uk-margin-small-bottom uk-flex uk-flex-middle">
<icon [name]="resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon" flex="true" ratio="1"></icon>
<span class="uk-margin-xsmall-left uk-text-small uk-text-uppercase uk-text-bolder">{{resultLandingInfo.hostedBy_collectedFrom[0].accessRight}}</span>
</div>
<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>
<ng-container *ngIf="resultLandingInfo">
<div class="uk-container uk-section">
<div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"
class="uk-margin-small-bottom uk-flex uk-flex-middle">
<icon [name]="resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon" [flex]="true" [ratio]="1"></icon>
<span class="uk-margin-xsmall-left uk-text-small uk-text-uppercase uk-text-bolder">{{resultLandingInfo.hostedBy_collectedFrom[0].accessRight}}</span>
</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>
<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>
<!-- 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>
<!-- 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 class="uk-section uk-margin-top uk-text-large uk-text-empashis uk-text-bold">
<hr>
<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 class="uk-section uk-margin-top uk-text-large uk-text-empashis uk-text-bold">
<hr>
<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 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>
<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 *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>
<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>
<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>
<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>
</ng-container>
</div>
<!-- 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 {OpenaireEntities} from "../../utils/properties/searchFields";
import {Option} from "../../sharedComponents/input/input.component";
import {NumberUtils} from '../../utils/number-utils.class';
declare var ResizeObserver;
@ -912,4 +913,15 @@ export class ResultLandingComponent {
this.descriptionModal.alertTitle = "Abstract";
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};
for (let i = 0; i < data[0].measure.length; i++) {
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') {
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].class == 'C1') {
@ -454,7 +455,8 @@ export class ResultLandingService {
}
}
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].class == 'C1') {