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-grid-match 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 uk-flex uk-flex-bottom">
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
                              <div class="uk-margin-small-top uk-margin-medium-bottom uk-flex uk-flex-right uk-flex-middle">
561
                                <label class="uk-margin-right">Filter by: </label>
562
                                <select class="md-input" #selectFilterForPIDContent (change)="getContent('publication', selectPublicationsContent.value)" style="width: 230px; display: inline-block">
563
                                  <option value="country">Country</option>
564
                                  <option value="datasource">Datasource</option>
565
                                  <option value="organization">Organization</option>
566
                                  <option value="funder">Funder</option>
567
                                </select>
568
                                <!--<span class="md-input-bar"></span>-->
569
                              </div>
570
                              <iframe *ngIf="publicationsWithPIDByCountryChartURL" width="100%" height="550" [src]="publicationsWithPIDByCountryChartURL"></iframe>
571
                            </div>
572
                          </div>
573
                        </div>
574

    
575
                        <div class="uk-grid-margin">
576
                          <div class="md-card chartCard">
577
                            <div class="md-card-content">
578
                              <iframe *ngIf="publicationsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
579
                            </div>
580
                          </div>
581
                        </div>
582

    
583
                        <div class="uk-grid-margin">
584
                          <div class="md-card chartCard">
585
                            <div class="md-card-content">
586
                              <iframe *ngIf="publicationsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
587
                            </div>
588
                          </div>
589
                        </div>
590

    
591
                        <div class="uk-grid-margin">
592
                          <div class="md-card chartCard">
593
                            <div class="md-card-content">
594
                              <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData" [chartTitle]="'OA Publications with PID by funder'"
595
                                                     [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
596
                            </div>
597
                          </div>
598
                        </div>
599

    
600
                      </div>
601
                    </div>
602

    
603
                    <div class="licenceIndicator uk-margin-large-top">
604
                      <h3 class="uk-margin-remove">Licence</h3>
605
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
606

    
607
                        <div class="uk-grid-margin">
608
                          <div class="md-card chartCard">
609
                            <div class="md-card-content">
610
                              <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
611
                            </div>
612
                          </div>
613
                        </div>
614

    
615
                        <div class="uk-grid-margin">
616
                          <div class="md-card chartCard">
617
                            <div class="md-card-content">
618
                              <iframe *ngIf="publicationsWithLicenceByCountryChartURL" width="100%" height="550" [src]="publicationsWithLicenceByCountryChartURL"></iframe>
619
                            </div>
620
                          </div>
621
                        </div>
622

    
623
                        <div class="uk-grid-margin">
624
                          <div class="md-card chartCard">
625
                            <div class="md-card-content">
626
                              <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
627
                            </div>
628
                          </div>
629
                        </div>
630

    
631
                        <div class="uk-grid-margin">
632
                          <div class="md-card chartCard">
633
                            <div class="md-card-content">
634
                              <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
635
                            </div>
636
                          </div>
637
                        </div>
638

    
639
                        <div class="uk-grid-margin">
640
                          <div class="md-card chartCard">
641
                            <div class="md-card-content">
642
                              <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData" [chartTitle]="'OA Publications with licence by funder'"
643
                                                     [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
644
                            </div>
645
                          </div>
646
                        </div>
647

    
648
                      </div>
649
                    </div>
650

    
651
                    <div class="goldIndicator uk-margin-large-top">
652
                      <h3 class="uk-margin-remove">Gold</h3>
653
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
654

    
655
                        <div class="uk-grid-margin">
656
                          <div class="md-card chartCard">
657
                            <div class="md-card-content">
658
                              <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
659
                            </div>
660
                          </div>
661
                        </div>
662

    
663
                        <div class="uk-grid-margin">
664
                          <div class="md-card chartCard">
665
                            <div class="md-card-content">
666
                              <iframe *ngIf="goldPublicationsByCountryChartURL" width="100%" height="550" [src]="goldPublicationsByCountryChartURL"></iframe>
667
                            </div>
668
                          </div>
669
                        </div>
670

    
671
                        <div class="uk-grid-margin">
672
                          <div class="md-card chartCard">
673
                            <div class="md-card-content">
674
                              <iframe *ngIf="goldPublicationsByDatasourceChartURL" width="100%" height="550" [src]="goldPublicationsByDatasourceChartURL"></iframe>
675
                            </div>
676
                          </div>
677
                        </div>
678

    
679
                        <div class="uk-grid-margin">
680
                          <div class="md-card chartCard">
681
                            <div class="md-card-content">
682
                              <iframe *ngIf="goldPublicationsByOrganizationChartURL" width="100%" height="550" [src]="goldPublicationsByOrganizationChartURL"></iframe>
683
                            </div>
684
                          </div>
685
                        </div>
686

    
687
                        <div class="uk-grid-margin">
688
                          <div class="md-card chartCard">
689
                            <div class="md-card-content">
690
                              <app-treemap-highchart *ngIf="goldPublicationsByFunderData" [chartTitle]="'Gold OA publications by funder'"
691
                                                     [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
692
                            </div>
693
                          </div>
694
                        </div>
695

    
696
                      </div>
697
                    </div>
698

    
699
                    <div class="greenIndicator uk-margin-large-top">
700
                      <h3 class="uk-margin-remove">Green</h3>
701
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
702

    
703
                        <div class="uk-grid-margin">
704
                          <div class="md-card chartCard">
705
                            <div class="md-card-content">
706
                              <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
707
                            </div>
708
                          </div>
709
                        </div>
710

    
711
                        <div class="uk-grid-margin">
712
                          <div class="md-card chartCard">
713
                            <div class="md-card-content">
714
                              <iframe *ngIf="greenPublicationsByCountryChartURL" width="100%" height="550" [src]="greenPublicationsByCountryChartURL"></iframe>
715
                            </div>
716
                          </div>
717
                        </div>
718

    
719
                        <div class="uk-grid-margin">
720
                          <div class="md-card chartCard">
721
                            <div class="md-card-content">
722
                              <iframe *ngIf="greenPublicationsByDatasourceChartURL" width="100%" height="550" [src]="greenPublicationsByDatasourceChartURL"></iframe>
723
                            </div>
724
                          </div>
725
                        </div>
726

    
727
                        <div class="uk-grid-margin">
728
                          <div class="md-card chartCard">
729
                            <div class="md-card-content">
730
                              <iframe *ngIf="greenPublicationsByOrganizationChartURL" width="100%" height="550" [src]="greenPublicationsByOrganizationChartURL"></iframe>
731
                            </div>
732
                          </div>
733
                        </div>
734

    
735
                        <div class="uk-grid-margin">
736
                          <div class="md-card chartCard">
737
                            <div class="md-card-content">
738
                              <app-treemap-highchart *ngIf="greenPublicationsByFunderData" [chartTitle]="'Green OA publications by funder'"
739
                                                     [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
740
                            </div>
741
                          </div>
742
                        </div>
743

    
744
                      </div>
745
                    </div>
746

    
747
                    <div class="greenVsGoldIndicator uk-margin-large-top">
748
                      <h3 class="uk-margin-remove">Green vs. Gold</h3>
749
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
750

    
751
                        <div class="uk-grid-margin">
752
                          <div class="md-card chartCard">
753
                            <div class="md-card-content">
754
                              <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
755
                            </div>
756
                          </div>
757
                        </div>
758

    
759
                      </div>
760
                    </div>
761

    
762
                    <div class="indicatorsTable uk-visible@m uk-margin-large-top">
763

    
764
                      <h3 class="">More details for publications</h3>
765

    
766
                      <div class="uk-margin-top uk-margin-bottom">
767
                        <label class="uk-margin-right">Show: </label>
768
                        <select class="md-input" #selectPublicationsContent (change)="getContent('publication', selectPublicationsContent.value)" style="width: 230px; display: inline-block">
769
                          <option value="affiliated">affiliated</option>
770
                          <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
771
                          <option value="deposited">deposited</option>
772
                          <option value="deposited_peer_reviewed">deposited peer reviewed</option>
773
                        </select>
774
                        <!--<span class="md-input-bar"></span>-->
775
                      </div>
776

    
777
                      <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
778
                        <div class="absoluteTable">
779
                          <div class="md-card chartCard">
780
                            <div class="md-card-content">
781

    
782
                              <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#pubs-indicators-content-a-fade', animation: 'fade'}">
783
                                <li aria-expanded="true" class="uk-active">
784
                                  <a href="#">
785
                                    <i class="fas fa-hashtag"></i>
786
                                  </a>
787
                                </li>
788
                                <li aria-expanded="false" class="">
789
                                  <a href="#">
790
                                    <i class="fas fa-percentage"></i>
791
                                  </a>
792
                                </li>
793
                              </ul>
794

    
795
                              <ul id="pubs-indicators-content-a-fade" class="uk-switcher uk-margin" >
796
                                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
797
                                  <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
798
                                  <app-countries-table *ngIf="publicationsAbsoluteTableData" [isPercentage]="false" [countries]="publicationsAbsoluteTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
799
                                </li>
800
                                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
801
                                  <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
802
                                  <app-countries-table *ngIf="publicationsPercentageTableData" [isPercentage]="true" [countries]="publicationsPercentageTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
803
                                </li>
804
                              </ul>
805

    
806
                            </div>
807
                          </div>
808

    
809
                        </div>
810

    
811
                      </div>
812

    
813

    
814
                    </div>
815

    
816
                  </div>
817

    
818
                </li>
819
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
820

    
821
                  <div>
822

    
823
                    <div class="pidIndicator">
824
                      <h3 class="uk-margin-remove">PID</h3>
825
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
826

    
827
                        <div class="uk-grid-margin">
828
                          <div class="md-card chartCard">
829
                            <div class="md-card-content">
830
                              <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
831
                            </div>
832
                          </div>
833
                        </div>
834

    
835
                        <div class="uk-grid-margin">
836
                          <div class="md-card chartCard">
837
                            <div class="md-card-content">
838
                              <iframe *ngIf="datasetsWithPIDByCountryChartURL" width="100%" height="550" [src]="datasetsWithPIDByCountryChartURL"></iframe>
839
                            </div>
840
                          </div>
841
                        </div>
842

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

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

    
859
                        <div class="uk-grid-margin">
860
                          <div class="md-card chartCard">
861
                            <div class="md-card-content">
862
                              <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData" [chartTitle]="'OA Datasets with PID by funder'"
863
                                                     [chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
864
                            </div>
865
                          </div>
866
                        </div>
867

    
868
                      </div>
869
                    </div>
870

    
871
                    <div class="licenceIndicator uk-margin-large-top">
872
                      <h3 class="uk-margin-remove">Licence</h3>
873
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
874

    
875
                        <div class="uk-grid-margin">
876
                          <div class="md-card chartCard">
877
                            <div class="md-card-content">
878
                              <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>
879
                            </div>
880
                          </div>
881
                        </div>
882

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

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

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

    
907
                        <div class="uk-grid-margin">
908
                          <div class="md-card chartCard">
909
                            <div class="md-card-content">
910
                              <app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData" [chartTitle]="'OA Datasets with licence by funder'"
911
                                                     [chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
912
                            </div>
913
                          </div>
914
                        </div>
915

    
916
                      </div>
917
                    </div>
918

    
919
                    <div class="indicatorsTable uk-visible@m uk-margin-large-top">
920

    
921
                      <h3 class="">More details for datasets</h3>
922

    
923
                      <div class="uk-margin-top uk-margin-bottom">
924
                        <label class="uk-margin-right">Show: </label>
925
                        <select class="md-input" #selectDatasetsContent (change)="getContent('dataset', selectDatasetsContent.value)" style="width: 230px; display: inline-block">
926
                          <option value="affiliated">affiliated</option>
927
                          <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
928
                          <option value="deposited">deposited</option>
929
                          <option value="deposited_peer_reviewed">deposited peer reviewed</option>
930
                        </select>
931
                        <!--<span class="md-input-bar"></span>-->
932
                      </div>
933

    
934
                      <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
935
                        <div class="absoluteTable">
936
                          <div class="md-card chartCard">
937
                            <div class="md-card-content">
938

    
939
                              <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#data-indicators-content-a-fade', animation: 'fade'}">
940
                                <li aria-expanded="true" class="uk-active">
941
                                  <a href="#">
942
                                    <i class="fas fa-hashtag"></i>
943
                                  </a>
944
                                </li>
945
                                <li aria-expanded="false" class="">
946
                                  <a href="#">
947
                                    <i class="fas fa-percentage"></i>
948
                                  </a>
949
                                </li>
950
                              </ul>
951

    
952
                              <ul id="data-indicators-content-a-fade" class="uk-switcher uk-margin" >
953
                                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
954
                                  <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
955
                                  <app-countries-table *ngIf="datasetsAbsoluteTableData" [isPercentage]="false" [countries]="datasetsAbsoluteTableData" [view]="'openScience'" [entity]="'dataset'"></app-countries-table>
956
                                </li>
957
                                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
958
                                  <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
959
                                  <app-countries-table *ngIf="datasetsPercentageTableData" [isPercentage]="true" [countries]="datasetsPercentageTableData" [view]="'openScience'" [entity]="'dataset'"></app-countries-table>
960
                                </li>
961
                              </ul>
962

    
963
                            </div>
964
                          </div>
965

    
966
                        </div>
967

    
968
                      </div>
969

    
970

    
971
                    </div>
972

    
973
                  </div>
974

    
975
                </li>
976
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
977

    
978
                  <div>
979

    
980
                    <div class="pidIndicator">
981
                      <h3 class="uk-margin-remove">PID</h3>
982
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
983

    
984
                        <div class="uk-grid-margin">
985
                          <div class="md-card chartCard">
986
                            <div class="md-card-content">
987
                              <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
988
                            </div>
989
                          </div>
990
                        </div>
991

    
992
                        <div class="uk-grid-margin">
993
                          <div class="md-card chartCard">
994
                            <div class="md-card-content">
995
                              <iframe *ngIf="softwareWithPIDByCountryChartURL" width="100%" height="550" [src]="softwareWithPIDByCountryChartURL"></iframe>
996
                            </div>
997
                          </div>
998
                        </div>
999

    
1000
                        <div class="uk-grid-margin">
1001
                          <div class="md-card chartCard">
1002
                            <div class="md-card-content">
1003
                              <iframe *ngIf="softwareWithPIDByDatasourceChartURL" width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
1004
                            </div>
1005
                          </div>
1006
                        </div>
1007

    
1008
                        <div class="uk-grid-margin">
1009
                          <div class="md-card chartCard">
1010
                            <div class="md-card-content">
1011
                              <iframe *ngIf="softwareWithPIDByOrganizationChartURL" width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
1012
                            </div>
1013
                          </div>
1014
                        </div>
1015

    
1016
                        <div class="uk-grid-margin">
1017
                          <div class="md-card chartCard">
1018
                            <div class="md-card-content">
1019
                              <app-treemap-highchart *ngIf="softwareWithPIDByFunderData" [chartTitle]="'OS Software with PID by funder'"
1020
                                                     [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
1021
                            </div>
1022
                          </div>
1023
                        </div>
1024

    
1025
                      </div>
1026
                    </div>
1027

    
1028
                    <div class="licenceIndicator uk-margin-large-top">
1029
                      <h3 class="uk-margin-remove">Licence</h3>
1030
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1031

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

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

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

    
1056
                        <div class="uk-grid-margin">
1057
                          <div class="md-card chartCard">
1058
                            <div class="md-card-content">
1059
                              <iframe *ngIf="softwareWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
1060
                            </div>
1061
                          </div>
1062
                        </div>
1063

    
1064
                        <div class="uk-grid-margin">
1065
                          <div class="md-card chartCard">
1066
                            <div class="md-card-content">
1067
                              <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData" [chartTitle]="'OS Software with licence by funder'"
1068
                                                     [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
1069
                            </div>
1070
                          </div>
1071
                        </div>
1072

    
1073
                      </div>
1074
                    </div>
1075

    
1076
                    <div class="indicatorsTable uk-visible@m uk-margin-large-top">
1077

    
1078
                      <h3 class="">More details for software</h3>
1079

    
1080
                      <div class="uk-margin-top uk-margin-bottom">
1081
                        <label class="uk-margin-right">Show: </label>
1082
                        <select class="md-input" #selectSoftwareContent (change)="getContent('software', selectSoftwareContent.value)" style="width: 230px; display: inline-block">
1083
                          <option value="affiliated">affiliated</option>
1084
                          <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
1085
                          <option value="deposited">deposited</option>
1086
                          <option value="deposited_peer_reviewed">deposited peer reviewed</option>
1087
                        </select>
1088
                        <!--<span class="md-input-bar"></span>-->
1089
                      </div>
1090

    
1091
                      <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
1092
                        <div class="absoluteTable">
1093
                          <div class="md-card chartCard">
1094
                            <div class="md-card-content">
1095

    
1096
                              <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#software-indicators-content-a-fade', animation: 'fade'}">
1097
                                <li aria-expanded="true" class="uk-active">
1098
                                  <a href="#">
1099
                                    <i class="fas fa-hashtag"></i>
1100
                                  </a>
1101
                                </li>
1102
                                <li aria-expanded="false" class="">
1103
                                  <a href="#">
1104
                                    <i class="fas fa-percentage"></i>
1105
                                  </a>
1106
                                </li>
1107
                              </ul>
1108

    
1109
                              <ul id="software-indicators-content-a-fade" class="uk-switcher uk-margin" >
1110
                                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
1111
                                  <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
1112
                                  <app-countries-table *ngIf="softwareAbsoluteTableData" [isPercentage]="false" [countries]="softwareAbsoluteTableData" [view]="'openScience'" [entity]="'software'"></app-countries-table>
1113
                                </li>
1114
                                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1115
                                  <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
1116
                                  <app-countries-table *ngIf="softwarePercentageTableData" [isPercentage]="true" [countries]="softwarePercentageTableData" [view]="'openScience'" [entity]="'software'"></app-countries-table>
1117
                                </li>
1118
                              </ul>
1119

    
1120
                            </div>
1121
                          </div>
1122

    
1123
                        </div>
1124

    
1125
                      </div>
1126

    
1127

    
1128
                    </div>
1129

    
1130
                  </div>
1131

    
1132
                </li>
1133
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1134

    
1135
                  <div>
1136

    
1137
                    <div class="pidIndicator">
1138
                      <h3 class="uk-margin-remove">PID</h3>
1139
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1140

    
1141
                        <div class="uk-grid-margin">
1142
                          <div class="md-card chartCard">
1143
                            <div class="md-card-content">
1144
                              <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
1145
                            </div>
1146
                          </div>
1147
                        </div>
1148

    
1149
                        <div class="uk-grid-margin">
1150
                          <div class="md-card chartCard">
1151
                            <div class="md-card-content">
1152
                              <iframe *ngIf="otherWithPIDByCountryChartURL" width="100%" height="550" [src]="otherWithPIDByCountryChartURL"></iframe>
1153
                            </div>
1154
                          </div>
1155
                        </div>
1156

    
1157
                        <div class="uk-grid-margin">
1158
                          <div class="md-card chartCard">
1159
                            <div class="md-card-content">
1160
                              <iframe *ngIf="otherWithPIDByDatasourceChartURL" width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
1161
                            </div>
1162
                          </div>
1163
                        </div>
1164

    
1165
                        <div class="uk-grid-margin">
1166
                          <div class="md-card chartCard">
1167
                            <div class="md-card-content">
1168
                              <iframe *ngIf="otherWithPIDByOrganizationChartURL" width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
1169
                            </div>
1170
                          </div>
1171
                        </div>
1172

    
1173
                        <div class="uk-grid-margin">
1174
                          <div class="md-card chartCard">
1175
                            <div class="md-card-content">
1176
                              <app-treemap-highchart *ngIf="otherWithPIDByFunderData" [chartTitle]="'OA Other research products with PID by funder'"
1177
                                                     [chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
1178
                            </div>
1179
                          </div>
1180
                        </div>
1181

    
1182
                      </div>
1183
                    </div>
1184

    
1185
                    <div class="licenceIndicator uk-margin-large-top">
1186
                      <h3 class="uk-margin-remove">Licence</h3>
1187
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1188

    
1189
                        <div class="uk-grid-margin">
1190
                          <div class="md-card chartCard">
1191
                            <div class="md-card-content">
1192
                              <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>
1193
                            </div>
1194
                          </div>
1195
                        </div>
1196

    
1197
                        <div class="uk-grid-margin">
1198
                          <div class="md-card chartCard">
1199
                            <div class="md-card-content">
1200
                              <iframe *ngIf="otherWithLicenceByCountryChartURL" width="100%" height="550" [src]="otherWithLicenceByCountryChartURL"></iframe>
1201
                            </div>
1202
                          </div>
1203
                        </div>
1204

    
1205
                        <div class="uk-grid-margin">
1206
                          <div class="md-card chartCard">
1207
                            <div class="md-card-content">
1208
                              <iframe *ngIf="otherWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
1209
                            </div>
1210
                          </div>
1211
                        </div>
1212

    
1213
                        <div class="uk-grid-margin">
1214
                          <div class="md-card chartCard">
1215
                            <div class="md-card-content">
1216
                              <iframe *ngIf="otherWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
1217
                            </div>
1218
                          </div>
1219
                        </div>
1220

    
1221
                        <div class="uk-grid-margin">
1222
                          <div class="md-card chartCard">
1223
                            <div class="md-card-content">
1224
                              <app-treemap-highchart *ngIf="otherWithLicenceByFunderData" [chartTitle]="'OA Other research products with licence by funder'"
1225
                                                     [chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
1226
                            </div>
1227
                          </div>
1228
                        </div>
1229

    
1230
                      </div>
1231
                    </div>
1232

    
1233
                    <div class="indicatorsTable uk-visible@m uk-margin-large-top">
1234

    
1235
                      <h3 class="">More details for other research products</h3>
1236

    
1237
                      <div class="uk-margin-top uk-margin-bottom">
1238
                        <label class="uk-margin-right">Show: </label>
1239
                        <select class="md-input" #selectOtherContent (change)="getContent('other', selectOtherContent.value)" style="width: 230px; display: inline-block">
1240
                          <option value="affiliated">affiliated</option>
1241
                          <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
1242
                          <option value="deposited">deposited</option>
1243
                          <option value="deposited_peer_reviewed">deposited peer reviewed</option>
1244
                        </select>
1245
                        <!--<span class="md-input-bar"></span>-->
1246
                      </div>
1247

    
1248
                      <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
1249
                        <div class="absoluteTable">
1250
                          <div class="md-card chartCard">
1251
                            <div class="md-card-content">
1252

    
1253
                              <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#other-indicators-content-a-fade', animation: 'fade'}">
1254
                                <li aria-expanded="true" class="uk-active">
1255
                                  <a href="#">
1256
                                    <i class="fas fa-hashtag"></i>
1257
                                  </a>
1258
                                </li>
1259
                                <li aria-expanded="false" class="">
1260
                                  <a href="#">
1261
                                    <i class="fas fa-percentage"></i>
1262
                                  </a>
1263
                                </li>
1264
                              </ul>
1265

    
1266
                              <ul id="other-indicators-content-a-fade" class="uk-switcher uk-margin" >
1267
                                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
1268
                                  <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
1269
                                  <app-countries-table *ngIf="otherAbsoluteTableData" [isPercentage]="false" [countries]="otherAbsoluteTableData" [view]="'openScience'" [entity]="'other'"></app-countries-table>
1270
                                </li>
1271
                                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1272
                                  <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
1273
                                  <app-countries-table *ngIf="otherPercentageTableData" [isPercentage]="true" [countries]="otherPercentageTableData" [view]="'openScience'" [entity]="'other'"></app-countries-table>
1274
                                </li>
1275
                              </ul>
1276

    
1277
                            </div>
1278
                          </div>
1279

    
1280
                        </div>
1281

    
1282
                      </div>
1283

    
1284

    
1285
                    </div>
1286

    
1287
                  </div>
1288

    
1289
                </li>
1290
              </ul>
1291

    
1292

    
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

    
1301
          <li aria-hidden="true">
1302
            <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="">
1303
            </div>
1304
          </li>
1305

    
1306
          <li aria-hidden="true">
1307
            <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="">
1308
            </div>
1309
          </li>
1310
        </ul>
1311
      </div>
1312

    
1313
    </div>
1314
  </section>
1315
</div>
1316

    
1317

    
1318

    
1319

    
(1-1/2)