Project

General

Profile

1 58904 stefania.m
<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 57668 stefania.m
6 58904 stefania.m
      <div class="uk-grid uk-grid-match uk-grid-small">
7 57668 stefania.m
8 58904 stefania.m
        <div class="uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s">
9 57668 stefania.m
10 58904 stefania.m
          <div class="uk-container uk-container-expand uk-margin-medium-top">
11 58853 stefania.m
12 58904 stefania.m
            <!--LAPTOP & PAD LANDSCAPE-->
13
            <div class="uk-visible@m">
14
              <ul *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="uk-breadcrumb">
15 58912 stefania.m
                <li><a routerLink="/home">Home</a></li>
16 58904 stefania.m
                <li><span>{{countryPageOverviewData.name}}</span></li>
17
              </ul>
18 57748 stefania.m
19 58853 stefania.m
20 58904 stefania.m
              <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 58923 stefania.m
                    <span class="lastUpdateInfo">Info Last Updated: </span>
26
                    <span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>
27 58904 stefania.m
                  </div>
28
                </div>
29
30 58996 stefania.m
                <!-- TODO uncomment when implemented -->
31 58958 stefania.m
                <!--<div class="actionButtonsCountryPage uk-text-right">-->
32
                  <!--<a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>-->
33
                  <!--&lt;!&ndash;<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>&ndash;&gt;-->
34
                  <!--<a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>-->
35
                <!--</div>-->
36 58853 stefania.m
              </div>
37
            </div>
38
39 58904 stefania.m
            <!--MOBILE & PAD PORTRAIT-->
40
            <div class="uk-hidden@m uk-text-center">
41
              <div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
42
                <img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image uk-display-block uk-margin-auto-left uk-margin-auto-right" width="103" height="103">
43
                <div class="uk-margin-top">
44
                  <h1 class="uk-margin-small-bottom">{{countryPageOverviewData.name}}</h1>
45
                  <span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span>
46
                </div>
47
              </div>
48 58853 stefania.m
            </div>
49 58904 stefania.m
50
51
52 57732 stefania.m
          </div>
53 58853 stefania.m
54 57668 stefania.m
55 58904 stefania.m
          <div class="uk-container uk-container-expand uk-margin-large-top">
56 58853 stefania.m
57 58904 stefania.m
            <!--Overview cards-->
58
            <!--LAPTOP & PAD LANDSCAPE-->
59
            <div class="uk-visible@m">
60
              <div class="uk-width-1-1 indicatorCards">
61
                <div class="uk-grid uk-grid-small uk-child-width-1-2@s uk-child-width-1-4@m uk-child-width-1-4@l uk-margin-top uk-grid-match" data-uk-grid-margin="">
62
                  <!--<div class="uk-grid uk-grid-small uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5 uk-margin-top uk-grid-match" data-uk-grid-margin="">-->
63 58610 stefania.m
64 58904 stefania.m
                  <div class="uk-row-first">
65
                    <div class="md-card">
66
                      <div class="md-card-content">
67 58610 stefania.m
68 58904 stefania.m
                        <!--top number-->
69
                        <div class="uk-margin-top">
70
                          <!--<div class="uk-float-right uk-margin-small-right">-->
71
                          <!--<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">-->
72
                          <!--</div>-->
73
                          <h3 class="uk-margin-remove">
74
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number">--</span>
75
                            <span *ngIf="countryPageOverviewData?.publicationsAffiliated?.oa" class="number">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</span>
76
                          </h3>
77
                        </div>
78
                        <div class="uk-margin-top">
79
                          <span class=""><i>OA publications affiliated to an organization in the country</i></span>
80
                        </div>
81
                        <div *ngIf="countryPageOverviewData?.publicationsAffiliated?.percentage" class="uk-margin-top">
82
                          <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
83
                          <div class="progress uk-margin-small-top">
84
                            <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
85
                          </div>
86
                        </div>
87
88
                        <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
89
90
                        <!--bottom number-->
91
                        <div class="uk-margin-top">
92
                          <div class="uk-float-right uk-margin-small-right">
93
                            <img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
94
                          </div>
95
                          <h3 class="uk-margin-remove">
96
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number">--</span>
97
                            <span *ngIf="countryPageOverviewData?.publicationsDeposited?.oa" class="number">{{countryPageOverviewData.publicationsDeposited.oa | number}}</span>
98
                          </h3>
99
                        </div>
100
                        <div class="uk-margin-top">
101
                          <span class=""><i>OA publications from institutional repositories</i></span>
102
                        </div>
103
                        <div *ngIf="countryPageOverviewData?.publicationsDeposited?.percentage" class="uk-margin-top">
104
                          <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
105
                          <div class="progress uk-margin-small-top">
106
                            <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
107
                          </div>
108
                        </div>
109
110
                      </div>
111 57732 stefania.m
                    </div>
112 58904 stefania.m
                  </div>
113
114
                  <div class="">
115
                    <div class="md-card">
116
                      <div class="md-card-content">
117
118
                        <!--top number-->
119
                        <div class="uk-margin-top">
120
                          <!--<div class="uk-float-right uk-margin-small-right">-->
121
                          <!--<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">-->
122
                          <!--</div>-->
123
                          <h3 class="uk-margin-remove">
124
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number">--</span>
125
                            <span *ngIf="countryPageOverviewData?.datasetsAffiliated?.oa" class="number">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</span>
126
                          </h3>
127
                        </div>
128
                        <div class="uk-margin-top">
129
                          <span class=""><i>OA datasets affiliated to an organization in the country</i></span>
130
                        </div>
131
                        <div *ngIf="countryPageOverviewData?.datasetsAffiliated?.percentage" class="uk-margin-top">
132
                          <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
133
                          <div class="progress uk-margin-small-top">
134
                            <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
135
                          </div>
136
                        </div>
137
138
                        <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
139
140
                        <!--bottom number-->
141
                        <div class="uk-margin-top">
142
                          <div class="uk-float-right uk-margin-small-right">
143
                            <img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
144
                          </div>
145
                          <h3 class="uk-margin-remove">
146
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number">--</span>
147
                            <span *ngIf="countryPageOverviewData?.datasetsDeposited?.oa" class="number">{{countryPageOverviewData.datasetsDeposited.oa | number}}</span>
148
                          </h3>
149
                        </div>
150
                        <div class="uk-margin-top">
151
                          <span class=""><i>OA datasets from institutional repositories</i></span>
152
                        </div>
153
                        <div *ngIf="countryPageOverviewData?.datasetsDeposited?.percentage" class="uk-margin-top">
154
                          <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
155
                          <div class="progress uk-margin-small-top">
156
                            <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
157
                          </div>
158
                        </div>
159 58610 stefania.m
                      </div>
160 57732 stefania.m
                    </div>
161 58904 stefania.m
                  </div>
162 58610 stefania.m
163 58904 stefania.m
                  <div class="">
164 58610 stefania.m
165 58904 stefania.m
                    <div class="md-card">
166
                      <div class="md-card-content">
167
                        <div class="uk-margin-top">
168
                          <div class="uk-float-right uk-margin-small-right">
169
                            <img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
170
                          </div>
171
                          <h3 class="uk-margin-remove">
172 58996 stefania.m
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.repositories || !countryPageOverviewData.repositories.total" class="number">--</span>
173
                            <span *ngIf="countryPageOverviewData?.repositories?.total" class="number">{{countryPageOverviewData.repositories.total | number}}</span>
174 58904 stefania.m
                          </h3>
175
                        </div>
176
                        <div class="uk-margin-top">
177
                          <span class=""><i>repositories</i> from openDOAR & re3data</span>
178
                        </div>
179
                        <div *ngIf="countryPageOverviewData?.repositories?.percentage" class="uk-margin-top">
180
                          <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> Validated
181
                          <div class="progress uk-margin-small-top">
182
                            <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
183
                          </div>
184
                        </div>
185 58853 stefania.m
                      </div>
186 58610 stefania.m
                    </div>
187 58904 stefania.m
188
                    <div class="md-card">
189
                      <div class="md-card-content">
190
                        <div class="uk-margin-top">
191
                          <div class="uk-float-right uk-margin-small-right">
192
                            <img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
193
                          </div>
194
                          <h3 class="uk-margin-remove">
195 58996 stefania.m
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.journals || !countryPageOverviewData.journals.total" class="number">--</span>
196
                            <span *ngIf="countryPageOverviewData?.journals?.total" class="number">{{countryPageOverviewData.journals.total | number}}</span>
197 58904 stefania.m
                            <!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
198
                            <!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
199
                          </h3>
200
                        </div>
201
                        <div class="uk-margin-top">
202
                          <span class=""><i>OA journals</i> from DOAJ</span>
203
                        </div>
204
                        <div *ngIf="countryPageOverviewData?.journals?.percentage" class="uk-margin-top">
205
                          <span class="number">{{countryPageOverviewData.journals.percentage | number :'1.0-1'}}%</span> Validated
206
                          <div class="progress uk-margin-small-top">
207
                            <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
208
                          </div>
209
                        </div>
210
                      </div>
211 58610 stefania.m
                    </div>
212 58904 stefania.m
213
                  </div>
214
215
216
                  <div class="">
217
218
                    <div class="md-card" style="height: 47%">
219
                      <div class="md-card-content">
220
                        <div class="uk-margin-top">
221
                          <div class="uk-float-right uk-margin-small-right">
222
                            <img src="../../../assets/img/icons/policies-icon.svg" width="36" height="40">
223
                          </div>
224
                          <h3 class="uk-margin-remove">
225
                            <span class="number">--</span>
226
                            <!--<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>-->
227
                            <!--<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>-->
228
                          </h3>
229
                        </div>
230
                        <div class="uk-margin-top">
231
                          <span class="">organizations with <i>OA policies</i></span>
232
                        </div>
233 58610 stefania.m
                      </div>
234
                    </div>
235 58853 stefania.m
236 58904 stefania.m
                    <div></div>
237 57732 stefania.m
                  </div>
238
                </div>
239
              </div>
240 58904 stefania.m
            </div>
241 58610 stefania.m
242 58904 stefania.m
            <!--MOBILE & PAD PORTRAIT-->
243
            <div class="uk-hidden@m uk-text-center uk-margin-medium-top">
244
              <div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
245
                <div class="md-card-content">
246 58610 stefania.m
247 58904 stefania.m
248
                  <div class="uk-grid uk-margin-top">
249
                    <div class="uk-width-1-5">
250
                      <img src="../../../assets/img/icons/publications-icon.svg" width="30" height="30">
251 57732 stefania.m
                    </div>
252 58904 stefania.m
                    <div class="uk-width-2-5">
253
                      <div *ngIf="countryPageOverviewData.publicationsAffiliated?.oa" class="number big">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</div>
254
                      <div *ngIf="!countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number big">--</div>
255
                      <div class="uk-margin-small-top">OA PUBLICATIONS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
256 57732 stefania.m
                    </div>
257 58904 stefania.m
                    <div *ngIf="countryPageOverviewData.publicationsAffiliated?.percentage" class="uk-width-2-5">
258
                      <div class="progress">
259
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
260 58610 stefania.m
                      </div>
261 58904 stefania.m
                      <div class="uk-margin-small-top">
262
                        <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
263
                      </div>
264 57732 stefania.m
                    </div>
265 58904 stefania.m
                  </div>
266
                  <div class="uk-grid uk-margin-top">
267
                    <div class="uk-width-1-5">
268
                    </div>
269
                    <div class="uk-width-2-5">
270
                      <div *ngIf="countryPageOverviewData.publicationsDeposited?.oa" class="number big">{{countryPageOverviewData.publicationsDeposited.oa | number}}</div>
271
                      <div *ngIf="!countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number big">--</div>
272
                      <div class="uk-margin-small-top">OA PUBLICATIONS FROM INSTITUTIONAL REPOSITORIES</div>
273
                    </div>
274
                    <div *ngIf="countryPageOverviewData.publicationsDeposited?.percentage" class="uk-width-2-5">
275
                      <div class="progress">
276
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
277
                      </div>
278
                      <div class="uk-margin-small-top">
279
                        <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
280
                      </div>
281
                    </div>
282
                  </div>
283 58610 stefania.m
284 58904 stefania.m
                  <div class="uk-grid uk-margin-medium-top">
285
                    <div class="uk-width-1-5">
286
                      <img src="../../../assets/img/icons/datasets-icon.svg" width="30" height="30">
287
                    </div>
288
                    <div class="uk-width-2-5">
289
                      <div *ngIf="countryPageOverviewData.datasetsAffiliated?.oa" class="number big">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</div>
290
                      <div *ngIf="!countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number big">--</div>
291
                      <div class="uk-margin-small-top">OA DATASETS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
292
                    </div>
293
                    <div *ngIf="countryPageOverviewData.datasetsAffiliated?.percentage" class="uk-width-2-5">
294
                      <div class="progress">
295
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
296 58853 stefania.m
                      </div>
297 58904 stefania.m
                      <div class="uk-margin-small-top">
298
                        <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
299
                      </div>
300 58610 stefania.m
                    </div>
301 58904 stefania.m
                  </div>
302
                  <div class="uk-grid uk-margin-medium-top">
303
                    <div class="uk-width-1-5">
304 58610 stefania.m
                    </div>
305 58904 stefania.m
                    <div class="uk-width-2-5">
306
                      <div *ngIf="countryPageOverviewData.datasetsDeposited?.oa" class="number big">{{countryPageOverviewData.datasetsDeposited.oa | number}}</div>
307
                      <div *ngIf="!countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number big">--</div>
308
                      <div class="uk-margin-small-top">OA DATASETS FROM INSTITUTIONAL REPOSITORIES</div>
309
                    </div>
310
                    <div *ngIf="countryPageOverviewData.datasetsDeposited?.percentage" class="uk-width-2-5">
311
                      <div class="progress">
312 58853 stefania.m
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
313 58610 stefania.m
                      </div>
314 58904 stefania.m
                      <div class="uk-margin-small-top">
315
                        <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
316
                      </div>
317 58610 stefania.m
                    </div>
318 57732 stefania.m
                  </div>
319 58610 stefania.m
320 58904 stefania.m
                  <div class="uk-grid uk-margin-medium-top">
321
                    <div class="uk-width-1-5">
322
                      <img src="../../../assets/img/icons/repositories-icon.svg" width="30" height="30">
323 57732 stefania.m
                    </div>
324 58904 stefania.m
                    <div class="uk-width-2-5">
325
                      <div *ngIf="countryPageOverviewData.repositories?.oa" class="number big">{{countryPageOverviewData.repositories.oa | number}}</div>
326
                      <div *ngIf="!countryPageOverviewData.repositories || !countryPageOverviewData.repositories.oa" class="number big">--</div>
327
                      <div class="uk-margin-small-top">VALIDATED REPOSITORIES</div>
328 57732 stefania.m
                    </div>
329 58904 stefania.m
                    <div *ngIf="countryPageOverviewData.repositories?.percentage" class="uk-width-2-5">
330
                      <div class="progress">
331 58853 stefania.m
                        <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
332 58610 stefania.m
                      </div>
333 58904 stefania.m
                      <div class="uk-margin-small-top">
334
                        <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> VALIDATED
335
                      </div>
336 58610 stefania.m
                    </div>
337 57732 stefania.m
                  </div>
338 58610 stefania.m
339 58904 stefania.m
                  <div class="uk-grid uk-margin-medium-top">
340
                    <div class="uk-width-1-5">
341
                      <img src="../../../assets/img/icons/journals-icon.svg" width="30" height="30">
342 57732 stefania.m
                    </div>
343 58904 stefania.m
                    <div class="uk-width-2-5">
344
                      <div *ngIf="countryPageOverviewData.journals?.oa" class="number big">{{countryPageOverviewData.journals.oa | number}}</div>
345
                      <div *ngIf="!countryPageOverviewData.journals || !countryPageOverviewData.journals.oa" class="number big">--</div>
346
                      <div class="uk-margin-small-top">VALIDATED JOURNALS</div>
347 57732 stefania.m
                    </div>
348 58904 stefania.m
                    <div *ngIf="countryPageOverviewData.journals?.percentage" class="uk-width-2-5">
349
                      <div class="progress">
350 58853 stefania.m
                        <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
351 58610 stefania.m
                      </div>
352 58904 stefania.m
                      <div class="uk-margin-small-top">
353
                        <span class="number">{{countryPageOverviewData.journals.percentage | number : '1.0-1'}}%</span> Validated
354
                      </div>
355 58610 stefania.m
                    </div>
356 57732 stefania.m
                  </div>
357 58610 stefania.m
358 58904 stefania.m
                  <div class="uk-grid uk-margin-medium-top uk-margin-bottom">
359
                    <div class="uk-width-1-5">
360
                      <img src="../../../assets/img/icons/policies-icon.svg" width="30" height="30">
361
                    </div>
362
                    <div class="uk-width-2-5">
363
                      <div *ngIf="countryPageOverviewData.policies?.oa" class="number big">{{countryPageOverviewData.policies.oa | number}}</div>
364
                      <div *ngIf="!countryPageOverviewData.policies || !countryPageOverviewData.policies.oa" class="number big">--</div>
365
                      <div class="uk-margin-small-top">OA POLICIES</div>
366
                    </div>
367
                    <div class="uk-width-2-5">
368 58610 stefania.m
369 57732 stefania.m
                    </div>
370
                  </div>
371 58904 stefania.m
372 57732 stefania.m
                </div>
373
              </div>
374
            </div>
375 58904 stefania.m
376
377 57732 stefania.m
          </div>
378 58904 stefania.m
379 57732 stefania.m
        </div>
380 57668 stefania.m
381 58904 stefania.m
        <!--Research Overview-->
382
        <!--LAPTOP & PAD LANDSCAPE-->
383
        <div class="uk-visible@m uk-width-1-5@m uk-width-1-5@l">
384
          <div class="md-card infoBox">
385
386
            <div class="md-card-toolbar">
387
              <h3 class="uk-text-center uk-margin-small-top">
388
                Research overview
389
              </h3>
390 57746 stefania.m
            </div>
391 58904 stefania.m
392
            <div class="md-card-content">
393
              <div class="numbers">
394
395
                <div class="indicator uk-margin-small-top">
396 59559 stefania.m
                  <ng-container *ngIf="countryPageOverviewData?.rndExpenditure">
397
                    <span class="number primary">{{countryPageOverviewData.rndExpenditure.expenditure}}%</span>
398
                    <span>
399
                      <span><i> of gdp for </i></span>
400
                      <span class="number primary">{{countryPageOverviewData.rndExpenditure.year}}</span>
401
                      <div><i> R&D expenditure</i></div>
402
                    </span>
403
                  </ng-container>
404
                  <ng-container *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure">
405
                    <span class="number primary">--</span>
406
                    <span><i>R&D expenditure</i></span>
407
                  </ng-container>
408 57746 stefania.m
                </div>
409 58904 stefania.m
410
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
411
412
                <div class="indicator">
413
                  <span class="number primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</span>
414
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</span>
415
                  <span><i>funding sources</i></span>
416 57748 stefania.m
                </div>
417 58904 stefania.m
418
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
419
420
                <div class="indicator">
421
                  <span class="number primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</span>
422
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</span>
423
                  <span><i>funding organizations</i></span>
424 57893 stefania.m
                </div>
425 58904 stefania.m
426
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
427
428
                <div class="indicator">
429
                  <span class="number primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</span>
430
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</span>
431
                  <span><i>organizations funded by the European commission since 2013</i></span>
432 57893 stefania.m
                </div>
433 58904 stefania.m
434 57893 stefania.m
              </div>
435 57668 stefania.m
436 58904 stefania.m
437
              <div class="uk-text-center uk-margin-xlarge-top">
438
439
                <div class="uk-text-center uk-margin-medium-bottom">
440
                <span class="openaire-symbol-wrapper">
441
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
442
                </span>
443 57746 stefania.m
                </div>
444 58904 stefania.m
                <a class="uk-link" href="{{linkToCountryInOpenAIRE}}" target="_blank">Country page in <strong>OpenAIRE</strong><i class="fas fa-long-arrow-alt-right uk-margin-left"></i></a>
445 57746 stefania.m
              </div>
446 58904 stefania.m
447 57746 stefania.m
            </div>
448
          </div>
449
        </div>
450
451 58904 stefania.m
        <!--Research Overview-->
452
        <!--MOBILE & PAD PORTRAIT-->
453
        <div class="uk-hidden@m uk-width-1-1@s uk-margin-medium-top">
454
          <div class="uk-container uk-container-expand">
455
            <div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
456
              <div class="md-card-content">
457
                <div class="numbers">
458
459
                  <div class="">
460 59559 stefania.m
                    <ng-container *ngIf="countryPageOverviewData?.rndExpenditure">
461
                      <span class="number big primary">{{countryPageOverviewData.rndExpenditure.expenditure}}%</span>
462
                      <span>
463
                      <span class="uk-margin-small-right uk-margin-small-left"> OF DGP FOR </span>
464
                      <span class="number big primary">{{countryPageOverviewData.rndExpenditure.year}}</span>
465
                      <div class="uk-margin-small-top"> R&D EXPENDITURE</div>
466
                    </span>
467
                    </ng-container>
468
                    <ng-container *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure">
469
                      <div class="number big primary">--</div>
470
                      <div class="uk-margin-small-top">R&D EXPENDITURE</div>
471
                    </ng-container>
472 57746 stefania.m
                  </div>
473
474 58904 stefania.m
                  <div class="uk-margin-medium-top">
475
                    <div class="number big primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</div>
476
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</div>
477
                    <div class="uk-margin-small-top">FUNDING SOURCES</div>
478 57746 stefania.m
                  </div>
479 58904 stefania.m
480
                  <div class="uk-margin-medium-top">
481
                    <div class="number big primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</div>
482
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</div>
483
                    <div class="uk-margin-small-top">FUNDING ORGANIZATIONS</div>
484 57746 stefania.m
                  </div>
485 58904 stefania.m
486
                  <div class=" uk-margin-medium-top">
487
                    <div class="number big primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</div>
488
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</div>
489
                    <div class="uk-margin-small-top">ORGANIZATIONS FUNDED BY THE EUROPEAN COMMISSION SINCE 2013</div>
490 57746 stefania.m
                  </div>
491 58904 stefania.m
492 57746 stefania.m
                </div>
493
              </div>
494
            </div>
495
          </div>
496
        </div>
497 57668 stefania.m
498
499 58904 stefania.m
      </div>
500 57668 stefania.m
501 58904 stefania.m
    </div>
502
  </section>
503 58610 stefania.m
504 58904 stefania.m
  <!--TABS SECTION-->
505
  <section class="section uk-margin-large-top" id="sect-tabs">
506
    <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
507 58610 stefania.m
508 58904 stefania.m
      <div class="">
509 58610 stefania.m
510 58904 stefania.m
        <!--LAPTOP & PAD LANDSCAPE-->
511
        <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
512 58923 stefania.m
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
513
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
514 58904 stefania.m
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
515
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
516
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
517
          <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
518
        </ul>
519 58610 stefania.m
520 58904 stefania.m
        <!--MOBILE & PAD PORTRAIT-->
521
        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
522 58923 stefania.m
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
523
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
524 58904 stefania.m
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
525
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
526
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
527
          <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
528
        </ul>
529 58610 stefania.m
530 58904 stefania.m
        <ul id="team_tabbed" class="uk-switcher dataContainer">
531 58610 stefania.m
532 58904 stefania.m
          <!--OVERVIEW tab-->
533
          <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
534
            <div class="uk-margin tabContent">
535 58610 stefania.m
536 58923 stefania.m
              <div *ngIf="countryPageOAData" class="uk-grid uk-child-width-1-4@m uk-child-width-1-4@l uk-child-width-1-2@s uk-grid-match">
537 58610 stefania.m
538 58923 stefania.m
                <div>
539
                  <div class="md-card">
540
                    <div class="md-card-content">
541 58947 stefania.m
                      <svg viewBox="0 0 36 36" class="circular-chart publications">
542 58923 stefania.m
                        <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
543 58947 stefania.m
                        <path *ngIf="countryPageOAData.publicationsAffiliated?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.publicationsAffiliated.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
544
                        <text *ngIf="countryPageOAData.publicationsAffiliated?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.publicationsAffiliated.percentage | number : '1.0-1'}}%</text>
545
                        <text *ngIf="!countryPageOAData.publicationsAffiliated || !countryPageOAData.publicationsAffiliated.percentage" x="18" y="20.35" class="percentage">0%</text>
546 58923 stefania.m
                      </svg>
547
                      <div class="uk-margin-small-top uk-text-center">OA publications</div>
548
                    </div>
549
                  </div>
550
                </div>
551 58610 stefania.m
552 58923 stefania.m
                <div>
553
                  <div class="md-card">
554
                    <div class="md-card-content">
555 58947 stefania.m
                      <svg viewBox="0 0 36 36" class="circular-chart datasets">
556 58923 stefania.m
                        <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
557 58947 stefania.m
                        <path *ngIf="countryPageOAData.datasetsAffiliated?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.datasetsAffiliated.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
558
                        <text *ngIf="countryPageOAData.datasetsAffiliated?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.datasetsAffiliated.percentage | number : '1.0-1'}}%</text>
559
                        <text *ngIf="!countryPageOAData.datasetsAffiliated || !countryPageOAData.datasetsAffiliated.percentage" x="18" y="20.35" class="percentage">0%</text>
560 58923 stefania.m
                      </svg>
561
                      <div class="uk-margin-small-top uk-text-center">OA datasets</div>
562
                    </div>
563
                  </div>
564
                </div>
565 57732 stefania.m
566 58923 stefania.m
                <div>
567
                  <div class="md-card">
568
                    <div class="md-card-content">
569 58947 stefania.m
                      <svg viewBox="0 0 36 36" class="circular-chart software">
570 58923 stefania.m
                        <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
571 58947 stefania.m
                        <path *ngIf="countryPageOAData.software?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.software.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
572
                        <text *ngIf="countryPageOAData.software?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.software.percentage | number : '1.0-1'}}%</text>
573
                        <text *ngIf="!countryPageOAData.software || !countryPageOAData.software.percentage" x="18" y="20.35" class="percentage">0%</text>
574 58923 stefania.m
                      </svg>
575
                      <div class="uk-margin-small-top uk-text-center">OS software</div>
576
                    </div>
577
                  </div>
578
                </div>
579 57732 stefania.m
580 58923 stefania.m
                <div>
581
                  <div class="md-card">
582
                    <div class="md-card-content">
583 58947 stefania.m
                      <svg viewBox="0 0 36 36" class="circular-chart other">
584 58923 stefania.m
                        <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
585 58947 stefania.m
                        <path *ngIf="countryPageOAData.other?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.other.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
586
                        <text *ngIf="countryPageOAData.other?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.other.percentage | number : '1.0-1'}}%</text>
587
                        <text *ngIf="!countryPageOAData.other || !countryPageOAData.other.percentage" x="18" y="20.35" class="percentage">0%</text>
588 58923 stefania.m
                      </svg>
589
                      <div class="uk-margin-small-top uk-text-center">OA other research products</div>
590
                    </div>
591
                  </div>
592
                </div>
593 57732 stefania.m
594 58923 stefania.m
              </div>
595 58610 stefania.m
596 58923 stefania.m
              <div class="uk-grid uk-grid-row-medium uk-margin-small-top uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
597 57668 stefania.m
598 58923 stefania.m
                <div class="uk-grid-margin">
599
                  <div class="md-card chartCard">
600
                    <div class="md-card-content">
601
                      <iframe *ngIf="oaNonOAPublicationsTimelineChartURL" width="100%" height="350" [src]="oaNonOAPublicationsTimelineChartURL"></iframe>
602
                    </div>
603
                  </div>
604
                </div>
605 57668 stefania.m
606 58923 stefania.m
                <div class="uk-grid-margin">
607
                  <div class="md-card chartCard">
608
                    <div class="md-card-content">
609
                      <iframe *ngIf="oaNonOADatasetsTimelineChartURL" width="100%" height="350" [src]="oaNonOADatasetsTimelineChartURL"></iframe>
610
                    </div>
611
                  </div>
612
                </div>
613 58904 stefania.m
614 58923 stefania.m
                <div class="uk-grid-margin">
615
                  <div class="md-card chartCard">
616
                    <div class="md-card-content">
617
                      <iframe *ngIf="oaNonOASoftwareTimelineChartURL" width="100%" height="350" [src]="oaNonOASoftwareTimelineChartURL"></iframe>
618
                    </div>
619
                  </div>
620
                </div>
621 58904 stefania.m
622 58923 stefania.m
                <div class="uk-grid-margin">
623
                  <div class="md-card chartCard">
624
                    <div class="md-card-content">
625
                      <iframe *ngIf="oaNonOAOtherTimelineChartURL" width="100%" height="350" [src]="oaNonOAOtherTimelineChartURL"></iframe>
626
                    </div>
627
                  </div>
628
                </div>
629 58610 stefania.m
630
631 58923 stefania.m
              </div>
632 58610 stefania.m
633 58923 stefania.m
              <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-3@l uk-child-width-1-1@s">
634
635
                <div class="uk-grid-margin">
636
                  <div class="md-card chartCard">
637
                    <div class="md-card-content">
638
                      <iframe *ngIf="publicationsByDatasourceChartURL" width="100%" height="550" [src]="publicationsByDatasourceChartURL"></iframe>
639
                    </div>
640
                  </div>
641
                </div>
642
643
                <div class="uk-grid-margin">
644
                  <div class="md-card chartCard">
645
                    <div class="md-card-content">
646
                      <iframe *ngIf="publicationsByOrganizationChartURL" width="100%" height="550" [src]="publicationsByOrganizationChartURL"></iframe>
647
                    </div>
648
                  </div>
649
                </div>
650
651
                <div class="uk-grid-margin">
652
                  <div class="md-card chartCard">
653
                    <div class="md-card-content">
654
                      <app-treemap-highchart *ngIf="publicationsByFunderData" [chartTitle]="'OA Publications by funder'"
655
                                             [chartData]="publicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
656
                    </div>
657
                  </div>
658
                </div>
659
660
                <div class="uk-grid-margin">
661
                  <div class="md-card chartCard">
662
                    <div class="md-card-content">
663
                      <iframe *ngIf="datasetsByDatasourceChartURL" width="100%" height="550" [src]="datasetsByDatasourceChartURL"></iframe>
664
                    </div>
665
                  </div>
666
                </div>
667
668
                <div class="uk-grid-margin">
669
                  <div class="md-card chartCard">
670
                    <div class="md-card-content">
671
                      <iframe *ngIf="datasetsByOrganizationChartURL" width="100%" height="550" [src]="datasetsByOrganizationChartURL"></iframe>
672
                    </div>
673
                  </div>
674
                </div>
675
676
                <div class="uk-grid-margin">
677
                  <div class="md-card chartCard">
678
                    <div class="md-card-content">
679
                      <app-treemap-highchart *ngIf="datasetsByFunderData" [chartTitle]="'OA Datasets by funder'"
680
                                             [chartData]="datasetsByFunderData" [color]="'#BB9CE6'"></app-treemap-highchart>
681
                    </div>
682
                  </div>
683
                </div>
684
685
                <div class="uk-grid-margin">
686
                  <div class="md-card chartCard">
687
                    <div class="md-card-content">
688
                      <iframe *ngIf="softwareByDatasourceChartURL" width="100%" height="550" [src]="softwareByDatasourceChartURL"></iframe>
689
                    </div>
690
                  </div>
691
                </div>
692
693
                <div class="uk-grid-margin">
694
                  <div class="md-card chartCard">
695
                    <div class="md-card-content">
696
                      <iframe *ngIf="softwareByOrganizationChartURL" width="100%" height="550" [src]="softwareByOrganizationChartURL"></iframe>
697
                    </div>
698
                  </div>
699
                </div>
700
701
                <div class="uk-grid-margin">
702
                  <div class="md-card chartCard">
703
                    <div class="md-card-content">
704
                      <app-treemap-highchart *ngIf="softwareByFunderData" [chartTitle]="'OS Software by funder'"
705
                                             [chartData]="softwareByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
706
                    </div>
707
                  </div>
708
                </div>
709
710
                <div class="uk-grid-margin">
711
                  <div class="md-card chartCard">
712
                    <div class="md-card-content">
713
                      <iframe *ngIf="otherByDatasourceChartURL" width="100%" height="550" [src]="otherByDatasourceChartURL"></iframe>
714
                    </div>
715
                  </div>
716
                </div>
717
718
                <div class="uk-grid-margin">
719
                  <div class="md-card chartCard">
720
                    <div class="md-card-content">
721
                      <iframe *ngIf="otherByOrganizationChartURL" width="100%" height="550" [src]="otherByOrganizationChartURL"></iframe>
722
                    </div>
723
                  </div>
724
                </div>
725
726
                <div class="uk-grid-margin">
727
                  <div class="md-card chartCard">
728
                    <div class="md-card-content">
729
                      <app-treemap-highchart *ngIf="otherByFunderData" [chartTitle]="'OA Other research products by funder'"
730
                                             [chartData]="otherByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
731
                    </div>
732
                  </div>
733
                </div>
734
735
              </div>
736
737
              <div class="uk-grid uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@s">
738
739
                <div class="uk-grid-margin">
740
                  <div class="md-card chartCard">
741
                    <div class="md-card-content">
742
                      <iframe *ngIf="resultsByTypeOANonOAChartURL" width="100%" height="550" [src]="resultsByTypeOANonOAChartURL"></iframe>
743
                    </div>
744
                  </div>
745
                </div>
746
747
              </div>
748
749 58904 stefania.m
            </div>
750
          </li>
751 58912 stefania.m
752 58904 stefania.m
          <!--OPEN SCIENCE tab-->
753
          <li aria-hidden="true" style="animation-duration: 200ms;">
754
            <div class="uk-margin tabContent">
755 58912 stefania.m
756
              <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
757
                <li aria-expanded="true" class="uk-active">
758 58923 stefania.m
                  <a class="publicationsSubnav" (click)="changeInnerView('publications')" uk-tooltip="title: Publication; duration: 2000">
759 58912 stefania.m
                    <img src="../../../assets/img/icons/publications-icon.svg" width="15">
760
                  </a>
761
                </li>
762
                <li aria-expanded="false" class="">
763 58923 stefania.m
                  <a class="datasetsSubnav" (click)="changeInnerView('datasets')" uk-tooltip="title: Datasets; duration: 2000">
764 58912 stefania.m
                    <img src="../../../assets/img/icons/datasets-icon.svg" width="15">
765
                  </a>
766
                </li>
767
                <li aria-expanded="false" class="">
768 58923 stefania.m
                  <a class="softwareSubnav" (click)="changeInnerView('software')" uk-tooltip="title: Software; duration: 2000">
769 58912 stefania.m
                    <img src="../../../assets/img/icons/software-icon.svg" width="15">
770
                  </a>
771
                </li>
772
                <li aria-expanded="false" class="">
773 58923 stefania.m
                  <a class="otherSubnav" (click)="changeInnerView('other')" uk-tooltip="title: Other research products; duration: 2000">
774 58912 stefania.m
                    <img src="../../../assets/img/icons/other-icon.svg" width="15">
775
                  </a>
776
                </li>
777
              </ul>
778
779
              <hr class="uk-visible@m">
780
781
              <ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
782
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
783 58939 stefania.m
784 58912 stefania.m
                  <div>
785 58939 stefania.m
786
                    <div class="pidIndicator">
787 58946 stefania.m
                      <h3 class="uk-margin-remove">PID</h3>
788 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
789
790
                        <div class="uk-grid-margin">
791
                          <div class="md-card chartCard">
792
                            <div class="md-card-content">
793
                              <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
794
                            </div>
795
                          </div>
796
                        </div>
797
798
                        <div class="uk-grid-margin">
799
                          <div class="md-card chartCard">
800
                            <div class="md-card-content">
801
                              <iframe *ngIf="publicationsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
802
                            </div>
803
                          </div>
804
                        </div>
805
806
                        <div class="uk-grid-margin">
807
                          <div class="md-card chartCard">
808
                            <div class="md-card-content">
809
                              <iframe *ngIf="publicationsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
810
                            </div>
811
                          </div>
812
                        </div>
813
814
                        <div class="uk-grid-margin">
815
                          <div class="md-card chartCard">
816
                            <div class="md-card-content">
817
                              <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData" [chartTitle]="'OA Publications with PID by funder'"
818
                                                     [chartData]="publicationsWithPIDByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
819
                            </div>
820
                          </div>
821
                        </div>
822
823
                      </div>
824
                    </div>
825
826 58946 stefania.m
                    <div class="licenceIndicator uk-margin-large-top">
827
                      <h3 class="uk-margin-remove">Licence</h3>
828 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
829
830
                        <div class="uk-grid-margin">
831
                          <div class="md-card chartCard">
832
                            <div class="md-card-content">
833
                              <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
834
                            </div>
835
                          </div>
836
                        </div>
837
838
                        <div class="uk-grid-margin">
839
                          <div class="md-card chartCard">
840
                            <div class="md-card-content">
841
                              <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
842
                            </div>
843
                          </div>
844
                        </div>
845
846
                        <div class="uk-grid-margin">
847
                          <div class="md-card chartCard">
848
                            <div class="md-card-content">
849
                              <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
850
                            </div>
851
                          </div>
852
                        </div>
853
854
                        <div class="uk-grid-margin">
855
                          <div class="md-card chartCard">
856
                            <div class="md-card-content">
857
                              <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData" [chartTitle]="'OA Publications with licence by funder'"
858
                                                     [chartData]="publicationsWithLicenceByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
859
                            </div>
860
                          </div>
861
                        </div>
862
863
                      </div>
864
                    </div>
865
866 58946 stefania.m
                    <div class="goldIndicator uk-margin-large-top">
867
                      <h3 class="uk-margin-remove">Gold</h3>
868 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
869
870
                        <div class="uk-grid-margin">
871
                          <div class="md-card chartCard">
872
                            <div class="md-card-content">
873
                              <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
874
                            </div>
875
                          </div>
876
                        </div>
877
878
                        <div class="uk-grid-margin">
879
                          <div class="md-card chartCard">
880
                            <div class="md-card-content">
881
                              <iframe *ngIf="goldPublicationsByDatasourceChartURL" width="100%" height="550" [src]="goldPublicationsByDatasourceChartURL"></iframe>
882
                            </div>
883
                          </div>
884
                        </div>
885
886
                        <div class="uk-grid-margin">
887
                          <div class="md-card chartCard">
888
                            <div class="md-card-content">
889
                              <iframe *ngIf="goldPublicationsByOrganizationChartURL" width="100%" height="550" [src]="goldPublicationsByOrganizationChartURL"></iframe>
890
                            </div>
891
                          </div>
892
                        </div>
893
894
                        <div class="uk-grid-margin">
895
                          <div class="md-card chartCard">
896
                            <div class="md-card-content">
897
                              <app-treemap-highchart *ngIf="goldPublicationsByFunderData" [chartTitle]="'Gold OA publications by funder'"
898
                                                     [chartData]="goldPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
899
                            </div>
900
                          </div>
901
                        </div>
902
903
                      </div>
904
                    </div>
905
906 58946 stefania.m
                    <div class="greenIndicator uk-margin-large-top">
907
                      <h3 class="uk-margin-remove">Green</h3>
908 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
909
910
                        <div class="uk-grid-margin">
911
                          <div class="md-card chartCard">
912
                            <div class="md-card-content">
913
                              <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
914
                            </div>
915
                          </div>
916
                        </div>
917
918
                        <div class="uk-grid-margin">
919
                          <div class="md-card chartCard">
920
                            <div class="md-card-content">
921
                              <iframe *ngIf="greenPublicationsByDatasourceChartURL" width="100%" height="550" [src]="greenPublicationsByDatasourceChartURL"></iframe>
922
                            </div>
923
                          </div>
924
                        </div>
925
926
                        <div class="uk-grid-margin">
927
                          <div class="md-card chartCard">
928
                            <div class="md-card-content">
929
                              <iframe *ngIf="greenPublicationsByOrganizationChartURL" width="100%" height="550" [src]="greenPublicationsByOrganizationChartURL"></iframe>
930
                            </div>
931
                          </div>
932
                        </div>
933
934
                        <div class="uk-grid-margin">
935
                          <div class="md-card chartCard">
936
                            <div class="md-card-content">
937
                              <app-treemap-highchart *ngIf="greenPublicationsByFunderData" [chartTitle]="'Green OA publications by funder'"
938
                                                     [chartData]="greenPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
939
                            </div>
940
                          </div>
941
                        </div>
942
943
                      </div>
944
                    </div>
945
946 58946 stefania.m
                    <div class="greenVsGoldIndicator uk-margin-large-top">
947
                      <h3 class="uk-margin-remove">Green vs. Gold</h3>
948 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
949
950
                        <div class="uk-grid-margin">
951
                          <div class="md-card chartCard">
952
                            <div class="md-card-content">
953
                              <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
954
                            </div>
955
                          </div>
956
                        </div>
957
958
                      </div>
959
                    </div>
960
961 58912 stefania.m
                  </div>
962 58939 stefania.m
963 58912 stefania.m
                </li>
964
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
965 58939 stefania.m
966 58912 stefania.m
                  <div>
967 58939 stefania.m
968
                    <div class="pidIndicator">
969 58946 stefania.m
                      <h3 class="uk-margin-remove">PID</h3>
970 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
971
972
                        <div class="uk-grid-margin">
973
                          <div class="md-card chartCard">
974
                            <div class="md-card-content">
975
                              <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
976
                            </div>
977
                          </div>
978
                        </div>
979
980
                        <div class="uk-grid-margin">
981
                          <div class="md-card chartCard">
982
                            <div class="md-card-content">
983
                              <iframe *ngIf="datasetsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
984
                            </div>
985
                          </div>
986
                        </div>
987
988
                        <div class="uk-grid-margin">
989
                          <div class="md-card chartCard">
990
                            <div class="md-card-content">
991
                              <iframe *ngIf="datasetsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
992
                            </div>
993
                          </div>
994
                        </div>
995
996
                        <div class="uk-grid-margin">
997
                          <div class="md-card chartCard">
998
                            <div class="md-card-content">
999
                              <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData" [chartTitle]="'OA Datasets with PID by funder'"
1000
                                                     [chartData]="datasetsWithPIDByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
1001
                            </div>
1002
                          </div>
1003
                        </div>
1004
1005
                      </div>
1006
                    </div>
1007
1008 58946 stefania.m
                    <div class="licenceIndicator uk-margin-large-top">
1009
                      <h3 class="uk-margin-remove">Licence</h3>
1010 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1011
1012
                        <div class="uk-grid-margin">
1013
                          <div class="md-card chartCard">
1014
                            <div class="md-card-content">
1015
                              <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>
1016
                            </div>
1017
                          </div>
1018
                        </div>
1019
1020
                        <div class="uk-grid-margin">
1021
                          <div class="md-card chartCard">
1022
                            <div class="md-card-content">
1023
                              <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
1024
                            </div>
1025
                          </div>
1026
                        </div>
1027
1028
                        <div class="uk-grid-margin">
1029
                          <div class="md-card chartCard">
1030
                            <div class="md-card-content">
1031
                              <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
1032
                            </div>
1033
                          </div>
1034
                        </div>
1035
1036
                        <div class="uk-grid-margin">
1037
                          <div class="md-card chartCard">
1038
                            <div class="md-card-content">
1039
                              <app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData" [chartTitle]="'OA Datasets with licence by funder'"
1040
                                                     [chartData]="datasetsWithLicenceByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
1041
                            </div>
1042
                          </div>
1043
                        </div>
1044
1045
                      </div>
1046
                    </div>
1047
1048 58912 stefania.m
                  </div>
1049 58939 stefania.m
1050 58912 stefania.m
                </li>
1051
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1052 58939 stefania.m
1053 58912 stefania.m
                  <div>
1054 58939 stefania.m
1055
                    <div class="pidIndicator">
1056 58946 stefania.m
                      <h3 class="uk-margin-remove">PID</h3>
1057 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1058
1059
                        <div class="uk-grid-margin">
1060
                          <div class="md-card chartCard">
1061
                            <div class="md-card-content">
1062
                              <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
1063
                            </div>
1064
                          </div>
1065
                        </div>
1066
1067
                        <div class="uk-grid-margin">
1068
                          <div class="md-card chartCard">
1069
                            <div class="md-card-content">
1070
                              <iframe *ngIf="softwareWithPIDByDatasourceChartURL" width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
1071
                            </div>
1072
                          </div>
1073
                        </div>
1074
1075
                        <div class="uk-grid-margin">
1076
                          <div class="md-card chartCard">
1077
                            <div class="md-card-content">
1078
                              <iframe *ngIf="softwareWithPIDByOrganizationChartURL" width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
1079
                            </div>
1080
                          </div>
1081
                        </div>
1082
1083
                        <div class="uk-grid-margin">
1084
                          <div class="md-card chartCard">
1085
                            <div class="md-card-content">
1086
                              <app-treemap-highchart *ngIf="softwareWithPIDByFunderData" [chartTitle]="'OS Software with PID by funder'"
1087
                                                     [chartData]="softwareWithPIDByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
1088
                            </div>
1089
                          </div>
1090
                        </div>
1091
1092
                      </div>
1093
                    </div>
1094
1095 58946 stefania.m
                    <div class="licenceIndicator uk-margin-large-top">
1096
                      <h3 class="uk-margin-remove">Licence</h3>
1097 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1098
1099
                        <div class="uk-grid-margin">
1100
                          <div class="md-card chartCard">
1101
                            <div class="md-card-content">
1102
                              <iframe *ngIf="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></iframe>
1103
                            </div>
1104
                          </div>
1105
                        </div>
1106
1107
                        <div class="uk-grid-margin">
1108
                          <div class="md-card chartCard">
1109
                            <div class="md-card-content">
1110
                              <iframe *ngIf="softwareWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
1111
                            </div>
1112
                          </div>
1113
                        </div>
1114
1115
                        <div class="uk-grid-margin">
1116
                          <div class="md-card chartCard">
1117
                            <div class="md-card-content">
1118
                              <iframe *ngIf="softwareWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
1119
                            </div>
1120
                          </div>
1121
                        </div>
1122
1123
                        <div class="uk-grid-margin">
1124
                          <div class="md-card chartCard">
1125
                            <div class="md-card-content">
1126
                              <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData" [chartTitle]="'OS Software with licence by funder'"
1127
                                                     [chartData]="softwareWithLicenceByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
1128
                            </div>
1129
                          </div>
1130
                        </div>
1131
1132
                      </div>
1133
                    </div>
1134
1135 58912 stefania.m
                  </div>
1136 58939 stefania.m
1137 58912 stefania.m
                </li>
1138
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1139 58939 stefania.m
1140 58912 stefania.m
                  <div>
1141 58939 stefania.m
1142
                    <div class="pidIndicator">
1143 58946 stefania.m
                      <h3 class="uk-margin-remove">PID</h3>
1144 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1145
1146
                        <div class="uk-grid-margin">
1147
                          <div class="md-card chartCard">
1148
                            <div class="md-card-content">
1149
                              <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
1150
                            </div>
1151
                          </div>
1152
                        </div>
1153
1154
                        <div class="uk-grid-margin">
1155
                          <div class="md-card chartCard">
1156
                            <div class="md-card-content">
1157
                              <iframe *ngIf="otherWithPIDByDatasourceChartURL" width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
1158
                            </div>
1159
                          </div>
1160
                        </div>
1161
1162
                        <div class="uk-grid-margin">
1163
                          <div class="md-card chartCard">
1164
                            <div class="md-card-content">
1165
                              <iframe *ngIf="otherWithPIDByOrganizationChartURL" width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
1166
                            </div>
1167
                          </div>
1168
                        </div>
1169
1170
                        <div class="uk-grid-margin">
1171
                          <div class="md-card chartCard">
1172
                            <div class="md-card-content">
1173
                              <app-treemap-highchart *ngIf="otherWithPIDByFunderData" [chartTitle]="'OA Other research products with PID by funder'"
1174
                                                     [chartData]="otherWithPIDByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1175
                            </div>
1176
                          </div>
1177
                        </div>
1178
1179
                      </div>
1180
                    </div>
1181
1182 58946 stefania.m
                    <div class="licenceIndicator uk-margin-large-top">
1183
                      <h3 class="uk-margin-remove">Licence</h3>
1184 58939 stefania.m
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1185
1186
                        <div class="uk-grid-margin">
1187
                          <div class="md-card chartCard">
1188
                            <div class="md-card-content">
1189
                              <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>
1190
                            </div>
1191
                          </div>
1192
                        </div>
1193
1194
                        <div class="uk-grid-margin">
1195
                          <div class="md-card chartCard">
1196
                            <div class="md-card-content">
1197
                              <iframe *ngIf="otherWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
1198
                            </div>
1199
                          </div>
1200
                        </div>
1201
1202
                        <div class="uk-grid-margin">
1203
                          <div class="md-card chartCard">
1204
                            <div class="md-card-content">
1205
                              <iframe *ngIf="otherWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
1206
                            </div>
1207
                          </div>
1208
                        </div>
1209
1210
                        <div class="uk-grid-margin">
1211
                          <div class="md-card chartCard">
1212
                            <div class="md-card-content">
1213
                              <app-treemap-highchart *ngIf="otherWithLicenceByFunderData" [chartTitle]="'OA Other research products with licence by funder'"
1214
                                                     [chartData]="otherWithLicenceByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1215
                            </div>
1216
                          </div>
1217
                        </div>
1218
1219
                      </div>
1220
                    </div>
1221
1222 58912 stefania.m
                  </div>
1223 58939 stefania.m
1224 58912 stefania.m
                </li>
1225
              </ul>
1226
1227 58904 stefania.m
            </div>
1228
          </li>
1229 58912 stefania.m
1230 58904 stefania.m
          <li aria-hidden="true">
1231
            <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
1232
            </div>
1233
          </li>
1234 58912 stefania.m
1235 58904 stefania.m
          <li aria-hidden="true">
1236
            <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
1237
            </div>
1238
          </li>
1239 58912 stefania.m
1240 58904 stefania.m
          <li aria-hidden="true">
1241
            <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
1242
            </div>
1243
          </li>
1244
        </ul>
1245
      </div>
1246 58610 stefania.m
1247 57668 stefania.m
    </div>
1248 58904 stefania.m
  </section>
1249 57668 stefania.m
1250 58904 stefania.m
1251
  <!--link to OpenAIRE page-->
1252
  <!--MOBILE & PAD PORTRAIT-->
1253
  <div class="uk-hidden@m">
1254
    <div class="uk-text-center uk-margin-xlarge-top uk-margin-large-bottom">
1255
1256
      <div class="uk-text-center uk-margin-medium-bottom">
1257
                <span class="openaire-symbol-wrapper">
1258
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
1259
                </span>
1260
      </div>
1261
      <a class="uk-link primary" href="{{linkToCountryInOpenAIRE}}" target="_blank">Country page in <strong>OpenAIRE</strong><i class="fas fa-long-arrow-alt-right uk-margin-left"></i></a>
1262
    </div>
1263 57668 stefania.m
  </div>
1264 58904 stefania.m
1265
</div>