Project

General

Profile

1
<div class="uk-margin tabContent">
2

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

    
5
    <div>
6
      <div class="md-card chartCard">
7
        <div class="md-card-content">
8
          <iframe width="100%" height="550" [src]="peerReviewedPublicationsOverTimeChartURL"></iframe>
9
        </div>
10
      </div>
11
    </div>
12

    
13
    <div>
14
      <div class="md-card chartCard">
15
        <div class="md-card-content">
16
          <iframe width="100%" height="550" [src]="publicationsByTypeChartURL"></iframe>
17
        </div>
18
      </div>
19
    </div>
20

    
21
  </div>
22

    
23

    
24
  <!--OA Publications-->
25
  <div class="uk-grid uk-child-width-1-1">
26

    
27
    <div>
28
      <div class="md-card chartCard">
29
        <div class="md-card-content">
30

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

    
43
            <iframe *ngIf="publicationGroupByView==='country' && publicationsByCountryChartURLMobile"
44
                    width="100%" height="550" [src]="publicationsByCountryChartURLMobile"></iframe>
45
            <iframe *ngIf="publicationGroupByView==='datasource' && publicationsByDatasourceChartURLMobile"
46
                    width="100%" height="550" [src]="publicationsByDatasourceChartURLMobile"></iframe>
47
            <iframe *ngIf="publicationGroupByView==='organization' && publicationsByOrganizationChartURLMobile"
48
                    width="100%" height="550" [src]="publicationsByOrganizationChartURLMobile"></iframe>
49
            <app-treemap-highchart *ngIf="publicationGroupByView==='funder' && publicationsByFunderData"
50
                                   [chartTitle]="'Open Access publications'" [chartSubtitle]="'by funder'"
51
                                   [chartData]="publicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
52

    
53
          </div>
54

    
55

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

    
66
            <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
67
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
68
                <iframe *ngIf="publicationsByCountryChartURL"
69
                        width="100%" height="350" [src]="publicationsByCountryChartURL"></iframe>
70
              </li>
71
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
72
                <iframe *ngIf="publicationsByDatasourceChartURL"
73
                        width="100%" height="350" [src]="publicationsByDatasourceChartURL"></iframe>
74
              </li>
75
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
76
                <iframe *ngIf="publicationsByOrganizationChartURL"
77
                        width="100%" height="350" [src]="publicationsByOrganizationChartURL"></iframe>
78
              </li>
79
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
80
                <app-treemap-highchart *ngIf="publicationsByFunderData"
81
                                       [chartTitle]="'Open Access publications'" [chartSubtitle]="'by funder'"
82
                                       [chartData]="publicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
83
              </li>
84
            </ul>
85
          </div>
86

    
87

    
88
        </div>
89
      </div>
90
    </div>
91

    
92
  </div>
93

    
94
  <!--OA Datasets-->
95
  <div class="uk-grid uk-child-width-1-1">
96

    
97
    <div>
98
      <div class="md-card chartCard">
99
        <div class="md-card-content">
100

    
101
          <!--MOBILE & PAD PORTRAIT-->
102
          <div class="uk-hidden@m">
103
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
104
              <label class="uk-margin-right">Show by: </label>
105
              <select class="md-input" #selectDatasetsGroupBy (change)="getDatasetsGroupByMobile(selectDatasetsGroupBy.value)" style="width: 230px; display: inline-block">
106
                <option value="country">country</option>
107
                <option value="datasource">datasource</option>
108
                <option value="organization">organization</option>
109
                <option value="funder">funder</option>
110
              </select>
111
            </div>
112

    
113
            <iframe *ngIf="datasetsGroupByView==='country' && datasetsByCountryChartURLMobile"
114
                    width="100%" height="550" [src]="datasetsByCountryChartURLMobile"></iframe>
115
            <iframe *ngIf="datasetsGroupByView==='datasource' && datasetsByDatasourceChartURLMobile"
116
                    width="100%" height="550" [src]="datasetsByDatasourceChartURLMobile"></iframe>
117
            <iframe *ngIf="datasetsGroupByView==='organization' && datasetsByOrganizationChartURLMobile"
118
                    width="100%" height="550" [src]="datasetsByOrganizationChartURLMobile"></iframe>
119
            <app-treemap-highchart *ngIf="datasetsGroupByView==='funder' && datasetsByFunderData"
120
                                   [chartTitle]="'Open Access datasets'" [chartSubtitle]="'by funder'"
121
                                   [chartData]="datasetsByFunderData" [color]="datasetColor"></app-treemap-highchart>
122

    
123
          </div>
124

    
125

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

    
136
            <ul id="switcher-content-a-fade-datasets" class="uk-switcher uk-margin">
137
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
138
                <iframe *ngIf="datasetsByCountryChartURL"
139
                        width="100%" height="350" [src]="datasetsByCountryChartURL"></iframe>
140
              </li>
141
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
142
                <iframe *ngIf="datasetsByDatasourceChartURL"
143
                        width="100%" height="350" [src]="datasetsByDatasourceChartURL"></iframe>
144
              </li>
145
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
146
                <iframe *ngIf="datasetsByOrganizationChartURL"
147
                        width="100%" height="350" [src]="datasetsByOrganizationChartURL"></iframe>
148
              </li>
149
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
150
                <app-treemap-highchart *ngIf="datasetsByFunderData"
151
                                       [chartTitle]="'Open Access datasets'" [chartSubtitle]="'by funder'"
152
                                       [chartData]="datasetsByFunderData" [color]="datasetColor"></app-treemap-highchart>
153
              </li>
154
            </ul>
155
          </div>
156

    
157

    
158
        </div>
159
      </div>
160
    </div>
161

    
162
  </div>
163

    
164
  <!--OA Software-->
165
  <div class="uk-grid uk-child-width-1-1">
166

    
167
    <div>
168
      <div class="md-card chartCard">
169
        <div class="md-card-content">
170

    
171
          <!--MOBILE & PAD PORTRAIT-->
172
          <div class="uk-hidden@m">
173
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
174
              <label class="uk-margin-right">Show by: </label>
175
              <select class="md-input" #selectSoftwareGroupBy (change)="getSoftwareGroupByMobile(selectSoftwareGroupBy.value)" style="width: 230px; display: inline-block">
176
                <option value="country">country</option>
177
                <option value="datasource">datasource</option>
178
                <option value="organization">organization</option>
179
                <option value="funder">funder</option>
180
              </select>
181
            </div>
182

    
183
            <iframe *ngIf="softwareGroupByView==='country' && softwareByCountryChartURLMobile"
184
                    width="100%" height="550" [src]="softwareByCountryChartURLMobile"></iframe>
185
            <iframe *ngIf="softwareGroupByView==='datasource' && softwareByDatasourceChartURLMobile"
186
                    width="100%" height="550" [src]="softwareByDatasourceChartURLMobile"></iframe>
187
            <iframe *ngIf="softwareGroupByView==='organization' && softwareByOrganizationChartURLMobile"
188
                    width="100%" height="550" [src]="softwareByOrganizationChartURLMobile"></iframe>
189
            <app-treemap-highchart *ngIf="softwareGroupByView==='funder' && softwareByFunderData"
190
                                   [chartTitle]="'Open Access software'" [chartSubtitle]="'by funder'"
191
                                   [chartData]="softwareByFunderData" [color]="softwareColor"></app-treemap-highchart>
192

    
193
          </div>
194

    
195

    
196
          <!--LAPTOP & PAD LANDSCAPE-->
197
          <div class="uk-visible@m">
198
            <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
199
                data-uk-switcher="{connect:'#switcher-content-a-fade-software', animation: 'fade'}">
200
              <li class="uk-active"><a (click)="getSoftwareGroupBy('country')">Country</a></li>
201
              <li><a (click)="getSoftwareGroupBy('datasource')">Datasource</a></li>
202
              <li><a (click)="getSoftwareGroupBy('organization')">Organization</a></li>
203
              <li><a (click)="getSoftwareGroupBy('funder')">Funder</a></li>
204
            </ul>
205

    
206
            <ul id="switcher-content-a-fade-software" class="uk-switcher uk-margin">
207
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
208
                <iframe *ngIf="softwareByCountryChartURL"
209
                        width="100%" height="350" [src]="softwareByCountryChartURL"></iframe>
210
              </li>
211
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
212
                <iframe *ngIf="softwareByDatasourceChartURL"
213
                        width="100%" height="350" [src]="softwareByDatasourceChartURL"></iframe>
214
              </li>
215
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
216
                <iframe *ngIf="softwareByOrganizationChartURL"
217
                        width="100%" height="350" [src]="softwareByOrganizationChartURL"></iframe>
218
              </li>
219
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
220
                <app-treemap-highchart *ngIf="softwareByFunderData"
221
                                       [chartTitle]="'Open Access software'" [chartSubtitle]="'by funder'"
222
                                       [chartData]="softwareByFunderData" [color]="softwareColor"></app-treemap-highchart>
223
              </li>
224
            </ul>
225
          </div>
226

    
227

    
228
        </div>
229
      </div>
230
    </div>
231

    
232
  </div>
233

    
234
  <!--OA ORP-->
235
  <div class="uk-grid uk-child-width-1-1">
236

    
237
    <div>
238
      <div class="md-card chartCard">
239
        <div class="md-card-content">
240

    
241
          <!--MOBILE & PAD PORTRAIT-->
242
          <div class="uk-hidden@m">
243
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
244
              <label class="uk-margin-right">Show by: </label>
245
              <select class="md-input" #selectORPGroupBy (change)="getORPGroupByMobile(selectORPGroupBy.value)" style="width: 230px; display: inline-block">
246
                <option value="country">country</option>
247
                <option value="datasource">datasource</option>
248
                <option value="organization">organization</option>
249
                <option value="funder">funder</option>
250
              </select>
251
            </div>
252

    
253
            <iframe *ngIf="orpGroupByView==='country' && otherByCountryChartURLMobile"
254
                    width="100%" height="550" [src]="otherByCountryChartURLMobile"></iframe>
255
            <iframe *ngIf="orpGroupByView==='datasource' && otherByDatasourceChartURLMobile"
256
                    width="100%" height="550" [src]="otherByDatasourceChartURLMobile"></iframe>
257
            <iframe *ngIf="orpGroupByView==='organization' && otherByOrganizationChartURLMobile"
258
                    width="100%" height="550" [src]="otherByOrganizationChartURLMobile"></iframe>
259
            <app-treemap-highchart *ngIf="orpGroupByView==='funder' && otherByFunderData"
260
                                   [chartTitle]="'Open Access other research products'" [chartSubtitle]="'by funder'"
261
                                   [chartData]="otherByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
262

    
263
          </div>
264

    
265

    
266
          <!--LAPTOP & PAD LANDSCAPE-->
267
          <div class="uk-visible@m">
268
            <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
269
                data-uk-switcher="{connect:'#switcher-content-a-fade-orp', animation: 'fade'}">
270
              <li class="uk-active"><a (click)="getORPGroupBy('country')">Country</a></li>
271
              <li><a (click)="getORPGroupBy('datasource')">Datasource</a></li>
272
              <li><a (click)="getORPGroupBy('organization')">Organization</a></li>
273
              <li><a (click)="getORPGroupBy('funder')">Funder</a></li>
274
            </ul>
275

    
276
            <ul id="switcher-content-a-fade-orp" class="uk-switcher uk-margin">
277
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
278
                <iframe *ngIf="otherByCountryChartURL"
279
                        width="100%" height="350" [src]="otherByCountryChartURL"></iframe>
280
              </li>
281
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
282
                <iframe *ngIf="otherByDatasourceChartURL"
283
                        width="100%" height="350" [src]="otherByDatasourceChartURL"></iframe>
284
              </li>
285
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
286
                <iframe *ngIf="otherByOrganizationChartURL"
287
                        width="100%" height="350" [src]="otherByOrganizationChartURL"></iframe>
288
              </li>
289
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
290
                <app-treemap-highchart *ngIf="otherByFunderData"
291
                                       [chartTitle]="'Open Access other research products'" [chartSubtitle]="'by funder'"
292
                                       [chartData]="otherByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
293
              </li>
294
            </ul>
295
          </div>
296

    
297

    
298
        </div>
299
      </div>
300
    </div>
301

    
302
  </div>
303

    
304

    
305

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

    
308
    <!--<div class="uk-grid-margin">-->
309
      <!--<div class="md-card chartCard">-->
310
        <!--<div class="md-card-content">-->
311
          <!--<iframe width="100%" height="550" [src]="publicationsByCountryChartURLMobile"></iframe>-->
312
        <!--</div>-->
313
      <!--</div>-->
314
    <!--</div>-->
315

    
316
    <!--<div class="uk-grid-margin">-->
317
      <!--<div class="md-card chartCard">-->
318
        <!--<div class="md-card-content">-->
319
          <!--<iframe width="100%" height="550" [src]="publicationsByDatasourceChartURLMobile"></iframe>-->
320
        <!--</div>-->
321
      <!--</div>-->
322
    <!--</div>-->
323

    
324
    <!--<div class="uk-grid-margin">-->
325
      <!--<div class="md-card chartCard">-->
326
        <!--<div class="md-card-content">-->
327
          <!--<iframe width="100%" height="550" [src]="publicationsByOrganizationChartURLMobile"></iframe>-->
328
        <!--</div>-->
329
      <!--</div>-->
330
    <!--</div>-->
331

    
332
    <!--<div class="uk-grid-margin">-->
333
      <!--<div class="md-card chartCard">-->
334
        <!--<div class="md-card-content">-->
335
          <!--<iframe width="100%" height="550" [src]="datasetsByCountryChartURLMobile"></iframe>-->
336
        <!--</div>-->
337
      <!--</div>-->
338
    <!--</div>-->
339

    
340
    <!--<div class="uk-grid-margin">-->
341
      <!--<div class="md-card chartCard">-->
342
        <!--<div class="md-card-content">-->
343
          <!--<iframe width="100%" height="550" [src]="datasetsByDatasourceChartURLMobile"></iframe>-->
344
        <!--</div>-->
345
      <!--</div>-->
346
    <!--</div>-->
347

    
348
    <!--<div class="uk-grid-margin">-->
349
      <!--<div class="md-card chartCard">-->
350
        <!--<div class="md-card-content">-->
351
          <!--<iframe width="100%" height="550" [src]="datasetsByOrganizationChartURLMobile"></iframe>-->
352
        <!--</div>-->
353
      <!--</div>-->
354
    <!--</div>-->
355

    
356
    <!--<div class="uk-grid-margin">-->
357
      <!--<div class="md-card chartCard">-->
358
        <!--<div class="md-card-content">-->
359
          <!--<iframe width="100%" height="550" [src]="softwareByCountryChartURL"></iframe>-->
360
        <!--</div>-->
361
      <!--</div>-->
362
    <!--</div>-->
363

    
364
    <!--<div class="uk-grid-margin">-->
365
      <!--<div class="md-card chartCard">-->
366
        <!--<div class="md-card-content">-->
367
          <!--<iframe width="100%" height="550" [src]="softwareByDatasourceChartURL"></iframe>-->
368
        <!--</div>-->
369
      <!--</div>-->
370
    <!--</div>-->
371

    
372
    <!--<div class="uk-grid-margin">-->
373
      <!--<div class="md-card chartCard">-->
374
        <!--<div class="md-card-content">-->
375
          <!--<iframe width="100%" height="550" [src]="softwareByOrganizationChartURL"></iframe>-->
376
        <!--</div>-->
377
      <!--</div>-->
378
    <!--</div>-->
379

    
380
    <!--<div class="uk-grid-margin">-->
381
      <!--<div class="md-card chartCard">-->
382
        <!--<div class="md-card-content">-->
383
          <!--<iframe width="100%" height="550" [src]="otherByCountryChartURL"></iframe>-->
384
        <!--</div>-->
385
      <!--</div>-->
386
    <!--</div>-->
387

    
388
    <!--<div class="uk-grid-margin">-->
389
      <!--<div class="md-card chartCard">-->
390
        <!--<div class="md-card-content">-->
391
          <!--<iframe width="100%" height="550" [src]="otherByDatasourceChartURL"></iframe>-->
392
        <!--</div>-->
393
      <!--</div>-->
394
    <!--</div>-->
395

    
396
    <!--<div class="uk-grid-margin">-->
397
      <!--<div class="md-card chartCard">-->
398
        <!--<div class="md-card-content">-->
399
          <!--<iframe width="100%" height="550" [src]="otherByOrganizationChartURL"></iframe>-->
400
        <!--</div>-->
401
      <!--</div>-->
402
    <!--</div>-->
403

    
404
  </div>
405

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

    
408
    <!--<div class="uk-grid-margin">-->
409
      <!--<div class="md-card chartCard">-->
410
        <!--<div class="md-card-content">-->
411
          <!--<app-treemap-highchart *ngIf="publicationsByFunderData" [chartTitle]="'OA Publications by funder'"-->
412
                                 <!--[chartData]="publicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>-->
413
        <!--</div>-->
414
      <!--</div>-->
415
    <!--</div>-->
416

    
417
    <!--<div class="uk-grid-margin">-->
418
      <!--<div class="md-card chartCard">-->
419
        <!--<div class="md-card-content">-->
420
          <!--<app-treemap-highchart *ngIf="datasetsByFunderData" [chartTitle]="'OA Datasets by funder'"-->
421
                                 <!--[chartData]="datasetsByFunderData" [color]="datasetColor"></app-treemap-highchart>-->
422
        <!--</div>-->
423
      <!--</div>-->
424
    <!--</div>-->
425

    
426
    <!--<div class="uk-grid-margin">-->
427
      <!--<div class="md-card chartCard">-->
428
        <!--<div class="md-card-content">-->
429
          <!--<app-treemap-highchart *ngIf="softwareByFunderData" [chartTitle]="'OS Software by funder'"-->
430
                                 <!--[chartData]="softwareByFunderData" [color]="softwareColor"></app-treemap-highchart>-->
431
        <!--</div>-->
432
      <!--</div>-->
433
    <!--</div>-->
434

    
435
    <!--<div class="uk-grid-margin">-->
436
      <!--<div class="md-card chartCard">-->
437
        <!--<div class="md-card-content">-->
438
          <!--<app-treemap-highchart *ngIf="otherByFunderData" [chartTitle]="'OA Other research products by funder'"-->
439
                                 <!--[chartData]="otherByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>-->
440
        <!--</div>-->
441
      <!--</div>-->
442
    <!--</div>-->
443

    
444

    
445
  </div>
446

    
447

    
448
  <!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
449
</div>
(1-1/2)