Project

General

Profile

1
import {ChangeDetectorRef, Component, OnDestroy, OnInit, ViewRef} from '@angular/core';
2
import {ActivatedRoute, Params, Router} from '@angular/router';
3
import {DomSanitizer, Meta, Title} from '@angular/platform-browser';
4
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
5

    
6
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
7
import {Dates, StringUtils} from '../openaireLibrary/utils/string-utils.class';
8
import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
9
import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
10
import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
11
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
12
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
13
import {
14
  Category, Indicator,
15
  IndicatorPath, IndicatorSize,
16
  Stakeholder,
17
  SubCategory,
18
  Topic,
19
  Visibility
20
} from "../openaireLibrary/monitor/entities/stakeholder";
21
import {StatisticsService} from "../utils/services/statistics.service";
22
import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
23
import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
24
import {FormBuilder, FormControl} from "@angular/forms";
25
import {Subscriber, Subscription} from "rxjs";
26
import {User} from "../openaireLibrary/login/utils/helper.class";
27
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
28
import {RangeFilter} from "../openaireLibrary/utils/rangeFilter/rangeFilterHelperClasses.class";
29
import {Filter} from "../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
30
import {Location} from "@angular/common";
31
import {RouterHelper} from "../openaireLibrary/utils/routerHelper.class";
32
import {properties} from "../../environments/environment";
33
import {IndexInfoService} from "../openaireLibrary/utils/indexInfo.service";
34

    
35
@Component({
36
  selector: 'monitor',
37
  templateUrl: 'monitor.component.html',
38
  styleUrls: ['monitor.component.css']
39
})
40
export class MonitorComponent implements OnInit, OnDestroy {
41
  public user: User;
42
  public subscriptions: any[] = [];
43
  public piwiksub: any;
44
  public pageContents = null;
45
  public divContents = null;
46
  public status: number;
47
  public loading: boolean = true;
48
  public isViewPublic: boolean = false;
49
  public indicatorUtils: IndicatorUtils = new IndicatorUtils();
50
  public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
51
  public activeTopic: Topic = null;
52
  public activeCategory: Category = null;
53
  public activeSubCategory: SubCategory = null;
54
  public errorCodes: ErrorCodes;
55
  public stakeholder: Stakeholder;
56
  public numberResults: Map<string, number> = new Map<string, number>();
57
  public chartsActiveType: Map<string, IndicatorPath> = new Map<string, IndicatorPath>();
58
  private errorMessages: ErrorMessagesComponent;
59
  properties: EnvProperties = properties;
60
  filterToggle = false;
61
  public routerHelper: RouterHelper = new RouterHelper();
62
  filters: Filter[] = [];
63
  queryParams = {};
64
  periodFilter: RangeFilter = {
65
    title: "Time range",
66
    filterId: "year",
67
    originalFilterIdFrom: null,
68
    originalFilterIdTo: null,
69
    selectedFromValue: null,
70
    selectedToValue: null,
71
    selectedFromAndToValues: ""
72
  };
73
  privateStakeholder = false;
74
  public keyword: FormControl;
75
  public statsUpdateDate: Date;
76
  constructor(
77
    private route: ActivatedRoute,
78
    private _router: Router,
79
    private _meta: Meta,
80
    private _title: Title,
81
    private _piwikService: PiwikService,
82
    private helper: HelperService,
83
    private stakeholderService: StakeholderService,
84
    private userManagementService: UserManagementService,
85
    private statisticsService: StatisticsService,
86
    private layoutService: LayoutService,
87
    private seoService: SEOService,
88
    private cdr: ChangeDetectorRef,
89
    private indexInfoService: IndexInfoService,
90
    private sanitizer: DomSanitizer, private _fb: FormBuilder, private router: Router) {
91
    this.errorCodes = new ErrorCodes();
92
    this.errorMessages = new ErrorMessagesComponent();
93
    this.status = this.errorCodes.LOADING;
94
  }
95
  
96
  public ngOnInit() {
97
    if (typeof document !== 'undefined') {
98
      this.subscriptions.push(this.indexInfoService.getStatsLastDate(this.properties).subscribe(lastIndexUpdate => {
99
        if (lastIndexUpdate) {
100
          this.statsUpdateDate = new Date(lastIndexUpdate);
101
        }
102
      }));
103
    }
104
    this.keyword = this._fb.control('');
105
    this.subscriptions.push(this.keyword.valueChanges.subscribe(value => {
106
      console.log("Keyword Changed!");
107
      //TODO do a real action
108
    }));
109
    let subscription: Subscription;
110
    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
111
      this.user = user;
112
      
113
      this.subscriptions.push(this.route.params.subscribe(params => {
114
        this.loading = true;
115
        this.activeTopic = null;
116
        this.activeCategory = null;
117
        this.activeSubCategory = null;
118
        this.filterToggle = false;
119
        if (subscription) {
120
          subscription.unsubscribe();
121
        }
122
        var url = properties.domain + properties.baseLink + this._router.url;
123
        this.subscriptions.push(this.route.queryParams.subscribe(params => {
124
          this.queryParams = Object.assign({}, params);
125
          this.isViewPublic = (params['view'] == 'public');
126
        }));
127
        if (!this.stakeholder || this.stakeholder.alias !== params['stakeholder']) {
128
          this.status = this.errorCodes.LOADING;
129
          this.numberResults = new Map<string, number>();
130
          this.chartsActiveType = new Map<string, IndicatorPath>();
131
          subscription = this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
132
            if (stakeholder) {
133
              this.stakeholder = stakeholder;
134
              // add fl0 filter only for EC
135
              if (this.stakeholder.index_id == "ec__________::EC") {
136
                this.filters.push({
137
                  title: "Funding Stream",
138
                  filterId: "relfundinglevel0_id",
139
                  originalFilterId: "relfundinglevel0_id",
140
                  countSelectedValues: 0,
141
                  values: [{name: "EC|FP7", id: "ec__________::EC::FP7", selected: false, number: 0}, {
142
                    name: "EC|H2020",
143
                    id: "ec__________::EC::H2020",
144
                    selected: false,
145
                    number: 0
146
                  }]
147
                  ,
148
                  filterOperator: "or",
149
                  valueIsExact: true,
150
                  filterType: "radio",
151
                  radioValue: ""
152
                });
153
              }
154
              if (this.stakeholder.type == "funder") {
155
                // this.filters.push({title: "Co-funded research outcomes",filterId: "co-funded",originalFilterId: "co-funded", countSelectedValues: 0,
156
                //   values:[{name: "true", id: "co-funded", selected:  false, number: 0}, {name: "false", id: "no-co-funded", selected:  false, number: 0}]
157
                //   ,filterOperator: "or", valueIsExact: true, filterType: "radio", radioValue:""});
158
                this.filters.push({
159
                  title: "Co-funded", filterId: "co-funded", originalFilterId: "co-funded", countSelectedValues: 0,
160
                  values: [{name: "Co-funded research output", id: "co-funded-results", selected: false, number: 0}]
161
                  , filterOperator: "or", valueIsExact: true, filterType: "checkbox", radioValue: ""
162
                });
163
              }
164
              this.initializeFilters();
165
              this.seoService.createLinkForCanonicalURL(url, false);
166
              this._meta.updateTag({content: url}, "property='og:url'");
167
              var description = "Monitor Dashboard | " + this.stakeholder.name;
168
              var title = "Monitor Dashboard | " + this.stakeholder.name;
169
              this._meta.updateTag({content: description}, "name='description'");
170
              this._meta.updateTag({content: description}, "property='og:description'");
171
              this._meta.updateTag({content: title}, "property='og:title'");
172
              this._title.setTitle(title);
173
              if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
174
                this.subscriptions.push(this._piwikService.trackView(this.properties, title, this.properties.piwikSiteId).subscribe());
175
              }
176
              if (this.isPublicOrIsMember(stakeholder.visibility)) {
177
                //this.getDivContents();
178
                // this.getPageContents();
179
                this.status = this.errorCodes.DONE;
180
                this.setView(params);
181
              } else {
182
                this.privateStakeholder = true;
183
                // this.navigateToError();
184
                if (subscription) {
185
                  subscription.unsubscribe();
186
                }
187
              }
188
            }
189
          });
190
          this.subscriptions.push(subscription);
191
        } else {
192
          this.initializeFilters();
193
          this.setView(params);
194
        }
195
      }));
196
    }));
197
    
198
  }
199
  
200
  private initializeFilters() {
201
    this.periodFilter.selectedFromValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range") == 0) ? this.queryParams['year'].split("range")[1].split(":")[0] : "";
202
    this.periodFilter.selectedToValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range") == 0) ? this.queryParams['year'].split("range")[1].split(":")[1] : "";
203
    this.validateYearRange(false);
204
    
205
    for (let filter of this.filters) {
206
      if (this.queryParams[filter.filterId]) {
207
        for (let value of filter.values) {
208
          if (value.id == StringUtils.URIDecode(StringUtils.unquote(this.queryParams[filter.filterId]))) {
209
            value.selected = true;
210
            filter.countSelectedValues = 1;
211
            break;
212
          }
213
        }
214
      } else {
215
        this.clearfFilter(filter);
216
      }
217
    }
218
    
219
  }
220
  
221
  private validateYearRange(navigateTo: boolean = false) {
222
    let validYears = true;
223
    
224
    if (this.periodFilter.selectedToValue && (this.periodFilter.selectedToValue.length == 0 || !Dates.isValidYear(this.periodFilter.selectedToValue, Dates.currentYear - 20, Dates.currentYear))) {
225
      this.periodFilter.selectedToValue = Dates.currentYear + "";
226
      validYears = false;
227
    }
228
    if (this.periodFilter.selectedFromValue && (this.periodFilter.selectedFromValue.length == 0 || !Dates.isValidYear(this.periodFilter.selectedFromValue, Dates.currentYear - 20, Dates.currentYear))) {
229
      this.periodFilter.selectedFromValue = Dates.currentYear - 20 + "";
230
      validYears = false;
231
    }
232
    if (this.periodFilter.selectedFromValue && this.periodFilter.selectedFromValue.length && this.periodFilter.selectedToValue && this.periodFilter.selectedToValue.length > 0 && parseInt(this.periodFilter.selectedFromValue, 10) > parseInt(this.periodFilter.selectedToValue, 10)) {
233
      this.periodFilter.selectedFromValue = this.periodFilter.selectedToValue;
234
      validYears = false;
235
    }
236
    if (!validYears || navigateTo) {
237
      if (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue) {
238
        this.queryParams["year"] = 'range' + (this.periodFilter.selectedFromValue ? this.periodFilter.selectedFromValue : '') + ":" + (this.periodFilter.selectedToValue ? this.periodFilter.selectedToValue : "");
239
      } else {
240
        delete this.queryParams["year"];
241
      }
242
      // this.location.go(location.pathname, this.routerHelper.createQueryParamsString( Object.keys(this.queryParams), Object.values(this.queryParams)));
243
      this.router.navigate([], {queryParams: this.queryParams});
244
      this.setIndicators();
245
    }
246
  }
247
  
248
  clearAll() {
249
    for (let filter of this.filters) {
250
      this.clearfFilter(filter);
251
    }
252
    this.periodFilter.selectedFromValue = "";
253
    this.periodFilter.selectedToValue = "";
254
    this.validateYearRange(true)
255
  }
256
  
257
  clearfFilter(filter: Filter) {
258
    filter.countSelectedValues = 0;
259
    filter.radioValue = "";
260
    for (let value of filter.values) {
261
      if (value.selected) {
262
        value.selected = false;
263
      }
264
    }
265
    if (this.queryParams[filter.filterId]) {
266
      delete this.queryParams[filter.filterId];
267
    }
268
  }
269
  
270
  countSelectedFilters(): number {
271
    let count = 0;
272
    if (this.periodFilter.selectedFromAndToValues.length > 0) {
273
      count += 2;
274
    }
275
    for (let filter of this.filters) {
276
      count += filter.countSelectedValues;
277
    }
278
    return count;
279
  }
280
  
281
  public get isSmallScreen() {
282
    return this.layoutService.isSmallScreen;
283
  }
284
  
285
  public get open() {
286
    return this.layoutService.open;
287
  }
288
  
289
  private getPageContents() {
290
    this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
291
      this.pageContents = contents;
292
    }));
293
  }
294
  
295
  private getDivContents() {
296
    this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
297
      this.divContents = contents;
298
    }));
299
  }
300
  
301
  private setView(params: Params) {
302
    this.loading = false;
303
    if (params['topic']) {
304
      this.activeTopic = this.stakeholder.topics.find(topic => topic.alias === decodeURIComponent(params['topic']) && this.isPublicOrIsMember(topic.visibility));
305
      if (this.activeTopic) {
306
        if (params['category']) {
307
          this.activeCategory = this.activeTopic.categories.find(category =>
308
            (category.alias === params['category']) && this.isPublicOrIsMember(category.visibility));
309
          if (!this.activeCategory) {
310
            this.navigateToError();
311
            return;
312
          }
313
        } else {
314
          this.activeCategory = this.activeTopic.categories.find(category => this.isPublicOrIsMember(category.visibility));
315
          if (this.activeCategory) {
316
            this.activeSubCategory = this.activeCategory.subCategories.find(subCategory =>
317
              this.isPublicOrIsMember(subCategory.visibility));
318
            if (this.activeSubCategory) {
319
              this.setIndicators();
320
            }
321
          }
322
          return;
323
        }
324
        if (this.activeCategory) {
325
          if (params['subCategory']) {
326
            this.activeSubCategory = this.activeCategory.subCategories.find(subCategory =>
327
              (subCategory.alias === params['subCategory'] && this.isPublicOrIsMember(subCategory.visibility)));
328
            if (!this.activeSubCategory) {
329
              this.navigateToError();
330
              return;
331
            }
332
          } else {
333
            this.activeSubCategory = this.activeCategory.subCategories.find(subCategory =>
334
              this.isPublicOrIsMember(subCategory.visibility));
335
          }
336
          if (this.activeSubCategory) {
337
            this.setIndicators();
338
          } else {
339
            this.navigateToError();
340
          }
341
          return;
342
        } else {
343
          this.activeSubCategory = null;
344
        }
345
      } else {
346
        this.navigateToError();
347
        return;
348
      }
349
    } else {
350
      this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility));
351
      if (this.activeTopic) {
352
        this.activeCategory = this.activeTopic.categories.find(category => this.isPublicOrIsMember(category.visibility));
353
        if (this.activeCategory) {
354
          this.activeSubCategory = this.activeCategory.subCategories.find(subCategory => this.isPublicOrIsMember(subCategory.visibility));
355
          if (this.activeSubCategory) {
356
            this.setIndicators();
357
          }
358
        }
359
      }
360
    }
361
  }
362
  
363
  filter() {
364
    this.validateYearRange(true);
365
  }
366
  
367
  filterChanged($event, navigate: boolean = true) {
368
    let selected = "";
369
    for (let value of $event.value.values) {
370
      if (value.selected) {
371
        selected = value.id;
372
        break;
373
      }
374
    }
375
    if (selected) {
376
      this.queryParams[$event.value.filterId] = StringUtils.quote(StringUtils.URIEncode(selected));
377
    } else {
378
      delete this.queryParams[$event.value.filterId];
379
    }
380
    if (navigate) {
381
      this.router.navigate([], {queryParams: this.queryParams});
382
      this.setIndicators();
383
    }
384
    
385
  }
386
  
387
  private getfl0() {
388
    if (this.queryParams["relfundinglevel0_id"] && this.filters.length > 0) {
389
      let value = StringUtils.URIDecode(StringUtils.unquote(this.queryParams["relfundinglevel0_id"] ));
390
      return value.split("::")[value.split("::").length - 1];
391
    }
392
    return null;
393
  }
394
  
395
  private getCoFunded() {
396
    if (this.queryParams["co-funded"] && this.filters.length > 0) {
397
      return this.queryParams["co-funded"] && this.queryParams["co-funded"] == "co-funded-results";
398
    }
399
    return false;
400
  }
401
  
402
  clearPeriodFilter() {
403
    if (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue) {
404
      this.periodFilter.selectedFromValue = "";
405
      this.periodFilter.selectedToValue = "";
406
      this.filter();
407
    }
408
    
409
  }
410
  
411
  private setIndicators() {
412
    this.periodFilter.selectedFromAndToValues = (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue ? ((this.periodFilter.selectedFromValue && !this.periodFilter.selectedToValue ? "From " : "") + (!this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue ? "Until " : "") + (this.periodFilter.selectedFromValue ? this.periodFilter.selectedFromValue : "") +
413
      (this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue ? " - " : "") + (this.periodFilter.selectedToValue ? this.periodFilter.selectedToValue : "")) : "");
414
    //clear numbers when filters change
415
    this.numberResults.clear();
416
    let urls: Map<string, [number, number][]> = new Map<string, [number, number][]>();
417
    this.activeSubCategory.numbers.forEach((section, i) => {
418
      section.indicators.forEach((number, j) => {
419
        if (this.isPublicOrIsMember(number.visibility)) {
420
          let url = this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, number.indicatorPaths[0], this.getfl0(), this.periodFilter.selectedFromValue, this.periodFilter.selectedToValue, this.getCoFunded());
421
          const pair = JSON.stringify([number.indicatorPaths[0].source, url]);
422
          const indexes = urls.get(pair) ? urls.get(pair) : [];
423
          indexes.push([i, j]);
424
          urls.set(pair, indexes);
425
        }
426
      });
427
    });
428
    urls.forEach((indexes, pair) => {
429
      pair = JSON.parse(pair);
430
      this.subscriptions.push(this.statisticsService.getNumbers(this.statisticsService.getSourceType(pair[0]), pair[1]).subscribe(response => {
431
        indexes.forEach(([i, j]) => {
432
          let result = JSON.parse(JSON.stringify(response));
433
          this.activeSubCategory.numbers[i].indicators[j].indicatorPaths[0].jsonPath.forEach(jsonPath => {
434
            if (result) {
435
              result = result[jsonPath];
436
            }
437
          });
438
          this.numberResults.set(i + '-' + j, result);
439
        });
440
      }));
441
    });
442
    this.activeSubCategory.charts.forEach((section, i) => {
443
      section.indicators.forEach((indicator, j) => {
444
        if (indicator.indicatorPaths.length > 0) {
445
          indicator.indicatorPaths[0].safeResourceUrl = this.getUrlByStakeHolder(indicator.indicatorPaths[0]);
446
          this.chartsActiveType.set(i + '-' + j, indicator.indicatorPaths[0]);
447
        }
448
      });
449
    });
450
    if (this.cdr && !(this.cdr as ViewRef).destroyed) {
451
      this.cdr.detectChanges();
452
    }
453
  }
454
  
455
  public getUrlByStakeHolder(indicatorPath: IndicatorPath) {
456
    return this.sanitizer.bypassSecurityTrustResourceUrl(
457
      this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, indicatorPath, this.getfl0(), this.periodFilter.selectedFromValue, this.periodFilter.selectedToValue, this.getCoFunded())));
458
  }
459
  
460
  public setActiveChart(i: number, j: number, type: string) {
461
    let activeChart = this.activeSubCategory.charts[i].indicators[j].indicatorPaths.filter(indicatorPath => indicatorPath.type === type)[0];
462
    activeChart.safeResourceUrl = this.getUrlByStakeHolder(activeChart);
463
    this.chartsActiveType.set(i + '-' + j, activeChart);
464
  }
465
  
466
  private navigateToError() {
467
    this._router.navigate(['/error'], {queryParams: {'page': this._router.url}});
468
  }
469
  
470
  public navigateTo(stakeholder: string, topic: string, category: string = null, subcategory: string = null) {
471
    let url = stakeholder + '/' + topic + ((category) ? ('/'
472
      + category) : '') + ((subcategory) ? ('/' + subcategory) : '');
473
    return this._router.navigate([url], {queryParams: this.queryParams});
474
  }
475
  
476
  public quote(param: string): string {
477
    return StringUtils.quote(param);
478
  }
479
  
480
  public ngOnDestroy() {
481
    if (this.piwiksub) {
482
      this.piwiksub.unsubscribe();
483
    }
484
    this.subscriptions.forEach(subscription => {
485
      if (subscription instanceof Subscriber) {
486
        subscription.unsubscribe();
487
      }
488
    });
489
  }
490
  
491
  public isPublicOrIsMember(visibility: Visibility): boolean {
492
    if (visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC")) {
493
      return false;
494
    }
495
    return true;
496
  }
497
  
498
  public countSubCategoriesToShow(category: Category): number {
499
    let counter = 0;
500
    for (let sub of category.subCategories) {
501
      if (this.isPublicOrIsMember(sub.visibility)) {
502
        counter++;
503
      }
504
    }
505
    return counter;
506
  }
507
  
508
  public countIndicatorsToShow(indicators: Indicator[]): number {
509
    let counter = 0;
510
    for (let i of indicators) {
511
      if (this.isPublicOrIsMember(i.visibility)) {
512
        counter++;
513
      }
514
    }
515
    return counter;
516
  }
517
  
518
  /*
519
  Feedback mail
520
   */
521
  public get mailText() {
522
    return "mailto:" + this.properties.feedbackmail + "?subject=%5BOpenAIRE%20Monitor%5D%20" + (this.stakeholder ? this.stakeholder.name : "") + "%20dashboard%20feedback"
523
  }
524
  
525
  mailMe() {
526
    window.location.href = this.mailText;
527
  }
528
  
529
  public getNumberClassBySize(size: IndicatorSize) {
530
    if(size === 'small') {
531
      return 'uk-width-1-4@xl uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
532
    } else if(size === 'medium') {
533
      return 'uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
534
    } else {
535
      return 'uk-width-1-2@l uk-width-1-1@m uk-width-1-1';
536
    }
537
  }
538
  
539
  public getChartClassBySize(size: IndicatorSize) {
540
    if(size === 'small') {
541
      return 'uk-width-1-3@xl uk-width-1-2@m uk-width-1-1';
542
    } else if(size === 'medium') {
543
      return 'uk-width-1-2@l uk-width-1-1';
544
    } else {
545
      return 'uk-width-1-1';
546
    }
547
  }
548
}
(4-4/5)