[Usage-Counts | Trunk]: Fix search bug on alalytics. Change loading

This commit is contained in:
k.triantafyllou 2021-01-07 17:01:02 +00:00
parent 62b6318db8
commit 7687746c77
8 changed files with 93 additions and 66 deletions

View File

@ -1,10 +1,10 @@
import {Component, HostListener, OnInit} from '@angular/core';
import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
import {faqs} from './faqs';
import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {properties} from '../../environments/environment';
import {Subscription} from 'rxjs';
import {Subscriber, Subscription} from 'rxjs';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
@ -13,7 +13,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
templateUrl: 'about.component.html',
styleUrls: ['about.component.css'],
})
export class AboutComponent implements OnInit {
export class AboutComponent implements OnInit, OnDestroy {
faqs: any[] = faqs;
properties: EnvProperties = properties;
description = "UsageCounts service is an OpenAIRE service built to cover the needs of content providers and consumers and offer added value to assist them in reaching their goals. UsageCounts forms metrics of usage activity of Open Access Repositories categorizing the data retrieved by country, number of downloads, number of views, number of repositories and all derivative quantitative open metrics, comprehensively. Architecture. ";
@ -58,6 +58,14 @@ export class AboutComponent implements OnInit {
}));
}
public ngOnDestroy() {
this.subs.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
goTo(id: string) {
const yOffset = -100;
const element = document.getElementById(id);
@ -66,9 +74,4 @@ export class AboutComponent implements OnInit {
window.scrollTo({top: y, behavior: 'smooth'});
}
}
public ngOnDestroy() {
for (let sub of this.subs) {
sub.unsubscribe();
}
}
}

View File

@ -58,8 +58,8 @@
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
</div>
<div class="uk-width-2-3 uk-margin-large-bottom uk-margin-auto-left uk-margin-auto-right">
<div *ngIf="loading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
<div *ngIf="loading" class="uk-padding-large uk-width-1-1">
<loading></loading>
</div>
<div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
uk-grid>
@ -166,8 +166,8 @@
</li>
</ul>
</div>
<div *ngIf="iframeLoading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
<div *ngIf="iframeLoading" class="uk-padding-large uk-width-1-1" role="alert">
<loading></loading>
</div>
<iframe (load)="onLoad()" class="uk-animation-fade" width="742" height="453" seamless frameborder="0"
scrolling="no" [class.uk-hidden]="iframeLoading"

View File

@ -1,7 +1,7 @@
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {CountryUsageStat, UsageStat} from '../entities/usage-stat';
import {FormControl, FormGroup} from '@angular/forms';
import {Observable, Subscription} from 'rxjs';
import {Observable, Subscriber, Subscription} from 'rxjs';
import {UsageStatsService} from '../services/usage-stats.service';
import {map, startWith} from 'rxjs/operators';
import {countries} from '../services/countries';
@ -19,7 +19,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
templateUrl: 'analytics.component.html',
styleUrls: ['analytics.component.css'],
})
export class AnalyticsComponent implements OnInit {
export class AnalyticsComponent implements OnInit, OnDestroy {
public countryFb: FormGroup;
public countries: Observable<string[]>;
public country: string;
@ -36,6 +36,8 @@ export class AnalyticsComponent implements OnInit {
description = "Track Countries Usage Activity. Worldwide Monthly Usage Events, Monthly Views & Downloads.";
title = "OpenAIRE - UsageCounts | Analytics";
subs: Subscription[] = [];
searchSub: Subscription = null;
constructor(private usageStatsService: UsageStatsService,
private route: ActivatedRoute,
private router: Router,
@ -72,6 +74,15 @@ export class AnalyticsComponent implements OnInit {
}
}
public ngOnDestroy() {
this.subs.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
this.clearTimeouts();
}
private init() {
this.countryFb = new FormGroup({
country: new FormControl(null)
@ -119,7 +130,7 @@ export class AnalyticsComponent implements OnInit {
this.clearTimeouts();
if (this.country && this.country.length > 0) {
this.country = StringUtils.capitalize(this.country);
this.usageStatsService.getCountryMetrics(this.country).subscribe(stats => {
this.searchSub = this.usageStatsService.getCountryMetrics(this.country).subscribe(stats => {
this.display = this.roundCountryUsageStat(stats);
this.loading = false;
if (this.display) {
@ -177,6 +188,9 @@ export class AnalyticsComponent implements OnInit {
clearTimeout(timeout);
});
this.state = 0;
if(this.searchSub instanceof Subscription) {
this.searchSub.unsubscribe();
}
}
reset() {
@ -203,9 +217,4 @@ export class AnalyticsComponent implements OnInit {
public getSafeUrl(url: string): SafeUrl {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
public ngOnDestroy() {
for (let sub of this.subs) {
sub.unsubscribe();
}
}
}

View File

@ -11,6 +11,7 @@ import {Schema2jsonldModule} from '../openaireLibrary/sharedComponents/schema2js
import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
import {arrow_down, arrow_right} from '../openaireLibrary/utils/icons/icons';
import {LoadingModule} from '../openaireLibrary/utils/loading/loading.module';
@NgModule({
imports: [
@ -23,7 +24,8 @@ import {arrow_down, arrow_right} from '../openaireLibrary/utils/icons/icons';
path: '', component: AnalyticsComponent
}]),
Schema2jsonldModule,
IconsModule
IconsModule,
LoadingModule
],
declarations: [AnalyticsComponent],
exports: [AnalyticsComponent]

View File

@ -1,4 +1,4 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {Router} from '@angular/router';
import {EmailService} from '../openaireLibrary/utils/email/email.service';
import {Email} from '../openaireLibrary/utils/email/email';
@ -8,7 +8,7 @@ import {Meta, Title} from '@angular/platform-browser';
import {HelperFunctions} from '../openaireLibrary/utils/HelperFunctions.class';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {properties} from '../../environments/environment';
import {Subscription} from 'rxjs';
import {Subscriber, Subscription} from 'rxjs';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
@ -18,7 +18,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
styleUrls: ['contact.component.css']
})
export class ContactComponent implements OnInit {
export class ContactComponent implements OnInit, OnDestroy {
public showLoading = true;
public errorMessage = '';
public email: Email;
@ -27,9 +27,10 @@ export class ContactComponent implements OnInit {
public contactForm: FormGroup;
@ViewChild('AlertModal') modal;
@ViewChild('recaptcha') recaptcha;
description = "Any questions? Contact us ";
title = "OpenAIRE - UsageCounts | Contact Us";
description = 'Any questions? Contact us ';
title = 'OpenAIRE - UsageCounts | Contact Us';
subs: Subscription[] = [];
constructor(private router: Router,
private emailService: EmailService,
private _title: Title, private _piwikService: PiwikService,
@ -39,24 +40,29 @@ export class ContactComponent implements OnInit {
ngOnInit() {
this._title.setTitle(this.title);
this._meta.updateTag({content: this.description}, "name='description'");
this._meta.updateTag({content: this.description}, "property='og:description'");
this._meta.updateTag({content: this.title}, "property='og:title'");
this._meta.updateTag({content: this.description}, 'name=\'description\'');
this._meta.updateTag({content: this.description}, 'property=\'og:description\'');
this._meta.updateTag({content: this.title}, 'property=\'og:title\'');
this._title.setTitle(this.title);
let url = this.properties.domain + this.properties.baseLink + this.router.url;
this.seoService.createLinkForCanonicalURL(url, false);
this._meta.updateTag({content: url}, "property='og:url'");
this._meta.updateTag({content: url}, 'property=\'og:url\'');
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
this.subs.push(this._piwikService.trackView(this.properties, this.title).subscribe());
} this.email = {body: '', subject: '', recipients: []};
}
this.email = {body: '', subject: '', recipients: []};
this.reset();
this.showLoading = false;
}
public ngOnDestroy() {
for (let sub of this.subs) {
sub.unsubscribe();
}
this.subs.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
public send(event) {
HelperFunctions.scroll();
if (event.valid === true) {

View File

@ -1,9 +1,9 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
import {FullPageSliderComponent} from '../openaireLibrary/utils/full-page-slider/full-page-slider.component';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {Subscription} from 'rxjs';
import {Subscriber, Subscription} from 'rxjs';
import {properties} from '../../environments/environment';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
@ -13,56 +13,60 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
templateUrl: 'home.component.html',
styleUrls: ['home.component.css'],
})
export class HomeComponent implements OnInit{
export class HomeComponent implements OnInit, OnDestroy {
public initSlide: number = 1;
public fragments: string[] = ['', 'why', 'who', 'features'];
@ViewChild("slider")
@ViewChild('slider')
public slider: FullPageSliderComponent;
properties: EnvProperties = properties;
subs: Subscription[] = [];
constructor(private route: ActivatedRoute,
private router: Router,
private _title: Title, private _piwikService: PiwikService,
private _meta: Meta, private seoService: SEOService
) {}
) {
}
ngOnInit()
{
let description = "UsageCounts service collects usage data from Open Science content providers repositories, journals, and other scientific data sources. Then, it aggregates them, delivering standardized activity reports about research usage and uptake. It complements existing citation mechanisms and assists institutional repository managers, research communities, research organizations, funders, and policy makers to track and evaluate research from an early stage.";
let title = "OpenAIRE - UsageCounts";
ngOnInit() {
let description = 'UsageCounts service collects usage data from Open Science content providers repositories, journals, and other scientific data sources. Then, it aggregates them, delivering standardized activity reports about research usage and uptake. It complements existing citation mechanisms and assists institutional repository managers, research communities, research organizations, funders, and policy makers to track and evaluate research from an early stage.';
let title = 'OpenAIRE - UsageCounts';
this._title.setTitle(title);
this._meta.updateTag({content: description}, "name='description'");
this._meta.updateTag({content: description}, "property='og:description'");
this._meta.updateTag({content: title}, "property='og:title'");
this._meta.updateTag({content: description}, 'name=\'description\'');
this._meta.updateTag({content: description}, 'property=\'og:description\'');
this._meta.updateTag({content: title}, 'property=\'og:title\'');
this._title.setTitle(title);
let url = this.properties.domain + this.properties.baseLink + this.router.url;
this.seoService.createLinkForCanonicalURL(url, false);
this._meta.updateTag({content: url}, "property='og:url'");
this._meta.updateTag({content: url}, 'property=\'og:url\'');
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
this.subs.push(this._piwikService.trackView(this.properties, title).subscribe());
}
this.subs.push(this.route.fragment.subscribe(name => {
if(name) {
if (name) {
let slide = this.fragments.findIndex(fragment => fragment === name) + 1;
if(slide > 0) {
if (slide > 0) {
this.initSlide = slide;
}
}
}));
this.subs.push(this.slider.stateAsObservable.subscribe(state => {
if(state == 1) {
if (state == 1) {
this.router.navigate(['/']);
} else {
this.router.navigate(['/'], {fragment: this.fragments[state - 1]});
}
}));
}
public ngOnDestroy() {
for (let sub of this.subs) {
sub.unsubscribe();
}
this.subs.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
}

View File

@ -1,9 +1,9 @@
import {Component, HostListener, OnInit} from '@angular/core';
import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
import {Meta, Title} from '@angular/platform-browser';
import {ActivatedRoute, Router} from '@angular/router';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {properties} from '../../environments/environment';
import {Subscription} from 'rxjs';
import {Subscriber, Subscription} from 'rxjs';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
@ -12,7 +12,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
templateUrl: 'resources.component.html',
styleUrls: ['resources.component.css'],
})
export class ResourcesComponent implements OnInit {
export class ResourcesComponent implements OnInit, OnDestroy {
properties: EnvProperties = properties;
description = "OpenAIRE Provide. The resources of the OpenAIRE UsageCounts Service are available through the OpenAIRE PROVIDE product, which is serving the content providers. APIs and Reports.";
title = "OpenAIRE - UsageCounts | Resources";
@ -56,6 +56,14 @@ export class ResourcesComponent implements OnInit {
}));
}
public ngOnDestroy() {
this.subs.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
goTo(id: string) {
const yOffset = -100;
const element = document.getElementById(id);
@ -64,9 +72,4 @@ export class ResourcesComponent implements OnInit {
window.scrollTo({top: y, behavior: 'smooth'});
}
}
public ngOnDestroy() {
for (let sub of this.subs) {
sub.unsubscribe();
}
}
}

View File

@ -8,8 +8,8 @@ import {properties} from '../../environments/environment';
templateUrl: 'sushilite.component.html',
styleUrls: ['sushilite.component.css'],
})
export class SushiliteComponent implements OnInit{
export class SushiliteComponent implements OnInit {
public url: string;
public reportTitle: string;
public screenHeight: number;