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="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 (top funders)'"
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="group-by-cdof 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="400" [src]="publicationsByCountryChartURL"></iframe>
70
              </li>
71
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
72
                <iframe *ngIf="publicationsByDatasourceChartURL"
73
                        width="100%" height="400" [src]="publicationsByDatasourceChartURL"></iframe>
74
              </li>
75
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
76
                <iframe *ngIf="publicationsByOrganizationChartURL"
77
                        width="100%" height="400" [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 (top funders)'"
82
                                       [chartData]="publicationsByFunderData" [color]="publicationColor" [height]="400"></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="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 (top funders)'"
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="group-by-cdof 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="400" [src]="datasetsByCountryChartURL"></iframe>
140
              </li>
141
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
142
                <iframe *ngIf="datasetsByDatasourceChartURL"
143
                        width="100%" height="400" [src]="datasetsByDatasourceChartURL"></iframe>
144
              </li>
145
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
146
                <iframe *ngIf="datasetsByOrganizationChartURL"
147
                        width="100%" height="400" [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 (top funders)'"
152
                                       [chartData]="datasetsByFunderData" [color]="datasetColor" [height]="400"></app-treemap-highchart>
153
              </li>
154
            </ul>
155
          </div>
156

    
157

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

    
162
  </div>
163

    
164
  <!--OS 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="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 Source software'" [chartSubtitle]="'by funder (top funders)'"
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="group-by-cdof 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="400" [src]="softwareByCountryChartURL"></iframe>
210
              </li>
211
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
212
                <iframe *ngIf="softwareByDatasourceChartURL"
213
                        width="100%" height="400" [src]="softwareByDatasourceChartURL"></iframe>
214
              </li>
215
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
216
                <iframe *ngIf="softwareByOrganizationChartURL"
217
                        width="100%" height="400" [src]="softwareByOrganizationChartURL"></iframe>
218
              </li>
219
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
220
                <app-treemap-highchart *ngIf="softwareByFunderData"
221
                                       [chartTitle]="'Open Source software'" [chartSubtitle]="'by funder (top funders)'"
222
                                       [chartData]="softwareByFunderData" [color]="softwareColor" [height]="400"></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="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 (top funders)'"
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="group-by-cdof 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="400" [src]="otherByCountryChartURL"></iframe>
280
              </li>
281
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
282
                <iframe *ngIf="otherByDatasourceChartURL"
283
                        width="100%" height="400" [src]="otherByDatasourceChartURL"></iframe>
284
              </li>
285
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
286
                <iframe *ngIf="otherByOrganizationChartURL"
287
                        width="100%" height="400" [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 (top funders)'"
292
                                       [chartData]="otherByFunderData" [color]="otherResearchProductsColor" [height]="400"></app-treemap-highchart>
293
              </li>
294
            </ul>
295
          </div>
296

    
297

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

    
302
  </div>
303

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