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 class="uk-visible@m"><a href="#">More Details</a></li>
7
  </ul>
8

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

    
14
          <div class="uk-grid-margin">
15
            <div class="md-card chartCard">
16
              <div class="md-card-content">
17
                <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
18
              </div>
19
            </div>
20
          </div>
21

    
22
          <div class="uk-grid-margin">
23
            <div class="md-card chartCard">
24
              <div class="md-card-content">
25

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

    
38
                  <iframe *ngIf="softwareWithPIDGroupByView==='country' && softwareWithPIDByCountryChartURLMobile"
39
                          width="100%" height="550" [src]="softwareWithPIDByCountryChartURLMobile"></iframe>
40
                  <iframe *ngIf="softwareWithPIDGroupByView==='datasource' && softwareWithPIDByDatasourceChartURLMobile"
41
                          width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURLMobile"></iframe>
42
                  <iframe *ngIf="softwareWithPIDGroupByView==='organization' && softwareWithPIDByOrganizationChartURLMobile"
43
                          width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURLMobile"></iframe>
44
                  <app-treemap-highchart *ngIf="softwareWithPIDGroupByView==='funder' && softwareWithPIDByFunderData"
45
                                         [chartTitle]="'OS Software with PID by funder'"
46
                                         [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
47

    
48
                </div>
49

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

    
60
                  <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
61
                    <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
62
                      <iframe *ngIf="softwareWithPIDByCountryChartURL"
63
                              width="100%" height="350" [src]="softwareWithPIDByCountryChartURL"></iframe>
64
                    </li>
65
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
66
                      <iframe *ngIf="softwareWithPIDByDatasourceChartURL"
67
                              width="100%" height="350" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
68
                    </li>
69
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
70
                      <iframe *ngIf="softwareWithPIDByOrganizationChartURL"
71
                              width="100%" height="350" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
72
                    </li>
73
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
74
                      <app-treemap-highchart *ngIf="softwareWithPIDByFunderData"
75
                                             [chartTitle]="'OS Software with PID by funder'"
76
                                             [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
77
                    </li>
78
                  </ul>
79
                </div>
80

    
81
              </div>
82
            </div>
83
          </div>
84

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

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

    
100
          <div class="uk-grid-margin">
101
            <div class="md-card chartCard">
102
              <div class="md-card-content">
103

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

    
116
                  <iframe *ngIf="softwareWithLicenceGroupByView==='country' && softwareWithLicenceByCountryChartURLMobile"
117
                          width="100%" height="550" [src]="softwareWithLicenceByCountryChartURLMobile"></iframe>
118
                  <iframe *ngIf="softwareWithLicenceGroupByView==='datasource' && softwareWithLicenceByDatasourceChartURLMobile"
119
                          width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURLMobile"></iframe>
120
                  <iframe *ngIf="softwareWithLicenceGroupByView==='organization' && softwareWithLicenceByOrganizationChartURLMobile"
121
                          width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURLMobile"></iframe>
122
                  <app-treemap-highchart *ngIf="softwareWithLicenceGroupByView==='funder' && softwareWithLicenceByFunderData"
123
                                         [chartTitle]="'OS Software with licence by funder'"
124
                                         [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
125

    
126
                </div>
127

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

    
138
                  <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
139
                    <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
140
                      <iframe *ngIf="softwareWithLicenceByCountryChartURL"
141
                              width="100%" height="350" [src]="softwareWithLicenceByCountryChartURL"></iframe>
142
                    </li>
143
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
144
                      <iframe *ngIf="softwareWithLicenceByDatasourceChartURL"
145
                              width="100%" height="350" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
146
                    </li>
147
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
148
                      <iframe *ngIf="softwareWithLicenceByOrganizationChartURL"
149
                              width="100%" height="350" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
150
                    </li>
151
                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">
152
                      <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData"
153
                                             [chartTitle]="'OS Software with licence by funder'"
154
                                             [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
155
                    </li>
156
                  </ul>
157
                </div>
158

    
159
              </div>
160
            </div>
161
          </div>
162

    
163
        </div>
164
      </div>
165
    </li>
166
    <li>
167
      <div class="indicatorsTable uk-visible@m uk-margin-large-top">
168

    
169
        <h3 class="">More details for software</h3>
170

    
171
        <div class="uk-margin-top uk-margin-bottom">
172
          <label class="uk-margin-right">Show: </label>
173
          <select class="md-input" #selectSoftwareContent (change)="getContent('software', selectSoftwareContent.value)" style="width: 230px; display: inline-block">
174
            <option value="affiliated">affiliated</option>
175
            <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
176
            <option value="deposited">deposited</option>
177
            <option value="deposited_peer_reviewed">deposited peer reviewed</option>
178
          </select>
179
          <!--<span class="md-input-bar"></span>-->
180
        </div>
181

    
182
        <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
183
          <div class="absoluteTable">
184
            <div class="md-card chartCard">
185
              <div class="md-card-content">
186

    
187
                <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#software-indicators-content-a-fade', animation: 'fade'}">
188
                  <li aria-expanded="true" class="uk-active">
189
                    <a href="#">
190
                      <i class="fas fa-hashtag"></i>
191
                    </a>
192
                  </li>
193
                  <li aria-expanded="false" class="">
194
                    <a href="#">
195
                      <i class="fas fa-percentage"></i>
196
                    </a>
197
                  </li>
198
                </ul>
199

    
200
                <ul id="software-indicators-content-a-fade" class="uk-switcher uk-margin" >
201
                  <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
202
                    <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
203
                    <app-countries-table *ngIf="softwareAbsoluteTableData" [isPercentage]="false" [countries]="softwareAbsoluteTableData" [view]="'openScience'" [entity]="'software'"></app-countries-table>
204
                  </li>
205
                  <li aria-hidden="true" style="animation-duration: 200ms;" class="">
206
                    <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
207
                    <app-countries-table *ngIf="softwarePercentageTableData" [isPercentage]="true" [countries]="softwarePercentageTableData" [view]="'openScience'" [entity]="'software'"></app-countries-table>
208
                  </li>
209
                </ul>
210

    
211
              </div>
212
            </div>
213

    
214
          </div>
215

    
216
        </div>
217

    
218
      </div>
219
    </li>
220
  </ul>
221

    
222
  <!--<div class="pidIndicator">
223
    <h3 class="uk-margin-remove">PID</h3>
224
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
225

    
226
      <div class="uk-grid-margin">
227
        <div class="md-card chartCard">
228
          <div class="md-card-content">
229
            <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
230
          </div>
231
        </div>
232
      </div>
233

    
234
      <div class="uk-grid-margin">
235
        <div class="md-card chartCard">
236
          <div class="md-card-content">
237

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

    
250
              <iframe *ngIf="softwareWithPIDGroupByView==='country' && softwareWithPIDByCountryChartURLMobile"
251
                      width="100%" height="550" [src]="softwareWithPIDByCountryChartURLMobile"></iframe>
252
              <iframe *ngIf="softwareWithPIDGroupByView==='datasource' && softwareWithPIDByDatasourceChartURLMobile"
253
                      width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURLMobile"></iframe>
254
              <iframe *ngIf="softwareWithPIDGroupByView==='organization' && softwareWithPIDByOrganizationChartURLMobile"
255
                      width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURLMobile"></iframe>
256
              <app-treemap-highchart *ngIf="softwareWithPIDGroupByView==='funder' && softwareWithPIDByFunderData"
257
                                     [chartTitle]="'OS Software with PID by funder'"
258
                                     [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
259

    
260
            </div>
261

    
262
            &lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
263
            <div class="uk-visible@m">
264
              <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
265
                  data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
266
                <li class="uk-active"><a (click)="getSoftwareWithPIDGroupBy('country')">Country</a></li>
267
                <li><a (click)="getSoftwareWithPIDGroupBy('datasource')">Datasource</a></li>
268
                <li><a (click)="getSoftwareWithPIDGroupBy('organization')">Organization</a></li>
269
                <li><a (click)="getSoftwareWithPIDGroupBy('funder')">Funder</a></li>
270
              </ul>
271

    
272
              <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
273
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
274
                  <iframe *ngIf="softwareWithPIDByCountryChartURL"
275
                          width="100%" height="350" [src]="softwareWithPIDByCountryChartURL"></iframe>
276
                </li>
277
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
278
                  <iframe *ngIf="softwareWithPIDByDatasourceChartURL"
279
                          width="100%" height="350" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
280
                </li>
281
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
282
                  <iframe *ngIf="softwareWithPIDByOrganizationChartURL"
283
                          width="100%" height="350" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
284
                </li>
285
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
286
                  <app-treemap-highchart *ngIf="softwareWithPIDByFunderData"
287
                                         [chartTitle]="'OS Software with PID by funder'"
288
                                         [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
289
                </li>
290
              </ul>
291
            </div>
292

    
293
          </div>
294
        </div>
295
      </div>
296

    
297
    </div>
298
  </div>
299

    
300
  <div class="licenceIndicator uk-margin-large-top">
301
    <h3 class="uk-margin-remove">Licence</h3>
302
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
303

    
304
      <div class="uk-grid-margin">
305
        <div class="md-card chartCard">
306
          <div class="md-card-content">
307
            <iframe *ngIf="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></iframe>
308
          </div>
309
        </div>
310
      </div>
311

    
312
      <div class="uk-grid-margin">
313
        <div class="md-card chartCard">
314
          <div class="md-card-content">
315

    
316
            &lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
317
            <div class="uk-hidden@m">
318
              <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
319
                <label class="uk-margin-right">Show by: </label>
320
                <select class="md-input" #selectLicenceGroupBy (change)="getSoftwareWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
321
                  <option value="country">country</option>
322
                  <option value="datasource">datasource</option>
323
                  <option value="organization">organization</option>
324
                  <option value="funder">funder</option>
325
                </select>
326
              </div>
327

    
328
              <iframe *ngIf="softwareWithLicenceGroupByView==='country' && softwareWithLicenceByCountryChartURLMobile"
329
                      width="100%" height="550" [src]="softwareWithLicenceByCountryChartURLMobile"></iframe>
330
              <iframe *ngIf="softwareWithLicenceGroupByView==='datasource' && softwareWithLicenceByDatasourceChartURLMobile"
331
                      width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURLMobile"></iframe>
332
              <iframe *ngIf="softwareWithLicenceGroupByView==='organization' && softwareWithLicenceByOrganizationChartURLMobile"
333
                      width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURLMobile"></iframe>
334
              <app-treemap-highchart *ngIf="softwareWithLicenceGroupByView==='funder' && softwareWithLicenceByFunderData"
335
                                     [chartTitle]="'OS Software with licence by funder'"
336
                                     [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
337

    
338
            </div>
339

    
340
            &lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
341
            <div class="uk-visible@m">
342
              <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
343
                  data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
344
                <li class="uk-active"><a (click)="getSoftwareWithLicenceGroupBy('country')">Country</a></li>
345
                <li><a (click)="getSoftwareWithLicenceGroupBy('datasource')">Datasource</a></li>
346
                <li><a (click)="getSoftwareWithLicenceGroupBy('organization')">Organization</a></li>
347
                <li><a (click)="getSoftwareWithLicenceGroupBy('funder')">Funder</a></li>
348
              </ul>
349

    
350
              <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
351
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
352
                  <iframe *ngIf="softwareWithLicenceByCountryChartURL"
353
                          width="100%" height="350" [src]="softwareWithLicenceByCountryChartURL"></iframe>
354
                </li>
355
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
356
                  <iframe *ngIf="softwareWithLicenceByDatasourceChartURL"
357
                          width="100%" height="350" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
358
                </li>
359
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
360
                  <iframe *ngIf="softwareWithLicenceByOrganizationChartURL"
361
                          width="100%" height="350" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
362
                </li>
363
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
364
                  <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData"
365
                                         [chartTitle]="'OS Software with licence by funder'"
366
                                         [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
367
                </li>
368
              </ul>
369
            </div>
370

    
371
          </div>
372
        </div>
373
      </div>
374

    
375
    </div>
376
  </div>-->
377

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

    
380
    <h3 class="">More details for software</h3>
381

    
382
    <div class="uk-margin-top uk-margin-bottom">
383
      <label class="uk-margin-right">Show: </label>
384
      <select class="md-input" #selectSoftwareContent (change)="getContent('software', selectSoftwareContent.value)" style="width: 230px; display: inline-block">
385
        <option value="affiliated">affiliated</option>
386
        <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
387
        <option value="deposited">deposited</option>
388
        <option value="deposited_peer_reviewed">deposited peer reviewed</option>
389
      </select>
390
      &lt;!&ndash;<span class="md-input-bar"></span>&ndash;&gt;
391
    </div>
392

    
393
    <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
394
      <div class="absoluteTable">
395
        <div class="md-card chartCard">
396
          <div class="md-card-content">
397

    
398
            <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#software-indicators-content-a-fade', animation: 'fade'}">
399
              <li aria-expanded="true" class="uk-active">
400
                <a href="#">
401
                  <i class="fas fa-hashtag"></i>
402
                </a>
403
              </li>
404
              <li aria-expanded="false" class="">
405
                <a href="#">
406
                  <i class="fas fa-percentage"></i>
407
                </a>
408
              </li>
409
            </ul>
410

    
411
            <ul id="software-indicators-content-a-fade" class="uk-switcher uk-margin" >
412
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
413
                <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
414
                <app-countries-table *ngIf="softwareAbsoluteTableData" [isPercentage]="false" [countries]="softwareAbsoluteTableData" [view]="'openScience'" [entity]="'software'"></app-countries-table>
415
              </li>
416
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
417
                <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
418
                <app-countries-table *ngIf="softwarePercentageTableData" [isPercentage]="true" [countries]="softwarePercentageTableData" [view]="'openScience'" [entity]="'software'"></app-countries-table>
419
              </li>
420
            </ul>
421

    
422
          </div>
423
        </div>
424

    
425
      </div>
426

    
427
    </div>
428

    
429
  </div>-->
430

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