Project

General

Profile

1
<section class="greySection uk-padding-small" 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
    <div class="uk-grid uk-grid-small">
6

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

    
9
        <div class="uk-container uk-container-expand uk-margin-medium-top">
10

    
11
          <ul class="uk-breadcrumb">
12
            <li><a [routerLink]="['/home']">Home</a></li>
13
            <li><span>{{countryName}}</span></li>
14
          </ul>
15

    
16

    
17
          <div class="countryPageHeader">
18
            <div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
19
              <img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image" width="132" height="132">
20
              <div class="uk-inline uk-margin-left">
21
                <h1>{{countryPageOverviewData.name}}</h1>
22
                <span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span>
23
              </div>
24
            </div>
25

    
26
            <div class="actionButtonsCountryPage uk-text-right">
27
              <a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>
28
              <!--<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>-->
29
              <a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>
30
            </div>
31
          </div>
32

    
33
        </div>
34

    
35

    
36
        <div class="uk-container uk-container-expand uk-margin-top">
37
          <!--Overview cards-->
38
          <div class="uk-width-1-1 indicatorCards">
39
            <div class="uk-grid uk-grid-small uk-child-width-1-2@s uk-child-width-1-4@m uk-child-width-1-4@l uk-margin-top uk-grid-match" data-uk-grid-margin="">
40
            <!--<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="">-->
41

    
42
              <div class="uk-row-first">
43
                <div class="md-card">
44
                  <div class="md-card-content">
45

    
46
                    <!--top number-->
47
                    <div class="uk-margin-top">
48
                      <!--<div class="uk-float-right uk-margin-small-right">-->
49
                      <!--<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">-->
50
                      <!--</div>-->
51
                      <h3 class="uk-margin-remove">
52
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number">--</span>
53
                        <span *ngIf="countryPageOverviewData?.publicationsAffiliated?.oa" class="number">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</span>
54
                      </h3>
55
                    </div>
56
                    <div class="uk-margin-top">
57
                      <span class=""><i>OA publications affiliated to an organization in the country</i></span>
58
                    </div>
59
                    <div *ngIf="countryPageOverviewData?.publicationsAffiliated?.percentage" class="uk-margin-top">
60
                      <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
61
                      <div class="progress uk-margin-small-top">
62
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
63
                      </div>
64
                    </div>
65

    
66
                    <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
67

    
68
                    <!--bottom number-->
69
                    <div class="uk-margin-top">
70
                      <div class="uk-float-right uk-margin-small-right">
71
                        <img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
72
                      </div>
73
                      <h3 class="uk-margin-remove">
74
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number">--</span>
75
                        <span *ngIf="countryPageOverviewData?.publicationsDeposited?.oa" class="number">{{countryPageOverviewData.publicationsDeposited.oa | number}}</span>
76
                      </h3>
77
                    </div>
78
                    <div class="uk-margin-top">
79
                      <span class=""><i>OA publications from institutional repositories</i></span>
80
                    </div>
81
                    <div *ngIf="countryPageOverviewData?.publicationsDeposited?.percentage" class="uk-margin-top">
82
                      <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
83
                      <div class="progress uk-margin-small-top">
84
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
85
                      </div>
86
                    </div>
87

    
88
                  </div>
89
                </div>
90
              </div>
91

    
92
              <div class="">
93
                <div class="md-card">
94
                  <div class="md-card-content">
95

    
96
                    <!--top number-->
97
                    <div class="uk-margin-top">
98
                      <!--<div class="uk-float-right uk-margin-small-right">-->
99
                      <!--<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">-->
100
                      <!--</div>-->
101
                      <h3 class="uk-margin-remove">
102
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number">--</span>
103
                        <span *ngIf="countryPageOverviewData?.datasetsAffiliated?.oa" class="number">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</span>
104
                      </h3>
105
                    </div>
106
                    <div class="uk-margin-top">
107
                      <span class=""><i>OA datasets affiliated to an organization in the country</i></span>
108
                    </div>
109
                    <div *ngIf="countryPageOverviewData?.datasetsAffiliated?.percentage" class="uk-margin-top">
110
                      <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
111
                      <div class="progress uk-margin-small-top">
112
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
113
                      </div>
114
                    </div>
115

    
116
                    <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
117

    
118
                    <!--bottom number-->
119
                    <div class="uk-margin-top">
120
                      <div class="uk-float-right uk-margin-small-right">
121
                        <img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
122
                      </div>
123
                      <h3 class="uk-margin-remove">
124
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number">--</span>
125
                        <span *ngIf="countryPageOverviewData?.datasetsDeposited?.oa" class="number">{{countryPageOverviewData.datasetsDeposited.oa | number}}</span>
126
                      </h3>
127
                    </div>
128
                    <div class="uk-margin-top">
129
                      <span class=""><i>OA datasets from institutional repositories</i></span>
130
                    </div>
131
                    <div *ngIf="countryPageOverviewData?.datasetsDeposited?.percentage" class="uk-margin-top">
132
                      <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
133
                      <div class="progress uk-margin-small-top">
134
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
135
                      </div>
136
                    </div>
137
                  </div>
138
                </div>
139
              </div>
140

    
141
              <div class="">
142

    
143
                <div class="md-card">
144
                  <div class="md-card-content">
145
                    <div class="uk-margin-top">
146
                      <div class="uk-float-right uk-margin-small-right">
147
                        <img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
148
                      </div>
149
                      <h3 class="uk-margin-remove">
150
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.repositories || !countryPageOverviewData.repositories.oa" class="number">--</span>
151
                        <span *ngIf="countryPageOverviewData?.repositories?.oa" class="number">{{countryPageOverviewData.repositories.oa | number}}</span>
152
                      </h3>
153
                    </div>
154
                    <div class="uk-margin-top">
155
                      <span class=""><i>repositories</i> from openDOAR & re3data</span>
156
                    </div>
157
                    <div *ngIf="countryPageOverviewData?.repositories?.percentage" class="uk-margin-top">
158
                      <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> Validated
159
                      <div class="progress uk-margin-small-top">
160
                        <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
161
                      </div>
162
                    </div>
163
                  </div>
164
                </div>
165

    
166
                <div class="md-card">
167
                  <div class="md-card-content">
168
                    <div class="uk-margin-top">
169
                      <div class="uk-float-right uk-margin-small-right">
170
                        <img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
171
                      </div>
172
                      <h3 class="uk-margin-remove">
173
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.journals || !countryPageOverviewData.journals.oa" class="number">--</span>
174
                        <span *ngIf="countryPageOverviewData?.journals?.oa" class="number">{{countryPageOverviewData.journals.oa | number}}</span>
175
                        <!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
176
                        <!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
177
                      </h3>
178
                    </div>
179
                    <div class="uk-margin-top">
180
                      <span class=""><i>OA journals</i> from DOAJ</span>
181
                    </div>
182
                    <div *ngIf="countryPageOverviewData?.journals?.percentage" class="uk-margin-top">
183
                      <span class="number">{{countryPageOverviewData.journals.percentage | number :'1.0-1'}}%</span> Validated
184
                      <div class="progress uk-margin-small-top">
185
                        <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
186
                      </div>
187
                    </div>
188
                  </div>
189
                </div>
190

    
191
              </div>
192

    
193
              <!--<div class="">-->
194
                <!--<div class="md-card">-->
195
                  <!--<div class="md-card-content">-->
196
                    <!--<div class="uk-margin-top">-->
197
                      <!--<div class="uk-float-right uk-margin-small-right">-->
198
                        <!--<img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">-->
199
                      <!--</div>-->
200
                      <!--<h3 class="uk-margin-remove">-->
201
                        <!--<span *ngIf="!countryData || !countryData.journals || !countryData.journals.oa" class="number">&#45;&#45;</span>-->
202
                        <!--<span *ngIf="countryData?.journals?.oa" class="number">{{countryData.journals.oa | number}}</span>-->
203
                        <!--&lt;!&ndash;<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>&ndash;&gt;-->
204
                        <!--&lt;!&ndash;<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">&#45;&#45;</span>&ndash;&gt;-->
205
                      <!--</h3>-->
206
                    <!--</div>-->
207
                    <!--<div class="uk-margin-top">-->
208
                      <!--<span class=""><i>OA journals</i></span>-->
209
                    <!--</div>-->
210
                    <!--<div *ngIf="countryData.journals?.percentage" class="uk-margin-top">-->
211
                      <!--<span class="number">{{countryData.journals.percentage | number :'1.0-1'}}%</span> Certified-->
212
                      <!--<div class="progress uk-margin-small-top">-->
213
                        <!--<div [ngStyle]="{'width': countryData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>-->
214
                      <!--</div>-->
215
                    <!--</div>-->
216
                  <!--</div>-->
217
                <!--</div>-->
218
              <!--</div>-->
219

    
220
              <div class="">
221

    
222
                <div class="md-card" style="height: 47%">
223
                  <div class="md-card-content">
224
                    <div class="uk-margin-top">
225
                      <div class="uk-float-right uk-margin-small-right">
226
                        <img src="../../../assets/img/icons/policies-icon.svg" width="36" height="40">
227
                      </div>
228
                      <h3 class="uk-margin-remove">
229
                        <span class="number">--</span>
230
                        <!--<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>-->
231
                        <!--<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>-->
232
                      </h3>
233
                    </div>
234
                    <div class="uk-margin-top">
235
                      <span class="">organizations with <i>OA policies</i></span>
236
                    </div>
237
                  </div>
238
                </div>
239

    
240
                <div></div>
241
              </div>
242
            </div>
243
          </div>
244
        </div>
245

    
246
        <!--GREEN VS. GOLD-->
247
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-large-top">
248
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
249
            Green vs. Gold
250
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
251
          </h2>
252
          <div class="uk-grid">
253
            <div class="uk-width-1-3">
254
              <div class="md-card">
255
                <div class="md-card-toolbar">
256
                  <div class="md-card-toolbar-actions">
257
                    <i class="fas fa-lg fa-info-circle"></i>
258
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
259
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
260
                  </div>
261
                  <h3 class="md-card-toolbar-heading-text">
262
                    <!--Card Heading-->
263
                  </h3>
264
                </div>
265
                <div class="md-card-content">
266
                  <iframe *ngIf="greenGoldLineChartURL" width="100%" height="350" [src]="greenGoldLineChartURL"></iframe>
267
                  <!--<img src="../../../assets/img/mocks/monthly-average-temperat.png">-->
268
                </div>
269
              </div>
270
            </div>
271
            <div class="uk-width-1-3">
272
              <div class="md-card">
273
                <div class="md-card-toolbar">
274
                  <div class="md-card-toolbar-actions">
275
                    <i class="fas fa-lg fa-info-circle"></i>
276
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
277
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
278
                  </div>
279
                  <h3 class="md-card-toolbar-heading-text">
280
                    <!--Card Heading-->
281
                  </h3>
282
                </div>
283
                <div class="md-card-content">
284
                  <iframe *ngIf="goldOrganisationsChartURL" width="100%" height="350" [src]="goldOrganisationsChartURL"></iframe>
285
                </div>
286
              </div>
287
            </div>
288
            <div class="uk-width-1-3">
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
                    <!--Card Heading-->
298
                  </h3>
299
                </div>
300
                <div class="md-card-content">
301
                  <iframe *ngIf="greenOrganisationsChartURL" width="100%" height="350" [src]="greenOrganisationsChartURL"></iframe>
302
                </div>
303
              </div>
304
            </div>
305
          </div>
306
        </div>
307

    
308
        <!--EU FUNDED OPEN SCIENCE-->
309
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
310
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
311
            EU funded Open Science
312
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
313
          </h2>
314
          <div class="uk-grid">
315
            <div class="uk-width-1-1">
316
              <div class="md-card">
317
                <div class="md-card-toolbar">
318
                  <div class="md-card-toolbar-actions">
319
                    <i class="fas fa-lg fa-info-circle"></i>
320
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
321
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
322
                  </div>
323
                  <h3 class="md-card-toolbar-heading-text">
324
                    <!--Card Heading-->
325
                  </h3>
326
                </div>
327
                <div class="md-card-content">
328
                  <iframe *ngIf="publicationsDataSetsSoftwareByYearGraphURL" width="100%" height="350" [src]="publicationsDataSetsSoftwareByYearGraphURL"></iframe>
329
                </div>
330
              </div>
331
            </div>
332
          </div>
333
          <div class="uk-grid">
334
            <div class="uk-width-1-2">
335
              <div class="md-card">
336
                <div class="md-card-toolbar">
337
                  <div class="md-card-toolbar-actions">
338
                    <i class="fas fa-lg fa-info-circle"></i>
339
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
340
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
341
                  </div>
342
                  <h3 class="md-card-toolbar-heading-text">
343
                    Organisations
344
                  </h3>
345
                </div>
346
                <div class="md-card-content">
347
                  <iframe *ngIf="publicationsDataSetsSoftwareByOrganisationTableURL" width="100%" height="730" [src]="publicationsDataSetsSoftwareByOrganisationTableURL"></iframe>
348
                  <!--<table class="uk-table uk-table-small uk-table-divider">-->
349
                    <!--<thead>-->
350
                    <!--<tr>-->
351
                      <!--<th>Table Heading</th>-->
352
                      <!--<th>Table Heading</th>-->
353
                      <!--<th>Table Heading</th>-->
354
                    <!--</tr>-->
355
                    <!--</thead>-->
356
                    <!--<tbody>-->
357
                    <!--<tr>-->
358
                      <!--<td>Table Data</td>-->
359
                      <!--<td>Table Data</td>-->
360
                      <!--<td>Table Data</td>-->
361
                    <!--</tr>-->
362
                    <!--<tr>-->
363
                      <!--<td>Table Data</td>-->
364
                      <!--<td>Table Data</td>-->
365
                      <!--<td>Table Data</td>-->
366
                    <!--</tr>-->
367
                    <!--<tr>-->
368
                      <!--<td>Table Data</td>-->
369
                      <!--<td>Table Data</td>-->
370
                      <!--<td>Table Data</td>-->
371
                    <!--</tr>-->
372
                    <!--</tbody>-->
373
                  <!--</table>-->
374
                </div>
375
              </div>
376
            </div>
377
            <div class="uk-width-1-2">
378
              <div class="md-card">
379
                <div class="md-card-toolbar">
380
                  <div class="md-card-toolbar-actions">
381
                    <i class="fas fa-lg fa-info-circle"></i>
382
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
383
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
384
                  </div>
385
                  <h3 class="md-card-toolbar-heading-text">
386
                    Repositories
387
                  </h3>
388
                </div>
389
                <div class="md-card-content">
390
                  <iframe *ngIf="publicationsDataSetsSoftwareByRepoTableURL" width="100%" height="730" [src]="publicationsDataSetsSoftwareByRepoTableURL"></iframe>
391
                  <!--<table class="uk-table uk-table-small uk-table-divider">-->
392
                    <!--<thead>-->
393
                    <!--<tr>-->
394
                      <!--<th>Table Heading</th>-->
395
                      <!--<th>Table Heading</th>-->
396
                      <!--<th>Table Heading</th>-->
397
                    <!--</tr>-->
398
                    <!--</thead>-->
399
                    <!--<tbody>-->
400
                    <!--<tr>-->
401
                      <!--<td>Table Data</td>-->
402
                      <!--<td>Table Data</td>-->
403
                      <!--<td>Table Data</td>-->
404
                    <!--</tr>-->
405
                    <!--<tr>-->
406
                      <!--<td>Table Data</td>-->
407
                      <!--<td>Table Data</td>-->
408
                      <!--<td>Table Data</td>-->
409
                    <!--</tr>-->
410
                    <!--<tr>-->
411
                      <!--<td>Table Data</td>-->
412
                      <!--<td>Table Data</td>-->
413
                      <!--<td>Table Data</td>-->
414
                    <!--</tr>-->
415
                    <!--</tbody>-->
416
                  <!--</table>-->
417
                </div>
418
              </div>
419
            </div>
420
          </div>
421
        </div>
422

    
423
        <!--FUNDING SOURCES-->
424
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
425
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
426
            Funding sources
427
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
428
          </h2>
429
          <div class="uk-grid">
430
            <div class="uk-width-1-1">
431
              <div class="md-card">
432
                <div class="md-card-toolbar">
433
                  <div class="md-card-toolbar-actions">
434
                    <i class="fas fa-lg fa-info-circle"></i>
435
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
436
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
437
                  </div>
438
                  <h3 class="md-card-toolbar-heading-text">
439
                    <!--Card Heading-->
440
                  </h3>
441
                </div>
442
                <div class="md-card-content">
443
                  <iframe *ngIf="publicationsDataSetsSoftwareByFunderGraphURL" width="100%" height="450" [src]="publicationsDataSetsSoftwareByFunderGraphURL"></iframe>
444
                </div>
445
              </div>
446
            </div>
447
          </div>
448
        </div>
449

    
450
        <!--PROJECT PERFORMANCE-->
451
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
452
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
453
            Project performance
454
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
455
          </h2>
456
          <div class="uk-grid">
457
            <div class="uk-width-1-3">
458
              <div class="md-card">
459
                <div class="md-card-toolbar">
460
                  <div class="md-card-toolbar-actions">
461
                    <i class="fas fa-lg fa-info-circle"></i>
462
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
463
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
464
                  </div>
465
                  <h3 class="md-card-toolbar-heading-text">
466
                    <!--Card Heading-->
467
                  </h3>
468
                </div>
469
                <div class="md-card-content">
470
                  <iframe *ngIf="topProjectsByPublicationsGraphURL" width="100%" height="350" [src]="topProjectsByPublicationsGraphURL"></iframe>
471
                </div>
472
              </div>
473
            </div>
474
            <div class="uk-width-1-3">
475
              <div class="md-card">
476
                <div class="md-card-toolbar">
477
                  <div class="md-card-toolbar-actions">
478
                    <i class="fas fa-lg fa-info-circle"></i>
479
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
480
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
481
                  </div>
482
                  <h3 class="md-card-toolbar-heading-text">
483
                    <!--Card Heading-->
484
                  </h3>
485
                </div>
486
                <div class="md-card-content">
487
                  <iframe *ngIf="topProjectsByDatasetsGraphURL" width="100%" height="350" [src]="topProjectsByDatasetsGraphURL"></iframe>
488
                </div>
489
              </div>
490
            </div>
491
            <div class="uk-width-1-3">
492
              <div class="md-card">
493
                <div class="md-card-toolbar">
494
                  <div class="md-card-toolbar-actions">
495
                    <i class="fas fa-lg fa-info-circle"></i>
496
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
497
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
498
                  </div>
499
                  <h3 class="md-card-toolbar-heading-text">
500
                    <!--Card Heading-->
501
                  </h3>
502
                </div>
503
                <div class="md-card-content">
504
                  <iframe *ngIf="topProjectsBySoftwareGraphURL" width="100%" height="350" [src]="topProjectsBySoftwareGraphURL"></iframe>
505
                </div>
506
              </div>
507
            </div>
508
          </div>
509
        </div>
510
      </div>
511

    
512

    
513
      <div class="uk-width-1-5">
514
        <div class="md-card infoBox">
515

    
516
          <div class="md-card-toolbar">
517
            <h3 class="uk-text-center uk-margin-small-top">
518
              Research overview
519
            </h3>
520
          </div>
521

    
522
          <div class="md-card-content">
523
            <div class="numbers">
524

    
525
              <div class="indicator uk-margin-small-top">
526
                <span class="number primary">--</span>
527
                <span><i>R&D expenditure</i></span>
528
              </div>
529

    
530
              <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
531

    
532
              <div class="indicator">
533
                <span class="number primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</span>
534
                <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</span>
535
                <span><i>funding sources</i></span>
536
              </div>
537

    
538
              <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
539

    
540
              <div class="indicator">
541
                <span class="number primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</span>
542
                <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</span>
543
                <span><i>funding organizations</i></span>
544
              </div>
545

    
546
              <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
547

    
548
              <div class="indicator">
549
                <span class="number primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</span>
550
                <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</span>
551
                <span><i>organizations funded by the European commission since 2013</i></span>
552
              </div>
553

    
554
            </div>
555

    
556

    
557
            <div class="uk-text-center uk-margin-xlarge-top">
558

    
559
              <div class="uk-text-center uk-margin-medium-bottom">
560
                <span class="openaire-symbol-wrapper">
561
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
562
                </span>
563
              </div>
564
              <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>
565
            </div>
566

    
567
          </div>
568
        </div>
569
      </div>
570

    
571
      <!--<aside class="uk-width-1-5 uk-padding-remove">-->
572
        <!--<div id="sidebar_main" class="md-card dark-grey-box infoBox">-->
573
          <!--<div class="md-card-content">-->
574
            <!--<h3 class="uk-text-center">{{countryName | uppercase}}</h3>-->
575

    
576
            <!--<div>-->
577
              <!--<app-country-map [country]="countryName"></app-country-map>-->
578
            <!--</div>-->
579

    
580
            <!--<div class="numbers">-->
581
              <!--<div class="uk-margin-medium-top">-->
582
                <!--<div class="number">&#45;&#45;</div>-->
583
                <!--<div class="uk-margin-top">R&D expenditure</div>-->
584
              <!--</div>-->
585
              <!--<div class="uk-margin-medium-top">-->
586
                <!--<div *ngIf="!countryData || !countryData.funders || !countryData.funders.oa" class="number">&#45;&#45;</div>-->
587
                <!--<div *ngIf="countryData?.funders?.oa" class="number">{{countryData.funders.oa}}</div>-->
588
                <!--<div class="uk-margin-top">funding sources</div>-->
589
              <!--</div>-->
590
              <!--<div class="uk-margin-medium-top">-->
591
                <!--<div *ngIf="!countryData || !countryData.funders || !countryData.funders.total" class="number">&#45;&#45;</div>-->
592
                <!--<div *ngIf="countryData?.funders?.total" class="number">{{countryData.funders.total}}</div>-->
593
                <!--<div class="uk-margin-top">funding organizations</div>-->
594
              <!--</div>-->
595
              <!--<div class="uk-margin-medium-top">-->
596
                <!--<div *ngIf="!countryData || !countryData.ecFundedOrganizations || !countryData.ecFundedOrganizations.oa" class="number">&#45;&#45;</div>-->
597
                <!--<div *ngIf="countryData?.ecFundedOrganizations?.oa" class="number">{{countryData.ecFundedOrganizations.oa}}</div>-->
598
                <!--<div class="uk-margin-top">organizations funded by the European commission since 2013</div>-->
599
              <!--</div>-->
600
            <!--</div>-->
601

    
602
            <!--<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">-->
603

    
604
            <!--<div class="uk-text-center uk-margin-medium-top">-->
605

    
606
              <!--<div class="uk-text-center uk-margin-medium-bottom">-->
607
                <!--<span class="openaire-symbol-wrapper">-->
608
                  <!--<img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">-->
609
                <!--</span>-->
610
              <!--</div>-->
611
              <!--<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>-->
612
            <!--</div>-->
613
          <!--</div>-->
614
        <!--</div>-->
615
      <!--</aside>-->
616

    
617
    </div>
618

    
619
  </div>
620
</section>
(3-3/4)