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 58958 stefania.m
                // TODO uncomment when implemented
31
                <!--<div class="actionButtonsCountryPage uk-text-right">-->
32
                  <!--<a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>-->
33
                  <!--&lt;!&ndash;<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>&ndash;&gt;-->
34
                  <!--<a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>-->
35
                <!--</div>-->
36 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
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.repositories || !countryPageOverviewData.repositories.oa" class="number">--</span>
173
                            <span *ngIf="countryPageOverviewData?.repositories?.oa" class="number">{{countryPageOverviewData.repositories.oa | number}}</span>
174
                          </h3>
175
                        </div>
176
                        <div class="uk-margin-top">
177
                          <span class=""><i>repositories</i> from openDOAR & re3data</span>
178
                        </div>
179
                        <div *ngIf="countryPageOverviewData?.repositories?.percentage" class="uk-margin-top">
180
                          <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> Validated
181
                          <div class="progress uk-margin-small-top">
182
                            <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
183
                          </div>
184
                        </div>
185 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
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.journals || !countryPageOverviewData.journals.oa" class="number">--</span>
196
                            <span *ngIf="countryPageOverviewData?.journals?.oa" class="number">{{countryPageOverviewData.journals.oa | number}}</span>
197
                            <!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
198
                            <!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
199
                          </h3>
200
                        </div>
201
                        <div class="uk-margin-top">
202
                          <span class=""><i>OA journals</i> from DOAJ</span>
203
                        </div>
204
                        <div *ngIf="countryPageOverviewData?.journals?.percentage" class="uk-margin-top">
205
                          <span class="number">{{countryPageOverviewData.journals.percentage | number :'1.0-1'}}%</span> Validated
206
                          <div class="progress uk-margin-small-top">
207
                            <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
208
                          </div>
209
                        </div>
210
                      </div>
211 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
                  <span class="number primary">--</span>
397
                  <span><i>R&D expenditure</i></span>
398 57746 stefania.m
                </div>
399 58904 stefania.m
400
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
401
402
                <div class="indicator">
403
                  <span class="number primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</span>
404
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</span>
405
                  <span><i>funding sources</i></span>
406 57748 stefania.m
                </div>
407 58904 stefania.m
408
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
409
410
                <div class="indicator">
411
                  <span class="number primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</span>
412
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</span>
413
                  <span><i>funding organizations</i></span>
414 57893 stefania.m
                </div>
415 58904 stefania.m
416
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
417
418
                <div class="indicator">
419
                  <span class="number primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</span>
420
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</span>
421
                  <span><i>organizations funded by the European commission since 2013</i></span>
422 57893 stefania.m
                </div>
423 58904 stefania.m
424 57893 stefania.m
              </div>
425 57668 stefania.m
426 58904 stefania.m
427
              <div class="uk-text-center uk-margin-xlarge-top">
428
429
                <div class="uk-text-center uk-margin-medium-bottom">
430
                <span class="openaire-symbol-wrapper">
431
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
432
                </span>
433 57746 stefania.m
                </div>
434 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>
435 57746 stefania.m
              </div>
436 58904 stefania.m
437 57746 stefania.m
            </div>
438
          </div>
439
        </div>
440
441 58904 stefania.m
        <!--Research Overview-->
442
        <!--MOBILE & PAD PORTRAIT-->
443
        <div class="uk-hidden@m uk-width-1-1@s uk-margin-medium-top">
444
          <div class="uk-container uk-container-expand">
445
            <div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
446
              <div class="md-card-content">
447
                <div class="numbers">
448
449
                  <div class="">
450
                    <div class="number big primary">--</div>
451
                    <div class="uk-margin-small-top">R&D EXPENDITURE</div>
452 57746 stefania.m
                  </div>
453
454 58904 stefania.m
                  <div class="uk-margin-medium-top">
455
                    <div class="number big primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</div>
456
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</div>
457
                    <div class="uk-margin-small-top">FUNDING SOURCES</div>
458 57746 stefania.m
                  </div>
459 58904 stefania.m
460
                  <div class="uk-margin-medium-top">
461
                    <div class="number big primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</div>
462
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</div>
463
                    <div class="uk-margin-small-top">FUNDING ORGANIZATIONS</div>
464 57746 stefania.m
                  </div>
465 58904 stefania.m
466
                  <div class=" uk-margin-medium-top">
467
                    <div class="number big primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</div>
468
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</div>
469
                    <div class="uk-margin-small-top">ORGANIZATIONS FUNDED BY THE EUROPEAN COMMISSION SINCE 2013</div>
470 57746 stefania.m
                  </div>
471 58904 stefania.m
472 57746 stefania.m
                </div>
473
              </div>
474
            </div>
475
          </div>
476
        </div>
477 57668 stefania.m
478
479 58904 stefania.m
      </div>
480 57668 stefania.m
481 58904 stefania.m
    </div>
482
  </section>
483 58610 stefania.m
484 58904 stefania.m
  <!--TABS SECTION-->
485
  <section class="section uk-margin-large-top" id="sect-tabs">
486
    <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}">
487 58610 stefania.m
488 58904 stefania.m
      <div class="">
489 58610 stefania.m
490 58904 stefania.m
        <!--LAPTOP & PAD LANDSCAPE-->
491
        <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
492 58923 stefania.m
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
493
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
494 58904 stefania.m
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
495
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
496
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
497
          <!--<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>-->
498
        </ul>
499 58610 stefania.m
500 58904 stefania.m
        <!--MOBILE & PAD PORTRAIT-->
501
        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
502 58923 stefania.m
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
503
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
504 58904 stefania.m
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
505
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
506
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
507
          <!--<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>-->
508
        </ul>
509 58610 stefania.m
510 58904 stefania.m
        <ul id="team_tabbed" class="uk-switcher dataContainer">
511 58610 stefania.m
512 58904 stefania.m
          <!--OVERVIEW tab-->
513
          <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
514
            <div class="uk-margin tabContent">
515 58610 stefania.m
516 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">
517 58610 stefania.m
518 58923 stefania.m
                <div>
519
                  <div class="md-card">
520
                    <div class="md-card-content">
521 58947 stefania.m
                      <svg viewBox="0 0 36 36" class="circular-chart publications">
522 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>
523 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>
524
                        <text *ngIf="countryPageOAData.publicationsAffiliated?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.publicationsAffiliated.percentage | number : '1.0-1'}}%</text>
525
                        <text *ngIf="!countryPageOAData.publicationsAffiliated || !countryPageOAData.publicationsAffiliated.percentage" x="18" y="20.35" class="percentage">0%</text>
526 58923 stefania.m
                      </svg>
527
                      <div class="uk-margin-small-top uk-text-center">OA publications</div>
528
                    </div>
529
                  </div>
530
                </div>
531 58610 stefania.m
532 58923 stefania.m
                <div>
533
                  <div class="md-card">
534
                    <div class="md-card-content">
535 58947 stefania.m
                      <svg viewBox="0 0 36 36" class="circular-chart datasets">
536 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>
537 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>
538
                        <text *ngIf="countryPageOAData.datasetsAffiliated?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.datasetsAffiliated.percentage | number : '1.0-1'}}%</text>
539
                        <text *ngIf="!countryPageOAData.datasetsAffiliated || !countryPageOAData.datasetsAffiliated.percentage" x="18" y="20.35" class="percentage">0%</text>
540 58923 stefania.m
                      </svg>
541
                      <div class="uk-margin-small-top uk-text-center">OA datasets</div>
542
                    </div>
543
                  </div>
544
                </div>
545 57732 stefania.m
546 58923 stefania.m
                <div>
547
                  <div class="md-card">
548
                    <div class="md-card-content">
549 58947 stefania.m
                      <svg viewBox="0 0 36 36" class="circular-chart software">
550 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>
551 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>
552
                        <text *ngIf="countryPageOAData.software?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.software.percentage | number : '1.0-1'}}%</text>
553
                        <text *ngIf="!countryPageOAData.software || !countryPageOAData.software.percentage" x="18" y="20.35" class="percentage">0%</text>
554 58923 stefania.m
                      </svg>
555
                      <div class="uk-margin-small-top uk-text-center">OS software</div>
556
                    </div>
557
                  </div>
558
                </div>
559 57732 stefania.m
560 58923 stefania.m
                <div>
561
                  <div class="md-card">
562
                    <div class="md-card-content">
563 58947 stefania.m
                      <svg viewBox="0 0 36 36" class="circular-chart other">
564 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>
565 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>
566
                        <text *ngIf="countryPageOAData.other?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.other.percentage | number : '1.0-1'}}%</text>
567
                        <text *ngIf="!countryPageOAData.other || !countryPageOAData.other.percentage" x="18" y="20.35" class="percentage">0%</text>
568 58923 stefania.m
                      </svg>
569
                      <div class="uk-margin-small-top uk-text-center">OA other research products</div>
570
                    </div>
571
                  </div>
572
                </div>
573 57732 stefania.m
574 58923 stefania.m
              </div>
575 58610 stefania.m
576 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">
577 57668 stefania.m
578 58923 stefania.m
                <div class="uk-grid-margin">
579
                  <div class="md-card chartCard">
580
                    <div class="md-card-content">
581
                      <iframe *ngIf="oaNonOAPublicationsTimelineChartURL" width="100%" height="350" [src]="oaNonOAPublicationsTimelineChartURL"></iframe>
582
                    </div>
583
                  </div>
584
                </div>
585 57668 stefania.m
586 58923 stefania.m
                <div class="uk-grid-margin">
587
                  <div class="md-card chartCard">
588
                    <div class="md-card-content">
589
                      <iframe *ngIf="oaNonOADatasetsTimelineChartURL" width="100%" height="350" [src]="oaNonOADatasetsTimelineChartURL"></iframe>
590
                    </div>
591
                  </div>
592
                </div>
593 58904 stefania.m
594 58923 stefania.m
                <div class="uk-grid-margin">
595
                  <div class="md-card chartCard">
596
                    <div class="md-card-content">
597
                      <iframe *ngIf="oaNonOASoftwareTimelineChartURL" width="100%" height="350" [src]="oaNonOASoftwareTimelineChartURL"></iframe>
598
                    </div>
599
                  </div>
600
                </div>
601 58904 stefania.m
602 58923 stefania.m
                <div class="uk-grid-margin">
603
                  <div class="md-card chartCard">
604
                    <div class="md-card-content">
605
                      <iframe *ngIf="oaNonOAOtherTimelineChartURL" width="100%" height="350" [src]="oaNonOAOtherTimelineChartURL"></iframe>
606
                    </div>
607
                  </div>
608
                </div>
609 58610 stefania.m
610
611 58923 stefania.m
              </div>
612 58610 stefania.m
613 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">
614
615
                <div class="uk-grid-margin">
616
                  <div class="md-card chartCard">
617
                    <div class="md-card-content">
618
                      <iframe *ngIf="publicationsByDatasourceChartURL" width="100%" height="550" [src]="publicationsByDatasourceChartURL"></iframe>
619
                    </div>
620
                  </div>
621
                </div>
622
623
                <div class="uk-grid-margin">
624
                  <div class="md-card chartCard">
625
                    <div class="md-card-content">
626
                      <iframe *ngIf="publicationsByOrganizationChartURL" width="100%" height="550" [src]="publicationsByOrganizationChartURL"></iframe>
627
                    </div>
628
                  </div>
629
                </div>
630
631
                <div class="uk-grid-margin">
632
                  <div class="md-card chartCard">
633
                    <div class="md-card-content">
634
                      <app-treemap-highchart *ngIf="publicationsByFunderData" [chartTitle]="'OA Publications by funder'"
635
                                             [chartData]="publicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
636
                    </div>
637
                  </div>
638
                </div>
639
640
                <div class="uk-grid-margin">
641
                  <div class="md-card chartCard">
642
                    <div class="md-card-content">
643
                      <iframe *ngIf="datasetsByDatasourceChartURL" width="100%" height="550" [src]="datasetsByDatasourceChartURL"></iframe>
644
                    </div>
645
                  </div>
646
                </div>
647
648
                <div class="uk-grid-margin">
649
                  <div class="md-card chartCard">
650
                    <div class="md-card-content">
651
                      <iframe *ngIf="datasetsByOrganizationChartURL" width="100%" height="550" [src]="datasetsByOrganizationChartURL"></iframe>
652
                    </div>
653
                  </div>
654
                </div>
655
656
                <div class="uk-grid-margin">
657
                  <div class="md-card chartCard">
658
                    <div class="md-card-content">
659
                      <app-treemap-highchart *ngIf="datasetsByFunderData" [chartTitle]="'OA Datasets by funder'"
660
                                             [chartData]="datasetsByFunderData" [color]="'#BB9CE6'"></app-treemap-highchart>
661
                    </div>
662
                  </div>
663
                </div>
664
665
                <div class="uk-grid-margin">
666
                  <div class="md-card chartCard">
667
                    <div class="md-card-content">
668
                      <iframe *ngIf="softwareByDatasourceChartURL" width="100%" height="550" [src]="softwareByDatasourceChartURL"></iframe>
669
                    </div>
670
                  </div>
671
                </div>
672
673
                <div class="uk-grid-margin">
674
                  <div class="md-card chartCard">
675
                    <div class="md-card-content">
676
                      <iframe *ngIf="softwareByOrganizationChartURL" width="100%" height="550" [src]="softwareByOrganizationChartURL"></iframe>
677
                    </div>
678
                  </div>
679
                </div>
680
681
                <div class="uk-grid-margin">
682
                  <div class="md-card chartCard">
683
                    <div class="md-card-content">
684
                      <app-treemap-highchart *ngIf="softwareByFunderData" [chartTitle]="'OS Software by funder'"
685
                                             [chartData]="softwareByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
686
                    </div>
687
                  </div>
688
                </div>
689
690
                <div class="uk-grid-margin">
691
                  <div class="md-card chartCard">
692
                    <div class="md-card-content">
693
                      <iframe *ngIf="otherByDatasourceChartURL" width="100%" height="550" [src]="otherByDatasourceChartURL"></iframe>
694
                    </div>
695
                  </div>
696
                </div>
697
698
                <div class="uk-grid-margin">
699
                  <div class="md-card chartCard">
700
                    <div class="md-card-content">
701
                      <iframe *ngIf="otherByOrganizationChartURL" width="100%" height="550" [src]="otherByOrganizationChartURL"></iframe>
702
                    </div>
703
                  </div>
704
                </div>
705
706
                <div class="uk-grid-margin">
707
                  <div class="md-card chartCard">
708
                    <div class="md-card-content">
709
                      <app-treemap-highchart *ngIf="otherByFunderData" [chartTitle]="'OA Other research products by funder'"
710
                                             [chartData]="otherByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
711
                    </div>
712
                  </div>
713
                </div>
714
715
              </div>
716
717
              <div class="uk-grid uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@s">
718
719
                <div class="uk-grid-margin">
720
                  <div class="md-card chartCard">
721
                    <div class="md-card-content">
722
                      <iframe *ngIf="resultsByTypeOANonOAChartURL" width="100%" height="550" [src]="resultsByTypeOANonOAChartURL"></iframe>
723
                    </div>
724
                  </div>
725
                </div>
726
727
              </div>
728
729 58904 stefania.m
            </div>
730
          </li>
731 58912 stefania.m
732 58904 stefania.m
          <!--OPEN SCIENCE tab-->
733
          <li aria-hidden="true" style="animation-duration: 200ms;">
734
            <div class="uk-margin tabContent">
735 58912 stefania.m
736
              <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
737
                <li aria-expanded="true" class="uk-active">
738 58923 stefania.m
                  <a class="publicationsSubnav" (click)="changeInnerView('publications')" uk-tooltip="title: Publication; duration: 2000">
739 58912 stefania.m
                    <img src="../../../assets/img/icons/publications-icon.svg" width="15">
740
                  </a>
741
                </li>
742
                <li aria-expanded="false" class="">
743 58923 stefania.m
                  <a class="datasetsSubnav" (click)="changeInnerView('datasets')" uk-tooltip="title: Datasets; duration: 2000">
744 58912 stefania.m
                    <img src="../../../assets/img/icons/datasets-icon.svg" width="15">
745
                  </a>
746
                </li>
747
                <li aria-expanded="false" class="">
748 58923 stefania.m
                  <a class="softwareSubnav" (click)="changeInnerView('software')" uk-tooltip="title: Software; duration: 2000">
749 58912 stefania.m
                    <img src="../../../assets/img/icons/software-icon.svg" width="15">
750
                  </a>
751
                </li>
752
                <li aria-expanded="false" class="">
753 58923 stefania.m
                  <a class="otherSubnav" (click)="changeInnerView('other')" uk-tooltip="title: Other research products; duration: 2000">
754 58912 stefania.m
                    <img src="../../../assets/img/icons/other-icon.svg" width="15">
755
                  </a>
756
                </li>
757
              </ul>
758
759
              <hr class="uk-visible@m">
760
761
              <ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
762
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
763 58939 stefania.m
764 58912 stefania.m
                  <div>
765 58939 stefania.m
766
                    <div class="pidIndicator">
767 58946 stefania.m
                      <h3 class="uk-margin-remove">PID</h3>
768 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">
769
770
                        <div class="uk-grid-margin">
771
                          <div class="md-card chartCard">
772
                            <div class="md-card-content">
773
                              <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
774
                            </div>
775
                          </div>
776
                        </div>
777
778
                        <div class="uk-grid-margin">
779
                          <div class="md-card chartCard">
780
                            <div class="md-card-content">
781
                              <iframe *ngIf="publicationsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
782
                            </div>
783
                          </div>
784
                        </div>
785
786
                        <div class="uk-grid-margin">
787
                          <div class="md-card chartCard">
788
                            <div class="md-card-content">
789
                              <iframe *ngIf="publicationsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
790
                            </div>
791
                          </div>
792
                        </div>
793
794
                        <div class="uk-grid-margin">
795
                          <div class="md-card chartCard">
796
                            <div class="md-card-content">
797
                              <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData" [chartTitle]="'OA Publications with PID by funder'"
798
                                                     [chartData]="publicationsWithPIDByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
799
                            </div>
800
                          </div>
801
                        </div>
802
803
                      </div>
804
                    </div>
805
806 58946 stefania.m
                    <div class="licenceIndicator uk-margin-large-top">
807
                      <h3 class="uk-margin-remove">Licence</h3>
808 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">
809
810
                        <div class="uk-grid-margin">
811
                          <div class="md-card chartCard">
812
                            <div class="md-card-content">
813
                              <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
814
                            </div>
815
                          </div>
816
                        </div>
817
818
                        <div class="uk-grid-margin">
819
                          <div class="md-card chartCard">
820
                            <div class="md-card-content">
821
                              <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
822
                            </div>
823
                          </div>
824
                        </div>
825
826
                        <div class="uk-grid-margin">
827
                          <div class="md-card chartCard">
828
                            <div class="md-card-content">
829
                              <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
830
                            </div>
831
                          </div>
832
                        </div>
833
834
                        <div class="uk-grid-margin">
835
                          <div class="md-card chartCard">
836
                            <div class="md-card-content">
837
                              <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData" [chartTitle]="'OA Publications with licence by funder'"
838
                                                     [chartData]="publicationsWithLicenceByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
839
                            </div>
840
                          </div>
841
                        </div>
842
843
                      </div>
844
                    </div>
845
846 58946 stefania.m
                    <div class="goldIndicator uk-margin-large-top">
847
                      <h3 class="uk-margin-remove">Gold</h3>
848 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">
849
850
                        <div class="uk-grid-margin">
851
                          <div class="md-card chartCard">
852
                            <div class="md-card-content">
853
                              <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
854
                            </div>
855
                          </div>
856
                        </div>
857
858
                        <div class="uk-grid-margin">
859
                          <div class="md-card chartCard">
860
                            <div class="md-card-content">
861
                              <iframe *ngIf="goldPublicationsByDatasourceChartURL" width="100%" height="550" [src]="goldPublicationsByDatasourceChartURL"></iframe>
862
                            </div>
863
                          </div>
864
                        </div>
865
866
                        <div class="uk-grid-margin">
867
                          <div class="md-card chartCard">
868
                            <div class="md-card-content">
869
                              <iframe *ngIf="goldPublicationsByOrganizationChartURL" width="100%" height="550" [src]="goldPublicationsByOrganizationChartURL"></iframe>
870
                            </div>
871
                          </div>
872
                        </div>
873
874
                        <div class="uk-grid-margin">
875
                          <div class="md-card chartCard">
876
                            <div class="md-card-content">
877
                              <app-treemap-highchart *ngIf="goldPublicationsByFunderData" [chartTitle]="'Gold OA publications by funder'"
878
                                                     [chartData]="goldPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
879
                            </div>
880
                          </div>
881
                        </div>
882
883
                      </div>
884
                    </div>
885
886 58946 stefania.m
                    <div class="greenIndicator uk-margin-large-top">
887
                      <h3 class="uk-margin-remove">Green</h3>
888 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">
889
890
                        <div class="uk-grid-margin">
891
                          <div class="md-card chartCard">
892
                            <div class="md-card-content">
893
                              <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
894
                            </div>
895
                          </div>
896
                        </div>
897
898
                        <div class="uk-grid-margin">
899
                          <div class="md-card chartCard">
900
                            <div class="md-card-content">
901
                              <iframe *ngIf="greenPublicationsByDatasourceChartURL" width="100%" height="550" [src]="greenPublicationsByDatasourceChartURL"></iframe>
902
                            </div>
903
                          </div>
904
                        </div>
905
906
                        <div class="uk-grid-margin">
907
                          <div class="md-card chartCard">
908
                            <div class="md-card-content">
909
                              <iframe *ngIf="greenPublicationsByOrganizationChartURL" width="100%" height="550" [src]="greenPublicationsByOrganizationChartURL"></iframe>
910
                            </div>
911
                          </div>
912
                        </div>
913
914
                        <div class="uk-grid-margin">
915
                          <div class="md-card chartCard">
916
                            <div class="md-card-content">
917
                              <app-treemap-highchart *ngIf="greenPublicationsByFunderData" [chartTitle]="'Green OA publications by funder'"
918
                                                     [chartData]="greenPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
919
                            </div>
920
                          </div>
921
                        </div>
922
923
                      </div>
924
                    </div>
925
926 58946 stefania.m
                    <div class="greenVsGoldIndicator uk-margin-large-top">
927
                      <h3 class="uk-margin-remove">Green vs. Gold</h3>
928 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">
929
930
                        <div class="uk-grid-margin">
931
                          <div class="md-card chartCard">
932
                            <div class="md-card-content">
933
                              <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
934
                            </div>
935
                          </div>
936
                        </div>
937
938
                      </div>
939
                    </div>
940
941 58912 stefania.m
                  </div>
942 58939 stefania.m
943 58912 stefania.m
                </li>
944
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
945 58939 stefania.m
946 58912 stefania.m
                  <div>
947 58939 stefania.m
948
                    <div class="pidIndicator">
949 58946 stefania.m
                      <h3 class="uk-margin-remove">PID</h3>
950 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">
951
952
                        <div class="uk-grid-margin">
953
                          <div class="md-card chartCard">
954
                            <div class="md-card-content">
955
                              <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
956
                            </div>
957
                          </div>
958
                        </div>
959
960
                        <div class="uk-grid-margin">
961
                          <div class="md-card chartCard">
962
                            <div class="md-card-content">
963
                              <iframe *ngIf="datasetsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
964
                            </div>
965
                          </div>
966
                        </div>
967
968
                        <div class="uk-grid-margin">
969
                          <div class="md-card chartCard">
970
                            <div class="md-card-content">
971
                              <iframe *ngIf="datasetsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
972
                            </div>
973
                          </div>
974
                        </div>
975
976
                        <div class="uk-grid-margin">
977
                          <div class="md-card chartCard">
978
                            <div class="md-card-content">
979
                              <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData" [chartTitle]="'OA Datasets with PID by funder'"
980
                                                     [chartData]="datasetsWithPIDByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
981
                            </div>
982
                          </div>
983
                        </div>
984
985
                      </div>
986
                    </div>
987
988 58946 stefania.m
                    <div class="licenceIndicator uk-margin-large-top">
989
                      <h3 class="uk-margin-remove">Licence</h3>
990 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">
991
992
                        <div class="uk-grid-margin">
993
                          <div class="md-card chartCard">
994
                            <div class="md-card-content">
995
                              <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>
996
                            </div>
997
                          </div>
998
                        </div>
999
1000
                        <div class="uk-grid-margin">
1001
                          <div class="md-card chartCard">
1002
                            <div class="md-card-content">
1003
                              <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
1004
                            </div>
1005
                          </div>
1006
                        </div>
1007
1008
                        <div class="uk-grid-margin">
1009
                          <div class="md-card chartCard">
1010
                            <div class="md-card-content">
1011
                              <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
1012
                            </div>
1013
                          </div>
1014
                        </div>
1015
1016
                        <div class="uk-grid-margin">
1017
                          <div class="md-card chartCard">
1018
                            <div class="md-card-content">
1019
                              <app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData" [chartTitle]="'OA Datasets with licence by funder'"
1020
                                                     [chartData]="datasetsWithLicenceByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
1021
                            </div>
1022
                          </div>
1023
                        </div>
1024
1025
                      </div>
1026
                    </div>
1027
1028 58912 stefania.m
                  </div>
1029 58939 stefania.m
1030 58912 stefania.m
                </li>
1031
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1032 58939 stefania.m
1033 58912 stefania.m
                  <div>
1034 58939 stefania.m
1035
                    <div class="pidIndicator">
1036 58946 stefania.m
                      <h3 class="uk-margin-remove">PID</h3>
1037 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">
1038
1039
                        <div class="uk-grid-margin">
1040
                          <div class="md-card chartCard">
1041
                            <div class="md-card-content">
1042
                              <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
1043
                            </div>
1044
                          </div>
1045
                        </div>
1046
1047
                        <div class="uk-grid-margin">
1048
                          <div class="md-card chartCard">
1049
                            <div class="md-card-content">
1050
                              <iframe *ngIf="softwareWithPIDByDatasourceChartURL" width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
1051
                            </div>
1052
                          </div>
1053
                        </div>
1054
1055
                        <div class="uk-grid-margin">
1056
                          <div class="md-card chartCard">
1057
                            <div class="md-card-content">
1058
                              <iframe *ngIf="softwareWithPIDByOrganizationChartURL" width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
1059
                            </div>
1060
                          </div>
1061
                        </div>
1062
1063
                        <div class="uk-grid-margin">
1064
                          <div class="md-card chartCard">
1065
                            <div class="md-card-content">
1066
                              <app-treemap-highchart *ngIf="softwareWithPIDByFunderData" [chartTitle]="'OS Software with PID by funder'"
1067
                                                     [chartData]="softwareWithPIDByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
1068
                            </div>
1069
                          </div>
1070
                        </div>
1071
1072
                      </div>
1073
                    </div>
1074
1075 58946 stefania.m
                    <div class="licenceIndicator uk-margin-large-top">
1076
                      <h3 class="uk-margin-remove">Licence</h3>
1077 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">
1078
1079
                        <div class="uk-grid-margin">
1080
                          <div class="md-card chartCard">
1081
                            <div class="md-card-content">
1082
                              <iframe *ngIf="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></iframe>
1083
                            </div>
1084
                          </div>
1085
                        </div>
1086
1087
                        <div class="uk-grid-margin">
1088
                          <div class="md-card chartCard">
1089
                            <div class="md-card-content">
1090
                              <iframe *ngIf="softwareWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
1091
                            </div>
1092
                          </div>
1093
                        </div>
1094
1095
                        <div class="uk-grid-margin">
1096
                          <div class="md-card chartCard">
1097
                            <div class="md-card-content">
1098
                              <iframe *ngIf="softwareWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
1099
                            </div>
1100
                          </div>
1101
                        </div>
1102
1103
                        <div class="uk-grid-margin">
1104
                          <div class="md-card chartCard">
1105
                            <div class="md-card-content">
1106
                              <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData" [chartTitle]="'OS Software with licence by funder'"
1107
                                                     [chartData]="softwareWithLicenceByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
1108
                            </div>
1109
                          </div>
1110
                        </div>
1111
1112
                      </div>
1113
                    </div>
1114
1115 58912 stefania.m
                  </div>
1116 58939 stefania.m
1117 58912 stefania.m
                </li>
1118
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1119 58939 stefania.m
1120 58912 stefania.m
                  <div>
1121 58939 stefania.m
1122
                    <div class="pidIndicator">
1123 58946 stefania.m
                      <h3 class="uk-margin-remove">PID</h3>
1124 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">
1125
1126
                        <div class="uk-grid-margin">
1127
                          <div class="md-card chartCard">
1128
                            <div class="md-card-content">
1129
                              <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
1130
                            </div>
1131
                          </div>
1132
                        </div>
1133
1134
                        <div class="uk-grid-margin">
1135
                          <div class="md-card chartCard">
1136
                            <div class="md-card-content">
1137
                              <iframe *ngIf="otherWithPIDByDatasourceChartURL" width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
1138
                            </div>
1139
                          </div>
1140
                        </div>
1141
1142
                        <div class="uk-grid-margin">
1143
                          <div class="md-card chartCard">
1144
                            <div class="md-card-content">
1145
                              <iframe *ngIf="otherWithPIDByOrganizationChartURL" width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
1146
                            </div>
1147
                          </div>
1148
                        </div>
1149
1150
                        <div class="uk-grid-margin">
1151
                          <div class="md-card chartCard">
1152
                            <div class="md-card-content">
1153
                              <app-treemap-highchart *ngIf="otherWithPIDByFunderData" [chartTitle]="'OA Other research products with PID by funder'"
1154
                                                     [chartData]="otherWithPIDByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1155
                            </div>
1156
                          </div>
1157
                        </div>
1158
1159
                      </div>
1160
                    </div>
1161
1162 58946 stefania.m
                    <div class="licenceIndicator uk-margin-large-top">
1163
                      <h3 class="uk-margin-remove">Licence</h3>
1164 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">
1165
1166
                        <div class="uk-grid-margin">
1167
                          <div class="md-card chartCard">
1168
                            <div class="md-card-content">
1169
                              <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>
1170
                            </div>
1171
                          </div>
1172
                        </div>
1173
1174
                        <div class="uk-grid-margin">
1175
                          <div class="md-card chartCard">
1176
                            <div class="md-card-content">
1177
                              <iframe *ngIf="otherWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
1178
                            </div>
1179
                          </div>
1180
                        </div>
1181
1182
                        <div class="uk-grid-margin">
1183
                          <div class="md-card chartCard">
1184
                            <div class="md-card-content">
1185
                              <iframe *ngIf="otherWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
1186
                            </div>
1187
                          </div>
1188
                        </div>
1189
1190
                        <div class="uk-grid-margin">
1191
                          <div class="md-card chartCard">
1192
                            <div class="md-card-content">
1193
                              <app-treemap-highchart *ngIf="otherWithLicenceByFunderData" [chartTitle]="'OA Other research products with licence by funder'"
1194
                                                     [chartData]="otherWithLicenceByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1195
                            </div>
1196
                          </div>
1197
                        </div>
1198
1199
                      </div>
1200
                    </div>
1201
1202 58912 stefania.m
                  </div>
1203 58939 stefania.m
1204 58912 stefania.m
                </li>
1205
              </ul>
1206
1207 58904 stefania.m
            </div>
1208
          </li>
1209 58912 stefania.m
1210 58904 stefania.m
          <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 58912 stefania.m
1215 58904 stefania.m
          <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 58912 stefania.m
1220 58904 stefania.m
          <li aria-hidden="true">
1221
            <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="">
1222
            </div>
1223
          </li>
1224
        </ul>
1225
      </div>
1226 58610 stefania.m
1227 57668 stefania.m
    </div>
1228 58904 stefania.m
  </section>
1229 57668 stefania.m
1230 58904 stefania.m
1231
  <!--link to OpenAIRE page-->
1232
  <!--MOBILE & PAD PORTRAIT-->
1233
  <div class="uk-hidden@m">
1234
    <div class="uk-text-center uk-margin-xlarge-top uk-margin-large-bottom">
1235
1236
      <div class="uk-text-center uk-margin-medium-bottom">
1237
                <span class="openaire-symbol-wrapper">
1238
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
1239
                </span>
1240
      </div>
1241
      <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>
1242
    </div>
1243 57668 stefania.m
  </div>
1244 58904 stefania.m
1245
</div>