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
                <div class="actionButtonsCountryPage uk-text-right">
31
                  <a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>
32
                  <!--<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>-->
33
                  <a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>
34
                </div>
35
              </div>
36
            </div>
37

    
38
            <!--MOBILE & PAD PORTRAIT-->
39
            <div class="uk-hidden@m uk-text-center">
40
              <div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
41
                <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">
42
                <div class="uk-margin-top">
43
                  <h1 class="uk-margin-small-bottom">{{countryPageOverviewData.name}}</h1>
44
                  <span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span>
45
                </div>
46
              </div>
47
            </div>
48

    
49

    
50

    
51
          </div>
52

    
53

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

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

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

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

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

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

    
109
                      </div>
110
                    </div>
111
                  </div>
112

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

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

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

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

    
162
                  <div class="">
163

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

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

    
212
                  </div>
213

    
214

    
215
                  <div class="">
216

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

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

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

    
246

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

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

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

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

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

    
368
                    </div>
369
                  </div>
370

    
371
                </div>
372
              </div>
373
            </div>
374

    
375

    
376
          </div>
377

    
378
        </div>
379

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

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

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

    
394
                <div class="indicator uk-margin-small-top">
395
                  <span class="number primary">--</span>
396
                  <span><i>R&D expenditure</i></span>
397
                </div>
398

    
399
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
400

    
401
                <div class="indicator">
402
                  <span class="number primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</span>
403
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</span>
404
                  <span><i>funding sources</i></span>
405
                </div>
406

    
407
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
408

    
409
                <div class="indicator">
410
                  <span class="number primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</span>
411
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</span>
412
                  <span><i>funding organizations</i></span>
413
                </div>
414

    
415
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
416

    
417
                <div class="indicator">
418
                  <span class="number primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</span>
419
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</span>
420
                  <span><i>organizations funded by the European commission since 2013</i></span>
421
                </div>
422

    
423
              </div>
424

    
425

    
426
              <div class="uk-text-center uk-margin-xlarge-top">
427

    
428
                <div class="uk-text-center uk-margin-medium-bottom">
429
                <span class="openaire-symbol-wrapper">
430
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
431
                </span>
432
                </div>
433
                <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>
434
              </div>
435

    
436
            </div>
437
          </div>
438
        </div>
439

    
440
        <!--Research Overview-->
441
        <!--MOBILE & PAD PORTRAIT-->
442
        <div class="uk-hidden@m uk-width-1-1@s uk-margin-medium-top">
443
          <div class="uk-container uk-container-expand">
444
            <div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
445
              <div class="md-card-content">
446
                <div class="numbers">
447

    
448
                  <div class="">
449
                    <div class="number big primary">--</div>
450
                    <div class="uk-margin-small-top">R&D EXPENDITURE</div>
451
                  </div>
452

    
453
                  <div class="uk-margin-medium-top">
454
                    <div class="number big primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</div>
455
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</div>
456
                    <div class="uk-margin-small-top">FUNDING SOURCES</div>
457
                  </div>
458

    
459
                  <div class="uk-margin-medium-top">
460
                    <div class="number big primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</div>
461
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</div>
462
                    <div class="uk-margin-small-top">FUNDING ORGANIZATIONS</div>
463
                  </div>
464

    
465
                  <div class=" uk-margin-medium-top">
466
                    <div class="number big primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</div>
467
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</div>
468
                    <div class="uk-margin-small-top">ORGANIZATIONS FUNDED BY THE EUROPEAN COMMISSION SINCE 2013</div>
469
                  </div>
470

    
471
                </div>
472
              </div>
473
            </div>
474
          </div>
475
        </div>
476

    
477

    
478
      </div>
479

    
480
    </div>
481
  </section>
482

    
483
  <!--TABS SECTION-->
484
  <section class="section uk-margin-large-top" id="sect-tabs">
485
    <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}">
486

    
487
      <div class="">
488

    
489
        <!--LAPTOP & PAD LANDSCAPE-->
490
        <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
491
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
492
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
493
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
494
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
495
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
496
          <!--<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>-->
497
        </ul>
498

    
499
        <!--MOBILE & PAD PORTRAIT-->
500
        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
501
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
502
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
503
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
504
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
505
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
506
          <!--<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>-->
507
        </ul>
508

    
509
        <ul id="team_tabbed" class="uk-switcher dataContainer">
510

    
511
          <!--OVERVIEW tab-->
512
          <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
513
            <div class="uk-margin tabContent">
514

    
515
              <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">
516

    
517
                <div>
518
                  <div class="md-card">
519
                    <div class="md-card-content">
520
                      <svg viewBox="0 0 36 36" class="circular-chart publications">
521
                        <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>
522
                        <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>
523
                        <text *ngIf="countryPageOAData.publicationsAffiliated?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.publicationsAffiliated.percentage | number : '1.0-1'}}%</text>
524
                        <text *ngIf="!countryPageOAData.publicationsAffiliated || !countryPageOAData.publicationsAffiliated.percentage" x="18" y="20.35" class="percentage">0%</text>
525
                      </svg>
526
                      <div class="uk-margin-small-top uk-text-center">OA publications</div>
527
                    </div>
528
                  </div>
529
                </div>
530

    
531
                <div>
532
                  <div class="md-card">
533
                    <div class="md-card-content">
534
                      <svg viewBox="0 0 36 36" class="circular-chart datasets">
535
                        <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>
536
                        <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>
537
                        <text *ngIf="countryPageOAData.datasetsAffiliated?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.datasetsAffiliated.percentage | number : '1.0-1'}}%</text>
538
                        <text *ngIf="!countryPageOAData.datasetsAffiliated || !countryPageOAData.datasetsAffiliated.percentage" x="18" y="20.35" class="percentage">0%</text>
539
                      </svg>
540
                      <div class="uk-margin-small-top uk-text-center">OA datasets</div>
541
                    </div>
542
                  </div>
543
                </div>
544

    
545
                <div>
546
                  <div class="md-card">
547
                    <div class="md-card-content">
548
                      <svg viewBox="0 0 36 36" class="circular-chart software">
549
                        <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>
550
                        <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>
551
                        <text *ngIf="countryPageOAData.software?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.software.percentage | number : '1.0-1'}}%</text>
552
                        <text *ngIf="!countryPageOAData.software || !countryPageOAData.software.percentage" x="18" y="20.35" class="percentage">0%</text>
553
                      </svg>
554
                      <div class="uk-margin-small-top uk-text-center">OS software</div>
555
                    </div>
556
                  </div>
557
                </div>
558

    
559
                <div>
560
                  <div class="md-card">
561
                    <div class="md-card-content">
562
                      <svg viewBox="0 0 36 36" class="circular-chart other">
563
                        <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>
564
                        <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>
565
                        <text *ngIf="countryPageOAData.other?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.other.percentage | number : '1.0-1'}}%</text>
566
                        <text *ngIf="!countryPageOAData.other || !countryPageOAData.other.percentage" x="18" y="20.35" class="percentage">0%</text>
567
                      </svg>
568
                      <div class="uk-margin-small-top uk-text-center">OA other research products</div>
569
                    </div>
570
                  </div>
571
                </div>
572

    
573
              </div>
574

    
575
              <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">
576

    
577
                <div class="uk-grid-margin">
578
                  <div class="md-card chartCard">
579
                    <div class="md-card-content">
580
                      <iframe *ngIf="oaNonOAPublicationsTimelineChartURL" width="100%" height="350" [src]="oaNonOAPublicationsTimelineChartURL"></iframe>
581
                    </div>
582
                  </div>
583
                </div>
584

    
585
                <div class="uk-grid-margin">
586
                  <div class="md-card chartCard">
587
                    <div class="md-card-content">
588
                      <iframe *ngIf="oaNonOADatasetsTimelineChartURL" width="100%" height="350" [src]="oaNonOADatasetsTimelineChartURL"></iframe>
589
                    </div>
590
                  </div>
591
                </div>
592

    
593
                <div class="uk-grid-margin">
594
                  <div class="md-card chartCard">
595
                    <div class="md-card-content">
596
                      <iframe *ngIf="oaNonOASoftwareTimelineChartURL" width="100%" height="350" [src]="oaNonOASoftwareTimelineChartURL"></iframe>
597
                    </div>
598
                  </div>
599
                </div>
600

    
601
                <div class="uk-grid-margin">
602
                  <div class="md-card chartCard">
603
                    <div class="md-card-content">
604
                      <iframe *ngIf="oaNonOAOtherTimelineChartURL" width="100%" height="350" [src]="oaNonOAOtherTimelineChartURL"></iframe>
605
                    </div>
606
                  </div>
607
                </div>
608

    
609

    
610
              </div>
611

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

    
614
                <div class="uk-grid-margin">
615
                  <div class="md-card chartCard">
616
                    <div class="md-card-content">
617
                      <iframe *ngIf="publicationsByDatasourceChartURL" width="100%" height="550" [src]="publicationsByDatasourceChartURL"></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="publicationsByOrganizationChartURL" width="100%" height="550" [src]="publicationsByOrganizationChartURL"></iframe>
626
                    </div>
627
                  </div>
628
                </div>
629

    
630
                <div class="uk-grid-margin">
631
                  <div class="md-card chartCard">
632
                    <div class="md-card-content">
633
                      <app-treemap-highchart *ngIf="publicationsByFunderData" [chartTitle]="'OA Publications by funder'"
634
                                             [chartData]="publicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
635
                    </div>
636
                  </div>
637
                </div>
638

    
639
                <div class="uk-grid-margin">
640
                  <div class="md-card chartCard">
641
                    <div class="md-card-content">
642
                      <iframe *ngIf="datasetsByDatasourceChartURL" width="100%" height="550" [src]="datasetsByDatasourceChartURL"></iframe>
643
                    </div>
644
                  </div>
645
                </div>
646

    
647
                <div class="uk-grid-margin">
648
                  <div class="md-card chartCard">
649
                    <div class="md-card-content">
650
                      <iframe *ngIf="datasetsByOrganizationChartURL" width="100%" height="550" [src]="datasetsByOrganizationChartURL"></iframe>
651
                    </div>
652
                  </div>
653
                </div>
654

    
655
                <div class="uk-grid-margin">
656
                  <div class="md-card chartCard">
657
                    <div class="md-card-content">
658
                      <app-treemap-highchart *ngIf="datasetsByFunderData" [chartTitle]="'OA Datasets by funder'"
659
                                             [chartData]="datasetsByFunderData" [color]="'#BB9CE6'"></app-treemap-highchart>
660
                    </div>
661
                  </div>
662
                </div>
663

    
664
                <div class="uk-grid-margin">
665
                  <div class="md-card chartCard">
666
                    <div class="md-card-content">
667
                      <iframe *ngIf="softwareByDatasourceChartURL" width="100%" height="550" [src]="softwareByDatasourceChartURL"></iframe>
668
                    </div>
669
                  </div>
670
                </div>
671

    
672
                <div class="uk-grid-margin">
673
                  <div class="md-card chartCard">
674
                    <div class="md-card-content">
675
                      <iframe *ngIf="softwareByOrganizationChartURL" width="100%" height="550" [src]="softwareByOrganizationChartURL"></iframe>
676
                    </div>
677
                  </div>
678
                </div>
679

    
680
                <div class="uk-grid-margin">
681
                  <div class="md-card chartCard">
682
                    <div class="md-card-content">
683
                      <app-treemap-highchart *ngIf="softwareByFunderData" [chartTitle]="'OS Software by funder'"
684
                                             [chartData]="softwareByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
685
                    </div>
686
                  </div>
687
                </div>
688

    
689
                <div class="uk-grid-margin">
690
                  <div class="md-card chartCard">
691
                    <div class="md-card-content">
692
                      <iframe *ngIf="otherByDatasourceChartURL" width="100%" height="550" [src]="otherByDatasourceChartURL"></iframe>
693
                    </div>
694
                  </div>
695
                </div>
696

    
697
                <div class="uk-grid-margin">
698
                  <div class="md-card chartCard">
699
                    <div class="md-card-content">
700
                      <iframe *ngIf="otherByOrganizationChartURL" width="100%" height="550" [src]="otherByOrganizationChartURL"></iframe>
701
                    </div>
702
                  </div>
703
                </div>
704

    
705
                <div class="uk-grid-margin">
706
                  <div class="md-card chartCard">
707
                    <div class="md-card-content">
708
                      <app-treemap-highchart *ngIf="otherByFunderData" [chartTitle]="'OA Other research products by funder'"
709
                                             [chartData]="otherByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
710
                    </div>
711
                  </div>
712
                </div>
713

    
714
              </div>
715

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

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

    
726
              </div>
727

    
728
            </div>
729
          </li>
730

    
731
          <!--OPEN SCIENCE tab-->
732
          <li aria-hidden="true" style="animation-duration: 200ms;">
733
            <div class="uk-margin tabContent">
734

    
735
              <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
736
                <li aria-expanded="true" class="uk-active">
737
                  <a class="publicationsSubnav" (click)="changeInnerView('publications')" uk-tooltip="title: Publication; duration: 2000">
738
                    <img src="../../../assets/img/icons/publications-icon.svg" width="15">
739
                  </a>
740
                </li>
741
                <li aria-expanded="false" class="">
742
                  <a class="datasetsSubnav" (click)="changeInnerView('datasets')" uk-tooltip="title: Datasets; duration: 2000">
743
                    <img src="../../../assets/img/icons/datasets-icon.svg" width="15">
744
                  </a>
745
                </li>
746
                <li aria-expanded="false" class="">
747
                  <a class="softwareSubnav" (click)="changeInnerView('software')" uk-tooltip="title: Software; duration: 2000">
748
                    <img src="../../../assets/img/icons/software-icon.svg" width="15">
749
                  </a>
750
                </li>
751
                <li aria-expanded="false" class="">
752
                  <a class="otherSubnav" (click)="changeInnerView('other')" uk-tooltip="title: Other research products; duration: 2000">
753
                    <img src="../../../assets/img/icons/other-icon.svg" width="15">
754
                  </a>
755
                </li>
756
              </ul>
757

    
758
              <hr class="uk-visible@m">
759

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

    
763
                  <div>
764

    
765
                    <div class="pidIndicator">
766
                      <h3 class="uk-margin-remove">PID</h3>
767
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
768

    
769
                        <div class="uk-grid-margin">
770
                          <div class="md-card chartCard">
771
                            <div class="md-card-content">
772
                              <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
773
                            </div>
774
                          </div>
775
                        </div>
776

    
777
                        <div class="uk-grid-margin">
778
                          <div class="md-card chartCard">
779
                            <div class="md-card-content">
780
                              <iframe *ngIf="publicationsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
781
                            </div>
782
                          </div>
783
                        </div>
784

    
785
                        <div class="uk-grid-margin">
786
                          <div class="md-card chartCard">
787
                            <div class="md-card-content">
788
                              <iframe *ngIf="publicationsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
789
                            </div>
790
                          </div>
791
                        </div>
792

    
793
                        <div class="uk-grid-margin">
794
                          <div class="md-card chartCard">
795
                            <div class="md-card-content">
796
                              <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData" [chartTitle]="'OA Publications with PID by funder'"
797
                                                     [chartData]="publicationsWithPIDByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
798
                            </div>
799
                          </div>
800
                        </div>
801

    
802
                      </div>
803
                    </div>
804

    
805
                    <div class="licenceIndicator uk-margin-large-top">
806
                      <h3 class="uk-margin-remove">Licence</h3>
807
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
808

    
809
                        <div class="uk-grid-margin">
810
                          <div class="md-card chartCard">
811
                            <div class="md-card-content">
812
                              <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
813
                            </div>
814
                          </div>
815
                        </div>
816

    
817
                        <div class="uk-grid-margin">
818
                          <div class="md-card chartCard">
819
                            <div class="md-card-content">
820
                              <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
821
                            </div>
822
                          </div>
823
                        </div>
824

    
825
                        <div class="uk-grid-margin">
826
                          <div class="md-card chartCard">
827
                            <div class="md-card-content">
828
                              <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
829
                            </div>
830
                          </div>
831
                        </div>
832

    
833
                        <div class="uk-grid-margin">
834
                          <div class="md-card chartCard">
835
                            <div class="md-card-content">
836
                              <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData" [chartTitle]="'OA Publications with licence by funder'"
837
                                                     [chartData]="publicationsWithLicenceByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
838
                            </div>
839
                          </div>
840
                        </div>
841

    
842
                      </div>
843
                    </div>
844

    
845
                    <div class="goldIndicator uk-margin-large-top">
846
                      <h3 class="uk-margin-remove">Gold</h3>
847
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
848

    
849
                        <div class="uk-grid-margin">
850
                          <div class="md-card chartCard">
851
                            <div class="md-card-content">
852
                              <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
853
                            </div>
854
                          </div>
855
                        </div>
856

    
857
                        <div class="uk-grid-margin">
858
                          <div class="md-card chartCard">
859
                            <div class="md-card-content">
860
                              <iframe *ngIf="goldPublicationsByDatasourceChartURL" width="100%" height="550" [src]="goldPublicationsByDatasourceChartURL"></iframe>
861
                            </div>
862
                          </div>
863
                        </div>
864

    
865
                        <div class="uk-grid-margin">
866
                          <div class="md-card chartCard">
867
                            <div class="md-card-content">
868
                              <iframe *ngIf="goldPublicationsByOrganizationChartURL" width="100%" height="550" [src]="goldPublicationsByOrganizationChartURL"></iframe>
869
                            </div>
870
                          </div>
871
                        </div>
872

    
873
                        <div class="uk-grid-margin">
874
                          <div class="md-card chartCard">
875
                            <div class="md-card-content">
876
                              <app-treemap-highchart *ngIf="goldPublicationsByFunderData" [chartTitle]="'Gold OA publications by funder'"
877
                                                     [chartData]="goldPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
878
                            </div>
879
                          </div>
880
                        </div>
881

    
882
                      </div>
883
                    </div>
884

    
885
                    <div class="greenIndicator uk-margin-large-top">
886
                      <h3 class="uk-margin-remove">Green</h3>
887
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
888

    
889
                        <div class="uk-grid-margin">
890
                          <div class="md-card chartCard">
891
                            <div class="md-card-content">
892
                              <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
893
                            </div>
894
                          </div>
895
                        </div>
896

    
897
                        <div class="uk-grid-margin">
898
                          <div class="md-card chartCard">
899
                            <div class="md-card-content">
900
                              <iframe *ngIf="greenPublicationsByDatasourceChartURL" width="100%" height="550" [src]="greenPublicationsByDatasourceChartURL"></iframe>
901
                            </div>
902
                          </div>
903
                        </div>
904

    
905
                        <div class="uk-grid-margin">
906
                          <div class="md-card chartCard">
907
                            <div class="md-card-content">
908
                              <iframe *ngIf="greenPublicationsByOrganizationChartURL" width="100%" height="550" [src]="greenPublicationsByOrganizationChartURL"></iframe>
909
                            </div>
910
                          </div>
911
                        </div>
912

    
913
                        <div class="uk-grid-margin">
914
                          <div class="md-card chartCard">
915
                            <div class="md-card-content">
916
                              <app-treemap-highchart *ngIf="greenPublicationsByFunderData" [chartTitle]="'Green OA publications by funder'"
917
                                                     [chartData]="greenPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
918
                            </div>
919
                          </div>
920
                        </div>
921

    
922
                      </div>
923
                    </div>
924

    
925
                    <div class="greenVsGoldIndicator uk-margin-large-top">
926
                      <h3 class="uk-margin-remove">Green vs. Gold</h3>
927
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
928

    
929
                        <div class="uk-grid-margin">
930
                          <div class="md-card chartCard">
931
                            <div class="md-card-content">
932
                              <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
933
                            </div>
934
                          </div>
935
                        </div>
936

    
937
                      </div>
938
                    </div>
939

    
940
                  </div>
941

    
942
                </li>
943
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
944

    
945
                  <div>
946

    
947
                    <div class="pidIndicator">
948
                      <h3 class="uk-margin-remove">PID</h3>
949
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
950

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

    
959
                        <div class="uk-grid-margin">
960
                          <div class="md-card chartCard">
961
                            <div class="md-card-content">
962
                              <iframe *ngIf="datasetsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
963
                            </div>
964
                          </div>
965
                        </div>
966

    
967
                        <div class="uk-grid-margin">
968
                          <div class="md-card chartCard">
969
                            <div class="md-card-content">
970
                              <iframe *ngIf="datasetsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
971
                            </div>
972
                          </div>
973
                        </div>
974

    
975
                        <div class="uk-grid-margin">
976
                          <div class="md-card chartCard">
977
                            <div class="md-card-content">
978
                              <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData" [chartTitle]="'OA Datasets with PID by funder'"
979
                                                     [chartData]="datasetsWithPIDByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
980
                            </div>
981
                          </div>
982
                        </div>
983

    
984
                      </div>
985
                    </div>
986

    
987
                    <div class="licenceIndicator uk-margin-large-top">
988
                      <h3 class="uk-margin-remove">Licence</h3>
989
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
990

    
991
                        <div class="uk-grid-margin">
992
                          <div class="md-card chartCard">
993
                            <div class="md-card-content">
994
                              <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>
995
                            </div>
996
                          </div>
997
                        </div>
998

    
999
                        <div class="uk-grid-margin">
1000
                          <div class="md-card chartCard">
1001
                            <div class="md-card-content">
1002
                              <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
1003
                            </div>
1004
                          </div>
1005
                        </div>
1006

    
1007
                        <div class="uk-grid-margin">
1008
                          <div class="md-card chartCard">
1009
                            <div class="md-card-content">
1010
                              <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
1011
                            </div>
1012
                          </div>
1013
                        </div>
1014

    
1015
                        <div class="uk-grid-margin">
1016
                          <div class="md-card chartCard">
1017
                            <div class="md-card-content">
1018
                              <app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData" [chartTitle]="'OA Datasets with licence by funder'"
1019
                                                     [chartData]="datasetsWithLicenceByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
1020
                            </div>
1021
                          </div>
1022
                        </div>
1023

    
1024
                      </div>
1025
                    </div>
1026

    
1027
                  </div>
1028

    
1029
                </li>
1030
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1031

    
1032
                  <div>
1033

    
1034
                    <div class="pidIndicator">
1035
                      <h3 class="uk-margin-remove">PID</h3>
1036
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1037

    
1038
                        <div class="uk-grid-margin">
1039
                          <div class="md-card chartCard">
1040
                            <div class="md-card-content">
1041
                              <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
1042
                            </div>
1043
                          </div>
1044
                        </div>
1045

    
1046
                        <div class="uk-grid-margin">
1047
                          <div class="md-card chartCard">
1048
                            <div class="md-card-content">
1049
                              <iframe *ngIf="softwareWithPIDByDatasourceChartURL" width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
1050
                            </div>
1051
                          </div>
1052
                        </div>
1053

    
1054
                        <div class="uk-grid-margin">
1055
                          <div class="md-card chartCard">
1056
                            <div class="md-card-content">
1057
                              <iframe *ngIf="softwareWithPIDByOrganizationChartURL" width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
1058
                            </div>
1059
                          </div>
1060
                        </div>
1061

    
1062
                        <div class="uk-grid-margin">
1063
                          <div class="md-card chartCard">
1064
                            <div class="md-card-content">
1065
                              <app-treemap-highchart *ngIf="softwareWithPIDByFunderData" [chartTitle]="'OS Software with PID by funder'"
1066
                                                     [chartData]="softwareWithPIDByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
1067
                            </div>
1068
                          </div>
1069
                        </div>
1070

    
1071
                      </div>
1072
                    </div>
1073

    
1074
                    <div class="licenceIndicator uk-margin-large-top">
1075
                      <h3 class="uk-margin-remove">Licence</h3>
1076
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1077

    
1078
                        <div class="uk-grid-margin">
1079
                          <div class="md-card chartCard">
1080
                            <div class="md-card-content">
1081
                              <iframe *ngIf="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></iframe>
1082
                            </div>
1083
                          </div>
1084
                        </div>
1085

    
1086
                        <div class="uk-grid-margin">
1087
                          <div class="md-card chartCard">
1088
                            <div class="md-card-content">
1089
                              <iframe *ngIf="softwareWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
1090
                            </div>
1091
                          </div>
1092
                        </div>
1093

    
1094
                        <div class="uk-grid-margin">
1095
                          <div class="md-card chartCard">
1096
                            <div class="md-card-content">
1097
                              <iframe *ngIf="softwareWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
1098
                            </div>
1099
                          </div>
1100
                        </div>
1101

    
1102
                        <div class="uk-grid-margin">
1103
                          <div class="md-card chartCard">
1104
                            <div class="md-card-content">
1105
                              <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData" [chartTitle]="'OS Software with licence by funder'"
1106
                                                     [chartData]="softwareWithLicenceByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
1107
                            </div>
1108
                          </div>
1109
                        </div>
1110

    
1111
                      </div>
1112
                    </div>
1113

    
1114
                  </div>
1115

    
1116
                </li>
1117
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1118

    
1119
                  <div>
1120

    
1121
                    <div class="pidIndicator">
1122
                      <h3 class="uk-margin-remove">PID</h3>
1123
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1124

    
1125
                        <div class="uk-grid-margin">
1126
                          <div class="md-card chartCard">
1127
                            <div class="md-card-content">
1128
                              <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
1129
                            </div>
1130
                          </div>
1131
                        </div>
1132

    
1133
                        <div class="uk-grid-margin">
1134
                          <div class="md-card chartCard">
1135
                            <div class="md-card-content">
1136
                              <iframe *ngIf="otherWithPIDByDatasourceChartURL" width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
1137
                            </div>
1138
                          </div>
1139
                        </div>
1140

    
1141
                        <div class="uk-grid-margin">
1142
                          <div class="md-card chartCard">
1143
                            <div class="md-card-content">
1144
                              <iframe *ngIf="otherWithPIDByOrganizationChartURL" width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
1145
                            </div>
1146
                          </div>
1147
                        </div>
1148

    
1149
                        <div class="uk-grid-margin">
1150
                          <div class="md-card chartCard">
1151
                            <div class="md-card-content">
1152
                              <app-treemap-highchart *ngIf="otherWithPIDByFunderData" [chartTitle]="'OA Other research products with PID by funder'"
1153
                                                     [chartData]="otherWithPIDByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1154
                            </div>
1155
                          </div>
1156
                        </div>
1157

    
1158
                      </div>
1159
                    </div>
1160

    
1161
                    <div class="licenceIndicator uk-margin-large-top">
1162
                      <h3 class="uk-margin-remove">Licence</h3>
1163
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1164

    
1165
                        <div class="uk-grid-margin">
1166
                          <div class="md-card chartCard">
1167
                            <div class="md-card-content">
1168
                              <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>
1169
                            </div>
1170
                          </div>
1171
                        </div>
1172

    
1173
                        <div class="uk-grid-margin">
1174
                          <div class="md-card chartCard">
1175
                            <div class="md-card-content">
1176
                              <iframe *ngIf="otherWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
1177
                            </div>
1178
                          </div>
1179
                        </div>
1180

    
1181
                        <div class="uk-grid-margin">
1182
                          <div class="md-card chartCard">
1183
                            <div class="md-card-content">
1184
                              <iframe *ngIf="otherWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
1185
                            </div>
1186
                          </div>
1187
                        </div>
1188

    
1189
                        <div class="uk-grid-margin">
1190
                          <div class="md-card chartCard">
1191
                            <div class="md-card-content">
1192
                              <app-treemap-highchart *ngIf="otherWithLicenceByFunderData" [chartTitle]="'OA Other research products with licence by funder'"
1193
                                                     [chartData]="otherWithLicenceByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1194
                            </div>
1195
                          </div>
1196
                        </div>
1197

    
1198
                      </div>
1199
                    </div>
1200

    
1201
                  </div>
1202

    
1203
                </li>
1204
              </ul>
1205

    
1206
            </div>
1207
          </li>
1208

    
1209
          <li aria-hidden="true">
1210
            <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="">
1211
            </div>
1212
          </li>
1213

    
1214
          <li aria-hidden="true">
1215
            <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="">
1216
            </div>
1217
          </li>
1218

    
1219
          <li aria-hidden="true">
1220
            <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="">
1221
            </div>
1222
          </li>
1223
        </ul>
1224
      </div>
1225

    
1226
    </div>
1227
  </section>
1228

    
1229

    
1230
  <!--link to OpenAIRE page-->
1231
  <!--MOBILE & PAD PORTRAIT-->
1232
  <div class="uk-hidden@m">
1233
    <div class="uk-text-center uk-margin-xlarge-top uk-margin-large-bottom">
1234

    
1235
      <div class="uk-text-center uk-margin-medium-bottom">
1236
                <span class="openaire-symbol-wrapper">
1237
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
1238
                </span>
1239
      </div>
1240
      <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>
1241
    </div>
1242
  </div>
1243

    
1244
</div>
1245

    
(3-3/4)