Project

General

Profile

1
<div>
2

    
3
  <div class="pidIndicator">
4
    <h3 class="uk-margin-remove">PID</h3>
5
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
6

    
7
      <div class="uk-grid-margin">
8
        <div class="md-card chartCard">
9
          <div class="md-card-content">
10
            <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
11
          </div>
12
        </div>
13
      </div>
14

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

    
23
      <div class="uk-grid-margin">
24
        <div class="md-card chartCard">
25
          <div class="md-card-content">
26
            <iframe *ngIf="otherWithPIDByDatasourceChartURL" width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
27
          </div>
28
        </div>
29
      </div>
30

    
31
      <div class="uk-grid-margin">
32
        <div class="md-card chartCard">
33
          <div class="md-card-content">
34
            <iframe *ngIf="otherWithPIDByOrganizationChartURL" width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
35
          </div>
36
        </div>
37
      </div>
38

    
39
      <div class="uk-grid-margin">
40
        <div class="md-card chartCard">
41
          <div class="md-card-content">
42
            <app-treemap-highchart *ngIf="otherWithPIDByFunderData" [chartTitle]="'OA Other research products with PID by funder'"
43
                                   [chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
44
          </div>
45
        </div>
46
      </div>
47

    
48
    </div>
49
  </div>
50

    
51
  <div class="licenceIndicator uk-margin-large-top">
52
    <h3 class="uk-margin-remove">Licence</h3>
53
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
54

    
55
      <div class="uk-grid-margin">
56
        <div class="md-card chartCard">
57
          <div class="md-card-content">
58
            <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>
59
          </div>
60
        </div>
61
      </div>
62

    
63
      <div class="uk-grid-margin">
64
        <div class="md-card chartCard">
65
          <div class="md-card-content">
66
            <iframe *ngIf="otherWithLicenceByCountryChartURL" width="100%" height="550" [src]="otherWithLicenceByCountryChartURL"></iframe>
67
          </div>
68
        </div>
69
      </div>
70

    
71
      <div class="uk-grid-margin">
72
        <div class="md-card chartCard">
73
          <div class="md-card-content">
74
            <iframe *ngIf="otherWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
75
          </div>
76
        </div>
77
      </div>
78

    
79
      <div class="uk-grid-margin">
80
        <div class="md-card chartCard">
81
          <div class="md-card-content">
82
            <iframe *ngIf="otherWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
83
          </div>
84
        </div>
85
      </div>
86

    
87
      <div class="uk-grid-margin">
88
        <div class="md-card chartCard">
89
          <div class="md-card-content">
90
            <app-treemap-highchart *ngIf="otherWithLicenceByFunderData" [chartTitle]="'OA Other research products with licence by funder'"
91
                                   [chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
92
          </div>
93
        </div>
94
      </div>
95

    
96
    </div>
97
  </div>
98

    
99
  <div class="indicatorsTable uk-visible@m uk-margin-large-top">
100

    
101
    <h3 class="">More details for other research products</h3>
102

    
103
    <div class="uk-margin-top uk-margin-bottom">
104
      <label class="uk-margin-right">Show: </label>
105
      <select class="md-input" #selectOtherContent (change)="getContent('other', selectOtherContent.value)" style="width: 230px; display: inline-block">
106
        <option value="affiliated">affiliated</option>
107
        <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
108
        <option value="deposited">deposited</option>
109
        <option value="deposited_peer_reviewed">deposited peer reviewed</option>
110
      </select>
111
      <!--<span class="md-input-bar"></span>-->
112
    </div>
113

    
114
    <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
115
      <div class="absoluteTable">
116
        <div class="md-card chartCard">
117
          <div class="md-card-content">
118

    
119
            <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#other-indicators-content-a-fade', animation: 'fade'}">
120
              <li aria-expanded="true" class="uk-active">
121
                <a href="#">
122
                  <i class="fas fa-hashtag"></i>
123
                </a>
124
              </li>
125
              <li aria-expanded="false" class="">
126
                <a href="#">
127
                  <i class="fas fa-percentage"></i>
128
                </a>
129
              </li>
130
            </ul>
131

    
132
            <ul id="other-indicators-content-a-fade" class="uk-switcher uk-margin" >
133
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
134
                <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
135
                <app-countries-table *ngIf="otherAbsoluteTableData" [isPercentage]="false" [countries]="otherAbsoluteTableData" [view]="'openScience'" [entity]="'other'"></app-countries-table>
136
              </li>
137
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
138
                <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
139
                <app-countries-table *ngIf="otherPercentageTableData" [isPercentage]="true" [countries]="otherPercentageTableData" [view]="'openScience'" [entity]="'other'"></app-countries-table>
140
              </li>
141
            </ul>
142

    
143
          </div>
144
        </div>
145

    
146
      </div>
147

    
148
    </div>
149

    
150

    
151
  </div>
152

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