1
|
<div>
|
2
|
|
3
|
<ul uk-tab class="uk-tab-large">
|
4
|
<li><a href="#">PID</a></li>
|
5
|
<li><a href="#">Licence</a></li>
|
6
|
<li><a href="#">Gold</a></li>
|
7
|
<li><a href="#">Green</a></li>
|
8
|
<li><a href="#">Green vs. Gold</a></li>
|
9
|
<li class="uk-visible@m"><a href="#">More Details</a></li>
|
10
|
</ul>
|
11
|
|
12
|
<ul class="uk-switcher uk-margin">
|
13
|
<li>
|
14
|
<div class="pidIndicator">
|
15
|
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
16
|
|
17
|
<div class="uk-grid-margin">
|
18
|
<div class="md-card chartCard">
|
19
|
<div class="md-card-content">
|
20
|
<iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
|
21
|
</div>
|
22
|
</div>
|
23
|
</div>
|
24
|
|
25
|
<div class="uk-grid-margin">
|
26
|
<div class="md-card chartCard">
|
27
|
<div class="md-card-content">
|
28
|
|
29
|
<!--MOBILE & PAD PORTRAIT-->
|
30
|
<div class="uk-hidden@m">
|
31
|
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
|
32
|
<label class="uk-margin-right">Show by: </label>
|
33
|
<select class="md-input" #selectPIDGroupBy (change)="getPublicationsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
|
34
|
<option value="country">country</option>
|
35
|
<option value="datasource">datasource</option>
|
36
|
<option value="organization">organization</option>
|
37
|
<option value="funder">funder</option>
|
38
|
</select>
|
39
|
</div>
|
40
|
|
41
|
<iframe *ngIf="publicationsWithPIDGroupByView==='country' && publicationsWithPIDByCountryChartURLMobile"
|
42
|
width="100%" height="550" [src]="publicationsWithPIDByCountryChartURLMobile"></iframe>
|
43
|
<iframe *ngIf="publicationsWithPIDGroupByView==='datasource' && publicationsWithPIDByDatasourceChartURLMobile"
|
44
|
width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURLMobile"></iframe>
|
45
|
<iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURLMobile"
|
46
|
width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURLMobile"></iframe>
|
47
|
<app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
|
48
|
[chartTitle]="'OA Publications with PID by funder'"
|
49
|
[chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
50
|
|
51
|
</div>
|
52
|
|
53
|
<!--LAPTOP & PAD LANDSCAPE-->
|
54
|
<div class="uk-visible@m">
|
55
|
<ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
|
56
|
data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
|
57
|
<li class="uk-active"><a (click)="getPublicationsWithPIDGroupBy('country')">Country</a></li>
|
58
|
<li><a (click)="getPublicationsWithPIDGroupBy('datasource')">Datasource</a></li>
|
59
|
<li><a (click)="getPublicationsWithPIDGroupBy('organization')">Organization</a></li>
|
60
|
<li><a (click)="getPublicationsWithPIDGroupBy('funder')">Funder</a></li>
|
61
|
</ul>
|
62
|
|
63
|
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
64
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
65
|
<iframe *ngIf="publicationsWithPIDByCountryChartURL"
|
66
|
width="100%" height="350" [src]="publicationsWithPIDByCountryChartURL"></iframe>
|
67
|
</li>
|
68
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
69
|
<iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
|
70
|
width="100%" height="350" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
|
71
|
</li>
|
72
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
73
|
<iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
|
74
|
width="100%" height="350" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
|
75
|
</li>
|
76
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
77
|
<app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
|
78
|
[chartTitle]="'OA Publications with PID by funder'"
|
79
|
[chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
80
|
</li>
|
81
|
</ul>
|
82
|
</div>
|
83
|
|
84
|
</div>
|
85
|
</div>
|
86
|
</div>
|
87
|
|
88
|
</div>
|
89
|
</div>
|
90
|
</li>
|
91
|
<li>
|
92
|
<div class="licenceIndicator">
|
93
|
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
94
|
|
95
|
<div class="uk-grid-margin">
|
96
|
<div class="md-card chartCard">
|
97
|
<div class="md-card-content">
|
98
|
<iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
|
99
|
</div>
|
100
|
</div>
|
101
|
</div>
|
102
|
|
103
|
<div class="uk-grid-margin">
|
104
|
<div class="md-card chartCard">
|
105
|
<div class="md-card-content">
|
106
|
|
107
|
<!--MOBILE & PAD PORTRAIT-->
|
108
|
<div class="uk-hidden@m">
|
109
|
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
|
110
|
<label class="uk-margin-right">Show by: </label>
|
111
|
<select class="md-input" #selectLicenceGroupBy (change)="getPublicationsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
|
112
|
<option value="country">country</option>
|
113
|
<option value="datasource">datasource</option>
|
114
|
<option value="organization">organization</option>
|
115
|
<option value="funder">funder</option>
|
116
|
</select>
|
117
|
</div>
|
118
|
|
119
|
<iframe *ngIf="publicationsWithLicenceGroupByView==='country' && publicationsWithLicenceByCountryChartURLMobile"
|
120
|
width="100%" height="550" [src]="publicationsWithLicenceByCountryChartURLMobile"></iframe>
|
121
|
<iframe *ngIf="publicationsWithLicenceGroupByView==='datasource' && publicationsWithLicenceByDatasourceChartURLMobile"
|
122
|
width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURLMobile"></iframe>
|
123
|
<iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURLMobile"
|
124
|
width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURLMobile"></iframe>
|
125
|
<app-treemap-highchart *ngIf="publicationsWithLicenceGroupByView==='funder' && publicationsWithLicenceByFunderData"
|
126
|
[chartTitle]="'OA Publications with licence by funder'"
|
127
|
[chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
128
|
|
129
|
</div>
|
130
|
|
131
|
<!--LAPTOP & PAD LANDSCAPE-->
|
132
|
<div class="uk-visible@m">
|
133
|
<ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
|
134
|
data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
|
135
|
<li class="uk-active"><a (click)="getPublicationsWithLicenceGroupBy('country')">Country</a></li>
|
136
|
<li><a (click)="getPublicationsWithLicenceGroupBy('datasource')">Datasource</a></li>
|
137
|
<li><a (click)="getPublicationsWithLicenceGroupBy('organization')">Organization</a></li>
|
138
|
<li><a (click)="getPublicationsWithLicenceGroupBy('funder')">Funder</a></li>
|
139
|
</ul>
|
140
|
|
141
|
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
142
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
143
|
<iframe *ngIf="publicationsWithLicenceByCountryChartURL"
|
144
|
width="100%" height="350" [src]="publicationsWithLicenceByCountryChartURL"></iframe>
|
145
|
</li>
|
146
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
147
|
<iframe *ngIf="publicationsWithLicenceByDatasourceChartURL"
|
148
|
width="100%" height="350" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
|
149
|
</li>
|
150
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
151
|
<iframe *ngIf="publicationsWithLicenceByOrganizationChartURL"
|
152
|
width="100%" height="350" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
|
153
|
</li>
|
154
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
155
|
<app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData"
|
156
|
[chartTitle]="'OA Publications with licence by funder'"
|
157
|
[chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
158
|
</li>
|
159
|
</ul>
|
160
|
</div>
|
161
|
|
162
|
</div>
|
163
|
</div>
|
164
|
</div>
|
165
|
|
166
|
</div>
|
167
|
</div>
|
168
|
</li>
|
169
|
<li>
|
170
|
<div class="goldIndicator">
|
171
|
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
172
|
|
173
|
<div class="uk-grid-margin">
|
174
|
<div class="md-card chartCard">
|
175
|
<div class="md-card-content">
|
176
|
<iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
|
177
|
</div>
|
178
|
</div>
|
179
|
</div>
|
180
|
|
181
|
<div class="uk-grid-margin">
|
182
|
<div class="md-card chartCard">
|
183
|
<div class="md-card-content">
|
184
|
|
185
|
<!--MOBILE & PAD PORTRAIT-->
|
186
|
<div class="uk-hidden@m">
|
187
|
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
|
188
|
<label class="uk-margin-right">Show by: </label>
|
189
|
<select class="md-input" #selectGoldGroupBy (change)="getGoldPublicationsGroupByMobile(selectGoldGroupBy.value)" style="width: 230px; display: inline-block">
|
190
|
<option value="country">country</option>
|
191
|
<option value="datasource">datasource</option>
|
192
|
<option value="organization">organization</option>
|
193
|
<option value="funder">funder</option>
|
194
|
</select>
|
195
|
</div>
|
196
|
|
197
|
<iframe *ngIf="goldPublicationsGroupByView==='country' && goldPublicationsByCountryChartURLMobile"
|
198
|
width="100%" height="550" [src]="goldPublicationsByCountryChartURLMobile"></iframe>
|
199
|
<iframe *ngIf="goldPublicationsGroupByView==='datasource' && goldPublicationsByDatasourceChartURLMobile"
|
200
|
width="100%" height="550" [src]="goldPublicationsByDatasourceChartURLMobile"></iframe>
|
201
|
<iframe *ngIf="goldPublicationsGroupByView==='organization' && goldPublicationsByOrganizationChartURLMobile"
|
202
|
width="100%" height="550" [src]="goldPublicationsByOrganizationChartURLMobile"></iframe>
|
203
|
<app-treemap-highchart *ngIf="goldPublicationsGroupByView==='funder' && goldPublicationsByFunderData"
|
204
|
[chartTitle]="'Gold OA publications by funder'"
|
205
|
[chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
206
|
|
207
|
</div>
|
208
|
|
209
|
<!--LAPTOP & PAD LANDSCAPE-->
|
210
|
<div class="uk-visible@m">
|
211
|
<ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
|
212
|
data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
|
213
|
<li class="uk-active"><a (click)="getGoldPublicationsGroupBy('country')">Country</a></li>
|
214
|
<li><a (click)="getGoldPublicationsGroupBy('datasource')">Datasource</a></li>
|
215
|
<li><a (click)="getGoldPublicationsGroupBy('organization')">Organization</a></li>
|
216
|
<li><a (click)="getGoldPublicationsGroupBy('funder')">Funder</a></li>
|
217
|
</ul>
|
218
|
|
219
|
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
220
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
221
|
<iframe *ngIf="goldPublicationsByCountryChartURL"
|
222
|
width="100%" height="350" [src]="goldPublicationsByCountryChartURL"></iframe>
|
223
|
</li>
|
224
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
225
|
<iframe *ngIf="goldPublicationsByDatasourceChartURL"
|
226
|
width="100%" height="350" [src]="goldPublicationsByDatasourceChartURL"></iframe>
|
227
|
</li>
|
228
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
229
|
<iframe *ngIf="goldPublicationsByOrganizationChartURL"
|
230
|
width="100%" height="350" [src]="goldPublicationsByOrganizationChartURL"></iframe>
|
231
|
</li>
|
232
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
233
|
<app-treemap-highchart *ngIf="goldPublicationsByFunderData"
|
234
|
[chartTitle]="'Gold OA publications by funder'"
|
235
|
[chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
236
|
</li>
|
237
|
</ul>
|
238
|
</div>
|
239
|
|
240
|
</div>
|
241
|
</div>
|
242
|
</div>
|
243
|
|
244
|
</div>
|
245
|
</div>
|
246
|
</li>
|
247
|
<li>
|
248
|
<div class="greenIndicator">
|
249
|
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
250
|
|
251
|
<div class="uk-grid-margin">
|
252
|
<div class="md-card chartCard">
|
253
|
<div class="md-card-content">
|
254
|
<iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
|
255
|
</div>
|
256
|
</div>
|
257
|
</div>
|
258
|
|
259
|
<div class="uk-grid-margin">
|
260
|
<div class="md-card chartCard">
|
261
|
<div class="md-card-content">
|
262
|
|
263
|
<!--MOBILE & PAD PORTRAIT-->
|
264
|
<div class="uk-hidden@m">
|
265
|
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
|
266
|
<label class="uk-margin-right">Show by: </label>
|
267
|
<select class="md-input" #selectGreenGroupBy (change)="getGreenPublicationsGroupByMobile(selectGreenGroupBy.value)" style="width: 230px; display: inline-block">
|
268
|
<option value="country">country</option>
|
269
|
<option value="datasource">datasource</option>
|
270
|
<option value="organization">organization</option>
|
271
|
<option value="funder">funder</option>
|
272
|
</select>
|
273
|
</div>
|
274
|
|
275
|
<iframe *ngIf="greenPublicationsGroupByView==='country' && greenPublicationsByCountryChartURLMobile"
|
276
|
width="100%" height="550" [src]="greenPublicationsByCountryChartURLMobile"></iframe>
|
277
|
<iframe *ngIf="greenPublicationsGroupByView==='datasource' && greenPublicationsByDatasourceChartURLMobile"
|
278
|
width="100%" height="550" [src]="greenPublicationsByDatasourceChartURLMobile"></iframe>
|
279
|
<iframe *ngIf="greenPublicationsGroupByView==='organization' && greenPublicationsByOrganizationChartURLMobile"
|
280
|
width="100%" height="550" [src]="greenPublicationsByOrganizationChartURLMobile"></iframe>
|
281
|
<app-treemap-highchart *ngIf="greenPublicationsGroupByView==='funder' && greenPublicationsByFunderData"
|
282
|
[chartTitle]="'Green OA publications by funder'"
|
283
|
[chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
284
|
|
285
|
</div>
|
286
|
|
287
|
<!--LAPTOP & PAD LANDSCAPE-->
|
288
|
<div class="uk-visible@m">
|
289
|
<ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
|
290
|
data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
|
291
|
<li class="uk-active"><a (click)="getGreenPublicationsGroupBy('country')">Country</a></li>
|
292
|
<li><a (click)="getGreenPublicationsGroupBy('datasource')">Datasource</a></li>
|
293
|
<li><a (click)="getGreenPublicationsGroupBy('organization')">Organization</a></li>
|
294
|
<li><a (click)="getGreenPublicationsGroupBy('funder')">Funder</a></li>
|
295
|
</ul>
|
296
|
|
297
|
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
298
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
299
|
<iframe *ngIf="greenPublicationsByCountryChartURL"
|
300
|
width="100%" height="350" [src]="greenPublicationsByCountryChartURL"></iframe>
|
301
|
</li>
|
302
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
303
|
<iframe *ngIf="greenPublicationsByDatasourceChartURL"
|
304
|
width="100%" height="350" [src]="greenPublicationsByDatasourceChartURL"></iframe>
|
305
|
</li>
|
306
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
307
|
<iframe *ngIf="greenPublicationsByOrganizationChartURL"
|
308
|
width="100%" height="350" [src]="greenPublicationsByOrganizationChartURL"></iframe>
|
309
|
</li>
|
310
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
311
|
<app-treemap-highchart *ngIf="greenPublicationsByFunderData"
|
312
|
[chartTitle]="'Green OA publications by funder'"
|
313
|
[chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
314
|
</li>
|
315
|
</ul>
|
316
|
</div>
|
317
|
|
318
|
</div>
|
319
|
</div>
|
320
|
</div>
|
321
|
|
322
|
</div>
|
323
|
</div>
|
324
|
</li>
|
325
|
<li>
|
326
|
<div class="greenVsGoldIndicator">
|
327
|
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
328
|
|
329
|
<div class="uk-grid-margin">
|
330
|
<div class="md-card chartCard">
|
331
|
<div class="md-card-content">
|
332
|
<iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
|
333
|
</div>
|
334
|
</div>
|
335
|
</div>
|
336
|
|
337
|
</div>
|
338
|
</div>
|
339
|
</li>
|
340
|
<li>
|
341
|
<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
342
|
|
343
|
<h3 class="">More details for publications</h3>
|
344
|
|
345
|
<div class="uk-margin-top uk-margin-bottom">
|
346
|
<label class="uk-margin-right">Show: </label>
|
347
|
<select class="md-input" #selectPublicationsContent (change)="getContent('publication', selectPublicationsContent.value)" style="width: 230px; display: inline-block">
|
348
|
<option value="affiliated">affiliated</option>
|
349
|
<option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
|
350
|
<option value="deposited">deposited</option>
|
351
|
<option value="deposited_peer_reviewed">deposited peer reviewed</option>
|
352
|
</select>
|
353
|
<!--<span class="md-input-bar"></span>-->
|
354
|
</div>
|
355
|
|
356
|
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
|
357
|
<div class="absoluteTable">
|
358
|
<div class="md-card chartCard">
|
359
|
<div class="md-card-content">
|
360
|
|
361
|
<ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#pubs-indicators-content-a-fade', animation: 'fade'}">
|
362
|
<li aria-expanded="true" class="uk-active">
|
363
|
<a href="#">
|
364
|
<i class="fas fa-hashtag"></i>
|
365
|
</a>
|
366
|
</li>
|
367
|
<li aria-expanded="false" class="">
|
368
|
<a href="#">
|
369
|
<i class="fas fa-percentage"></i>
|
370
|
</a>
|
371
|
</li>
|
372
|
</ul>
|
373
|
|
374
|
<ul id="pubs-indicators-content-a-fade" class="uk-switcher uk-margin" >
|
375
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
376
|
<div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
|
377
|
<app-countries-table *ngIf="publicationsAbsoluteTableData" [isPercentage]="false" [countries]="publicationsAbsoluteTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
|
378
|
</li>
|
379
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
380
|
<div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
|
381
|
<app-countries-table *ngIf="publicationsPercentageTableData" [isPercentage]="true" [countries]="publicationsPercentageTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
|
382
|
</li>
|
383
|
</ul>
|
384
|
|
385
|
</div>
|
386
|
</div>
|
387
|
|
388
|
</div>
|
389
|
|
390
|
</div>
|
391
|
|
392
|
</div>
|
393
|
</li>
|
394
|
</ul>
|
395
|
|
396
|
<!--<!–PID–>
|
397
|
<div class="pidIndicator">
|
398
|
<h3 class="uk-margin-remove">PID</h3>
|
399
|
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
400
|
|
401
|
<div class="uk-grid-margin">
|
402
|
<div class="md-card chartCard">
|
403
|
<div class="md-card-content">
|
404
|
<iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
|
405
|
</div>
|
406
|
</div>
|
407
|
</div>
|
408
|
|
409
|
<div class="uk-grid-margin">
|
410
|
<div class="md-card chartCard">
|
411
|
<div class="md-card-content">
|
412
|
|
413
|
<!–MOBILE & PAD PORTRAIT–>
|
414
|
<div class="uk-hidden@m">
|
415
|
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
|
416
|
<label class="uk-margin-right">Show by: </label>
|
417
|
<select class="md-input" #selectPIDGroupBy (change)="getPublicationsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
|
418
|
<option value="country">country</option>
|
419
|
<option value="datasource">datasource</option>
|
420
|
<option value="organization">organization</option>
|
421
|
<option value="funder">funder</option>
|
422
|
</select>
|
423
|
</div>
|
424
|
|
425
|
<iframe *ngIf="publicationsWithPIDGroupByView==='country' && publicationsWithPIDByCountryChartURLMobile"
|
426
|
width="100%" height="550" [src]="publicationsWithPIDByCountryChartURLMobile"></iframe>
|
427
|
<iframe *ngIf="publicationsWithPIDGroupByView==='datasource' && publicationsWithPIDByDatasourceChartURLMobile"
|
428
|
width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURLMobile"></iframe>
|
429
|
<iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURLMobile"
|
430
|
width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURLMobile"></iframe>
|
431
|
<app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
|
432
|
[chartTitle]="'OA Publications with PID by funder'"
|
433
|
[chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
434
|
|
435
|
</div>
|
436
|
|
437
|
<!–LAPTOP & PAD LANDSCAPE–>
|
438
|
<div class="uk-visible@m">
|
439
|
<ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
|
440
|
data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
|
441
|
<li class="uk-active"><a (click)="getPublicationsWithPIDGroupBy('country')">Country</a></li>
|
442
|
<li><a (click)="getPublicationsWithPIDGroupBy('datasource')">Datasource</a></li>
|
443
|
<li><a (click)="getPublicationsWithPIDGroupBy('organization')">Organization</a></li>
|
444
|
<li><a (click)="getPublicationsWithPIDGroupBy('funder')">Funder</a></li>
|
445
|
</ul>
|
446
|
|
447
|
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
448
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
449
|
<iframe *ngIf="publicationsWithPIDByCountryChartURL"
|
450
|
width="100%" height="350" [src]="publicationsWithPIDByCountryChartURL"></iframe>
|
451
|
</li>
|
452
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
453
|
<iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
|
454
|
width="100%" height="350" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
|
455
|
</li>
|
456
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
457
|
<iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
|
458
|
width="100%" height="350" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
|
459
|
</li>
|
460
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
461
|
<app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
|
462
|
[chartTitle]="'OA Publications with PID by funder'"
|
463
|
[chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
464
|
</li>
|
465
|
</ul>
|
466
|
</div>
|
467
|
|
468
|
</div>
|
469
|
</div>
|
470
|
</div>
|
471
|
|
472
|
</div>
|
473
|
</div>
|
474
|
|
475
|
<!–Licence–>
|
476
|
<div class="licenceIndicator uk-margin-large-top">
|
477
|
<h3 class="uk-margin-remove">Licence</h3>
|
478
|
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
479
|
|
480
|
<div class="uk-grid-margin">
|
481
|
<div class="md-card chartCard">
|
482
|
<div class="md-card-content">
|
483
|
<iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
|
484
|
</div>
|
485
|
</div>
|
486
|
</div>
|
487
|
|
488
|
<div class="uk-grid-margin">
|
489
|
<div class="md-card chartCard">
|
490
|
<div class="md-card-content">
|
491
|
|
492
|
<!–MOBILE & PAD PORTRAIT–>
|
493
|
<div class="uk-hidden@m">
|
494
|
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
|
495
|
<label class="uk-margin-right">Show by: </label>
|
496
|
<select class="md-input" #selectLicenceGroupBy (change)="getPublicationsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
|
497
|
<option value="country">country</option>
|
498
|
<option value="datasource">datasource</option>
|
499
|
<option value="organization">organization</option>
|
500
|
<option value="funder">funder</option>
|
501
|
</select>
|
502
|
</div>
|
503
|
|
504
|
<iframe *ngIf="publicationsWithLicenceGroupByView==='country' && publicationsWithLicenceByCountryChartURLMobile"
|
505
|
width="100%" height="550" [src]="publicationsWithLicenceByCountryChartURLMobile"></iframe>
|
506
|
<iframe *ngIf="publicationsWithLicenceGroupByView==='datasource' && publicationsWithLicenceByDatasourceChartURLMobile"
|
507
|
width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURLMobile"></iframe>
|
508
|
<iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURLMobile"
|
509
|
width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURLMobile"></iframe>
|
510
|
<app-treemap-highchart *ngIf="publicationsWithLicenceGroupByView==='funder' && publicationsWithLicenceByFunderData"
|
511
|
[chartTitle]="'OA Publications with licence by funder'"
|
512
|
[chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
513
|
|
514
|
</div>
|
515
|
|
516
|
<!–LAPTOP & PAD LANDSCAPE–>
|
517
|
<div class="uk-visible@m">
|
518
|
<ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
|
519
|
data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
|
520
|
<li class="uk-active"><a (click)="getPublicationsWithLicenceGroupBy('country')">Country</a></li>
|
521
|
<li><a (click)="getPublicationsWithLicenceGroupBy('datasource')">Datasource</a></li>
|
522
|
<li><a (click)="getPublicationsWithLicenceGroupBy('organization')">Organization</a></li>
|
523
|
<li><a (click)="getPublicationsWithLicenceGroupBy('funder')">Funder</a></li>
|
524
|
</ul>
|
525
|
|
526
|
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
527
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
528
|
<iframe *ngIf="publicationsWithLicenceByCountryChartURL"
|
529
|
width="100%" height="350" [src]="publicationsWithLicenceByCountryChartURL"></iframe>
|
530
|
</li>
|
531
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
532
|
<iframe *ngIf="publicationsWithLicenceByDatasourceChartURL"
|
533
|
width="100%" height="350" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
|
534
|
</li>
|
535
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
536
|
<iframe *ngIf="publicationsWithLicenceByOrganizationChartURL"
|
537
|
width="100%" height="350" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
|
538
|
</li>
|
539
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
540
|
<app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData"
|
541
|
[chartTitle]="'OA Publications with licence by funder'"
|
542
|
[chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
543
|
</li>
|
544
|
</ul>
|
545
|
</div>
|
546
|
|
547
|
</div>
|
548
|
</div>
|
549
|
</div>
|
550
|
|
551
|
</div>
|
552
|
</div>
|
553
|
|
554
|
<!–Gold–>
|
555
|
<div class="goldIndicator uk-margin-large-top">
|
556
|
<h3 class="uk-margin-remove">Gold</h3>
|
557
|
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
558
|
|
559
|
<div class="uk-grid-margin">
|
560
|
<div class="md-card chartCard">
|
561
|
<div class="md-card-content">
|
562
|
<iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
|
563
|
</div>
|
564
|
</div>
|
565
|
</div>
|
566
|
|
567
|
<div class="uk-grid-margin">
|
568
|
<div class="md-card chartCard">
|
569
|
<div class="md-card-content">
|
570
|
|
571
|
<!–MOBILE & PAD PORTRAIT–>
|
572
|
<div class="uk-hidden@m">
|
573
|
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
|
574
|
<label class="uk-margin-right">Show by: </label>
|
575
|
<select class="md-input" #selectGoldGroupBy (change)="getGoldPublicationsGroupByMobile(selectGoldGroupBy.value)" style="width: 230px; display: inline-block">
|
576
|
<option value="country">country</option>
|
577
|
<option value="datasource">datasource</option>
|
578
|
<option value="organization">organization</option>
|
579
|
<option value="funder">funder</option>
|
580
|
</select>
|
581
|
</div>
|
582
|
|
583
|
<iframe *ngIf="goldPublicationsGroupByView==='country' && goldPublicationsByCountryChartURLMobile"
|
584
|
width="100%" height="550" [src]="goldPublicationsByCountryChartURLMobile"></iframe>
|
585
|
<iframe *ngIf="goldPublicationsGroupByView==='datasource' && goldPublicationsByDatasourceChartURLMobile"
|
586
|
width="100%" height="550" [src]="goldPublicationsByDatasourceChartURLMobile"></iframe>
|
587
|
<iframe *ngIf="goldPublicationsGroupByView==='organization' && goldPublicationsByOrganizationChartURLMobile"
|
588
|
width="100%" height="550" [src]="goldPublicationsByOrganizationChartURLMobile"></iframe>
|
589
|
<app-treemap-highchart *ngIf="goldPublicationsGroupByView==='funder' && goldPublicationsByFunderData"
|
590
|
[chartTitle]="'Gold OA publications by funder'"
|
591
|
[chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
592
|
|
593
|
</div>
|
594
|
|
595
|
<!–LAPTOP & PAD LANDSCAPE–>
|
596
|
<div class="uk-visible@m">
|
597
|
<ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
|
598
|
data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
|
599
|
<li class="uk-active"><a (click)="getGoldPublicationsGroupBy('country')">Country</a></li>
|
600
|
<li><a (click)="getGoldPublicationsGroupBy('datasource')">Datasource</a></li>
|
601
|
<li><a (click)="getGoldPublicationsGroupBy('organization')">Organization</a></li>
|
602
|
<li><a (click)="getGoldPublicationsGroupBy('funder')">Funder</a></li>
|
603
|
</ul>
|
604
|
|
605
|
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
606
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
607
|
<iframe *ngIf="goldPublicationsByCountryChartURL"
|
608
|
width="100%" height="350" [src]="goldPublicationsByCountryChartURL"></iframe>
|
609
|
</li>
|
610
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
611
|
<iframe *ngIf="goldPublicationsByDatasourceChartURL"
|
612
|
width="100%" height="350" [src]="goldPublicationsByDatasourceChartURL"></iframe>
|
613
|
</li>
|
614
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
615
|
<iframe *ngIf="goldPublicationsByOrganizationChartURL"
|
616
|
width="100%" height="350" [src]="goldPublicationsByOrganizationChartURL"></iframe>
|
617
|
</li>
|
618
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
619
|
<app-treemap-highchart *ngIf="goldPublicationsByFunderData"
|
620
|
[chartTitle]="'Gold OA publications by funder'"
|
621
|
[chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
622
|
</li>
|
623
|
</ul>
|
624
|
</div>
|
625
|
|
626
|
</div>
|
627
|
</div>
|
628
|
</div>
|
629
|
|
630
|
</div>
|
631
|
</div>
|
632
|
|
633
|
<!–Green–>
|
634
|
<div class="greenIndicator uk-margin-large-top">
|
635
|
<h3 class="uk-margin-remove">Green</h3>
|
636
|
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
637
|
|
638
|
<div class="uk-grid-margin">
|
639
|
<div class="md-card chartCard">
|
640
|
<div class="md-card-content">
|
641
|
<iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
|
642
|
</div>
|
643
|
</div>
|
644
|
</div>
|
645
|
|
646
|
<div class="uk-grid-margin">
|
647
|
<div class="md-card chartCard">
|
648
|
<div class="md-card-content">
|
649
|
|
650
|
<!–MOBILE & PAD PORTRAIT–>
|
651
|
<div class="uk-hidden@m">
|
652
|
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
|
653
|
<label class="uk-margin-right">Show by: </label>
|
654
|
<select class="md-input" #selectGreenGroupBy (change)="getGreenPublicationsGroupByMobile(selectGreenGroupBy.value)" style="width: 230px; display: inline-block">
|
655
|
<option value="country">country</option>
|
656
|
<option value="datasource">datasource</option>
|
657
|
<option value="organization">organization</option>
|
658
|
<option value="funder">funder</option>
|
659
|
</select>
|
660
|
</div>
|
661
|
|
662
|
<iframe *ngIf="greenPublicationsGroupByView==='country' && greenPublicationsByCountryChartURLMobile"
|
663
|
width="100%" height="550" [src]="greenPublicationsByCountryChartURLMobile"></iframe>
|
664
|
<iframe *ngIf="greenPublicationsGroupByView==='datasource' && greenPublicationsByDatasourceChartURLMobile"
|
665
|
width="100%" height="550" [src]="greenPublicationsByDatasourceChartURLMobile"></iframe>
|
666
|
<iframe *ngIf="greenPublicationsGroupByView==='organization' && greenPublicationsByOrganizationChartURLMobile"
|
667
|
width="100%" height="550" [src]="greenPublicationsByOrganizationChartURLMobile"></iframe>
|
668
|
<app-treemap-highchart *ngIf="greenPublicationsGroupByView==='funder' && greenPublicationsByFunderData"
|
669
|
[chartTitle]="'Green OA publications by funder'"
|
670
|
[chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
671
|
|
672
|
</div>
|
673
|
|
674
|
<!–LAPTOP & PAD LANDSCAPE–>
|
675
|
<div class="uk-visible@m">
|
676
|
<ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
|
677
|
data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
|
678
|
<li class="uk-active"><a (click)="getGreenPublicationsGroupBy('country')">Country</a></li>
|
679
|
<li><a (click)="getGreenPublicationsGroupBy('datasource')">Datasource</a></li>
|
680
|
<li><a (click)="getGreenPublicationsGroupBy('organization')">Organization</a></li>
|
681
|
<li><a (click)="getGreenPublicationsGroupBy('funder')">Funder</a></li>
|
682
|
</ul>
|
683
|
|
684
|
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
685
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
686
|
<iframe *ngIf="greenPublicationsByCountryChartURL"
|
687
|
width="100%" height="350" [src]="greenPublicationsByCountryChartURL"></iframe>
|
688
|
</li>
|
689
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
690
|
<iframe *ngIf="greenPublicationsByDatasourceChartURL"
|
691
|
width="100%" height="350" [src]="greenPublicationsByDatasourceChartURL"></iframe>
|
692
|
</li>
|
693
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
694
|
<iframe *ngIf="greenPublicationsByOrganizationChartURL"
|
695
|
width="100%" height="350" [src]="greenPublicationsByOrganizationChartURL"></iframe>
|
696
|
</li>
|
697
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
698
|
<app-treemap-highchart *ngIf="greenPublicationsByFunderData"
|
699
|
[chartTitle]="'Green OA publications by funder'"
|
700
|
[chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
701
|
</li>
|
702
|
</ul>
|
703
|
</div>
|
704
|
|
705
|
</div>
|
706
|
</div>
|
707
|
</div>
|
708
|
|
709
|
</div>
|
710
|
</div>
|
711
|
|
712
|
<div class="greenVsGoldIndicator uk-margin-large-top">
|
713
|
<h3 class="uk-margin-remove">Green vs. Gold</h3>
|
714
|
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
715
|
|
716
|
<div class="uk-grid-margin">
|
717
|
<div class="md-card chartCard">
|
718
|
<div class="md-card-content">
|
719
|
<iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
|
720
|
</div>
|
721
|
</div>
|
722
|
</div>
|
723
|
|
724
|
</div>
|
725
|
</div>-->
|
726
|
|
727
|
<!--<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
728
|
|
729
|
<h3 class="">More details for publications</h3>
|
730
|
|
731
|
<div class="uk-margin-top uk-margin-bottom">
|
732
|
<label class="uk-margin-right">Show: </label>
|
733
|
<select class="md-input" #selectPublicationsContent (change)="getContent('publication', selectPublicationsContent.value)" style="width: 230px; display: inline-block">
|
734
|
<option value="affiliated">affiliated</option>
|
735
|
<option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
|
736
|
<option value="deposited">deposited</option>
|
737
|
<option value="deposited_peer_reviewed">deposited peer reviewed</option>
|
738
|
</select>
|
739
|
<!–<span class="md-input-bar"></span>–>
|
740
|
</div>
|
741
|
|
742
|
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
|
743
|
<div class="absoluteTable">
|
744
|
<div class="md-card chartCard">
|
745
|
<div class="md-card-content">
|
746
|
|
747
|
<ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#pubs-indicators-content-a-fade', animation: 'fade'}">
|
748
|
<li aria-expanded="true" class="uk-active">
|
749
|
<a href="#">
|
750
|
<i class="fas fa-hashtag"></i>
|
751
|
</a>
|
752
|
</li>
|
753
|
<li aria-expanded="false" class="">
|
754
|
<a href="#">
|
755
|
<i class="fas fa-percentage"></i>
|
756
|
</a>
|
757
|
</li>
|
758
|
</ul>
|
759
|
|
760
|
<ul id="pubs-indicators-content-a-fade" class="uk-switcher uk-margin" >
|
761
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
762
|
<div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
|
763
|
<app-countries-table *ngIf="publicationsAbsoluteTableData" [isPercentage]="false" [countries]="publicationsAbsoluteTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
|
764
|
</li>
|
765
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
766
|
<div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
|
767
|
<app-countries-table *ngIf="publicationsPercentageTableData" [isPercentage]="true" [countries]="publicationsPercentageTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
|
768
|
</li>
|
769
|
</ul>
|
770
|
|
771
|
</div>
|
772
|
</div>
|
773
|
|
774
|
</div>
|
775
|
|
776
|
</div>
|
777
|
|
778
|
</div>-->
|
779
|
|
780
|
</div>
|