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 *ngIf="countryPageOAData.publicationsAffiliated?.percentage" 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 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 x="18" y="20.35" class="percentage">{{countryPageOAData.publicationsAffiliated.percentage | number : '1.0-1'}}%</text>
524
                      </svg>
525
                      <div class="uk-margin-small-top uk-text-center">OA publications</div>
526
                    </div>
527
                  </div>
528
                </div>
529

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

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

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

    
569
              </div>
570

    
571
              <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">
572

    
573
                <div class="uk-grid-margin">
574
                  <div class="md-card chartCard">
575
                    <div class="md-card-content">
576
                      <iframe *ngIf="oaNonOAPublicationsTimelineChartURL" width="100%" height="350" [src]="oaNonOAPublicationsTimelineChartURL"></iframe>
577
                    </div>
578
                  </div>
579
                </div>
580

    
581
                <div class="uk-grid-margin">
582
                  <div class="md-card chartCard">
583
                    <div class="md-card-content">
584
                      <iframe *ngIf="oaNonOADatasetsTimelineChartURL" width="100%" height="350" [src]="oaNonOADatasetsTimelineChartURL"></iframe>
585
                    </div>
586
                  </div>
587
                </div>
588

    
589
                <div class="uk-grid-margin">
590
                  <div class="md-card chartCard">
591
                    <div class="md-card-content">
592
                      <iframe *ngIf="oaNonOASoftwareTimelineChartURL" width="100%" height="350" [src]="oaNonOASoftwareTimelineChartURL"></iframe>
593
                    </div>
594
                  </div>
595
                </div>
596

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

    
605

    
606
              </div>
607

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

    
610
                <div class="uk-grid-margin">
611
                  <div class="md-card chartCard">
612
                    <div class="md-card-content">
613
                      <iframe *ngIf="publicationsByDatasourceChartURL" width="100%" height="550" [src]="publicationsByDatasourceChartURL"></iframe>
614
                    </div>
615
                  </div>
616
                </div>
617

    
618
                <div class="uk-grid-margin">
619
                  <div class="md-card chartCard">
620
                    <div class="md-card-content">
621
                      <iframe *ngIf="publicationsByOrganizationChartURL" width="100%" height="550" [src]="publicationsByOrganizationChartURL"></iframe>
622
                    </div>
623
                  </div>
624
                </div>
625

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

    
635
                <div class="uk-grid-margin">
636
                  <div class="md-card chartCard">
637
                    <div class="md-card-content">
638
                      <iframe *ngIf="datasetsByDatasourceChartURL" width="100%" height="550" [src]="datasetsByDatasourceChartURL"></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="datasetsByOrganizationChartURL" width="100%" height="550" [src]="datasetsByOrganizationChartURL"></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="datasetsByFunderData" [chartTitle]="'OA Datasets by funder'"
655
                                             [chartData]="datasetsByFunderData" [color]="'#BB9CE6'"></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="softwareByDatasourceChartURL" width="100%" height="550" [src]="softwareByDatasourceChartURL"></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="softwareByOrganizationChartURL" width="100%" height="550" [src]="softwareByOrganizationChartURL"></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="softwareByFunderData" [chartTitle]="'OS Software by funder'"
680
                                             [chartData]="softwareByFunderData" [color]="'#C2155A'"></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="otherByDatasourceChartURL" width="100%" height="550" [src]="otherByDatasourceChartURL"></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="otherByOrganizationChartURL" width="100%" height="550" [src]="otherByOrganizationChartURL"></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="otherByFunderData" [chartTitle]="'OA Other research products by funder'"
705
                                             [chartData]="otherByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
706
                    </div>
707
                  </div>
708
                </div>
709

    
710
              </div>
711

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

    
714
                <div class="uk-grid-margin">
715
                  <div class="md-card chartCard">
716
                    <div class="md-card-content">
717
                      <iframe *ngIf="resultsByTypeOANonOAChartURL" width="100%" height="550" [src]="resultsByTypeOANonOAChartURL"></iframe>
718
                    </div>
719
                  </div>
720
                </div>
721

    
722
              </div>
723

    
724
            </div>
725
          </li>
726

    
727
          <!--OPEN SCIENCE tab-->
728
          <li aria-hidden="true" style="animation-duration: 200ms;">
729
            <div class="uk-margin tabContent">
730

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

    
754
              <hr class="uk-visible@m">
755

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

    
759
                  <div>
760

    
761
                    <div class="pidIndicator">
762
                      <h3 class="uk-margin-remove">PID</h3>
763
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
764

    
765
                        <div class="uk-grid-margin">
766
                          <div class="md-card chartCard">
767
                            <div class="md-card-content">
768
                              <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
769
                            </div>
770
                          </div>
771
                        </div>
772

    
773
                        <div class="uk-grid-margin">
774
                          <div class="md-card chartCard">
775
                            <div class="md-card-content">
776
                              <iframe *ngIf="publicationsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
777
                            </div>
778
                          </div>
779
                        </div>
780

    
781
                        <div class="uk-grid-margin">
782
                          <div class="md-card chartCard">
783
                            <div class="md-card-content">
784
                              <iframe *ngIf="publicationsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
785
                            </div>
786
                          </div>
787
                        </div>
788

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

    
798
                      </div>
799
                    </div>
800

    
801
                    <div class="licenceIndicator uk-margin-large-top">
802
                      <h3 class="uk-margin-remove">Licence</h3>
803
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
804

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

    
813
                        <div class="uk-grid-margin">
814
                          <div class="md-card chartCard">
815
                            <div class="md-card-content">
816
                              <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
817
                            </div>
818
                          </div>
819
                        </div>
820

    
821
                        <div class="uk-grid-margin">
822
                          <div class="md-card chartCard">
823
                            <div class="md-card-content">
824
                              <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
825
                            </div>
826
                          </div>
827
                        </div>
828

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

    
838
                      </div>
839
                    </div>
840

    
841
                    <div class="goldIndicator uk-margin-large-top">
842
                      <h3 class="uk-margin-remove">Gold</h3>
843
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
844

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

    
853
                        <div class="uk-grid-margin">
854
                          <div class="md-card chartCard">
855
                            <div class="md-card-content">
856
                              <iframe *ngIf="goldPublicationsByDatasourceChartURL" width="100%" height="550" [src]="goldPublicationsByDatasourceChartURL"></iframe>
857
                            </div>
858
                          </div>
859
                        </div>
860

    
861
                        <div class="uk-grid-margin">
862
                          <div class="md-card chartCard">
863
                            <div class="md-card-content">
864
                              <iframe *ngIf="goldPublicationsByOrganizationChartURL" width="100%" height="550" [src]="goldPublicationsByOrganizationChartURL"></iframe>
865
                            </div>
866
                          </div>
867
                        </div>
868

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

    
878
                      </div>
879
                    </div>
880

    
881
                    <div class="greenIndicator uk-margin-large-top">
882
                      <h3 class="uk-margin-remove">Green</h3>
883
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
884

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

    
893
                        <div class="uk-grid-margin">
894
                          <div class="md-card chartCard">
895
                            <div class="md-card-content">
896
                              <iframe *ngIf="greenPublicationsByDatasourceChartURL" width="100%" height="550" [src]="greenPublicationsByDatasourceChartURL"></iframe>
897
                            </div>
898
                          </div>
899
                        </div>
900

    
901
                        <div class="uk-grid-margin">
902
                          <div class="md-card chartCard">
903
                            <div class="md-card-content">
904
                              <iframe *ngIf="greenPublicationsByOrganizationChartURL" width="100%" height="550" [src]="greenPublicationsByOrganizationChartURL"></iframe>
905
                            </div>
906
                          </div>
907
                        </div>
908

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

    
918
                      </div>
919
                    </div>
920

    
921
                    <div class="greenVsGoldIndicator uk-margin-large-top">
922
                      <h3 class="uk-margin-remove">Green vs. Gold</h3>
923
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
924

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

    
933
                      </div>
934
                    </div>
935

    
936
                  </div>
937

    
938
                </li>
939
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
940

    
941
                  <div>
942

    
943
                    <div class="pidIndicator">
944
                      <h3 class="uk-margin-remove">PID</h3>
945
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
946

    
947
                        <div class="uk-grid-margin">
948
                          <div class="md-card chartCard">
949
                            <div class="md-card-content">
950
                              <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
951
                            </div>
952
                          </div>
953
                        </div>
954

    
955
                        <div class="uk-grid-margin">
956
                          <div class="md-card chartCard">
957
                            <div class="md-card-content">
958
                              <iframe *ngIf="datasetsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
959
                            </div>
960
                          </div>
961
                        </div>
962

    
963
                        <div class="uk-grid-margin">
964
                          <div class="md-card chartCard">
965
                            <div class="md-card-content">
966
                              <iframe *ngIf="datasetsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
967
                            </div>
968
                          </div>
969
                        </div>
970

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

    
980
                      </div>
981
                    </div>
982

    
983
                    <div class="licenceIndicator uk-margin-large-top">
984
                      <h3 class="uk-margin-remove">Licence</h3>
985
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
986

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

    
995
                        <div class="uk-grid-margin">
996
                          <div class="md-card chartCard">
997
                            <div class="md-card-content">
998
                              <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
999
                            </div>
1000
                          </div>
1001
                        </div>
1002

    
1003
                        <div class="uk-grid-margin">
1004
                          <div class="md-card chartCard">
1005
                            <div class="md-card-content">
1006
                              <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
1007
                            </div>
1008
                          </div>
1009
                        </div>
1010

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

    
1020
                      </div>
1021
                    </div>
1022

    
1023
                  </div>
1024

    
1025
                </li>
1026
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1027

    
1028
                  <div>
1029

    
1030
                    <div class="pidIndicator">
1031
                      <h3 class="uk-margin-remove">PID</h3>
1032
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1033

    
1034
                        <div class="uk-grid-margin">
1035
                          <div class="md-card chartCard">
1036
                            <div class="md-card-content">
1037
                              <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
1038
                            </div>
1039
                          </div>
1040
                        </div>
1041

    
1042
                        <div class="uk-grid-margin">
1043
                          <div class="md-card chartCard">
1044
                            <div class="md-card-content">
1045
                              <iframe *ngIf="softwareWithPIDByDatasourceChartURL" width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
1046
                            </div>
1047
                          </div>
1048
                        </div>
1049

    
1050
                        <div class="uk-grid-margin">
1051
                          <div class="md-card chartCard">
1052
                            <div class="md-card-content">
1053
                              <iframe *ngIf="softwareWithPIDByOrganizationChartURL" width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
1054
                            </div>
1055
                          </div>
1056
                        </div>
1057

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

    
1067
                      </div>
1068
                    </div>
1069

    
1070
                    <div class="licenceIndicator uk-margin-large-top">
1071
                      <h3 class="uk-margin-remove">Licence</h3>
1072
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1073

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

    
1082
                        <div class="uk-grid-margin">
1083
                          <div class="md-card chartCard">
1084
                            <div class="md-card-content">
1085
                              <iframe *ngIf="softwareWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
1086
                            </div>
1087
                          </div>
1088
                        </div>
1089

    
1090
                        <div class="uk-grid-margin">
1091
                          <div class="md-card chartCard">
1092
                            <div class="md-card-content">
1093
                              <iframe *ngIf="softwareWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
1094
                            </div>
1095
                          </div>
1096
                        </div>
1097

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

    
1107
                      </div>
1108
                    </div>
1109

    
1110
                  </div>
1111

    
1112
                </li>
1113
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1114

    
1115
                  <div>
1116

    
1117
                    <div class="pidIndicator">
1118
                      <h3 class="uk-margin-remove">PID</h3>
1119
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1120

    
1121
                        <div class="uk-grid-margin">
1122
                          <div class="md-card chartCard">
1123
                            <div class="md-card-content">
1124
                              <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
1125
                            </div>
1126
                          </div>
1127
                        </div>
1128

    
1129
                        <div class="uk-grid-margin">
1130
                          <div class="md-card chartCard">
1131
                            <div class="md-card-content">
1132
                              <iframe *ngIf="otherWithPIDByDatasourceChartURL" width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
1133
                            </div>
1134
                          </div>
1135
                        </div>
1136

    
1137
                        <div class="uk-grid-margin">
1138
                          <div class="md-card chartCard">
1139
                            <div class="md-card-content">
1140
                              <iframe *ngIf="otherWithPIDByOrganizationChartURL" width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
1141
                            </div>
1142
                          </div>
1143
                        </div>
1144

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

    
1154
                      </div>
1155
                    </div>
1156

    
1157
                    <div class="licenceIndicator uk-margin-large-top">
1158
                      <h3 class="uk-margin-remove">Licence</h3>
1159
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1160

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

    
1169
                        <div class="uk-grid-margin">
1170
                          <div class="md-card chartCard">
1171
                            <div class="md-card-content">
1172
                              <iframe *ngIf="otherWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
1173
                            </div>
1174
                          </div>
1175
                        </div>
1176

    
1177
                        <div class="uk-grid-margin">
1178
                          <div class="md-card chartCard">
1179
                            <div class="md-card-content">
1180
                              <iframe *ngIf="otherWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
1181
                            </div>
1182
                          </div>
1183
                        </div>
1184

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

    
1194
                      </div>
1195
                    </div>
1196

    
1197
                  </div>
1198

    
1199
                </li>
1200
              </ul>
1201

    
1202
            </div>
1203
          </li>
1204

    
1205
          <li aria-hidden="true">
1206
            <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="">
1207
            </div>
1208
          </li>
1209

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

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

    
1222
    </div>
1223
  </section>
1224

    
1225

    
1226
  <!--link to OpenAIRE page-->
1227
  <!--MOBILE & PAD PORTRAIT-->
1228
  <div class="uk-hidden@m">
1229
    <div class="uk-text-center uk-margin-xlarge-top uk-margin-large-bottom">
1230

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

    
1240
</div>
1241

    
(3-3/4)