Revision 60886
Added by Konstantinos Triantafyllou about 3 years ago
numbers.component.ts | ||
---|---|---|
5 | 5 |
import {EnvProperties} from '../../utils/properties/env-properties'; |
6 | 6 |
import {properties} from '../../../../environments/environment'; |
7 | 7 |
import {NumberUtils} from '../../utils/number-utils.class'; |
8 |
import {Subscription} from 'rxjs'; |
|
8 |
import {Subscription, zip} from 'rxjs';
|
|
9 | 9 |
|
10 | 10 |
@Component({ |
11 | 11 |
selector: 'numbers', |
12 | 12 |
template: ` |
13 |
<div class="uk-margin-large-top uk-container uk-margin-bottom uk-text-center"> |
|
14 |
<div class="uk-grid uk-grid-large uk-child-width-1-3@m" uk-grid> |
|
15 |
<div *ngIf="fundersSize"> |
|
16 |
<h3> |
|
17 |
<a href="https://explore.openaire.eu/search/find/projects" target="_blank" class="uk-text-bold number"> |
|
18 |
{{fundersSize.number|number}}<span class="number-size">{{fundersSize.size}}</span> |
|
19 |
</a> |
|
20 |
</h3> |
|
21 |
<span class="uk-text-uppercase uk-text-large">Funders</span> |
|
13 |
<ng-container *ngIf="!loading"> |
|
14 |
<div class="uk-container uk-section uk-padding-remove-bottom uk-text-center"> |
|
15 |
<div class="uk-grid uk-grid-large uk-child-width-1-3@m" uk-grid> |
|
16 |
<div *ngIf="fundersSize"> |
|
17 |
<h3> |
|
18 |
<a href="https://explore.openaire.eu/search/find/projects" target="_blank" class="uk-text-bold number"> |
|
19 |
{{fundersSize.number|number}}<span class="number-size">{{fundersSize.size}}</span> |
|
20 |
</a> |
|
21 |
</h3> |
|
22 |
<span class="uk-text-uppercase uk-text-large">Funders</span> |
|
23 |
</div> |
|
24 |
<div *ngIf="datasourcesSize"> |
|
25 |
<h3> |
|
26 |
<a href="https://explore.openaire.eu/search/find/dataproviders" target="_blank" |
|
27 |
class="uk-text-bold number"> |
|
28 |
{{datasourcesSize.number|number}}<span class="number-size">{{datasourcesSize.size}}</span> |
|
29 |
</a> |
|
30 |
</h3> |
|
31 |
<span class="uk-text-uppercase uk-text-large">Content providers</span> |
|
32 |
</div> |
|
33 |
<div *ngIf="projectsSize"> |
|
34 |
<h3> |
|
35 |
<a href="https://explore.openaire.eu/search/find/projects" target="_blank" class="uk-text-bold number"> |
|
36 |
{{projectsSize.number|number}}<span class="number-size">{{projectsSize.size}}</span> |
|
37 |
</a> |
|
38 |
</h3> |
|
39 |
<span class="uk-text-uppercase uk-text-large">Projects</span> |
|
40 |
</div> |
|
22 | 41 |
</div> |
23 |
<div *ngIf="datasourcesSize"> |
|
24 |
<h3> |
|
25 |
<a href="https://explore.openaire.eu/search/find/dataproviders" target="_blank" |
|
26 |
class="uk-text-bold number"> |
|
27 |
{{datasourcesSize.number|number}}<span class="number-size">{{datasourcesSize.size}}</span> |
|
28 |
</a> |
|
29 |
</h3> |
|
30 |
<span class="uk-text-uppercase uk-text-large">Content providers</span> |
|
31 |
</div> |
|
32 |
<div *ngIf="projectsSize"> |
|
33 |
<h3> |
|
34 |
<a href="https://explore.openaire.eu/search/find/projects" target="_blank" class="uk-text-bold number"> |
|
35 |
{{projectsSize.number|number}}<span class="number-size">{{projectsSize.size}}</span> |
|
36 |
</a> |
|
37 |
</h3> |
|
38 |
<span class="uk-text-uppercase uk-text-large">Projects</span> |
|
39 |
</div> |
|
40 | 42 |
</div> |
41 |
</div>
|
|
42 |
<div class="uk-section" [ngClass]="backgroundClass">
|
|
43 |
<div class="uk-container">
|
|
44 |
<div class="uk-grid uk-margin-auto-left uk-margin-auto-right uk-grid-large" uk-grid>
|
|
45 |
<div *ngIf="publicationsSize" class="uk-width-1-2@m uk-flex uk-flex-center">
|
|
46 |
<div class="number-width">
|
|
47 |
<a href="https://explore.openaire.eu/search/find/research-outcomes?type=publications&qf=false"
|
|
48 |
target="_blank" class="number uk-text-bold uk-margin-bottom">{{publicationsSize.count|number}} </a>
|
|
49 |
<div class="uk-text-uppercase uk-flex uk-flex-middle">
|
|
50 |
<icon name="book" ratio="1.5" [flex]="true" class="uk-margin-right" [customClass]="colorClass"></icon>
|
|
51 |
<span>publications</span>
|
|
43 |
<div class="uk-section" [ngClass]="backgroundClass">
|
|
44 |
<div class="uk-container">
|
|
45 |
<div class="uk-grid uk-flex-center uk-margin-auto-left@m uk-margin-auto-right@m uk-grid-large" uk-grid>
|
|
46 |
<div *ngIf="publicationsSize" class="uk-width-1-2@m uk-flex uk-flex-center">
|
|
47 |
<div class="number-width uk-flex uk-flex-wrap uk-flex-center uk-flex-left@m">
|
|
48 |
<a href="https://explore.openaire.eu/search/find/research-outcomes?type=publications&qf=false"
|
|
49 |
target="_blank" class="number uk-text-bold uk-margin-bottom">{{publicationsSize.count|number}} </a>
|
|
50 |
<div class="uk-text-uppercase uk-flex uk-flex-middle">
|
|
51 |
<icon name="book" ratio="1.5" [flex]="true" class="uk-margin-right" [customClass]="colorClass"></icon>
|
|
52 |
<span>publications</span>
|
|
53 |
</div>
|
|
52 | 54 |
</div> |
53 | 55 |
</div> |
54 |
</div>
|
|
55 |
<div *ngIf="datasetsSize" class="uk-width-1-2@m uk-flex uk-flex-center">
|
|
56 |
<div class="number-width">
|
|
57 |
<a href="https://explore.openaire.eu/search/find/research-outcomes?type=datasets&qf=false"
|
|
58 |
target="_blank" class="number uk-text-bold uk-margin-bottom">{{datasetsSize.count|number}} </a>
|
|
59 |
<div class="uk-text-uppercase uk-flex uk-flex-middle">
|
|
60 |
<icon name="database" ratio="1.5" [flex]="true" class="uk-margin-right" [customClass]="colorClass"></icon>
|
|
61 |
<span>research data</span>
|
|
56 |
<div *ngIf="datasetsSize" class="uk-width-1-2@m uk-flex uk-flex-center">
|
|
57 |
<div class="number-width uk-flex uk-flex-wrap uk-flex-center uk-flex-left@m">
|
|
58 |
<a href="https://explore.openaire.eu/search/find/research-outcomes?type=datasets&qf=false"
|
|
59 |
target="_blank" class="number uk-text-bold uk-margin-bottom">{{datasetsSize.count|number}} </a>
|
|
60 |
<div class="uk-text-uppercase uk-flex uk-flex-middle">
|
|
61 |
<icon name="database" ratio="1.5" [flex]="true" class="uk-margin-right" [customClass]="colorClass"></icon>
|
|
62 |
<span>research data</span>
|
|
63 |
</div>
|
|
62 | 64 |
</div> |
63 | 65 |
</div> |
64 |
</div>
|
|
65 |
<div *ngIf="softwareSize" class="uk-width-1-2@m uk-flex uk-flex-center">
|
|
66 |
<div class="number-width">
|
|
67 |
<a href="https://explore.openaire.eu/search/find/research-outcomes?type=software&qf=false"
|
|
68 |
target="_blank" class="number uk-text-bold uk-margin-bottom">{{softwareSize.count|number}} </a>
|
|
69 |
<div class="uk-text-uppercase uk-flex uk-flex-middle">
|
|
70 |
<icon name="cog" ratio="1.5" [flex]="true" class="uk-margin-right" [customClass]="colorClass"></icon>
|
|
71 |
<span>software</span>
|
|
66 |
<div *ngIf="softwareSize" class="uk-width-1-2@m uk-flex uk-flex-center">
|
|
67 |
<div class="number-width uk-flex uk-flex-wrap uk-flex-center uk-flex-left@m">
|
|
68 |
<a href="https://explore.openaire.eu/search/find/research-outcomes?type=software&qf=false"
|
|
69 |
target="_blank" class="number uk-text-bold uk-margin-bottom">{{softwareSize.count|number}} </a>
|
|
70 |
<div class="uk-text-uppercase uk-flex uk-flex-middle">
|
|
71 |
<icon name="cog" ratio="1.5" [flex]="true" class="uk-margin-right" [customClass]="colorClass"></icon>
|
|
72 |
<span>software</span>
|
|
73 |
</div>
|
|
72 | 74 |
</div> |
73 | 75 |
</div> |
74 |
</div>
|
|
75 |
<div *ngIf="otherSize" class="uk-width-1-2@m uk-flex uk-flex-center">
|
|
76 |
<div class="number-width">
|
|
77 |
<a href="https://explore.openaire.eu/search/find/research-outcomes?type=other&qf=false"
|
|
78 |
target="_blank" class="number uk-text-bold uk-margin-bottom">{{otherSize.count|number}} </a>
|
|
79 |
<div class="uk-text-uppercase uk-flex uk-flex-middle">
|
|
80 |
<icon name="earth" ratio="1.5" [flex]="true" class="uk-margin-right" [customClass]="colorClass"></icon>
|
|
81 |
<span>other research products</span>
|
|
76 |
<div *ngIf="otherSize" class="uk-width-1-2@m uk-flex uk-flex-center">
|
|
77 |
<div class="number-width uk-flex uk-flex-wrap uk-flex-center uk-flex-left@m">
|
|
78 |
<a href="https://explore.openaire.eu/search/find/research-outcomes?type=other&qf=false"
|
|
79 |
target="_blank" class="number uk-text-bold uk-margin-bottom">{{otherSize.count|number}} </a>
|
|
80 |
<div class="uk-text-uppercase uk-flex uk-flex-middle">
|
|
81 |
<icon name="earth" ratio="1.5" [flex]="true" class="uk-margin-right" [customClass]="colorClass"></icon>
|
|
82 |
<span>other research products</span>
|
|
83 |
</div>
|
|
82 | 84 |
</div> |
83 | 85 |
</div> |
84 | 86 |
</div> |
85 | 87 |
</div> |
86 | 88 |
</div> |
87 |
</div>`, |
|
89 |
</ng-container> |
|
90 |
<div *ngIf="loading" class="uk-container uk-section uk-text-center"> |
|
91 |
<loading [color]="colorClass"></loading> |
|
92 |
</div> |
|
93 |
`, |
|
88 | 94 |
}) |
89 | 95 |
export class NumbersComponent implements OnInit, OnDestroy { |
90 |
@Input() colorClass = 'uk-text-secondary';
|
|
91 |
@Input() backgroundClass = 'numbers-background';
|
|
96 |
@Input() colorClass = 'portal-color';
|
|
97 |
@Input() backgroundClass = null;
|
|
92 | 98 |
@Input() refineQuery = null; |
93 | 99 |
public properties: EnvProperties = properties; |
94 | 100 |
public publicationsSize: any = null; |
... | ... | |
98 | 104 |
public fundersSize: any = null; |
99 | 105 |
public projectsSize: any = null; |
100 | 106 |
public datasourcesSize: any = null; |
107 |
public loading: boolean = true; |
|
101 | 108 |
private subs: any[] = []; |
102 | 109 |
|
103 | 110 |
constructor(private searchResearchResultsService: SearchResearchResultsService, |
... | ... | |
106 | 113 |
} |
107 | 114 |
|
108 | 115 |
ngOnInit() { |
109 |
this.subs.push(this.searchResearchResultsService.numOfSearchResults('publication', '', this.properties, this.refineQuery).subscribe( |
|
110 |
data => { |
|
111 |
if (data && data > 0) { |
|
112 |
this.publicationsSize = NumberUtils.roundNumber(data); |
|
113 |
} |
|
114 |
}, |
|
115 |
err => { |
|
116 |
this.handleError('Error getting number of publications', err); |
|
116 |
this.subs.push(zip( |
|
117 |
this.searchResearchResultsService.numOfSearchResults('publication', '', this.properties, this.refineQuery), |
|
118 |
this.searchResearchResultsService.numOfSearchResults('dataset', '', this.properties, this.refineQuery), |
|
119 |
this.searchResearchResultsService.numOfSearchResults('software', '', this.properties, this.refineQuery), |
|
120 |
this.searchResearchResultsService.numOfSearchResults('other', '', this.properties, this.refineQuery), |
|
121 |
this.refineFieldResultsService.getRefineFieldsResultsByEntityName(['funder'], 'project', this.properties, this.refineQuery), |
|
122 |
this.searchDataprovidersService.numOfSearchDataproviders('', this.properties, this.refineQuery) |
|
123 |
).subscribe((data: any[]) => { |
|
124 |
if (data[0] && data[0] > 0) { |
|
125 |
this.publicationsSize = NumberUtils.roundNumber(data[0]); |
|
117 | 126 |
} |
118 |
)); |
|
119 |
this.subs.push(this.searchResearchResultsService.numOfSearchResults('dataset', '', this.properties, this.refineQuery).subscribe( |
|
120 |
data => { |
|
121 |
if (data && data > 0) { |
|
122 |
this.datasetsSize = NumberUtils.roundNumber(data); |
|
123 |
} |
|
124 |
}, |
|
125 |
err => { |
|
126 |
this.handleError('Error getting number of research data', err); |
|
127 |
if (data[1] && data[1] > 0) { |
|
128 |
this.datasetsSize = NumberUtils.roundNumber(data[1]); |
|
127 | 129 |
} |
128 |
)); |
|
129 |
this.subs.push(this.searchResearchResultsService.numOfSearchResults('software', '', this.properties, this.refineQuery).subscribe( |
|
130 |
data => { |
|
131 |
if (data && data > 0) { |
|
132 |
this.softwareSize = NumberUtils.roundNumber(data); |
|
133 |
} |
|
134 |
}, |
|
135 |
err => { |
|
136 |
this.handleError('Error getting number of software data', err); |
|
130 |
if (data[2] && data[2] > 0) { |
|
131 |
this.softwareSize = NumberUtils.roundNumber(data[2]); |
|
137 | 132 |
} |
138 |
)); |
|
139 |
this.subs.push(this.searchResearchResultsService.numOfSearchResults('other', '', this.properties, this.refineQuery).subscribe( |
|
140 |
data => { |
|
141 |
if (data && data > 0) { |
|
142 |
this.otherSize = NumberUtils.roundNumber(data); |
|
143 |
} |
|
144 |
}, |
|
145 |
err => { |
|
146 |
this.handleError('Error getting number of software data', err); |
|
133 |
if (data[3] && data[3] > 0) { |
|
134 |
this.otherSize = NumberUtils.roundNumber(data[3]); |
|
147 | 135 |
} |
148 |
)); |
|
149 |
this.subs.push(this.refineFieldResultsService.getRefineFieldsResultsByEntityName(['funder'], 'project', this.properties, this.refineQuery).subscribe( |
|
150 |
data => { |
|
151 |
if (data[0] && data[0] > 0) { |
|
152 |
this.projectsSize = NumberUtils.roundNumber(data[0]); |
|
153 |
} |
|
154 |
if (data[1].length > 0 && data[1][0].filterId == 'funder' && data[1][0].values) { |
|
155 |
this.fundersSize = NumberUtils.roundNumber(data[1][0].values.length); |
|
156 |
} |
|
157 |
|
|
158 |
}, |
|
159 |
err => { |
|
160 |
this.handleError('Error getting \'funder\' field results of projects', err); |
|
161 |
}) |
|
162 |
); |
|
163 |
|
|
164 |
this.subs.push(this.searchDataprovidersService.numOfSearchDataproviders('', this.properties, this.refineQuery).subscribe( |
|
165 |
data => { |
|
166 |
if (data && data > 0) { |
|
167 |
this.datasourcesSize = NumberUtils.roundNumber(data); |
|
168 |
} |
|
169 |
|
|
170 |
}, |
|
171 |
err => { |
|
172 |
this.handleError('Error getting number of content providers', err); |
|
136 |
if (data[4][0] && data[4][0] > 0) { |
|
137 |
this.projectsSize = NumberUtils.roundNumber(data[4][0]); |
|
173 | 138 |
} |
174 |
)); |
|
139 |
if (data[4][1] && data[4][1].length > 0 && data[4][1][0].filterId == 'funder' && data[4][1][0].values) { |
|
140 |
this.fundersSize = NumberUtils.roundNumber(data[4][1][0].values.length); |
|
141 |
} |
|
142 |
if (data[5] && data[5] > 0) { |
|
143 |
this.datasourcesSize = NumberUtils.roundNumber(data[5]); |
|
144 |
} |
|
145 |
this.loading = false; |
|
146 |
}, err => { |
|
147 |
this.handleError('Error getting numbers', err); |
|
148 |
this.loading = false; |
|
149 |
})); |
|
175 | 150 |
} |
176 | 151 |
|
177 | 152 |
ngOnDestroy() { |
... | ... | |
183 | 158 |
} |
184 | 159 |
|
185 | 160 |
private handleError(message: string, error) { |
186 |
console.error("Numbers: " + message, error);
|
|
161 |
console.error('Numbers: ' + message, error);
|
|
187 | 162 |
} |
188 | 163 |
} |
Also available in: Unified diff
[Library | Trunk]: Numbers alignment fixed