Project

General

Profile

1
<div class="greySection">
2

    
3
  <section class="uk-padding-small" id="sect-continent-page">
4
    <div class="uk-container uk-container-expand uk-margin-medium-top">
5

    
6
      <!--LAPTOP & PAD LANDSCAPE-->
7
      <div class="uk-visible@m">
8
        <ul class="uk-breadcrumb">
9
          <li><a routerLink="/home">Home</a></li>
10
          <li><span>{{continentName | titlecase}}</span></li>
11
        </ul>
12

    
13

    
14
        <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
            <span class="lastUpdateInfo">Info Last Updated: </span>
19
            <span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>
20
          </div>
21
        </div>
22
      </div>
23

    
24
      <!--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
    </div>
36
  </section>
37

    
38

    
39

    
40
  <section class="uk-padding-small uk-margin-top">
41
    <div class="uk-container uk-container-center uk-margin-medium-top">
42

    
43
      <!--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

    
48
          <!--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
              {{europeOverviewData.publications.percentage | number :'1.0-1'}}%
56
            </span>
57
                <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
            </div>
61
          </ng-container>
62
          <ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">
63
            <div class="publicationsColumn uk-padding" style="height: 0%">
64

    
65
            </div>
66
          </ng-container>
67

    
68
          <!--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
              {{europeOverviewData.datasets.percentage | number :'1.0-1'}}%
76
            </span>
77
                <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
            </div>
81
          </ng-container>
82
          <ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">
83
            <div class="datasetsColumn" style="height: 0%">
84

    
85
            </div>
86
          </ng-container>
87

    
88
          <!--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
              {{europeOverviewData.software.percentage | number :'1.0-1'}}%
96
            </span>
97
                <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
            </div>
101
          </ng-container>
102
          <ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">
103
            <div class="softwareColumn" style="height: 0%">
104

    
105
            </div>
106
          </ng-container>
107

    
108
          <!--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
              {{europeOverviewData.other.percentage | number :'1.0-1'}}%
116
            </span>
117
                <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
            </div>
121
          </ng-container>
122
          <ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage">
123
            <div class="otherColumn" style="height: 0%">
124

    
125
            </div>
126
          </ng-container>
127

    
128
        </div>
129

    
130
        <hr class="entitiesDivider">
131

    
132
        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 uk-margin-large-top">
133

    
134
          <div class="entityLegendContent">
135
            <div class="publicationsDot uk-inline"></div>
136
            <div class="uk-inline uk-margin-left">
137
              <span>
138
                <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
              </span>
141
            </div>
142
          </div>
143
          <div class="entityLegendContent">
144
            <div class="datasetsDot"></div>
145
            <div class="uk-inline uk-margin-left">
146
              <span>
147
                <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
              </span>
150
            </div>
151
          </div>
152
          <div class="entityLegendContent">
153
            <div class="softwareDot"></div>
154
            <div class="uk-inline uk-margin-left">
155
              <span>
156
                <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
              </span>
159
            </div>
160
          </div>
161
          <div class="entityLegendContent">
162
            <div class="otherDot"></div>
163
            <div class="uk-inline uk-margin-left">
164
              <span>
165
                <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
              </span>
168
            </div>
169
          </div>
170

    
171
        </div>
172
      </div>
173

    
174
      <!--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

    
178
        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">
179

    
180
          <!--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
        </div>
237
        <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
          </div>
257

    
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
          </div>
275

    
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
          </div>
293

    
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
        </div>
314
      </div>
315

    
316

    
317
    </div>
318
  </section>
319

    
320
  <!--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

    
324
      <div class="">
325

    
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
          <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
          <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

    
336
        <!--MOBILE & PAD PORTRAIT-->
337
        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
338
          <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
          <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
          <!--OVERVIEW tab-->
349
          <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
350
            <div class="uk-margin tabContent">
351

    
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
                      <iframe width="100%" height="550" [src]="publicationsByTypeChartURL"></iframe>
358
                    </div>
359
                  </div>
360
                </div>
361

    
362
              </div>
363

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

    
366
                <div class="uk-grid-margin">
367
                  <div class="md-card chartCard">
368
                    <div class="md-card-content">
369
                      <iframe width="100%" height="550" [src]="publicationsByCountryChartURL"></iframe>
370
                    </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
                      <iframe width="100%" height="550" [src]="publicationsByDatasourceChartURL"></iframe>
378
                    </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
                      <iframe width="100%" height="550" [src]="publicationsByOrganizationChartURL"></iframe>
386
                    </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
                      <iframe width="100%" height="550" [src]="datasetsByCountryChartURL"></iframe>
394
                    </div>
395
                  </div>
396
                </div>
397

    
398
                <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

    
406
                <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
              </div>
463

    
464
              <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
465

    
466
                <div class="uk-grid-margin">
467
                  <div class="md-card chartCard">
468
                    <div class="md-card-content">
469
                      <app-treemap-highchart *ngIf="publicationsByFunderData" [chartTitle]="'OA Publications by funder'"
470
                                             [chartData]="publicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
471
                    </div>
472
                  </div>
473
                </div>
474

    
475
                <div class="uk-grid-margin">
476
                  <div class="md-card chartCard">
477
                    <div class="md-card-content">
478
                      <app-treemap-highchart *ngIf="datasetsByFunderData" [chartTitle]="'OA Datasets by funder'"
479
                                             [chartData]="datasetsByFunderData" [color]="datasetColor"></app-treemap-highchart>
480
                    </div>
481
                  </div>
482
                </div>
483

    
484
                <div class="uk-grid-margin">
485
                  <div class="md-card chartCard">
486
                    <div class="md-card-content">
487
                      <app-treemap-highchart *ngIf="softwareByFunderData" [chartTitle]="'OS Software by funder'"
488
                                             [chartData]="softwareByFunderData" [color]="softwareColor"></app-treemap-highchart>
489
                    </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
                      <app-treemap-highchart *ngIf="otherByFunderData" [chartTitle]="'OA Other research products by funder'"
497
                                             [chartData]="otherByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
498
                    </div>
499
                  </div>
500
                </div>
501

    
502

    
503
              </div>
504

    
505

    
506
              <!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
507
            </div>
508
          </li>
509

    
510
          <!--OPEN SCIENCE tab-->
511
          <li aria-hidden="true" style="animation-duration: 200ms;">
512
            <div class="uk-margin tabContent">
513

    
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
                  <a class="publicationsSubnav" (click)="changeInnerView('publications')" uk-tooltip="title: Publication; duration: 2000">
518
                    <img src="../../../assets/img/icons/publications-icon.svg" width="15">
519
                  </a>
520
                </li>
521
                <li aria-expanded="false" class="">
522
                  <a class="datasetsSubnav" (click)="changeInnerView('datasets')" uk-tooltip="title: Datasets; duration: 2000">
523
                    <img src="../../../assets/img/icons/datasets-icon.svg" width="15">
524
                  </a>
525
                </li>
526
                <li aria-expanded="false" class="">
527
                  <a class="softwareSubnav" (click)="changeInnerView('software')" uk-tooltip="title: Software; duration: 2000">
528
                    <img src="../../../assets/img/icons/software-icon.svg" width="15">
529
                  </a>
530
                </li>
531
                <li aria-expanded="false" class="">
532
                  <a class="otherSubnav" (click)="changeInnerView('other')" uk-tooltip="title: Other research products; duration: 2000">
533
                    <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

    
543
                  <div>
544

    
545
                    <div class="pidIndicator">
546
                      <h3 class="uk-margin-remove">PID</h3>
547
                      <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
                                                     [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
586
                            </div>
587
                          </div>
588
                        </div>
589

    
590
                      </div>
591
                    </div>
592

    
593
                    <div class="licenceIndicator uk-margin-large-top">
594
                      <h3 class="uk-margin-remove">Licence</h3>
595
                      <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
                                                     [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
634
                            </div>
635
                          </div>
636
                        </div>
637

    
638
                      </div>
639
                    </div>
640

    
641
                    <div class="goldIndicator uk-margin-large-top">
642
                      <h3 class="uk-margin-remove">Gold</h3>
643
                      <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
                                                     [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
682
                            </div>
683
                          </div>
684
                        </div>
685

    
686
                      </div>
687
                    </div>
688

    
689
                    <div class="greenIndicator uk-margin-large-top">
690
                      <h3 class="uk-margin-remove">Green</h3>
691
                      <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
                                                     [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
730
                            </div>
731
                          </div>
732
                        </div>
733

    
734
                      </div>
735
                    </div>
736

    
737
                    <div class="greenVsGoldIndicator uk-margin-large-top">
738
                      <h3 class="uk-margin-remove">Green vs. Gold</h3>
739
                      <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
                    <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
                        <select class="md-input" #selectPublicationsContent (change)="getContent('publication', selectPublicationsContent.value)" style="width: 230px; display: inline-block">
759
                          <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
                                  <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
788
                                  <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
                                  <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
792
                                  <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
                  </div>
807

    
808
                </li>
809
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
810

    
811
                  <div>
812

    
813
                    <div class="pidIndicator">
814
                      <h3 class="uk-margin-remove">PID</h3>
815
                      <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
                                                     [chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
854
                            </div>
855
                          </div>
856
                        </div>
857

    
858
                      </div>
859
                    </div>
860

    
861
                    <div class="licenceIndicator uk-margin-large-top">
862
                      <h3 class="uk-margin-remove">Licence</h3>
863
                      <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
                                                     [chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
902
                            </div>
903
                          </div>
904
                        </div>
905

    
906
                      </div>
907
                    </div>
908

    
909
                    <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
                        <select class="md-input" #selectDatasetsContent (change)="getContent('dataset', selectDatasetsContent.value)" style="width: 230px; display: inline-block">
916
                          <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
                                  <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
945
                                  <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
                                  <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
949
                                  <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
                  </div>
964

    
965
                </li>
966
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
967

    
968
                  <div>
969

    
970
                    <div class="pidIndicator">
971
                      <h3 class="uk-margin-remove">PID</h3>
972
                      <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
                                                     [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
1011
                            </div>
1012
                          </div>
1013
                        </div>
1014

    
1015
                      </div>
1016
                    </div>
1017

    
1018
                    <div class="licenceIndicator uk-margin-large-top">
1019
                      <h3 class="uk-margin-remove">Licence</h3>
1020
                      <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
                                                     [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
1059
                            </div>
1060
                          </div>
1061
                        </div>
1062

    
1063
                      </div>
1064
                    </div>
1065

    
1066
                    <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
                        <select class="md-input" #selectSoftwareContent (change)="getContent('software', selectSoftwareContent.value)" style="width: 230px; display: inline-block">
1073
                          <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
                                  <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
1102
                                  <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
                                  <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
1106
                                  <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
                  </div>
1121

    
1122
                </li>
1123
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1124

    
1125
                  <div>
1126

    
1127
                    <div class="pidIndicator">
1128
                      <h3 class="uk-margin-remove">PID</h3>
1129
                      <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
                                                     [chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
1168
                            </div>
1169
                          </div>
1170
                        </div>
1171

    
1172
                      </div>
1173
                    </div>
1174

    
1175
                    <div class="licenceIndicator uk-margin-large-top">
1176
                      <h3 class="uk-margin-remove">Licence</h3>
1177
                      <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
                                                     [chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
1216
                            </div>
1217
                          </div>
1218
                        </div>
1219

    
1220
                      </div>
1221
                    </div>
1222

    
1223
                    <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
                        <select class="md-input" #selectOtherContent (change)="getContent('other', selectOtherContent.value)" style="width: 230px; display: inline-block">
1230
                          <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
                                  <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
1259
                                  <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
                                  <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
1263
                                  <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
                  </div>
1278

    
1279
                </li>
1280
              </ul>
1281

    
1282

    
1283
            </div>
1284
          </li>
1285

    
1286
          <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

    
1291
          <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

    
1296
          <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

    
1309

    
(1-1/2)