Project

General

Profile

1
<div class="greySection">
2
  <section class="uk-padding-small" id="sect-country-page">
3
    <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}">
4
      <!--<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}">-->
5

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

    
8
        <div class="uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s">
9

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

    
12
            <!--LAPTOP & PAD LANDSCAPE-->
13
            <div class="uk-visible@m">
14
              <ul *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="uk-breadcrumb">
15
                <li><a routerLink="/home">Home</a></li>
16
                <li><span>{{countryPageOverviewData.name}}</span></li>
17
              </ul>
18

    
19

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

    
30
                <!-- TODO uncomment when implemented -->
31
                <!--<div class="actionButtonsCountryPage uk-text-right">-->
32
                  <!--<a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>-->
33
                  <!--&lt;!&ndash;<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>&ndash;&gt;-->
34
                  <!--<a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>-->
35
                <!--</div>-->
36
              </div>
37
            </div>
38

    
39
            <!--MOBILE & PAD PORTRAIT-->
40
            <div class="uk-hidden@m uk-text-center">
41
              <div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
42
                <img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image uk-display-block uk-margin-auto-left uk-margin-auto-right" width="103" height="103">
43
                <div class="uk-margin-top">
44
                  <h1 class="uk-margin-small-bottom">{{countryPageOverviewData.name}}</h1>
45
                  <span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span>
46
                </div>
47
              </div>
48
            </div>
49

    
50

    
51

    
52
          </div>
53

    
54

    
55
          <div class="uk-container uk-container-expand uk-margin-large-top">
56

    
57
            <!--Overview cards-->
58
            <!--LAPTOP & PAD LANDSCAPE-->
59
            <div class="uk-visible@m">
60
              <div class="uk-width-1-1 indicatorCards">
61
                <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="">
62
                  <!--<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="">-->
63

    
64
                  <div class="uk-row-first">
65
                    <div class="md-card">
66
                      <div class="md-card-content">
67

    
68
                        <!--top 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.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number">--</span>
75
                            <span *ngIf="countryPageOverviewData?.publicationsAffiliated?.oa" class="number">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</span>
76
                          </h3>
77
                        </div>
78
                        <div class="uk-margin-top">
79
                          <span class=""><i>OA publications affiliated to an organization in the country</i></span>
80
                        </div>
81
                        <div *ngIf="countryPageOverviewData?.publicationsAffiliated?.percentage" class="uk-margin-top">
82
                          <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
83
                          <div class="progress uk-margin-small-top">
84
                            <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
85
                          </div>
86
                        </div>
87

    
88
                        <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
89

    
90
                        <!--bottom number-->
91
                        <div class="uk-margin-top">
92
                          <div class="uk-float-right uk-margin-small-right">
93
                            <img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
94
                          </div>
95
                          <h3 class="uk-margin-remove">
96
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number">--</span>
97
                            <span *ngIf="countryPageOverviewData?.publicationsDeposited?.oa" class="number">{{countryPageOverviewData.publicationsDeposited.oa | number}}</span>
98
                          </h3>
99
                        </div>
100
                        <div class="uk-margin-top">
101
                          <span class=""><i>OA publications from institutional repositories</i></span>
102
                        </div>
103
                        <div *ngIf="countryPageOverviewData?.publicationsDeposited?.percentage" class="uk-margin-top">
104
                          <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
105
                          <div class="progress uk-margin-small-top">
106
                            <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
107
                          </div>
108
                        </div>
109

    
110
                      </div>
111
                    </div>
112
                  </div>
113

    
114
                  <div class="">
115
                    <div class="md-card">
116
                      <div class="md-card-content">
117

    
118
                        <!--top 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.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number">--</span>
125
                            <span *ngIf="countryPageOverviewData?.datasetsAffiliated?.oa" class="number">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</span>
126
                          </h3>
127
                        </div>
128
                        <div class="uk-margin-top">
129
                          <span class=""><i>OA datasets affiliated to an organization in the country</i></span>
130
                        </div>
131
                        <div *ngIf="countryPageOverviewData?.datasetsAffiliated?.percentage" class="uk-margin-top">
132
                          <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
133
                          <div class="progress uk-margin-small-top">
134
                            <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
135
                          </div>
136
                        </div>
137

    
138
                        <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
139

    
140
                        <!--bottom number-->
141
                        <div class="uk-margin-top">
142
                          <div class="uk-float-right uk-margin-small-right">
143
                            <img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
144
                          </div>
145
                          <h3 class="uk-margin-remove">
146
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number">--</span>
147
                            <span *ngIf="countryPageOverviewData?.datasetsDeposited?.oa" class="number">{{countryPageOverviewData.datasetsDeposited.oa | number}}</span>
148
                          </h3>
149
                        </div>
150
                        <div class="uk-margin-top">
151
                          <span class=""><i>OA datasets from institutional repositories</i></span>
152
                        </div>
153
                        <div *ngIf="countryPageOverviewData?.datasetsDeposited?.percentage" class="uk-margin-top">
154
                          <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
155
                          <div class="progress uk-margin-small-top">
156
                            <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
157
                          </div>
158
                        </div>
159
                      </div>
160
                    </div>
161
                  </div>
162

    
163
                  <div class="">
164

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

    
188
                    <div class="md-card">
189
                      <div class="md-card-content">
190
                        <div class="uk-margin-top">
191
                          <div class="uk-float-right uk-margin-small-right">
192
                            <img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
193
                          </div>
194
                          <h3 class="uk-margin-remove">
195
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.journals || !countryPageOverviewData.journals.total" class="number">--</span>
196
                            <span *ngIf="countryPageOverviewData?.journals?.total" class="number">{{countryPageOverviewData.journals.total | number}}</span>
197
                            <!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
198
                            <!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
199
                          </h3>
200
                        </div>
201
                        <div class="uk-margin-top">
202
                          <span class=""><i>OA journals</i> from DOAJ</span>
203
                        </div>
204
                        <div *ngIf="countryPageOverviewData?.journals?.percentage" class="uk-margin-top">
205
                          <span class="number">{{countryPageOverviewData.journals.percentage | number :'1.0-1'}}%</span> Validated
206
                          <div class="progress uk-margin-small-top">
207
                            <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
208
                          </div>
209
                        </div>
210
                      </div>
211
                    </div>
212

    
213
                  </div>
214

    
215

    
216
                  <div class="">
217

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

    
236
                    <div></div>
237
                  </div>
238
                </div>
239
              </div>
240
            </div>
241

    
242
            <!--MOBILE & PAD PORTRAIT-->
243
            <div class="uk-hidden@m uk-text-center uk-margin-medium-top">
244
              <div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
245
                <div class="md-card-content">
246

    
247

    
248
                  <div class="uk-grid uk-margin-top">
249
                    <div class="uk-width-1-5">
250
                      <img src="../../../assets/img/icons/publications-icon.svg" width="30" height="30">
251
                    </div>
252
                    <div class="uk-width-2-5">
253
                      <div *ngIf="countryPageOverviewData.publicationsAffiliated?.oa" class="number big">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</div>
254
                      <div *ngIf="!countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number big">--</div>
255
                      <div class="uk-margin-small-top">OA PUBLICATIONS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
256
                    </div>
257
                    <div *ngIf="countryPageOverviewData.publicationsAffiliated?.percentage" class="uk-width-2-5">
258
                      <div class="progress">
259
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
260
                      </div>
261
                      <div class="uk-margin-small-top">
262
                        <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
263
                      </div>
264
                    </div>
265
                  </div>
266
                  <div class="uk-grid uk-margin-top">
267
                    <div class="uk-width-1-5">
268
                    </div>
269
                    <div class="uk-width-2-5">
270
                      <div *ngIf="countryPageOverviewData.publicationsDeposited?.oa" class="number big">{{countryPageOverviewData.publicationsDeposited.oa | number}}</div>
271
                      <div *ngIf="!countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number big">--</div>
272
                      <div class="uk-margin-small-top">OA PUBLICATIONS FROM INSTITUTIONAL REPOSITORIES</div>
273
                    </div>
274
                    <div *ngIf="countryPageOverviewData.publicationsDeposited?.percentage" class="uk-width-2-5">
275
                      <div class="progress">
276
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
277
                      </div>
278
                      <div class="uk-margin-small-top">
279
                        <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
280
                      </div>
281
                    </div>
282
                  </div>
283

    
284
                  <div class="uk-grid uk-margin-medium-top">
285
                    <div class="uk-width-1-5">
286
                      <img src="../../../assets/img/icons/datasets-icon.svg" width="30" height="30">
287
                    </div>
288
                    <div class="uk-width-2-5">
289
                      <div *ngIf="countryPageOverviewData.datasetsAffiliated?.oa" class="number big">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</div>
290
                      <div *ngIf="!countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number big">--</div>
291
                      <div class="uk-margin-small-top">OA DATASETS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
292
                    </div>
293
                    <div *ngIf="countryPageOverviewData.datasetsAffiliated?.percentage" class="uk-width-2-5">
294
                      <div class="progress">
295
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
296
                      </div>
297
                      <div class="uk-margin-small-top">
298
                        <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
299
                      </div>
300
                    </div>
301
                  </div>
302
                  <div class="uk-grid uk-margin-medium-top">
303
                    <div class="uk-width-1-5">
304
                    </div>
305
                    <div class="uk-width-2-5">
306
                      <div *ngIf="countryPageOverviewData.datasetsDeposited?.oa" class="number big">{{countryPageOverviewData.datasetsDeposited.oa | number}}</div>
307
                      <div *ngIf="!countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number big">--</div>
308
                      <div class="uk-margin-small-top">OA DATASETS FROM INSTITUTIONAL REPOSITORIES</div>
309
                    </div>
310
                    <div *ngIf="countryPageOverviewData.datasetsDeposited?.percentage" class="uk-width-2-5">
311
                      <div class="progress">
312
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
313
                      </div>
314
                      <div class="uk-margin-small-top">
315
                        <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
316
                      </div>
317
                    </div>
318
                  </div>
319

    
320
                  <div class="uk-grid uk-margin-medium-top">
321
                    <div class="uk-width-1-5">
322
                      <img src="../../../assets/img/icons/repositories-icon.svg" width="30" height="30">
323
                    </div>
324
                    <div class="uk-width-2-5">
325
                      <div *ngIf="countryPageOverviewData.repositories?.oa" class="number big">{{countryPageOverviewData.repositories.oa | number}}</div>
326
                      <div *ngIf="!countryPageOverviewData.repositories || !countryPageOverviewData.repositories.oa" class="number big">--</div>
327
                      <div class="uk-margin-small-top">VALIDATED REPOSITORIES</div>
328
                    </div>
329
                    <div *ngIf="countryPageOverviewData.repositories?.percentage" class="uk-width-2-5">
330
                      <div class="progress">
331
                        <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
332
                      </div>
333
                      <div class="uk-margin-small-top">
334
                        <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> VALIDATED
335
                      </div>
336
                    </div>
337
                  </div>
338

    
339
                  <div class="uk-grid uk-margin-medium-top">
340
                    <div class="uk-width-1-5">
341
                      <img src="../../../assets/img/icons/journals-icon.svg" width="30" height="30">
342
                    </div>
343
                    <div class="uk-width-2-5">
344
                      <div *ngIf="countryPageOverviewData.journals?.oa" class="number big">{{countryPageOverviewData.journals.oa | number}}</div>
345
                      <div *ngIf="!countryPageOverviewData.journals || !countryPageOverviewData.journals.oa" class="number big">--</div>
346
                      <div class="uk-margin-small-top">VALIDATED JOURNALS</div>
347
                    </div>
348
                    <div *ngIf="countryPageOverviewData.journals?.percentage" class="uk-width-2-5">
349
                      <div class="progress">
350
                        <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
351
                      </div>
352
                      <div class="uk-margin-small-top">
353
                        <span class="number">{{countryPageOverviewData.journals.percentage | number : '1.0-1'}}%</span> Validated
354
                      </div>
355
                    </div>
356
                  </div>
357

    
358
                  <div class="uk-grid uk-margin-medium-top uk-margin-bottom">
359
                    <div class="uk-width-1-5">
360
                      <img src="../../../assets/img/icons/policies-icon.svg" width="30" height="30">
361
                    </div>
362
                    <div class="uk-width-2-5">
363
                      <div *ngIf="countryPageOverviewData.policies?.oa" class="number big">{{countryPageOverviewData.policies.oa | number}}</div>
364
                      <div *ngIf="!countryPageOverviewData.policies || !countryPageOverviewData.policies.oa" class="number big">--</div>
365
                      <div class="uk-margin-small-top">OA POLICIES</div>
366
                    </div>
367
                    <div class="uk-width-2-5">
368

    
369
                    </div>
370
                  </div>
371

    
372
                </div>
373
              </div>
374
            </div>
375

    
376

    
377
          </div>
378

    
379
        </div>
380

    
381
        <!--Research Overview-->
382
        <!--LAPTOP & PAD LANDSCAPE-->
383
        <div class="uk-visible@m uk-width-1-5@m uk-width-1-5@l">
384
          <div class="md-card infoBox">
385

    
386
            <div class="md-card-toolbar">
387
              <h3 class="uk-text-center uk-margin-small-top">
388
                Research overview
389
              </h3>
390
            </div>
391

    
392
            <div class="md-card-content">
393
              <div class="numbers">
394

    
395
                <div class="indicator uk-margin-small-top">
396
                  <ng-container *ngIf="countryPageOverviewData?.rndExpenditure">
397
                    <span class="number primary">{{countryPageOverviewData.rndExpenditure.expenditure}}%</span>
398
                    <span>
399
                      <span><i> of gdp for </i></span>
400
                      <span class="number primary">{{countryPageOverviewData.rndExpenditure.year}}</span>
401
                      <div><i> R&D expenditure</i></div>
402
                    </span>
403
                  </ng-container>
404
                  <ng-container *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure">
405
                    <span class="number primary">--</span>
406
                    <span><i>R&D expenditure</i></span>
407
                  </ng-container>
408
                </div>
409

    
410
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
411

    
412
                <div class="indicator">
413
                  <span class="number primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</span>
414
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</span>
415
                  <span><i>funding sources</i></span>
416
                </div>
417

    
418
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
419

    
420
                <div class="indicator">
421
                  <span class="number primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</span>
422
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</span>
423
                  <span><i>funding organizations</i></span>
424
                </div>
425

    
426
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
427

    
428
                <div class="indicator">
429
                  <span class="number primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</span>
430
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</span>
431
                  <span><i>organizations funded by the European commission since 2013</i></span>
432
                </div>
433

    
434
              </div>
435

    
436

    
437
              <div class="uk-text-center uk-margin-xlarge-top">
438

    
439
                <div class="uk-text-center uk-margin-medium-bottom">
440
                <span class="openaire-symbol-wrapper">
441
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
442
                </span>
443
                </div>
444
                <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>
445
              </div>
446

    
447
            </div>
448
          </div>
449
        </div>
450

    
451
        <!--Research Overview-->
452
        <!--MOBILE & PAD PORTRAIT-->
453
        <div class="uk-hidden@m uk-width-1-1@s uk-margin-medium-top">
454
          <div class="uk-container uk-container-expand">
455
            <div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
456
              <div class="md-card-content">
457
                <div class="numbers">
458

    
459
                  <div class="">
460
                    <ng-container *ngIf="countryPageOverviewData?.rndExpenditure">
461
                      <span class="number big primary">{{countryPageOverviewData.rndExpenditure.expenditure}}%</span>
462
                      <span>
463
                      <span class="uk-margin-small-right uk-margin-small-left"> OF DGP FOR </span>
464
                      <span class="number big primary">{{countryPageOverviewData.rndExpenditure.year}}</span>
465
                      <div class="uk-margin-small-top"> R&D EXPENDITURE</div>
466
                    </span>
467
                    </ng-container>
468
                    <ng-container *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure">
469
                      <div class="number big primary">--</div>
470
                      <div class="uk-margin-small-top">R&D EXPENDITURE</div>
471
                    </ng-container>
472
                  </div>
473

    
474
                  <div class="uk-margin-medium-top">
475
                    <div class="number big primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</div>
476
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</div>
477
                    <div class="uk-margin-small-top">FUNDING SOURCES</div>
478
                  </div>
479

    
480
                  <div class="uk-margin-medium-top">
481
                    <div class="number big primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</div>
482
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</div>
483
                    <div class="uk-margin-small-top">FUNDING ORGANIZATIONS</div>
484
                  </div>
485

    
486
                  <div class=" uk-margin-medium-top">
487
                    <div class="number big primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</div>
488
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</div>
489
                    <div class="uk-margin-small-top">ORGANIZATIONS FUNDED BY THE EUROPEAN COMMISSION SINCE 2013</div>
490
                  </div>
491

    
492
                </div>
493
              </div>
494
            </div>
495
          </div>
496
        </div>
497

    
498

    
499
      </div>
500

    
501
    </div>
502
  </section>
503

    
504
  <!--TABS SECTION-->
505
  <section class="section uk-margin-large-top" id="sect-tabs">
506
    <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
507

    
508
      <div class="">
509

    
510
        <!--LAPTOP & PAD LANDSCAPE-->
511
        <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
512
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
513
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
514
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
515
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
516
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
517
          <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
518
        </ul>
519

    
520
        <!--MOBILE & PAD PORTRAIT-->
521
        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
522
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
523
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
524
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
525
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
526
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
527
          <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
528
        </ul>
529

    
530
        <ul id="team_tabbed" class="uk-switcher dataContainer">
531

    
532
          <!--OVERVIEW tab-->
533
          <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
534
            <div class="uk-margin tabContent">
535

    
536
              <div *ngIf="countryPageOAData" class="uk-grid uk-child-width-1-4@m uk-child-width-1-4@l uk-child-width-1-2@s uk-grid-match">
537

    
538
                <div>
539
                  <div class="md-card">
540
                    <div class="md-card-content">
541
                      <svg viewBox="0 0 36 36" class="circular-chart publications">
542
                        <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
543
                        <path *ngIf="countryPageOAData.publicationsAffiliated?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.publicationsAffiliated.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
544
                        <text *ngIf="countryPageOAData.publicationsAffiliated?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.publicationsAffiliated.percentage | number : '1.0-1'}}%</text>
545
                        <text *ngIf="!countryPageOAData.publicationsAffiliated || !countryPageOAData.publicationsAffiliated.percentage" x="18" y="20.35" class="percentage">0%</text>
546
                      </svg>
547
                      <div class="uk-margin-small-top uk-text-center">OA publications</div>
548
                    </div>
549
                  </div>
550
                </div>
551

    
552
                <div>
553
                  <div class="md-card">
554
                    <div class="md-card-content">
555
                      <svg viewBox="0 0 36 36" class="circular-chart datasets">
556
                        <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
557
                        <path *ngIf="countryPageOAData.datasetsAffiliated?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.datasetsAffiliated.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
558
                        <text *ngIf="countryPageOAData.datasetsAffiliated?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.datasetsAffiliated.percentage | number : '1.0-1'}}%</text>
559
                        <text *ngIf="!countryPageOAData.datasetsAffiliated || !countryPageOAData.datasetsAffiliated.percentage" x="18" y="20.35" class="percentage">0%</text>
560
                      </svg>
561
                      <div class="uk-margin-small-top uk-text-center">OA datasets</div>
562
                    </div>
563
                  </div>
564
                </div>
565

    
566
                <div>
567
                  <div class="md-card">
568
                    <div class="md-card-content">
569
                      <svg viewBox="0 0 36 36" class="circular-chart software">
570
                        <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
571
                        <path *ngIf="countryPageOAData.software?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.software.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
572
                        <text *ngIf="countryPageOAData.software?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.software.percentage | number : '1.0-1'}}%</text>
573
                        <text *ngIf="!countryPageOAData.software || !countryPageOAData.software.percentage" x="18" y="20.35" class="percentage">0%</text>
574
                      </svg>
575
                      <div class="uk-margin-small-top uk-text-center">OS software</div>
576
                    </div>
577
                  </div>
578
                </div>
579

    
580
                <div>
581
                  <div class="md-card">
582
                    <div class="md-card-content">
583
                      <svg viewBox="0 0 36 36" class="circular-chart other">
584
                        <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
585
                        <path *ngIf="countryPageOAData.other?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.other.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
586
                        <text *ngIf="countryPageOAData.other?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.other.percentage | number : '1.0-1'}}%</text>
587
                        <text *ngIf="!countryPageOAData.other || !countryPageOAData.other.percentage" x="18" y="20.35" class="percentage">0%</text>
588
                      </svg>
589
                      <div class="uk-margin-small-top uk-text-center">OA other research products</div>
590
                    </div>
591
                  </div>
592
                </div>
593

    
594
              </div>
595

    
596
              <div class="uk-grid uk-grid-row-medium uk-margin-small-top uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
597

    
598
                <div class="uk-grid-margin">
599
                  <div class="md-card chartCard">
600
                    <div class="md-card-content">
601
                      <iframe *ngIf="oaNonOAPublicationsTimelineChartURL" width="100%" height="350" [src]="oaNonOAPublicationsTimelineChartURL"></iframe>
602
                    </div>
603
                  </div>
604
                </div>
605

    
606
                <div class="uk-grid-margin">
607
                  <div class="md-card chartCard">
608
                    <div class="md-card-content">
609
                      <iframe *ngIf="oaNonOADatasetsTimelineChartURL" width="100%" height="350" [src]="oaNonOADatasetsTimelineChartURL"></iframe>
610
                    </div>
611
                  </div>
612
                </div>
613

    
614
                <div class="uk-grid-margin">
615
                  <div class="md-card chartCard">
616
                    <div class="md-card-content">
617
                      <iframe *ngIf="oaNonOASoftwareTimelineChartURL" width="100%" height="350" [src]="oaNonOASoftwareTimelineChartURL"></iframe>
618
                    </div>
619
                  </div>
620
                </div>
621

    
622
                <div class="uk-grid-margin">
623
                  <div class="md-card chartCard">
624
                    <div class="md-card-content">
625
                      <iframe *ngIf="oaNonOAOtherTimelineChartURL" width="100%" height="350" [src]="oaNonOAOtherTimelineChartURL"></iframe>
626
                    </div>
627
                  </div>
628
                </div>
629

    
630

    
631
              </div>
632

    
633
              <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-3@l uk-child-width-1-1@s">
634

    
635
                <div class="uk-grid-margin">
636
                  <div class="md-card chartCard">
637
                    <div class="md-card-content">
638
                      <iframe *ngIf="publicationsByDatasourceChartURL" width="100%" height="550" [src]="publicationsByDatasourceChartURL"></iframe>
639
                    </div>
640
                  </div>
641
                </div>
642

    
643
                <div class="uk-grid-margin">
644
                  <div class="md-card chartCard">
645
                    <div class="md-card-content">
646
                      <iframe *ngIf="publicationsByOrganizationChartURL" width="100%" height="550" [src]="publicationsByOrganizationChartURL"></iframe>
647
                    </div>
648
                  </div>
649
                </div>
650

    
651
                <div class="uk-grid-margin">
652
                  <div class="md-card chartCard">
653
                    <div class="md-card-content">
654
                      <app-treemap-highchart *ngIf="publicationsByFunderData" [chartTitle]="'OA Publications by funder'"
655
                                             [chartData]="publicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
656
                    </div>
657
                  </div>
658
                </div>
659

    
660
                <div class="uk-grid-margin">
661
                  <div class="md-card chartCard">
662
                    <div class="md-card-content">
663
                      <iframe *ngIf="datasetsByDatasourceChartURL" width="100%" height="550" [src]="datasetsByDatasourceChartURL"></iframe>
664
                    </div>
665
                  </div>
666
                </div>
667

    
668
                <div class="uk-grid-margin">
669
                  <div class="md-card chartCard">
670
                    <div class="md-card-content">
671
                      <iframe *ngIf="datasetsByOrganizationChartURL" width="100%" height="550" [src]="datasetsByOrganizationChartURL"></iframe>
672
                    </div>
673
                  </div>
674
                </div>
675

    
676
                <div class="uk-grid-margin">
677
                  <div class="md-card chartCard">
678
                    <div class="md-card-content">
679
                      <app-treemap-highchart *ngIf="datasetsByFunderData" [chartTitle]="'OA Datasets by funder'"
680
                                             [chartData]="datasetsByFunderData" [color]="'#BB9CE6'"></app-treemap-highchart>
681
                    </div>
682
                  </div>
683
                </div>
684

    
685
                <div class="uk-grid-margin">
686
                  <div class="md-card chartCard">
687
                    <div class="md-card-content">
688
                      <iframe *ngIf="softwareByDatasourceChartURL" width="100%" height="550" [src]="softwareByDatasourceChartURL"></iframe>
689
                    </div>
690
                  </div>
691
                </div>
692

    
693
                <div class="uk-grid-margin">
694
                  <div class="md-card chartCard">
695
                    <div class="md-card-content">
696
                      <iframe *ngIf="softwareByOrganizationChartURL" width="100%" height="550" [src]="softwareByOrganizationChartURL"></iframe>
697
                    </div>
698
                  </div>
699
                </div>
700

    
701
                <div class="uk-grid-margin">
702
                  <div class="md-card chartCard">
703
                    <div class="md-card-content">
704
                      <app-treemap-highchart *ngIf="softwareByFunderData" [chartTitle]="'OS Software by funder'"
705
                                             [chartData]="softwareByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
706
                    </div>
707
                  </div>
708
                </div>
709

    
710
                <div class="uk-grid-margin">
711
                  <div class="md-card chartCard">
712
                    <div class="md-card-content">
713
                      <iframe *ngIf="otherByDatasourceChartURL" width="100%" height="550" [src]="otherByDatasourceChartURL"></iframe>
714
                    </div>
715
                  </div>
716
                </div>
717

    
718
                <div class="uk-grid-margin">
719
                  <div class="md-card chartCard">
720
                    <div class="md-card-content">
721
                      <iframe *ngIf="otherByOrganizationChartURL" width="100%" height="550" [src]="otherByOrganizationChartURL"></iframe>
722
                    </div>
723
                  </div>
724
                </div>
725

    
726
                <div class="uk-grid-margin">
727
                  <div class="md-card chartCard">
728
                    <div class="md-card-content">
729
                      <app-treemap-highchart *ngIf="otherByFunderData" [chartTitle]="'OA Other research products by funder'"
730
                                             [chartData]="otherByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
731
                    </div>
732
                  </div>
733
                </div>
734

    
735
              </div>
736

    
737
              <div class="uk-grid uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@s">
738

    
739
                <div class="uk-grid-margin">
740
                  <div class="md-card chartCard">
741
                    <div class="md-card-content">
742
                      <iframe *ngIf="resultsByTypeOANonOAChartURL" width="100%" height="550" [src]="resultsByTypeOANonOAChartURL"></iframe>
743
                    </div>
744
                  </div>
745
                </div>
746

    
747
              </div>
748

    
749
            </div>
750
          </li>
751

    
752
          <!--OPEN SCIENCE tab-->
753
          <li aria-hidden="true" style="animation-duration: 200ms;">
754
            <div class="uk-margin tabContent">
755

    
756
              <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
757
                <li aria-expanded="true" class="uk-active">
758
                  <a class="publicationsSubnav" (click)="changeInnerView('publications')" uk-tooltip="title: Publication; duration: 2000">
759
                    <img src="../../../assets/img/icons/publications-icon.svg" width="15">
760
                  </a>
761
                </li>
762
                <li aria-expanded="false" class="">
763
                  <a class="datasetsSubnav" (click)="changeInnerView('datasets')" uk-tooltip="title: Datasets; duration: 2000">
764
                    <img src="../../../assets/img/icons/datasets-icon.svg" width="15">
765
                  </a>
766
                </li>
767
                <li aria-expanded="false" class="">
768
                  <a class="softwareSubnav" (click)="changeInnerView('software')" uk-tooltip="title: Software; duration: 2000">
769
                    <img src="../../../assets/img/icons/software-icon.svg" width="15">
770
                  </a>
771
                </li>
772
                <li aria-expanded="false" class="">
773
                  <a class="otherSubnav" (click)="changeInnerView('other')" uk-tooltip="title: Other research products; duration: 2000">
774
                    <img src="../../../assets/img/icons/other-icon.svg" width="15">
775
                  </a>
776
                </li>
777
              </ul>
778

    
779
              <hr class="uk-visible@m">
780

    
781
              <ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
782
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
783

    
784
                  <div>
785

    
786
                    <div class="pidIndicator">
787
                      <h3 class="uk-margin-remove">PID</h3>
788
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
789

    
790
                        <div class="uk-grid-margin">
791
                          <div class="md-card chartCard">
792
                            <div class="md-card-content">
793
                              <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
794
                            </div>
795
                          </div>
796
                        </div>
797

    
798
                        <div class="uk-grid-margin">
799
                          <div class="md-card chartCard">
800
                            <div class="md-card-content">
801
                              <iframe *ngIf="publicationsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
802
                            </div>
803
                          </div>
804
                        </div>
805

    
806
                        <div class="uk-grid-margin">
807
                          <div class="md-card chartCard">
808
                            <div class="md-card-content">
809
                              <iframe *ngIf="publicationsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
810
                            </div>
811
                          </div>
812
                        </div>
813

    
814
                        <div class="uk-grid-margin">
815
                          <div class="md-card chartCard">
816
                            <div class="md-card-content">
817
                              <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData" [chartTitle]="'OA Publications with PID by funder'"
818
                                                     [chartData]="publicationsWithPIDByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
819
                            </div>
820
                          </div>
821
                        </div>
822

    
823
                      </div>
824
                    </div>
825

    
826
                    <div class="licenceIndicator uk-margin-large-top">
827
                      <h3 class="uk-margin-remove">Licence</h3>
828
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
829

    
830
                        <div class="uk-grid-margin">
831
                          <div class="md-card chartCard">
832
                            <div class="md-card-content">
833
                              <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
834
                            </div>
835
                          </div>
836
                        </div>
837

    
838
                        <div class="uk-grid-margin">
839
                          <div class="md-card chartCard">
840
                            <div class="md-card-content">
841
                              <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
842
                            </div>
843
                          </div>
844
                        </div>
845

    
846
                        <div class="uk-grid-margin">
847
                          <div class="md-card chartCard">
848
                            <div class="md-card-content">
849
                              <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
850
                            </div>
851
                          </div>
852
                        </div>
853

    
854
                        <div class="uk-grid-margin">
855
                          <div class="md-card chartCard">
856
                            <div class="md-card-content">
857
                              <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData" [chartTitle]="'OA Publications with licence by funder'"
858
                                                     [chartData]="publicationsWithLicenceByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
859
                            </div>
860
                          </div>
861
                        </div>
862

    
863
                      </div>
864
                    </div>
865

    
866
                    <div class="goldIndicator uk-margin-large-top">
867
                      <h3 class="uk-margin-remove">Gold</h3>
868
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
869

    
870
                        <div class="uk-grid-margin">
871
                          <div class="md-card chartCard">
872
                            <div class="md-card-content">
873
                              <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
874
                            </div>
875
                          </div>
876
                        </div>
877

    
878
                        <div class="uk-grid-margin">
879
                          <div class="md-card chartCard">
880
                            <div class="md-card-content">
881
                              <iframe *ngIf="goldPublicationsByDatasourceChartURL" width="100%" height="550" [src]="goldPublicationsByDatasourceChartURL"></iframe>
882
                            </div>
883
                          </div>
884
                        </div>
885

    
886
                        <div class="uk-grid-margin">
887
                          <div class="md-card chartCard">
888
                            <div class="md-card-content">
889
                              <iframe *ngIf="goldPublicationsByOrganizationChartURL" width="100%" height="550" [src]="goldPublicationsByOrganizationChartURL"></iframe>
890
                            </div>
891
                          </div>
892
                        </div>
893

    
894
                        <div class="uk-grid-margin">
895
                          <div class="md-card chartCard">
896
                            <div class="md-card-content">
897
                              <app-treemap-highchart *ngIf="goldPublicationsByFunderData" [chartTitle]="'Gold OA publications by funder'"
898
                                                     [chartData]="goldPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
899
                            </div>
900
                          </div>
901
                        </div>
902

    
903
                      </div>
904
                    </div>
905

    
906
                    <div class="greenIndicator uk-margin-large-top">
907
                      <h3 class="uk-margin-remove">Green</h3>
908
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
909

    
910
                        <div class="uk-grid-margin">
911
                          <div class="md-card chartCard">
912
                            <div class="md-card-content">
913
                              <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
914
                            </div>
915
                          </div>
916
                        </div>
917

    
918
                        <div class="uk-grid-margin">
919
                          <div class="md-card chartCard">
920
                            <div class="md-card-content">
921
                              <iframe *ngIf="greenPublicationsByDatasourceChartURL" width="100%" height="550" [src]="greenPublicationsByDatasourceChartURL"></iframe>
922
                            </div>
923
                          </div>
924
                        </div>
925

    
926
                        <div class="uk-grid-margin">
927
                          <div class="md-card chartCard">
928
                            <div class="md-card-content">
929
                              <iframe *ngIf="greenPublicationsByOrganizationChartURL" width="100%" height="550" [src]="greenPublicationsByOrganizationChartURL"></iframe>
930
                            </div>
931
                          </div>
932
                        </div>
933

    
934
                        <div class="uk-grid-margin">
935
                          <div class="md-card chartCard">
936
                            <div class="md-card-content">
937
                              <app-treemap-highchart *ngIf="greenPublicationsByFunderData" [chartTitle]="'Green OA publications by funder'"
938
                                                     [chartData]="greenPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
939
                            </div>
940
                          </div>
941
                        </div>
942

    
943
                      </div>
944
                    </div>
945

    
946
                    <div class="greenVsGoldIndicator uk-margin-large-top">
947
                      <h3 class="uk-margin-remove">Green vs. Gold</h3>
948
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
949

    
950
                        <div class="uk-grid-margin">
951
                          <div class="md-card chartCard">
952
                            <div class="md-card-content">
953
                              <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
954
                            </div>
955
                          </div>
956
                        </div>
957

    
958
                      </div>
959
                    </div>
960

    
961
                  </div>
962

    
963
                </li>
964
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
965

    
966
                  <div>
967

    
968
                    <div class="pidIndicator">
969
                      <h3 class="uk-margin-remove">PID</h3>
970
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
971

    
972
                        <div class="uk-grid-margin">
973
                          <div class="md-card chartCard">
974
                            <div class="md-card-content">
975
                              <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
976
                            </div>
977
                          </div>
978
                        </div>
979

    
980
                        <div class="uk-grid-margin">
981
                          <div class="md-card chartCard">
982
                            <div class="md-card-content">
983
                              <iframe *ngIf="datasetsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
984
                            </div>
985
                          </div>
986
                        </div>
987

    
988
                        <div class="uk-grid-margin">
989
                          <div class="md-card chartCard">
990
                            <div class="md-card-content">
991
                              <iframe *ngIf="datasetsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
992
                            </div>
993
                          </div>
994
                        </div>
995

    
996
                        <div class="uk-grid-margin">
997
                          <div class="md-card chartCard">
998
                            <div class="md-card-content">
999
                              <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData" [chartTitle]="'OA Datasets with PID by funder'"
1000
                                                     [chartData]="datasetsWithPIDByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
1001
                            </div>
1002
                          </div>
1003
                        </div>
1004

    
1005
                      </div>
1006
                    </div>
1007

    
1008
                    <div class="licenceIndicator uk-margin-large-top">
1009
                      <h3 class="uk-margin-remove">Licence</h3>
1010
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1011

    
1012
                        <div class="uk-grid-margin">
1013
                          <div class="md-card chartCard">
1014
                            <div class="md-card-content">
1015
                              <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>
1016
                            </div>
1017
                          </div>
1018
                        </div>
1019

    
1020
                        <div class="uk-grid-margin">
1021
                          <div class="md-card chartCard">
1022
                            <div class="md-card-content">
1023
                              <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
1024
                            </div>
1025
                          </div>
1026
                        </div>
1027

    
1028
                        <div class="uk-grid-margin">
1029
                          <div class="md-card chartCard">
1030
                            <div class="md-card-content">
1031
                              <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
1032
                            </div>
1033
                          </div>
1034
                        </div>
1035

    
1036
                        <div class="uk-grid-margin">
1037
                          <div class="md-card chartCard">
1038
                            <div class="md-card-content">
1039
                              <app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData" [chartTitle]="'OA Datasets with licence by funder'"
1040
                                                     [chartData]="datasetsWithLicenceByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
1041
                            </div>
1042
                          </div>
1043
                        </div>
1044

    
1045
                      </div>
1046
                    </div>
1047

    
1048
                  </div>
1049

    
1050
                </li>
1051
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1052

    
1053
                  <div>
1054

    
1055
                    <div class="pidIndicator">
1056
                      <h3 class="uk-margin-remove">PID</h3>
1057
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1058

    
1059
                        <div class="uk-grid-margin">
1060
                          <div class="md-card chartCard">
1061
                            <div class="md-card-content">
1062
                              <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
1063
                            </div>
1064
                          </div>
1065
                        </div>
1066

    
1067
                        <div class="uk-grid-margin">
1068
                          <div class="md-card chartCard">
1069
                            <div class="md-card-content">
1070
                              <iframe *ngIf="softwareWithPIDByDatasourceChartURL" width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
1071
                            </div>
1072
                          </div>
1073
                        </div>
1074

    
1075
                        <div class="uk-grid-margin">
1076
                          <div class="md-card chartCard">
1077
                            <div class="md-card-content">
1078
                              <iframe *ngIf="softwareWithPIDByOrganizationChartURL" width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
1079
                            </div>
1080
                          </div>
1081
                        </div>
1082

    
1083
                        <div class="uk-grid-margin">
1084
                          <div class="md-card chartCard">
1085
                            <div class="md-card-content">
1086
                              <app-treemap-highchart *ngIf="softwareWithPIDByFunderData" [chartTitle]="'OS Software with PID by funder'"
1087
                                                     [chartData]="softwareWithPIDByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
1088
                            </div>
1089
                          </div>
1090
                        </div>
1091

    
1092
                      </div>
1093
                    </div>
1094

    
1095
                    <div class="licenceIndicator uk-margin-large-top">
1096
                      <h3 class="uk-margin-remove">Licence</h3>
1097
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1098

    
1099
                        <div class="uk-grid-margin">
1100
                          <div class="md-card chartCard">
1101
                            <div class="md-card-content">
1102
                              <iframe *ngIf="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></iframe>
1103
                            </div>
1104
                          </div>
1105
                        </div>
1106

    
1107
                        <div class="uk-grid-margin">
1108
                          <div class="md-card chartCard">
1109
                            <div class="md-card-content">
1110
                              <iframe *ngIf="softwareWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
1111
                            </div>
1112
                          </div>
1113
                        </div>
1114

    
1115
                        <div class="uk-grid-margin">
1116
                          <div class="md-card chartCard">
1117
                            <div class="md-card-content">
1118
                              <iframe *ngIf="softwareWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
1119
                            </div>
1120
                          </div>
1121
                        </div>
1122

    
1123
                        <div class="uk-grid-margin">
1124
                          <div class="md-card chartCard">
1125
                            <div class="md-card-content">
1126
                              <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData" [chartTitle]="'OS Software with licence by funder'"
1127
                                                     [chartData]="softwareWithLicenceByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
1128
                            </div>
1129
                          </div>
1130
                        </div>
1131

    
1132
                      </div>
1133
                    </div>
1134

    
1135
                  </div>
1136

    
1137
                </li>
1138
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1139

    
1140
                  <div>
1141

    
1142
                    <div class="pidIndicator">
1143
                      <h3 class="uk-margin-remove">PID</h3>
1144
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1145

    
1146
                        <div class="uk-grid-margin">
1147
                          <div class="md-card chartCard">
1148
                            <div class="md-card-content">
1149
                              <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
1150
                            </div>
1151
                          </div>
1152
                        </div>
1153

    
1154
                        <div class="uk-grid-margin">
1155
                          <div class="md-card chartCard">
1156
                            <div class="md-card-content">
1157
                              <iframe *ngIf="otherWithPIDByDatasourceChartURL" width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
1158
                            </div>
1159
                          </div>
1160
                        </div>
1161

    
1162
                        <div class="uk-grid-margin">
1163
                          <div class="md-card chartCard">
1164
                            <div class="md-card-content">
1165
                              <iframe *ngIf="otherWithPIDByOrganizationChartURL" width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
1166
                            </div>
1167
                          </div>
1168
                        </div>
1169

    
1170
                        <div class="uk-grid-margin">
1171
                          <div class="md-card chartCard">
1172
                            <div class="md-card-content">
1173
                              <app-treemap-highchart *ngIf="otherWithPIDByFunderData" [chartTitle]="'OA Other research products with PID by funder'"
1174
                                                     [chartData]="otherWithPIDByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1175
                            </div>
1176
                          </div>
1177
                        </div>
1178

    
1179
                      </div>
1180
                    </div>
1181

    
1182
                    <div class="licenceIndicator uk-margin-large-top">
1183
                      <h3 class="uk-margin-remove">Licence</h3>
1184
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1185

    
1186
                        <div class="uk-grid-margin">
1187
                          <div class="md-card chartCard">
1188
                            <div class="md-card-content">
1189
                              <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>
1190
                            </div>
1191
                          </div>
1192
                        </div>
1193

    
1194
                        <div class="uk-grid-margin">
1195
                          <div class="md-card chartCard">
1196
                            <div class="md-card-content">
1197
                              <iframe *ngIf="otherWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
1198
                            </div>
1199
                          </div>
1200
                        </div>
1201

    
1202
                        <div class="uk-grid-margin">
1203
                          <div class="md-card chartCard">
1204
                            <div class="md-card-content">
1205
                              <iframe *ngIf="otherWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
1206
                            </div>
1207
                          </div>
1208
                        </div>
1209

    
1210
                        <div class="uk-grid-margin">
1211
                          <div class="md-card chartCard">
1212
                            <div class="md-card-content">
1213
                              <app-treemap-highchart *ngIf="otherWithLicenceByFunderData" [chartTitle]="'OA Other research products with licence by funder'"
1214
                                                     [chartData]="otherWithLicenceByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1215
                            </div>
1216
                          </div>
1217
                        </div>
1218

    
1219
                      </div>
1220
                    </div>
1221

    
1222
                  </div>
1223

    
1224
                </li>
1225
              </ul>
1226

    
1227
            </div>
1228
          </li>
1229

    
1230
          <li aria-hidden="true">
1231
            <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
1232
            </div>
1233
          </li>
1234

    
1235
          <li aria-hidden="true">
1236
            <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
1237
            </div>
1238
          </li>
1239

    
1240
          <li aria-hidden="true">
1241
            <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
1242
            </div>
1243
          </li>
1244
        </ul>
1245
      </div>
1246

    
1247
    </div>
1248
  </section>
1249

    
1250

    
1251
  <!--link to OpenAIRE page-->
1252
  <!--MOBILE & PAD PORTRAIT-->
1253
  <div class="uk-hidden@m">
1254
    <div class="uk-text-center uk-margin-xlarge-top uk-margin-large-bottom">
1255

    
1256
      <div class="uk-text-center uk-margin-medium-bottom">
1257
                <span class="openaire-symbol-wrapper">
1258
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
1259
                </span>
1260
      </div>
1261
      <a class="uk-link primary" href="{{linkToCountryInOpenAIRE}}" target="_blank">Country page in <strong>OpenAIRE</strong><i class="fas fa-long-arrow-alt-right uk-margin-left"></i></a>
1262
    </div>
1263
  </div>
1264

    
1265
</div>
1266

    
(3-3/4)