Project

General

Profile

1
<div>
2

    
3
  <ul uk-tab class="uk-tab-large">
4
    <li><a href="#">PID</a></li>
5
    <li><a href="#">Licence</a></li>
6
    <li><a href="#">Gold</a></li>
7
    <li><a href="#">Green</a></li>
8
    <li><a href="#">Green vs. Gold</a></li>
9
    <li class="uk-visible@m"><a href="#">More Details</a></li>
10
  </ul>
11

    
12
  <ul class="uk-switcher uk-margin">
13
    <li>
14
      <div class="pidIndicator">
15
        <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
16

    
17
          <div class="uk-grid-margin">
18
            <div class="md-card chartCard">
19
              <div class="md-card-content">
20
                <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
21
              </div>
22
            </div>
23
          </div>
24

    
25
          <div class="uk-grid-margin">
26
            <div class="md-card chartCard">
27
              <div class="md-card-content">
28

    
29
                <!--MOBILE & PAD PORTRAIT-->
30
                <div class="uk-hidden@m">
31
                  <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
32
                    <label class="uk-margin-right">Show by: </label>
33
                    <select class="md-input" #selectPIDGroupBy (change)="getPublicationsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
34
                      <option value="country">country</option>
35
                      <option value="datasource">datasource</option>
36
                      <option value="organization">organization</option>
37
                      <option value="funder">funder</option>
38
                    </select>
39
                  </div>
40

    
41
                  <iframe *ngIf="publicationsWithPIDGroupByView==='country' && publicationsWithPIDByCountryChartURLMobile"
42
                          width="100%" height="550" [src]="publicationsWithPIDByCountryChartURLMobile"></iframe>
43
                  <iframe *ngIf="publicationsWithPIDGroupByView==='datasource' && publicationsWithPIDByDatasourceChartURLMobile"
44
                          width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURLMobile"></iframe>
45
                  <iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURLMobile"
46
                          width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURLMobile"></iframe>
47
                  <app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
48
                                         [chartTitle]="'OA Publications with PID by funder'"
49
                                         [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
50

    
51
                </div>
52

    
53
                <!--LAPTOP & PAD LANDSCAPE-->
54
                <div class="uk-visible@m">
55
                  <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
56
                      data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
57
                    <li class="uk-active"><a (click)="getPublicationsWithPIDGroupBy('country')">Country</a></li>
58
                    <li><a (click)="getPublicationsWithPIDGroupBy('datasource')">Datasource</a></li>
59
                    <li><a (click)="getPublicationsWithPIDGroupBy('organization')">Organization</a></li>
60
                    <li><a (click)="getPublicationsWithPIDGroupBy('funder')">Funder</a></li>
61
                  </ul>
62

    
63
                  <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
64
                    <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
65
                      <iframe *ngIf="publicationsWithPIDByCountryChartURL"
66
                              width="100%" height="350" [src]="publicationsWithPIDByCountryChartURL"></iframe>
67
                    </li>
68
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
69
                      <iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
70
                              width="100%" height="350" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
71
                    </li>
72
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
73
                      <iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
74
                              width="100%" height="350" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
75
                    </li>
76
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
77
                      <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
78
                                             [chartTitle]="'OA Publications with PID by funder'"
79
                                             [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
80
                    </li>
81
                  </ul>
82
                </div>
83

    
84
              </div>
85
            </div>
86
          </div>
87

    
88
        </div>
89
      </div>
90
    </li>
91
    <li>
92
      <div class="licenceIndicator">
93
        <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
94

    
95
          <div class="uk-grid-margin">
96
            <div class="md-card chartCard">
97
              <div class="md-card-content">
98
                <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
99
              </div>
100
            </div>
101
          </div>
102

    
103
          <div class="uk-grid-margin">
104
            <div class="md-card chartCard">
105
              <div class="md-card-content">
106

    
107
                <!--MOBILE & PAD PORTRAIT-->
108
                <div class="uk-hidden@m">
109
                  <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
110
                    <label class="uk-margin-right">Show by: </label>
111
                    <select class="md-input" #selectLicenceGroupBy (change)="getPublicationsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
112
                      <option value="country">country</option>
113
                      <option value="datasource">datasource</option>
114
                      <option value="organization">organization</option>
115
                      <option value="funder">funder</option>
116
                    </select>
117
                  </div>
118

    
119
                  <iframe *ngIf="publicationsWithLicenceGroupByView==='country' && publicationsWithLicenceByCountryChartURLMobile"
120
                          width="100%" height="550" [src]="publicationsWithLicenceByCountryChartURLMobile"></iframe>
121
                  <iframe *ngIf="publicationsWithLicenceGroupByView==='datasource' && publicationsWithLicenceByDatasourceChartURLMobile"
122
                          width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURLMobile"></iframe>
123
                  <iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURLMobile"
124
                          width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURLMobile"></iframe>
125
                  <app-treemap-highchart *ngIf="publicationsWithLicenceGroupByView==='funder' && publicationsWithLicenceByFunderData"
126
                                         [chartTitle]="'OA Publications with licence by funder'"
127
                                         [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
128

    
129
                </div>
130

    
131
                <!--LAPTOP & PAD LANDSCAPE-->
132
                <div class="uk-visible@m">
133
                  <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
134
                      data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
135
                    <li class="uk-active"><a (click)="getPublicationsWithLicenceGroupBy('country')">Country</a></li>
136
                    <li><a (click)="getPublicationsWithLicenceGroupBy('datasource')">Datasource</a></li>
137
                    <li><a (click)="getPublicationsWithLicenceGroupBy('organization')">Organization</a></li>
138
                    <li><a (click)="getPublicationsWithLicenceGroupBy('funder')">Funder</a></li>
139
                  </ul>
140

    
141
                  <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
142
                    <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
143
                      <iframe *ngIf="publicationsWithLicenceByCountryChartURL"
144
                              width="100%" height="350" [src]="publicationsWithLicenceByCountryChartURL"></iframe>
145
                    </li>
146
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
147
                      <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL"
148
                              width="100%" height="350" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
149
                    </li>
150
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
151
                      <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL"
152
                              width="100%" height="350" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
153
                    </li>
154
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
155
                      <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData"
156
                                             [chartTitle]="'OA Publications with licence by funder'"
157
                                             [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
158
                    </li>
159
                  </ul>
160
                </div>
161

    
162
              </div>
163
            </div>
164
          </div>
165

    
166
        </div>
167
      </div>
168
    </li>
169
    <li>
170
      <div class="goldIndicator">
171
        <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
172

    
173
          <div class="uk-grid-margin">
174
            <div class="md-card chartCard">
175
              <div class="md-card-content">
176
                <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
177
              </div>
178
            </div>
179
          </div>
180

    
181
          <div class="uk-grid-margin">
182
            <div class="md-card chartCard">
183
              <div class="md-card-content">
184

    
185
                <!--MOBILE & PAD PORTRAIT-->
186
                <div class="uk-hidden@m">
187
                  <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
188
                    <label class="uk-margin-right">Show by: </label>
189
                    <select class="md-input" #selectGoldGroupBy (change)="getGoldPublicationsGroupByMobile(selectGoldGroupBy.value)" style="width: 230px; display: inline-block">
190
                      <option value="country">country</option>
191
                      <option value="datasource">datasource</option>
192
                      <option value="organization">organization</option>
193
                      <option value="funder">funder</option>
194
                    </select>
195
                  </div>
196

    
197
                  <iframe *ngIf="goldPublicationsGroupByView==='country' && goldPublicationsByCountryChartURLMobile"
198
                          width="100%" height="550" [src]="goldPublicationsByCountryChartURLMobile"></iframe>
199
                  <iframe *ngIf="goldPublicationsGroupByView==='datasource' && goldPublicationsByDatasourceChartURLMobile"
200
                          width="100%" height="550" [src]="goldPublicationsByDatasourceChartURLMobile"></iframe>
201
                  <iframe *ngIf="goldPublicationsGroupByView==='organization' && goldPublicationsByOrganizationChartURLMobile"
202
                          width="100%" height="550" [src]="goldPublicationsByOrganizationChartURLMobile"></iframe>
203
                  <app-treemap-highchart *ngIf="goldPublicationsGroupByView==='funder' && goldPublicationsByFunderData"
204
                                         [chartTitle]="'Gold OA publications by funder'"
205
                                         [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
206

    
207
                </div>
208

    
209
                <!--LAPTOP & PAD LANDSCAPE-->
210
                <div class="uk-visible@m">
211
                  <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
212
                      data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
213
                    <li class="uk-active"><a (click)="getGoldPublicationsGroupBy('country')">Country</a></li>
214
                    <li><a (click)="getGoldPublicationsGroupBy('datasource')">Datasource</a></li>
215
                    <li><a (click)="getGoldPublicationsGroupBy('organization')">Organization</a></li>
216
                    <li><a (click)="getGoldPublicationsGroupBy('funder')">Funder</a></li>
217
                  </ul>
218

    
219
                  <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
220
                    <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
221
                      <iframe *ngIf="goldPublicationsByCountryChartURL"
222
                              width="100%" height="350" [src]="goldPublicationsByCountryChartURL"></iframe>
223
                    </li>
224
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
225
                      <iframe *ngIf="goldPublicationsByDatasourceChartURL"
226
                              width="100%" height="350" [src]="goldPublicationsByDatasourceChartURL"></iframe>
227
                    </li>
228
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
229
                      <iframe *ngIf="goldPublicationsByOrganizationChartURL"
230
                              width="100%" height="350" [src]="goldPublicationsByOrganizationChartURL"></iframe>
231
                    </li>
232
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
233
                      <app-treemap-highchart *ngIf="goldPublicationsByFunderData"
234
                                             [chartTitle]="'Gold OA publications by funder'"
235
                                             [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
236
                    </li>
237
                  </ul>
238
                </div>
239

    
240
              </div>
241
            </div>
242
          </div>
243

    
244
        </div>
245
      </div>
246
    </li>
247
    <li>
248
      <div class="greenIndicator">
249
        <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
250

    
251
          <div class="uk-grid-margin">
252
            <div class="md-card chartCard">
253
              <div class="md-card-content">
254
                <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
255
              </div>
256
            </div>
257
          </div>
258

    
259
          <div class="uk-grid-margin">
260
            <div class="md-card chartCard">
261
              <div class="md-card-content">
262

    
263
                <!--MOBILE & PAD PORTRAIT-->
264
                <div class="uk-hidden@m">
265
                  <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
266
                    <label class="uk-margin-right">Show by: </label>
267
                    <select class="md-input" #selectGreenGroupBy (change)="getGreenPublicationsGroupByMobile(selectGreenGroupBy.value)" style="width: 230px; display: inline-block">
268
                      <option value="country">country</option>
269
                      <option value="datasource">datasource</option>
270
                      <option value="organization">organization</option>
271
                      <option value="funder">funder</option>
272
                    </select>
273
                  </div>
274

    
275
                  <iframe *ngIf="greenPublicationsGroupByView==='country' && greenPublicationsByCountryChartURLMobile"
276
                          width="100%" height="550" [src]="greenPublicationsByCountryChartURLMobile"></iframe>
277
                  <iframe *ngIf="greenPublicationsGroupByView==='datasource' && greenPublicationsByDatasourceChartURLMobile"
278
                          width="100%" height="550" [src]="greenPublicationsByDatasourceChartURLMobile"></iframe>
279
                  <iframe *ngIf="greenPublicationsGroupByView==='organization' && greenPublicationsByOrganizationChartURLMobile"
280
                          width="100%" height="550" [src]="greenPublicationsByOrganizationChartURLMobile"></iframe>
281
                  <app-treemap-highchart *ngIf="greenPublicationsGroupByView==='funder' && greenPublicationsByFunderData"
282
                                         [chartTitle]="'Green OA publications by funder'"
283
                                         [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
284

    
285
                </div>
286

    
287
                <!--LAPTOP & PAD LANDSCAPE-->
288
                <div class="uk-visible@m">
289
                  <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
290
                      data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
291
                    <li class="uk-active"><a (click)="getGreenPublicationsGroupBy('country')">Country</a></li>
292
                    <li><a (click)="getGreenPublicationsGroupBy('datasource')">Datasource</a></li>
293
                    <li><a (click)="getGreenPublicationsGroupBy('organization')">Organization</a></li>
294
                    <li><a (click)="getGreenPublicationsGroupBy('funder')">Funder</a></li>
295
                  </ul>
296

    
297
                  <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
298
                    <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
299
                      <iframe *ngIf="greenPublicationsByCountryChartURL"
300
                              width="100%" height="350" [src]="greenPublicationsByCountryChartURL"></iframe>
301
                    </li>
302
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
303
                      <iframe *ngIf="greenPublicationsByDatasourceChartURL"
304
                              width="100%" height="350" [src]="greenPublicationsByDatasourceChartURL"></iframe>
305
                    </li>
306
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
307
                      <iframe *ngIf="greenPublicationsByOrganizationChartURL"
308
                              width="100%" height="350" [src]="greenPublicationsByOrganizationChartURL"></iframe>
309
                    </li>
310
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
311
                      <app-treemap-highchart *ngIf="greenPublicationsByFunderData"
312
                                             [chartTitle]="'Green OA publications by funder'"
313
                                             [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
314
                    </li>
315
                  </ul>
316
                </div>
317

    
318
              </div>
319
            </div>
320
          </div>
321

    
322
        </div>
323
      </div>
324
    </li>
325
    <li>
326
      <div class="greenVsGoldIndicator">
327
        <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
328

    
329
          <div class="uk-grid-margin">
330
            <div class="md-card chartCard">
331
              <div class="md-card-content">
332
                <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
333
              </div>
334
            </div>
335
          </div>
336

    
337
        </div>
338
      </div>
339
    </li>
340
    <li>
341
      <div class="indicatorsTable uk-visible@m uk-margin-large-top">
342

    
343
        <h3 class="">More details for publications</h3>
344

    
345
        <div class="uk-margin-top uk-margin-bottom">
346
          <label class="uk-margin-right">Show: </label>
347
          <select class="md-input" #selectPublicationsContent (change)="getContent('publication', selectPublicationsContent.value)" style="width: 230px; display: inline-block">
348
            <option value="affiliated">affiliated</option>
349
            <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
350
            <option value="deposited">deposited</option>
351
            <option value="deposited_peer_reviewed">deposited peer reviewed</option>
352
          </select>
353
          <!--<span class="md-input-bar"></span>-->
354
        </div>
355

    
356
        <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
357
          <div class="absoluteTable">
358
            <div class="md-card chartCard">
359
              <div class="md-card-content">
360

    
361
                <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#pubs-indicators-content-a-fade', animation: 'fade'}">
362
                  <li aria-expanded="true" class="uk-active">
363
                    <a href="#">
364
                      <i class="fas fa-hashtag"></i>
365
                    </a>
366
                  </li>
367
                  <li aria-expanded="false" class="">
368
                    <a href="#">
369
                      <i class="fas fa-percentage"></i>
370
                    </a>
371
                  </li>
372
                </ul>
373

    
374
                <ul id="pubs-indicators-content-a-fade" class="uk-switcher uk-margin" >
375
                  <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
376
                    <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
377
                    <app-countries-table *ngIf="publicationsAbsoluteTableData" [isPercentage]="false" [countries]="publicationsAbsoluteTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
378
                  </li>
379
                  <li aria-hidden="true" style="animation-duration: 200ms;" class="">
380
                    <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
381
                    <app-countries-table *ngIf="publicationsPercentageTableData" [isPercentage]="true" [countries]="publicationsPercentageTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
382
                  </li>
383
                </ul>
384

    
385
              </div>
386
            </div>
387

    
388
          </div>
389

    
390
        </div>
391

    
392
      </div>
393
    </li>
394
  </ul>
395

    
396
  <!--&lt;!&ndash;PID&ndash;&gt;
397
  <div class="pidIndicator">
398
    <h3 class="uk-margin-remove">PID</h3>
399
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
400

    
401
      <div class="uk-grid-margin">
402
        <div class="md-card chartCard">
403
          <div class="md-card-content">
404
            <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
405
          </div>
406
        </div>
407
      </div>
408

    
409
      <div class="uk-grid-margin">
410
        <div class="md-card chartCard">
411
          <div class="md-card-content">
412

    
413
            &lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
414
            <div class="uk-hidden@m">
415
              <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
416
                <label class="uk-margin-right">Show by: </label>
417
                <select class="md-input" #selectPIDGroupBy (change)="getPublicationsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
418
                  <option value="country">country</option>
419
                  <option value="datasource">datasource</option>
420
                  <option value="organization">organization</option>
421
                  <option value="funder">funder</option>
422
                </select>
423
              </div>
424

    
425
              <iframe *ngIf="publicationsWithPIDGroupByView==='country' && publicationsWithPIDByCountryChartURLMobile"
426
                      width="100%" height="550" [src]="publicationsWithPIDByCountryChartURLMobile"></iframe>
427
              <iframe *ngIf="publicationsWithPIDGroupByView==='datasource' && publicationsWithPIDByDatasourceChartURLMobile"
428
                      width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURLMobile"></iframe>
429
              <iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURLMobile"
430
                      width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURLMobile"></iframe>
431
              <app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
432
                                     [chartTitle]="'OA Publications with PID by funder'"
433
                                     [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
434

    
435
            </div>
436

    
437
            &lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
438
            <div class="uk-visible@m">
439
              <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
440
                  data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
441
                <li class="uk-active"><a (click)="getPublicationsWithPIDGroupBy('country')">Country</a></li>
442
                <li><a (click)="getPublicationsWithPIDGroupBy('datasource')">Datasource</a></li>
443
                <li><a (click)="getPublicationsWithPIDGroupBy('organization')">Organization</a></li>
444
                <li><a (click)="getPublicationsWithPIDGroupBy('funder')">Funder</a></li>
445
              </ul>
446

    
447
              <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
448
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
449
                  <iframe *ngIf="publicationsWithPIDByCountryChartURL"
450
                          width="100%" height="350" [src]="publicationsWithPIDByCountryChartURL"></iframe>
451
                </li>
452
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
453
                  <iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
454
                          width="100%" height="350" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
455
                </li>
456
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
457
                  <iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
458
                          width="100%" height="350" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
459
                </li>
460
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
461
                  <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
462
                                         [chartTitle]="'OA Publications with PID by funder'"
463
                                         [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
464
                </li>
465
              </ul>
466
            </div>
467

    
468
          </div>
469
        </div>
470
      </div>
471

    
472
    </div>
473
  </div>
474

    
475
  &lt;!&ndash;Licence&ndash;&gt;
476
  <div class="licenceIndicator uk-margin-large-top">
477
    <h3 class="uk-margin-remove">Licence</h3>
478
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
479

    
480
      <div class="uk-grid-margin">
481
        <div class="md-card chartCard">
482
          <div class="md-card-content">
483
            <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
484
          </div>
485
        </div>
486
      </div>
487

    
488
      <div class="uk-grid-margin">
489
        <div class="md-card chartCard">
490
          <div class="md-card-content">
491

    
492
            &lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
493
            <div class="uk-hidden@m">
494
              <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
495
                <label class="uk-margin-right">Show by: </label>
496
                <select class="md-input" #selectLicenceGroupBy (change)="getPublicationsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
497
                  <option value="country">country</option>
498
                  <option value="datasource">datasource</option>
499
                  <option value="organization">organization</option>
500
                  <option value="funder">funder</option>
501
                </select>
502
              </div>
503

    
504
              <iframe *ngIf="publicationsWithLicenceGroupByView==='country' && publicationsWithLicenceByCountryChartURLMobile"
505
                      width="100%" height="550" [src]="publicationsWithLicenceByCountryChartURLMobile"></iframe>
506
              <iframe *ngIf="publicationsWithLicenceGroupByView==='datasource' && publicationsWithLicenceByDatasourceChartURLMobile"
507
                      width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURLMobile"></iframe>
508
              <iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURLMobile"
509
                      width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURLMobile"></iframe>
510
              <app-treemap-highchart *ngIf="publicationsWithLicenceGroupByView==='funder' && publicationsWithLicenceByFunderData"
511
                                     [chartTitle]="'OA Publications with licence by funder'"
512
                                     [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
513

    
514
            </div>
515

    
516
            &lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
517
            <div class="uk-visible@m">
518
              <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
519
                  data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
520
                <li class="uk-active"><a (click)="getPublicationsWithLicenceGroupBy('country')">Country</a></li>
521
                <li><a (click)="getPublicationsWithLicenceGroupBy('datasource')">Datasource</a></li>
522
                <li><a (click)="getPublicationsWithLicenceGroupBy('organization')">Organization</a></li>
523
                <li><a (click)="getPublicationsWithLicenceGroupBy('funder')">Funder</a></li>
524
              </ul>
525

    
526
              <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
527
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
528
                  <iframe *ngIf="publicationsWithLicenceByCountryChartURL"
529
                          width="100%" height="350" [src]="publicationsWithLicenceByCountryChartURL"></iframe>
530
                </li>
531
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
532
                  <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL"
533
                          width="100%" height="350" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
534
                </li>
535
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
536
                  <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL"
537
                          width="100%" height="350" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
538
                </li>
539
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
540
                  <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData"
541
                                         [chartTitle]="'OA Publications with licence by funder'"
542
                                         [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
543
                </li>
544
              </ul>
545
            </div>
546

    
547
          </div>
548
        </div>
549
      </div>
550

    
551
    </div>
552
  </div>
553

    
554
  &lt;!&ndash;Gold&ndash;&gt;
555
  <div class="goldIndicator uk-margin-large-top">
556
    <h3 class="uk-margin-remove">Gold</h3>
557
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
558

    
559
      <div class="uk-grid-margin">
560
        <div class="md-card chartCard">
561
          <div class="md-card-content">
562
            <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
563
          </div>
564
        </div>
565
      </div>
566

    
567
      <div class="uk-grid-margin">
568
        <div class="md-card chartCard">
569
          <div class="md-card-content">
570

    
571
            &lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
572
            <div class="uk-hidden@m">
573
              <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
574
                <label class="uk-margin-right">Show by: </label>
575
                <select class="md-input" #selectGoldGroupBy (change)="getGoldPublicationsGroupByMobile(selectGoldGroupBy.value)" style="width: 230px; display: inline-block">
576
                  <option value="country">country</option>
577
                  <option value="datasource">datasource</option>
578
                  <option value="organization">organization</option>
579
                  <option value="funder">funder</option>
580
                </select>
581
              </div>
582

    
583
              <iframe *ngIf="goldPublicationsGroupByView==='country' && goldPublicationsByCountryChartURLMobile"
584
                      width="100%" height="550" [src]="goldPublicationsByCountryChartURLMobile"></iframe>
585
              <iframe *ngIf="goldPublicationsGroupByView==='datasource' && goldPublicationsByDatasourceChartURLMobile"
586
                      width="100%" height="550" [src]="goldPublicationsByDatasourceChartURLMobile"></iframe>
587
              <iframe *ngIf="goldPublicationsGroupByView==='organization' && goldPublicationsByOrganizationChartURLMobile"
588
                      width="100%" height="550" [src]="goldPublicationsByOrganizationChartURLMobile"></iframe>
589
              <app-treemap-highchart *ngIf="goldPublicationsGroupByView==='funder' && goldPublicationsByFunderData"
590
                                     [chartTitle]="'Gold OA publications by funder'"
591
                                     [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
592

    
593
            </div>
594

    
595
            &lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
596
            <div class="uk-visible@m">
597
              <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
598
                  data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
599
                <li class="uk-active"><a (click)="getGoldPublicationsGroupBy('country')">Country</a></li>
600
                <li><a (click)="getGoldPublicationsGroupBy('datasource')">Datasource</a></li>
601
                <li><a (click)="getGoldPublicationsGroupBy('organization')">Organization</a></li>
602
                <li><a (click)="getGoldPublicationsGroupBy('funder')">Funder</a></li>
603
              </ul>
604

    
605
              <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
606
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
607
                  <iframe *ngIf="goldPublicationsByCountryChartURL"
608
                          width="100%" height="350" [src]="goldPublicationsByCountryChartURL"></iframe>
609
                </li>
610
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
611
                  <iframe *ngIf="goldPublicationsByDatasourceChartURL"
612
                          width="100%" height="350" [src]="goldPublicationsByDatasourceChartURL"></iframe>
613
                </li>
614
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
615
                  <iframe *ngIf="goldPublicationsByOrganizationChartURL"
616
                          width="100%" height="350" [src]="goldPublicationsByOrganizationChartURL"></iframe>
617
                </li>
618
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
619
                  <app-treemap-highchart *ngIf="goldPublicationsByFunderData"
620
                                         [chartTitle]="'Gold OA publications by funder'"
621
                                         [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
622
                </li>
623
              </ul>
624
            </div>
625

    
626
          </div>
627
        </div>
628
      </div>
629

    
630
    </div>
631
  </div>
632

    
633
  &lt;!&ndash;Green&ndash;&gt;
634
  <div class="greenIndicator uk-margin-large-top">
635
    <h3 class="uk-margin-remove">Green</h3>
636
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
637

    
638
      <div class="uk-grid-margin">
639
        <div class="md-card chartCard">
640
          <div class="md-card-content">
641
            <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
642
          </div>
643
        </div>
644
      </div>
645

    
646
      <div class="uk-grid-margin">
647
        <div class="md-card chartCard">
648
          <div class="md-card-content">
649

    
650
            &lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
651
            <div class="uk-hidden@m">
652
              <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
653
                <label class="uk-margin-right">Show by: </label>
654
                <select class="md-input" #selectGreenGroupBy (change)="getGreenPublicationsGroupByMobile(selectGreenGroupBy.value)" style="width: 230px; display: inline-block">
655
                  <option value="country">country</option>
656
                  <option value="datasource">datasource</option>
657
                  <option value="organization">organization</option>
658
                  <option value="funder">funder</option>
659
                </select>
660
              </div>
661

    
662
              <iframe *ngIf="greenPublicationsGroupByView==='country' && greenPublicationsByCountryChartURLMobile"
663
                      width="100%" height="550" [src]="greenPublicationsByCountryChartURLMobile"></iframe>
664
              <iframe *ngIf="greenPublicationsGroupByView==='datasource' && greenPublicationsByDatasourceChartURLMobile"
665
                      width="100%" height="550" [src]="greenPublicationsByDatasourceChartURLMobile"></iframe>
666
              <iframe *ngIf="greenPublicationsGroupByView==='organization' && greenPublicationsByOrganizationChartURLMobile"
667
                      width="100%" height="550" [src]="greenPublicationsByOrganizationChartURLMobile"></iframe>
668
              <app-treemap-highchart *ngIf="greenPublicationsGroupByView==='funder' && greenPublicationsByFunderData"
669
                                     [chartTitle]="'Green OA publications by funder'"
670
                                     [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
671

    
672
            </div>
673

    
674
            &lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
675
            <div class="uk-visible@m">
676
              <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
677
                  data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
678
                <li class="uk-active"><a (click)="getGreenPublicationsGroupBy('country')">Country</a></li>
679
                <li><a (click)="getGreenPublicationsGroupBy('datasource')">Datasource</a></li>
680
                <li><a (click)="getGreenPublicationsGroupBy('organization')">Organization</a></li>
681
                <li><a (click)="getGreenPublicationsGroupBy('funder')">Funder</a></li>
682
              </ul>
683

    
684
              <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
685
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
686
                  <iframe *ngIf="greenPublicationsByCountryChartURL"
687
                          width="100%" height="350" [src]="greenPublicationsByCountryChartURL"></iframe>
688
                </li>
689
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
690
                  <iframe *ngIf="greenPublicationsByDatasourceChartURL"
691
                          width="100%" height="350" [src]="greenPublicationsByDatasourceChartURL"></iframe>
692
                </li>
693
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
694
                  <iframe *ngIf="greenPublicationsByOrganizationChartURL"
695
                          width="100%" height="350" [src]="greenPublicationsByOrganizationChartURL"></iframe>
696
                </li>
697
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
698
                  <app-treemap-highchart *ngIf="greenPublicationsByFunderData"
699
                                         [chartTitle]="'Green OA publications by funder'"
700
                                         [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
701
                </li>
702
              </ul>
703
            </div>
704

    
705
          </div>
706
        </div>
707
      </div>
708

    
709
    </div>
710
  </div>
711

    
712
  <div class="greenVsGoldIndicator uk-margin-large-top">
713
    <h3 class="uk-margin-remove">Green vs. Gold</h3>
714
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
715

    
716
      <div class="uk-grid-margin">
717
        <div class="md-card chartCard">
718
          <div class="md-card-content">
719
            <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
720
          </div>
721
        </div>
722
      </div>
723

    
724
    </div>
725
  </div>-->
726

    
727
  <!--<div class="indicatorsTable uk-visible@m uk-margin-large-top">
728

    
729
    <h3 class="">More details for publications</h3>
730

    
731
    <div class="uk-margin-top uk-margin-bottom">
732
      <label class="uk-margin-right">Show: </label>
733
      <select class="md-input" #selectPublicationsContent (change)="getContent('publication', selectPublicationsContent.value)" style="width: 230px; display: inline-block">
734
        <option value="affiliated">affiliated</option>
735
        <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
736
        <option value="deposited">deposited</option>
737
        <option value="deposited_peer_reviewed">deposited peer reviewed</option>
738
      </select>
739
      &lt;!&ndash;<span class="md-input-bar"></span>&ndash;&gt;
740
    </div>
741

    
742
    <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
743
      <div class="absoluteTable">
744
        <div class="md-card chartCard">
745
          <div class="md-card-content">
746

    
747
            <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#pubs-indicators-content-a-fade', animation: 'fade'}">
748
              <li aria-expanded="true" class="uk-active">
749
                <a href="#">
750
                  <i class="fas fa-hashtag"></i>
751
                </a>
752
              </li>
753
              <li aria-expanded="false" class="">
754
                <a href="#">
755
                  <i class="fas fa-percentage"></i>
756
                </a>
757
              </li>
758
            </ul>
759

    
760
            <ul id="pubs-indicators-content-a-fade" class="uk-switcher uk-margin" >
761
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
762
                <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
763
                <app-countries-table *ngIf="publicationsAbsoluteTableData" [isPercentage]="false" [countries]="publicationsAbsoluteTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
764
              </li>
765
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
766
                <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
767
                <app-countries-table *ngIf="publicationsPercentageTableData" [isPercentage]="true" [countries]="publicationsPercentageTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
768
              </li>
769
            </ul>
770

    
771
          </div>
772
        </div>
773

    
774
      </div>
775

    
776
    </div>
777

    
778
  </div>-->
779

    
780
</div>
(1-1/2)