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

298 lines
9.4 KiB
TypeScript
Raw Normal View History

import {Component, Input, Output, EventEmitter, ChangeDetectorRef} from '@angular/core';
import {Metrics} from '../../../utils/entities/metrics';
import {MetricsService} from '../../../services/metrics.service';
import {ErrorCodes} from '../../../utils/properties/errorCodes';
import {Subscription} from 'rxjs';
import {EnvProperties} from '../../../utils/properties/env-properties';
import {animate, state, style, transition, trigger} from "@angular/animations";
@Component({
selector: 'metrics',
styleUrls: ['metrics.component.css'],
template: `
<div *ngIf="metrics && (pageViews >0 || metrics.totalViews > 0|| metrics.totalDownloads >0)" class="metrics"
click-outside-or-esc (clickOutside)="close($event)"
id="metrics" targetId="metrics">
<div class="m-badge clickable" (click)="toggle($event)">
<img src="assets/common-assets/logo-small-usage-counts.png">
<div class="number">{{total | number}}</div>
</div>
<div class="widget" [@widget]="state.toString()">
<div class="body">
<div [@body]="state.toString()">
<div *ngIf="entityType == 'projects'" class="uk-margin-bottom">
<i class="uk-text-center">Project metrics
are derived from aggregating individual research results metrics.
</i>
</div>
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-divider uk-grid-match" uk-grid>
<div class="uk-text-center uk-first-column">
<div class="number">{{metrics.totalDownloads | number}}</div>
<div>Downloads</div>
</div>
<div class="uk-text-center">
<div class="number">{{pageViews | number}}</div>
<div>OpenAIRE views</div>
</div>
<div class="uk-text-center">
<div class="number">{{metrics.totalViews | number}}</div>
<div>Total views</div>
</div>
</div>
<div *ngIf="(metrics.totalViews > 0 && viewsFrameUrl) || (metrics.totalDownloads > 0 && downloadsFrameUrl)"
[@charts]="state.toString()"
class="charts uk-visible-toggle" tabindex="-1" uk-slider>
<ul class="uk-slider-items uk-child-width-1-1">
<li *ngIf="metrics && metrics.infos.size > 0" class="uk-overflow-auto" style="height: 200px">
<table
class="uk-table uk-table-small uk-table-striped">
<thead>
<tr>
<th class="uk-text-center uk-text-bold">From</th>
<th class="uk-text-center uk-text-bold">Views</th>
<th class="uk-text-center uk-text-bold">Downloads</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let key of getKeys(metrics.infos)">
<td class="uk-text-center">
<a href="{{metrics.infos.get(key).url}}">
{{metrics.infos.get(key).name}}
</a>
</td>
<td class="uk-text-center">
{{metrics.infos.get(key).numOfViews | number}}
<span *ngIf="metrics.infos.get(key).numOfViews > 0 && metrics.infos.get(key).openaireViews > 0">
( {{metrics.infos.get(key).openaireViews | number}} from OpenAIRE )
</span>
</td>
<td class="uk-text-center">
{{metrics.infos.get(key).numOfDownloads | number}}
<span *ngIf="metrics.infos.get(key).numOfDownloads > 0 && metrics.infos.get(key).openaireDownloads > 0">
( {{metrics.infos.get(key).openaireDownloads | number}} from OpenAIRE )
</span>
</td>
</tr>
</tbody>
</table>
</li>
<li #element>
[Trunk | Library]: 1. src/assets/common-assets/common/custom.css: Add 'font-display: swap;' in '@font-face' css rules - improve performance. 2. dataProvider.component.html & organizations.component.html & project.component.html & resultLanding.component.html: Add check if 'indexUpdateDate' is initialized. 3. dataProvider.component.ts & organization.component.ts & project.component.ts & resultLanding.component.ts: Initialize 'indexUpdateDate' and tabs counts only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 4. resultLanding.component.ts: Get "provenanceActionVocabulary" and "altMetrics" only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 5. organization.component.ts: [Bug fix] Get 'indexUpdateDate' from service (not properties) if available. 6. project.component.ts: [Bug fix] Call 'getProjectInfo()' only once (was called twice). 7. project.service.ts: [Bug fix] Add check for rels.rel.to.class=="hasParticipant" (when not array). 8. metrics.component.ts: Get metrics if "typeof document !== 'undefined'" (javascript is enabled) | Show charts only if user clicked on metrics badge | Do not set "width" for <i-frame> elements. 9. iframe.component.ts: Add case when only height is sent as input. 10. searchDataProviders.component.ts & searchOrganizations.component.ts: [Bug fix] Set "firstLoad" to false after getting results (was asking refine filters in paging too). 11. search-tab.component.ts: [Bug fix]: In method "getEntityName()" add cases when 'entityType == "project"' and 'entityType == "dataprovider"' and fix case when 'entityType == "result"'. 12. navigationBar.component.ts: [Bug fix] Do not initialize navbar inside route.queryParams subscription - !!! check it carefully when deployed in all portals !!! . git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58874 d315682c-612b-4755-9ff5-7f18f6832af3
2020-06-10 13:05:59 +02:00
<i-frame *ngIf="metricsClicked && metrics.totalViews > 0 && viewsFrameUrl"
[height]="200"
[url]=viewsFrameUrl>
</i-frame>
</li>
<li #element>
[Trunk | Library]: 1. src/assets/common-assets/common/custom.css: Add 'font-display: swap;' in '@font-face' css rules - improve performance. 2. dataProvider.component.html & organizations.component.html & project.component.html & resultLanding.component.html: Add check if 'indexUpdateDate' is initialized. 3. dataProvider.component.ts & organization.component.ts & project.component.ts & resultLanding.component.ts: Initialize 'indexUpdateDate' and tabs counts only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 4. resultLanding.component.ts: Get "provenanceActionVocabulary" and "altMetrics" only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 5. organization.component.ts: [Bug fix] Get 'indexUpdateDate' from service (not properties) if available. 6. project.component.ts: [Bug fix] Call 'getProjectInfo()' only once (was called twice). 7. project.service.ts: [Bug fix] Add check for rels.rel.to.class=="hasParticipant" (when not array). 8. metrics.component.ts: Get metrics if "typeof document !== 'undefined'" (javascript is enabled) | Show charts only if user clicked on metrics badge | Do not set "width" for <i-frame> elements. 9. iframe.component.ts: Add case when only height is sent as input. 10. searchDataProviders.component.ts & searchOrganizations.component.ts: [Bug fix] Set "firstLoad" to false after getting results (was asking refine filters in paging too). 11. search-tab.component.ts: [Bug fix]: In method "getEntityName()" add cases when 'entityType == "project"' and 'entityType == "dataprovider"' and fix case when 'entityType == "result"'. 12. navigationBar.component.ts: [Bug fix] Do not initialize navbar inside route.queryParams subscription - !!! check it carefully when deployed in all portals !!! . git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58874 d315682c-612b-4755-9ff5-7f18f6832af3
2020-06-10 13:05:59 +02:00
<i-frame *ngIf="metricsClicked && metrics.totalDownloads > 0 && downloadsFrameUrl"
[height]="200"
[url]=downloadsFrameUrl>
</i-frame>
</li>
</ul>
<div class="uk-text-right uk-margin-small-top">
<a href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a href="#" class="space" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
</div>
</div>
<div class="footer uk-flex uk-flex-middle" [@footer]="state.toString()">
<span>Powered by</span>
<img width="120" src="assets/common-assets/logo-large-usage-counts.png">
</div>
</div>
</div>
`,
animations: [
trigger('widget', [
state('-1', style({
width: '150px',
opacity: 0,
height: '60px',
})),
state('0', style({
width: '150px',
opacity: 0,
height: '60px',
"margin-top": '-25px'
})),
state('1', style({
width: '150px',
opacity: 1,
height: '60px',
})),
state('2', style({
width: '350px',
height: 'auto',
})),
state('3', style({
width: '350px',
height: 'auto',
})),
state('4', style({
width: '350px',
height: 'auto',
})),
transition('0 => 1', [
animate('300ms ease-out')
]),
transition('1 => 2', [
animate('400ms cubic-bezier(.18,.89,.56,1)')
])
]),
trigger('body', [
state('2', style({
opacity: 1,
height: 'auto',
})),
state('3', style({
opacity: 1,
height: 'auto'
})),
state('4', style({
opacity: 1,
height: 'auto'
})),
transition('* => 2', [
animate('400ms cubic-bezier(.18,.89,.56,1)')
])
]),
trigger('charts', [
state('3', style({
opacity: 1
})),
state('4', style({
opacity: 1
})),
transition('* => 3', [
animate('800ms ease-out')
])
]),
trigger('footer', [
state('4', style({
transform: 'translateY(0)'
})),
transition('3 => 4', [
animate('800ms ease-out')
])
])
]
})
export class MetricsComponent {
@Output() metricsResults = new EventEmitter();
@Input() id: string;
@Input() entityType: string;
@Input() entity: string;
//@Input() name: string = "";
@Input() pageViews: number = 0;
@Input() properties: EnvProperties;
@Input() shortView: boolean = false;
@Input() open = false;
@Input() viewsFrameUrl: string;
@Input() downloadsFrameUrl: string;
public metrics: Metrics;
public errorCodes: ErrorCodes;
private sub: Subscription;
private timeouts: any[] = [];
[Trunk | Library]: 1. src/assets/common-assets/common/custom.css: Add 'font-display: swap;' in '@font-face' css rules - improve performance. 2. dataProvider.component.html & organizations.component.html & project.component.html & resultLanding.component.html: Add check if 'indexUpdateDate' is initialized. 3. dataProvider.component.ts & organization.component.ts & project.component.ts & resultLanding.component.ts: Initialize 'indexUpdateDate' and tabs counts only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 4. resultLanding.component.ts: Get "provenanceActionVocabulary" and "altMetrics" only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 5. organization.component.ts: [Bug fix] Get 'indexUpdateDate' from service (not properties) if available. 6. project.component.ts: [Bug fix] Call 'getProjectInfo()' only once (was called twice). 7. project.service.ts: [Bug fix] Add check for rels.rel.to.class=="hasParticipant" (when not array). 8. metrics.component.ts: Get metrics if "typeof document !== 'undefined'" (javascript is enabled) | Show charts only if user clicked on metrics badge | Do not set "width" for <i-frame> elements. 9. iframe.component.ts: Add case when only height is sent as input. 10. searchDataProviders.component.ts & searchOrganizations.component.ts: [Bug fix] Set "firstLoad" to false after getting results (was asking refine filters in paging too). 11. search-tab.component.ts: [Bug fix]: In method "getEntityName()" add cases when 'entityType == "project"' and 'entityType == "dataprovider"' and fix case when 'entityType == "result"'. 12. navigationBar.component.ts: [Bug fix] Do not initialize navbar inside route.queryParams subscription - !!! check it carefully when deployed in all portals !!! . git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58874 d315682c-612b-4755-9ff5-7f18f6832af3
2020-06-10 13:05:59 +02:00
public metricsClicked: boolean = false;
public status: number;
public state: number = -1;
constructor(private metricsService: MetricsService, private cdr: ChangeDetectorRef) {
}
ngOnInit() {
this.errorCodes = new ErrorCodes();
[Trunk | Library]: 1. src/assets/common-assets/common/custom.css: Add 'font-display: swap;' in '@font-face' css rules - improve performance. 2. dataProvider.component.html & organizations.component.html & project.component.html & resultLanding.component.html: Add check if 'indexUpdateDate' is initialized. 3. dataProvider.component.ts & organization.component.ts & project.component.ts & resultLanding.component.ts: Initialize 'indexUpdateDate' and tabs counts only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 4. resultLanding.component.ts: Get "provenanceActionVocabulary" and "altMetrics" only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 5. organization.component.ts: [Bug fix] Get 'indexUpdateDate' from service (not properties) if available. 6. project.component.ts: [Bug fix] Call 'getProjectInfo()' only once (was called twice). 7. project.service.ts: [Bug fix] Add check for rels.rel.to.class=="hasParticipant" (when not array). 8. metrics.component.ts: Get metrics if "typeof document !== 'undefined'" (javascript is enabled) | Show charts only if user clicked on metrics badge | Do not set "width" for <i-frame> elements. 9. iframe.component.ts: Add case when only height is sent as input. 10. searchDataProviders.component.ts & searchOrganizations.component.ts: [Bug fix] Set "firstLoad" to false after getting results (was asking refine filters in paging too). 11. search-tab.component.ts: [Bug fix]: In method "getEntityName()" add cases when 'entityType == "project"' and 'entityType == "dataprovider"' and fix case when 'entityType == "result"'. 12. navigationBar.component.ts: [Bug fix] Do not initialize navbar inside route.queryParams subscription - !!! check it carefully when deployed in all portals !!! . git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58874 d315682c-612b-4755-9ff5-7f18f6832af3
2020-06-10 13:05:59 +02:00
if (typeof document !== 'undefined') {
this.status = this.errorCodes.LOADING;
this.getMetrics();
}
}
ngOnDestroy() {
[Trunk | Library]: 1. src/assets/common-assets/common/custom.css: Add 'font-display: swap;' in '@font-face' css rules - improve performance. 2. dataProvider.component.html & organizations.component.html & project.component.html & resultLanding.component.html: Add check if 'indexUpdateDate' is initialized. 3. dataProvider.component.ts & organization.component.ts & project.component.ts & resultLanding.component.ts: Initialize 'indexUpdateDate' and tabs counts only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 4. resultLanding.component.ts: Get "provenanceActionVocabulary" and "altMetrics" only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 5. organization.component.ts: [Bug fix] Get 'indexUpdateDate' from service (not properties) if available. 6. project.component.ts: [Bug fix] Call 'getProjectInfo()' only once (was called twice). 7. project.service.ts: [Bug fix] Add check for rels.rel.to.class=="hasParticipant" (when not array). 8. metrics.component.ts: Get metrics if "typeof document !== 'undefined'" (javascript is enabled) | Show charts only if user clicked on metrics badge | Do not set "width" for <i-frame> elements. 9. iframe.component.ts: Add case when only height is sent as input. 10. searchDataProviders.component.ts & searchOrganizations.component.ts: [Bug fix] Set "firstLoad" to false after getting results (was asking refine filters in paging too). 11. search-tab.component.ts: [Bug fix]: In method "getEntityName()" add cases when 'entityType == "project"' and 'entityType == "dataprovider"' and fix case when 'entityType == "result"'. 12. navigationBar.component.ts: [Bug fix] Do not initialize navbar inside route.queryParams subscription - !!! check it carefully when deployed in all portals !!! . git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58874 d315682c-612b-4755-9ff5-7f18f6832af3
2020-06-10 13:05:59 +02:00
if(this.sub) {
this.sub.unsubscribe();
}
}
public get total(): number {
return +this.pageViews + +this.metrics.totalViews + +this.metrics.totalDownloads;
}
private getMetrics() {
this.sub = this.metricsService.getMetrics(this.id, this.entityType, this.properties).subscribe(
data => {
this.metrics = data;
this.cdr.detectChanges();
this.status = this.errorCodes.DONE;
this.metricsResults.emit({
totalViews: this.metrics.totalViews,
totalDownloads: this.metrics.totalDownloads,
pageViews: this.metrics.pageViews
});
},
err => {
if (err.status == '404') {
this.status = this.errorCodes.NOT_FOUND;
} else if (err.status == '500') {
this.status = this.errorCodes.ERROR;
} else {
this.status = this.errorCodes.NOT_AVAILABLE;
}
this.metricsResults.emit({
totalViews: 0,
totalDownloads: 0
});
}
);
}
public close(event) {
if(event.value && this.state !== -1) {
this.timeouts.forEach(timeout => {
clearTimeout(timeout);
});
this.state = -1;
this.timeouts = [];
}
}
public toggle(event) {
[Trunk | Library]: 1. src/assets/common-assets/common/custom.css: Add 'font-display: swap;' in '@font-face' css rules - improve performance. 2. dataProvider.component.html & organizations.component.html & project.component.html & resultLanding.component.html: Add check if 'indexUpdateDate' is initialized. 3. dataProvider.component.ts & organization.component.ts & project.component.ts & resultLanding.component.ts: Initialize 'indexUpdateDate' and tabs counts only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 4. resultLanding.component.ts: Get "provenanceActionVocabulary" and "altMetrics" only if "typeof document !== 'undefined'" (javascript is enabled) - improve performance. 5. organization.component.ts: [Bug fix] Get 'indexUpdateDate' from service (not properties) if available. 6. project.component.ts: [Bug fix] Call 'getProjectInfo()' only once (was called twice). 7. project.service.ts: [Bug fix] Add check for rels.rel.to.class=="hasParticipant" (when not array). 8. metrics.component.ts: Get metrics if "typeof document !== 'undefined'" (javascript is enabled) | Show charts only if user clicked on metrics badge | Do not set "width" for <i-frame> elements. 9. iframe.component.ts: Add case when only height is sent as input. 10. searchDataProviders.component.ts & searchOrganizations.component.ts: [Bug fix] Set "firstLoad" to false after getting results (was asking refine filters in paging too). 11. search-tab.component.ts: [Bug fix]: In method "getEntityName()" add cases when 'entityType == "project"' and 'entityType == "dataprovider"' and fix case when 'entityType == "result"'. 12. navigationBar.component.ts: [Bug fix] Do not initialize navbar inside route.queryParams subscription - !!! check it carefully when deployed in all portals !!! . git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58874 d315682c-612b-4755-9ff5-7f18f6832af3
2020-06-10 13:05:59 +02:00
this.metricsClicked = true;
event.stopPropagation();
if(this.state !== -1) {
this.timeouts.forEach(timeout => {
clearTimeout(timeout);
});
this.state = -1;
this.timeouts = [];
} else {
this.state++;
this.timeouts.push(setTimeout(() => {
this.state++;
this.timeouts.push(setTimeout(() => {
this.state++;
this.timeouts.push(setTimeout(() => {
this.state++;
this.timeouts.push(setTimeout(() => {
this.state++;
}, 400));
}, 800));
}, 300));
}, 100));
}
this.cdr.detectChanges();
}
public getKeys(map) {
return Array.from(map.keys());
}
}