Project

General

Profile

1
<section class="section greySection uk-padding-remove" id="sect-country-page">
2
  <div class="uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
3
  <!--<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">-->
4

    
5

    
6
    <div class="uk-grid uk-grid-small">
7

    
8
      <div class="uk-width-4-5 uk-margin-medium-bottom">
9

    
10
        <div class="uk-container uk-container-expand uk-margin-medium-top">
11
          <ul class="uk-breadcrumb">
12
            <li><a [routerLink]="['/home']">Home</a></li>
13
            <li><span>{{countryName}}</span></li>
14
          </ul>
15
        </div>
16

    
17
        <div class="uk-container uk-container-expand uk-margin-top">
18
          <div class="uk-text-right">
19
            <button class="md-btn md-btn-primary"><i class="fas fa-code uk-margin-small-right"></i>Embed</button>
20
            <button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</button>
21
            <button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</button>
22
          </div>
23
        </div>
24

    
25
        <div class="uk-container uk-container-expand uk-margin-top">
26
          <!--Overview cards-->
27
          <div class="uk-width-1-1 indicatorCards">
28
            <div class="uk-grid uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-5@l uk-margin-top uk-grid-match" data-uk-grid-margin="">
29
            <!--<div class="uk-grid uk-grid-small uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5 uk-margin-top uk-grid-match" data-uk-grid-margin="">-->
30
              <div class="uk-row-first">
31
                <div class="md-card">
32
                  <div class="md-card-content">
33
                    <div class="uk-margin-top">
34
                      <div class="uk-float-right uk-margin-small-right">
35
                        <img src="../../../assets/img/icons/PUBLICATIONS.svg" width="30" height="30">
36
                      </div>
37
                      <h2 class="uk-margin-remove">
38
                        <!--<span class="number">2,321,300</span>-->
39
                        <span *ngIf="!countryData || !countryData.publications || !countryData.publications.oa" class="number">--</span>
40
                        <span *ngIf="countryData?.publications?.oa" class="number">{{countryData.publications.oa | number}}</span>
41
                      </h2>
42
                    </div>
43
                    <div class="uk-margin-top">
44
                      <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
45
                      <span class="">Number of OA publications</span>
46
                    </div>
47
                    <!--<div class="uk-margin-top">-->
48
                      <!--<span class="number">96.8%</span> are OA-->
49
                    <!--</div>-->
50
                    <div *ngIf="countryData?.publications?.percentage" class="uk-margin-top">
51
                      <span class="number">{{countryData.publications.percentage | number}}%</span> are OA
52
                    </div>
53
                  </div>
54
                </div>
55
              </div>
56
              <div class="">
57
                <div class="md-card">
58
                  <div class="md-card-content">
59
                    <div class="uk-margin-top">
60
                      <div class="uk-float-right uk-margin-small-right">
61
                        <img src="../../../assets/img/icons/DATASETS.svg" width="30" height="30">
62
                      </div>
63
                      <h2 class="uk-margin-remove">
64
                        <!--<span class="number">14,730</span>-->
65
                        <span *ngIf="!countryData || !countryData.datasets || !countryData.datasets.oa" class="number">--</span>
66
                        <span *ngIf="countryData?.datasets?.oa" class="number">{{countryData.datasets.oa | number}}</span>
67
                      </h2>
68
                    </div>
69
                    <div class="uk-margin-top">
70
                      <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
71
                      <span class="">Number of OA datasets</span>
72
                    </div>
73
                    <!--<div class="uk-margin-top">-->
74
                      <!--<span class="number">89.7%</span> are OA-->
75
                    <!--</div>-->
76
                    <div *ngIf="countryData?.datasets?.percentage" class="uk-margin-top">
77
                      <span class="number">{{countryData.datasets.percentage | number}}%</span> are OA
78
                    </div>
79
                  </div>
80
                </div>
81
              </div>
82
              <div class="">
83
                <div class="md-card">
84
                  <div class="md-card-content">
85
                    <div class="uk-margin-top">
86
                      <div class="uk-float-right uk-margin-small-right">
87
                        <img src="../../../assets/img/icons/REPOSITORIES.svg" width="30" height="30">
88
                      </div>
89
                      <h2 class="uk-margin-remove">
90
                        <!--<span class="number">101</span>-->
91
                        <span *ngIf="!countryData || !countryData.repositories || !countryData.repositories.oa" class="number">--</span>
92
                        <span *ngIf="countryData?.repositories?.oa" class="number">{{countryData.repositories.oa | number}}</span>
93
                      </h2>
94
                    </div>
95
                    <div class="uk-margin-top">
96
                      <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
97
                      <span class="">Number of OA repositories</span>
98
                    </div>
99
                    <!--<div *ngIf="overviewData.overview.repositories?.percentage" class="uk-margin-top">-->
100
                      <!--<span class="number">{{overviewData.overview.repositories.percentage | number}}%</span> are OA-->
101
                    <!--</div>-->
102
                  </div>
103
                </div>
104
              </div>
105
              <div class="">
106
                <div class="md-card">
107
                  <div class="md-card-content">
108
                    <div class="uk-margin-top">
109
                      <div class="uk-float-right uk-margin-small-right">
110
                        <img src="../../../assets/img/icons/JOURNAL.svg" width="30" height="30">
111
                      </div>
112
                      <h2 class="uk-margin-remove">
113
                        <!--<span class="number">164</span>-->
114
                        <span *ngIf="!countryData || !countryData.journals || !countryData.journals.oa" class="number">--</span>
115
                        <span *ngIf="countryData?.journals?.oa" class="number">{{countryData.journals.oa | number}}</span>
116
                        <!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
117
                        <!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
118
                      </h2>
119
                    </div>
120
                    <div class="uk-margin-top">
121
                      <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
122
                      <span class="">Number of OA journals</span>
123
                    </div>
124
                    <!--<div *ngIf="overviewData.overview.journals?.percentage" class="uk-margin-top">-->
125
                      <!--<span class="number">{{overviewData.overview.journals.percentage | number}}%</span> are OA-->
126
                    <!--</div>-->
127
                  </div>
128
                </div>
129
              </div>
130
              <div class="">
131
                <div class="md-card">
132
                  <div class="md-card-content">
133
                    <div class="uk-margin-top">
134
                      <div class="uk-float-right uk-margin-small-right">
135
                        <img src="../../../assets/img/icons/POLICES.svg" width="30" height="30">
136
                      </div>
137
                      <h2 class="uk-margin-remove">
138
                        <span class="number">--</span>
139
                        <!--<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>-->
140
                        <!--<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>-->
141
                      </h2>
142
                    </div>
143
                    <div class="uk-margin-top">
144
                      <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
145
                      <span class="">Number of organizations with OA policies</span>
146
                    </div>
147
                    <!--<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">-->
148
                      <!--<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA-->
149
                    <!--</div>-->
150
                  </div>
151
                </div>
152
              </div>
153
            </div>
154
          </div>
155
        </div>
156

    
157
        <!--GREEN VS. GOLD-->
158
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
159
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
160
            Green vs. Gold
161
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
162
          </h2>
163
          <div class="uk-grid">
164
            <div class="uk-width-1-3">
165
              <div class="md-card">
166
                <div class="md-card-toolbar">
167
                  <div class="md-card-toolbar-actions">
168
                    <i class="fas fa-lg fa-info-circle"></i>
169
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
170
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
171
                  </div>
172
                  <h3 class="md-card-toolbar-heading-text">
173
                    <!--Card Heading-->
174
                  </h3>
175
                </div>
176
                <div class="md-card-content">
177
                  <iframe *ngIf="greenGoldLineChartURL" width="100%" height="350" [src]="greenGoldLineChartURL"></iframe>
178
                  <!--<img src="../../../assets/img/mocks/monthly-average-temperat.png">-->
179
                </div>
180
              </div>
181
            </div>
182
            <div class="uk-width-1-3">
183
              <div class="md-card">
184
                <div class="md-card-toolbar">
185
                  <div class="md-card-toolbar-actions">
186
                    <i class="fas fa-lg fa-info-circle"></i>
187
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
188
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
189
                  </div>
190
                  <h3 class="md-card-toolbar-heading-text">
191
                    <!--Card Heading-->
192
                  </h3>
193
                </div>
194
                <div class="md-card-content">
195
                  <iframe *ngIf="goldOrganisationsChartURL" width="100%" height="350" [src]="goldOrganisationsChartURL"></iframe>
196
                </div>
197
              </div>
198
            </div>
199
            <div class="uk-width-1-3">
200
              <div class="md-card">
201
                <div class="md-card-toolbar">
202
                  <div class="md-card-toolbar-actions">
203
                    <i class="fas fa-lg fa-info-circle"></i>
204
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
205
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
206
                  </div>
207
                  <h3 class="md-card-toolbar-heading-text">
208
                    <!--Card Heading-->
209
                  </h3>
210
                </div>
211
                <div class="md-card-content">
212
                  <iframe *ngIf="greenOrganisationsChartURL" width="100%" height="350" [src]="greenOrganisationsChartURL"></iframe>
213
                </div>
214
              </div>
215
            </div>
216
          </div>
217
        </div>
218

    
219
        <!--EU FUNDED OPEN SCIENCE-->
220
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
221
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
222
            EU funded Open Science
223
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
224
          </h2>
225
          <div class="uk-grid">
226
            <div class="uk-width-1-1">
227
              <div class="md-card">
228
                <div class="md-card-toolbar">
229
                  <div class="md-card-toolbar-actions">
230
                    <i class="fas fa-lg fa-info-circle"></i>
231
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
232
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
233
                  </div>
234
                  <h3 class="md-card-toolbar-heading-text">
235
                    <!--Card Heading-->
236
                  </h3>
237
                </div>
238
                <div class="md-card-content">
239
                  <iframe *ngIf="publicationsDataSetsSoftwareByYearGraphURL" width="100%" height="350" [src]="publicationsDataSetsSoftwareByYearGraphURL"></iframe>
240
                </div>
241
              </div>
242
            </div>
243
          </div>
244
          <div class="uk-grid">
245
            <div class="uk-width-1-2">
246
              <div class="md-card">
247
                <div class="md-card-toolbar">
248
                  <div class="md-card-toolbar-actions">
249
                    <i class="fas fa-lg fa-info-circle"></i>
250
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
251
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
252
                  </div>
253
                  <h3 class="md-card-toolbar-heading-text">
254
                    Organisations
255
                  </h3>
256
                </div>
257
                <div class="md-card-content">
258
                  <iframe *ngIf="publicationsDataSetsSoftwareByOrganisationTableURL" width="100%" height="730" [src]="publicationsDataSetsSoftwareByOrganisationTableURL"></iframe>
259
                  <!--<table class="uk-table uk-table-small uk-table-divider">-->
260
                    <!--<thead>-->
261
                    <!--<tr>-->
262
                      <!--<th>Table Heading</th>-->
263
                      <!--<th>Table Heading</th>-->
264
                      <!--<th>Table Heading</th>-->
265
                    <!--</tr>-->
266
                    <!--</thead>-->
267
                    <!--<tbody>-->
268
                    <!--<tr>-->
269
                      <!--<td>Table Data</td>-->
270
                      <!--<td>Table Data</td>-->
271
                      <!--<td>Table Data</td>-->
272
                    <!--</tr>-->
273
                    <!--<tr>-->
274
                      <!--<td>Table Data</td>-->
275
                      <!--<td>Table Data</td>-->
276
                      <!--<td>Table Data</td>-->
277
                    <!--</tr>-->
278
                    <!--<tr>-->
279
                      <!--<td>Table Data</td>-->
280
                      <!--<td>Table Data</td>-->
281
                      <!--<td>Table Data</td>-->
282
                    <!--</tr>-->
283
                    <!--</tbody>-->
284
                  <!--</table>-->
285
                </div>
286
              </div>
287
            </div>
288
            <div class="uk-width-1-2">
289
              <div class="md-card">
290
                <div class="md-card-toolbar">
291
                  <div class="md-card-toolbar-actions">
292
                    <i class="fas fa-lg fa-info-circle"></i>
293
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
294
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
295
                  </div>
296
                  <h3 class="md-card-toolbar-heading-text">
297
                    Repositories
298
                  </h3>
299
                </div>
300
                <div class="md-card-content">
301
                  <iframe *ngIf="publicationsDataSetsSoftwareByRepoTableURL" width="100%" height="730" [src]="publicationsDataSetsSoftwareByRepoTableURL"></iframe>
302
                  <!--<table class="uk-table uk-table-small uk-table-divider">-->
303
                    <!--<thead>-->
304
                    <!--<tr>-->
305
                      <!--<th>Table Heading</th>-->
306
                      <!--<th>Table Heading</th>-->
307
                      <!--<th>Table Heading</th>-->
308
                    <!--</tr>-->
309
                    <!--</thead>-->
310
                    <!--<tbody>-->
311
                    <!--<tr>-->
312
                      <!--<td>Table Data</td>-->
313
                      <!--<td>Table Data</td>-->
314
                      <!--<td>Table Data</td>-->
315
                    <!--</tr>-->
316
                    <!--<tr>-->
317
                      <!--<td>Table Data</td>-->
318
                      <!--<td>Table Data</td>-->
319
                      <!--<td>Table Data</td>-->
320
                    <!--</tr>-->
321
                    <!--<tr>-->
322
                      <!--<td>Table Data</td>-->
323
                      <!--<td>Table Data</td>-->
324
                      <!--<td>Table Data</td>-->
325
                    <!--</tr>-->
326
                    <!--</tbody>-->
327
                  <!--</table>-->
328
                </div>
329
              </div>
330
            </div>
331
          </div>
332
        </div>
333

    
334
        <!--FUNDING SOURCES-->
335
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
336
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
337
            Funding sources
338
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
339
          </h2>
340
          <div class="uk-grid">
341
            <div class="uk-width-1-1">
342
              <div class="md-card">
343
                <div class="md-card-toolbar">
344
                  <div class="md-card-toolbar-actions">
345
                    <i class="fas fa-lg fa-info-circle"></i>
346
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
347
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
348
                  </div>
349
                  <h3 class="md-card-toolbar-heading-text">
350
                    <!--Card Heading-->
351
                  </h3>
352
                </div>
353
                <div class="md-card-content">
354
                  <iframe *ngIf="publicationsDataSetsSoftwareByFunderGraphURL" width="100%" height="450" [src]="publicationsDataSetsSoftwareByFunderGraphURL"></iframe>
355
                </div>
356
              </div>
357
            </div>
358
          </div>
359
        </div>
360

    
361
        <!--PROJECT PERFORMANCE-->
362
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
363
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
364
            Project performance
365
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
366
          </h2>
367
          <div class="uk-grid">
368
            <div class="uk-width-1-3">
369
              <div class="md-card">
370
                <div class="md-card-toolbar">
371
                  <div class="md-card-toolbar-actions">
372
                    <i class="fas fa-lg fa-info-circle"></i>
373
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
374
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
375
                  </div>
376
                  <h3 class="md-card-toolbar-heading-text">
377
                    <!--Card Heading-->
378
                  </h3>
379
                </div>
380
                <div class="md-card-content">
381
                  <iframe *ngIf="topProjectsByPublicationsGraphURL" width="100%" height="350" [src]="topProjectsByPublicationsGraphURL"></iframe>
382
                </div>
383
              </div>
384
            </div>
385
            <div class="uk-width-1-3">
386
              <div class="md-card">
387
                <div class="md-card-toolbar">
388
                  <div class="md-card-toolbar-actions">
389
                    <i class="fas fa-lg fa-info-circle"></i>
390
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
391
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
392
                  </div>
393
                  <h3 class="md-card-toolbar-heading-text">
394
                    <!--Card Heading-->
395
                  </h3>
396
                </div>
397
                <div class="md-card-content">
398
                  <iframe *ngIf="topProjectsByDatasetsGraphURL" width="100%" height="350" [src]="topProjectsByDatasetsGraphURL"></iframe>
399
                </div>
400
              </div>
401
            </div>
402
            <div class="uk-width-1-3">
403
              <div class="md-card">
404
                <div class="md-card-toolbar">
405
                  <div class="md-card-toolbar-actions">
406
                    <i class="fas fa-lg fa-info-circle"></i>
407
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
408
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
409
                  </div>
410
                  <h3 class="md-card-toolbar-heading-text">
411
                    <!--Card Heading-->
412
                  </h3>
413
                </div>
414
                <div class="md-card-content">
415
                  <iframe *ngIf="topProjectsBySoftwareGraphURL" width="100%" height="350" [src]="topProjectsBySoftwareGraphURL"></iframe>
416
                </div>
417
              </div>
418
            </div>
419
          </div>
420
        </div>
421
      </div>
422

    
423
      <aside class="uk-width-1-5 uk-padding-remove">
424
        <div id="sidebar_main" class="md-card dark-grey-box infoBox">
425
          <div class="md-card-content">
426
            <h3 class="uk-text-center">{{countryName | uppercase}}</h3>
427

    
428
            <div>
429
              <app-country-map [country]="countryName"></app-country-map>
430
            </div>
431

    
432
            <div class="numbers">
433
              <div class="uk-margin-medium-top">
434
                <div class="number">--</div>
435
                <div class="uk-margin-top">R&D expenditure</div>
436
              </div>
437
              <div class="uk-margin-medium-top">
438
                <div *ngIf="!countryData || !countryData.funders || !countryData.funders.oa" class="number">--</div>
439
                <div *ngIf="countryData?.funders?.oa" class="number">{{countryData.funders.oa}}</div>
440
                <div class="uk-margin-top">funding sources</div>
441
              </div>
442
              <div class="uk-margin-medium-top">
443
                <div *ngIf="!countryData || !countryData.funders || !countryData.funders.total" class="number">--</div>
444
                <div *ngIf="countryData?.funders?.total" class="number">{{countryData.funders.total}}</div>
445
                <div class="uk-margin-top">funding organizations</div>
446
              </div>
447
              <div class="uk-margin-medium-top">
448
                <div *ngIf="!countryData || !countryData.ecFundedOrganizations || !countryData.ecFundedOrganizations.oa" class="number">--</div>
449
                <div *ngIf="countryData?.ecFundedOrganizations?.oa" class="number">{{countryData.ecFundedOrganizations.oa}}</div>
450
                <div class="uk-margin-top">organizations funded by the European commission since 2013</div>
451
              </div>
452
            </div>
453

    
454
            <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
455

    
456
            <div class="uk-text-center uk-margin-medium-top">
457

    
458
              <div class="uk-text-center uk-margin-medium-bottom">
459
                <span class="openaire-symbol-wrapper">
460
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
461
                </span>
462
              </div>
463
              <a class="uk-link" href="{{linkToCountryInOpenAIRE}}" target="_blank">Country page in <strong>OpenAIRE</strong><i class="fas fa-long-arrow-alt-right uk-margin-left"></i></a>
464
            </div>
465
          </div>
466
        </div>
467
      </aside>
468

    
469

    
470
      <!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->
471
      <!--<h2 class="heading_b">-->
472
      <!--Our Team-->
473
      <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
474
      <!--</h2>-->
475
      <!--</div>-->
476
    </div>
477

    
478
  </div>
479
</section>
(3-3/4)