Project

General

Profile

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