Project

General

Profile

« Previous | Next » 

Revision 62830

View differences:

country-os-publications-indicators.component.html
1
<div *ngIf="indicator && indicator=='pid'" class="pidIndicator">
2
  <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1
<div *ngIf="indicator && indicator=='gold-green'" class="goldGreenIndicator">
3 2

  
4
    <div class="uk-grid-margin">
3
  <div class="uk-grid uk-grid-margin">
4
    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
5 5
      <div class="md-card chartCard">
6 6
        <div class="md-card-content">
7
          <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
7
          <iframe *ngIf="publicationsWithGoldGreenTimeline" width="100%" height="550" [src]="publicationsWithGoldGreenTimeline"></iframe>
8 8
        </div>
9 9
      </div>
10 10
    </div>
11
  </div>
11 12

  
12
    <div class="uk-grid-margin">
13
  <div class="uk-grid uk-grid-margin">
14
    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
13 15
      <div class="md-card chartCard">
14 16
        <div class="md-card-content">
15 17

  
......
17 19
          <div class="uk-hidden@m">
18 20
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
19 21
              <label class="uk-margin-right">Show by: </label>
20
              <select class="md-input" #selectPIDGroupBy (change)="getPublicationsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
22
              <select class="md-input" #selectGoldGreenGroupBy (change)="getPublicationsWithGoldGreenGroupByMobile(selectGoldGreenGroupBy.value)" style="display: inline-block">
21 23
                <option value="datasource">datasource</option>
22 24
                <option value="organization">organization</option>
23 25
                <option value="funder">funder</option>
24 26
              </select>
25 27
            </div>
26 28

  
27
            <iframe *ngIf="publicationsWithPIDGroupByView==='datasource' && publicationsWithPIDByDatasourceChartURLMobile"
28
                    width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURLMobile"></iframe>
29
            <iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURLMobile"
30
                    width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURLMobile"></iframe>
31
            <app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
32
                                   [chartTitle]="'OA Publications with PID by funder'"
33
                                   [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
29
            <iframe *ngIf="publicationsWithGoldGreenGroupByView==='datasource' && publicationsWithGoldGreenByDatasourceChartURL"
30
                    width="100%" height="550" [src]="publicationsWithGoldGreenByDatasourceChartURL"></iframe>
31
            <iframe *ngIf="publicationsWithGoldGreenGroupByView==='organization' && publicationsWithGoldGreenByOrganizationChartURL"
32
                    width="100%" height="550" [src]="publicationsWithGoldGreenByOrganizationChartURL"></iframe>
33
            <iframe *ngIf="publicationsWithGoldGreenGroupByView==='funder' && publicationsWithGoldGreenByFunderChartURL"
34
                    width="100%" height="550" [src]="publicationsWithGoldGreenByFunderChartURL"></iframe>
34 35

  
36

  
35 37
          </div>
36 38

  
37 39
          <!--LAPTOP & PAD LANDSCAPE-->
38 40
          <div class="uk-visible@m">
39
            <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
40
                data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
41
              <li class="uk-active"><a (click)="getPublicationsWithPIDGroupBy('datasource')">Datasource</a></li>
42
              <li><a (click)="getPublicationsWithPIDGroupBy('organization')">Organization</a></li>
43
              <li><a (click)="getPublicationsWithPIDGroupBy('funder')">Funder</a></li>
41
            <ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
42
                data-uk-switcher="{connect:'#switcher-content-a-fade-publications-gold-green', animation: 'fade'}">
43
              <li class="uk-active"><a (click)="getPublicationsWithGoldGreenGroupBy('datasource')">Datasource</a></li>
44
              <li><a (click)="getPublicationsWithGoldGreenGroupBy('organization')">Organization</a></li>
45
              <li><a (click)="getPublicationsWithGoldGreenGroupBy('funder')">Funder</a></li>
44 46
            </ul>
45 47

  
46
            <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
47
              <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
48
                <iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
49
                        width="100%" height="350" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
48
            <ul id="switcher-content-a-fade-publications-gold-green" class="uk-switcher uk-margin">
49
              <li aria-hidden="false" class="uk-active" aria-hidden="true" style="animation-duration: 200ms;" class="">
50
                <iframe *ngIf="publicationsWithGoldGreenByDatasourceChartURL"
51
                        width="100%" height="650" [src]="publicationsWithGoldGreenByDatasourceChartURL"></iframe>
50 52
              </li>
51 53
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
52
                <iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
53
                        width="100%" height="350" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
54
                <iframe *ngIf="publicationsWithGoldGreenByOrganizationChartURL"
55
                        width="100%" height="650" [src]="publicationsWithGoldGreenByOrganizationChartURL"></iframe>
54 56
              </li>
55 57
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
56
                <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
57
                                       [chartTitle]="'OA Publications with PID by funder'"
58
                                       [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
58
                <iframe *ngIf="publicationsWithGoldGreenByFunderChartURL"
59
                        width="100%" height="650" [src]="publicationsWithGoldGreenByFunderChartURL"></iframe>
59 60
              </li>
60 61
            </ul>
61 62
          </div>
......
63 64
        </div>
64 65
      </div>
65 66
    </div>
67
  </div>
66 68

  
69
</div>
70

  
71
<div *ngIf="indicator && indicator=='abstract'" class="abstractIndicator">
72

  
73
  <div class="uk-grid uk-grid-margin">
74
    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
75
      <div class="md-card chartCard">
76
        <div class="md-card-content">
77
          <iframe *ngIf="publicationsWithAbstractTimeline" width="100%" height="550" [src]="publicationsWithAbstractTimeline"></iframe>
78
        </div>
79
      </div>
80
    </div>
67 81
  </div>
82

  
83
  <div class="uk-grid uk-grid-margin">
84
    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
85
      <div class="md-card chartCard">
86
        <div class="md-card-content">
87

  
88
          <!--MOBILE & PAD PORTRAIT-->
89
          <div class="uk-hidden@m">
90
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
91
              <label class="uk-margin-right">Show by: </label>
92
              <select class="md-input" #selectAbstractGroupBy (change)="getPublicationsWithAbstractGroupByMobile(selectAbstractGroupBy.value)" style="display: inline-block">
93
                <option value="datasource">datasource</option>
94
                <option value="organization">organization</option>
95
                <option value="funder">funder</option>
96
              </select>
97
            </div>
98

  
99
            <iframe *ngIf="publicationsWithAbstractGroupByView==='datasource' && publicationsWithAbstractByDatasourceChartURL"
100
                    width="100%" height="550" [src]="publicationsWithAbstractByDatasourceChartURL"></iframe>
101
            <iframe *ngIf="publicationsWithAbstractGroupByView==='organization' && publicationsWithAbstractByOrganizationChartURL"
102
                    width="100%" height="550" [src]="publicationsWithAbstractByOrganizationChartURL"></iframe>
103
            <app-treemap-highchart *ngIf="publicationsWithAbstractGroupByView==='funder' && publicationsWithAbstractByFunderData"
104
                                   [chartTitle]="'Open Access publications with abstract'" [chartSubtitle]="'by funder (top funders)'"
105
                                   [chartData]="publicationsWithAbstractByFunderData" [color]="publicationColor"></app-treemap-highchart>
106

  
107
          </div>
108

  
109
          <!--LAPTOP & PAD LANDSCAPE-->
110
          <div class="uk-visible@m">
111
            <ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
112
                data-uk-switcher="{connect:'#switcher-content-a-fade-publications-abstract', animation: 'fade'}">
113
              <li class="uk-active"><a (click)="getPublicationsWithAbstractGroupBy('datasource')">Datasource</a></li>
114
              <li><a (click)="getPublicationsWithAbstractGroupBy('organization')">Organization</a></li>
115
              <li><a (click)="getPublicationsWithAbstractGroupBy('funder')">Funder</a></li>
116
            </ul>
117

  
118
            <ul id="switcher-content-a-fade-publications-abstract" class="uk-switcher uk-margin">
119
              <li aria-hidden="false" class="uk-active" aria-hidden="true" style="animation-duration: 200ms;" class="">
120
                <iframe *ngIf="publicationsWithAbstractByDatasourceChartURL"
121
                        width="100%" height="650" [src]="publicationsWithAbstractByDatasourceChartURL"></iframe>
122
              </li>
123
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
124
                <iframe *ngIf="publicationsWithAbstractByOrganizationChartURL"
125
                        width="100%" height="650" [src]="publicationsWithAbstractByOrganizationChartURL"></iframe>
126
              </li>
127
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
128
                <app-treemap-highchart *ngIf="publicationsWithAbstractByFunderData"
129
                                       [chartTitle]="'Open Access publications with abstract'" [chartSubtitle]="'by funder (top funders)'"
130
                                       [chartData]="publicationsWithAbstractByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
131
              </li>
132
            </ul>
133
          </div>
134

  
135
        </div>
136
      </div>
137
    </div>
138
  </div>
139

  
68 140
</div>
141

  
69 142
<div *ngIf="indicator && indicator=='licence'" class="licenceIndicator">
70
  <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
143
  <div class="uk-grid uk-grid-match uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
71 144

  
72 145
    <div class="uk-grid-margin">
73 146
      <div class="md-card chartCard">
......
80 153
    <div class="uk-grid-margin">
81 154
      <div class="md-card chartCard">
82 155
        <div class="md-card-content">
156
          <iframe *ngIf="publicationsWithCCLicenceTimeline" width="100%" height="550" [src]="publicationsWithCCLicenceTimeline"></iframe>
157
        </div>
158
      </div>
159
    </div>
83 160

  
161
    <div class="uk-grid-margin">
162
      <div class="md-card chartCard">
163
        <div class="md-card-content">
164

  
84 165
          <!--MOBILE & PAD PORTRAIT-->
85 166
          <div class="uk-hidden@m">
86 167
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
87 168
              <label class="uk-margin-right">Show by: </label>
88
              <select class="md-input" #selectLicenceGroupBy (change)="getPublicationsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
169
              <select class="md-input" #selectLicenceGroupBy (change)="getPublicationsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="display: inline-block">
89 170
                <option value="datasource">datasource</option>
90 171
                <option value="organization">organization</option>
91 172
                <option value="funder">funder</option>
92 173
              </select>
93 174
            </div>
94 175

  
95
            <iframe *ngIf="publicationsWithLicenceGroupByView==='datasource' && publicationsWithLicenceByDatasourceChartURLMobile"
96
                    width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURLMobile"></iframe>
97
            <iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURLMobile"
98
                    width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURLMobile"></iframe>
176
            <iframe *ngIf="publicationsWithLicenceGroupByView==='datasource' && publicationsWithLicenceByDatasourceChartURL"
177
                    width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
178
            <iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURL"
179
                    width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
99 180
            <app-treemap-highchart *ngIf="publicationsWithLicenceGroupByView==='funder' && publicationsWithLicenceByFunderData"
100
                                   [chartTitle]="'OA Publications with licence by funder'"
181
                                   [chartTitle]="'Open Access publications with licence'" [chartSubtitle]="'by funder (top funders)'"
101 182
                                   [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
102 183

  
103 184
          </div>
104 185

  
105 186
          <!--LAPTOP & PAD LANDSCAPE-->
106 187
          <div class="uk-visible@m">
107
            <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
108
                data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
188
            <ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
189
                data-uk-switcher="{connect:'#switcher-content-a-fade-publications-licence', animation: 'fade'}">
109 190
              <li class="uk-active"><a (click)="getPublicationsWithLicenceGroupBy('datasource')">Datasource</a></li>
110 191
              <li><a (click)="getPublicationsWithLicenceGroupBy('organization')">Organization</a></li>
111 192
              <li><a (click)="getPublicationsWithLicenceGroupBy('funder')">Funder</a></li>
112 193
            </ul>
113 194

  
114
            <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
115
              <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
195
            <ul id="switcher-content-a-fade-publications-licence" class="uk-switcher uk-margin">
196
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;" class="">
116 197
                <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL"
117
                        width="100%" height="350" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
198
                        width="100%" height="650" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
118 199
              </li>
119 200
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
120 201
                <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL"
121
                        width="100%" height="350" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
202
                        width="100%" height="650" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
122 203
              </li>
123 204
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
124 205
                <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData"
125
                                       [chartTitle]="'OA Publications with licence by funder'"
126
                                       [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
206
                                       [chartTitle]="'Open Access publications with licence'" [chartSubtitle]="'by funder (top funders)'"
207
                                       [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
127 208
              </li>
128 209
            </ul>
129 210
          </div>
......
132 213
      </div>
133 214
    </div>
134 215

  
135
  </div>
136
</div>
137
<div *ngIf="indicator && indicator=='gold-green'">
138
  <div class="goldIndicator">
139
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
216
    <div class="uk-grid-margin">
217
      <div class="md-card chartCard">
218
        <div class="md-card-content">
140 219

  
141
      <div class="uk-grid-margin">
142
        <div class="md-card chartCard">
143
          <div class="md-card-content">
144
            <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
145
          </div>
146
        </div>
147
      </div>
220
          <!--MOBILE & PAD PORTRAIT-->
221
          <div class="uk-hidden@m">
222
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
223
              <label class="uk-margin-right">Show by: </label>
224
              <select class="md-input" #selectCCLicenceGroupBy (change)="getPublicationsWithCCLicenceGroupByMobile(selectCCLicenceGroupBy.value)" style="display: inline-block">
225
                <option value="datasource">datasource</option>
226
                <option value="organization">organization</option>
227
                <option value="funder">funder</option>
228
              </select>
229
            </div>
148 230

  
149
      <div class="uk-grid-margin">
150
        <div class="md-card chartCard">
151
          <div class="md-card-content">
231
            <iframe *ngIf="publicationsWithCCLicenceGroupByView==='datasource' && publicationsWithCCLicenceByDatasourceChartURL"
232
                    width="100%" height="550" [src]="publicationsWithCCLicenceByDatasourceChartURL"></iframe>
233
            <iframe *ngIf="publicationsWithCCLicenceGroupByView==='organization' && publicationsWithCCLicenceByOrganizationChartURL"
234
                    width="100%" height="550" [src]="publicationsWithCCLicenceByOrganizationChartURL"></iframe>
235
            <app-treemap-highchart *ngIf="publicationsWithCCLicenceGroupByView==='funder' && publicationsWithCCLicenceByFunderData"
236
                                   [chartTitle]="'Open Access publications with CC licence'" [chartSubtitle]="'by funder (top funders)'"
237
                                   [chartData]="publicationsWithCCLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
152 238

  
153
            <!--MOBILE & PAD PORTRAIT-->
154
            <div class="uk-hidden@m">
155
              <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
156
                <label class="uk-margin-right">Show by: </label>
157
                <select class="md-input" #selectGoldGroupBy (change)="getGoldPublicationsGroupByMobile(selectGoldGroupBy.value)" style="width: 230px; display: inline-block">
158
                  <option value="datasource">datasource</option>
159
                  <option value="organization">organization</option>
160
                  <option value="funder">funder</option>
161
                </select>
162
              </div>
239
          </div>
163 240

  
164
              <iframe *ngIf="goldPublicationsGroupByView==='datasource' && goldPublicationsByDatasourceChartURLMobile"
165
                      width="100%" height="550" [src]="goldPublicationsByDatasourceChartURLMobile"></iframe>
166
              <iframe *ngIf="goldPublicationsGroupByView==='organization' && goldPublicationsByOrganizationChartURLMobile"
167
                      width="100%" height="550" [src]="goldPublicationsByOrganizationChartURLMobile"></iframe>
168
              <app-treemap-highchart *ngIf="goldPublicationsGroupByView==='funder' && goldPublicationsByFunderData"
169
                                     [chartTitle]="'Gold OA publications by funder'"
170
                                     [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
241
          <!--LAPTOP & PAD LANDSCAPE-->
242
          <div class="uk-visible@m">
243
            <ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
244
                data-uk-switcher="{connect:'#switcher-content-a-fade-publications-cc-licence', animation: 'fade'}">
245
              <li class="uk-active"><a (click)="getPublicationsWithCCLicenceGroupBy('datasource')">Datasource</a></li>
246
              <li><a (click)="getPublicationsWithCCLicenceGroupBy('organization')">Organization</a></li>
247
              <li><a (click)="getPublicationsWithCCLicenceGroupBy('funder')">Funder</a></li>
248
            </ul>
171 249

  
172
            </div>
250
            <ul id="switcher-content-a-fade-publications-cc-licence" class="uk-switcher uk-margin">
251
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;" class="">
252
                <iframe *ngIf="publicationsWithCCLicenceByDatasourceChartURL"
253
                        width="100%" height="650" [src]="publicationsWithCCLicenceByDatasourceChartURL"></iframe>
254
              </li>
255
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
256
                <iframe *ngIf="publicationsWithCCLicenceByOrganizationChartURL"
257
                        width="100%" height="650" [src]="publicationsWithCCLicenceByOrganizationChartURL"></iframe>
258
              </li>
259
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
260
                <app-treemap-highchart *ngIf="publicationsWithCCLicenceByFunderData"
261
                                       [chartTitle]="'Open Access publications with CC licence'" [chartSubtitle]="'by funder (top funders)'"
262
                                       [chartData]="publicationsWithCCLicenceByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
263
              </li>
264
            </ul>
265
          </div>
173 266

  
174
            <!--LAPTOP & PAD LANDSCAPE-->
175
            <div class="uk-visible@m">
176
              <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
177
                  data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
178
                <li class="uk-active"><a (click)="getGoldPublicationsGroupBy('datasource')">Datasource</a></li>
179
                <li><a (click)="getGoldPublicationsGroupBy('organization')">Organization</a></li>
180
                <li><a (click)="getGoldPublicationsGroupBy('funder')">Funder</a></li>
181
              </ul>
182

  
183
              <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
184
                <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
185
                  <iframe *ngIf="goldPublicationsByDatasourceChartURL"
186
                          width="100%" height="350" [src]="goldPublicationsByDatasourceChartURL"></iframe>
187
                </li>
188
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
189
                  <iframe *ngIf="goldPublicationsByOrganizationChartURL"
190
                          width="100%" height="350" [src]="goldPublicationsByOrganizationChartURL"></iframe>
191
                </li>
192
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
193
                  <app-treemap-highchart *ngIf="goldPublicationsByFunderData"
194
                                         [chartTitle]="'Gold OA publications by funder'"
195
                                         [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
196
                </li>
197
              </ul>
198
            </div>
199

  
200
          </div>
201 267
        </div>
202 268
      </div>
269
    </div>
203 270

  
204
    </div>
205 271
  </div>
206
  <div class="greenIndicator">
207
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
272
</div>
208 273

  
209
      <div class="uk-grid-margin">
210
        <div class="md-card chartCard">
211
          <div class="md-card-content">
212
            <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
213
          </div>
274
<div *ngIf="indicator && indicator=='pid'" class="pidIndicator">
275

  
276
  <div class="uk-grid uk-grid-margin">
277
    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
278
      <div class="md-card chartCard">
279
        <div class="md-card-content">
280
          <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
214 281
        </div>
215 282
      </div>
283
    </div>
284
  </div>
216 285

  
217
      <div class="uk-grid-margin">
218
        <div class="md-card chartCard">
219
          <div class="md-card-content">
286
  <div class="uk-grid uk-grid-margin">
287
    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
288
      <div class="md-card chartCard">
289
        <div class="md-card-content">
220 290

  
221
            <!--MOBILE & PAD PORTRAIT-->
222
            <div class="uk-hidden@m">
223
              <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
224
                <label class="uk-margin-right">Show by: </label>
225
                <select class="md-input" #selectGreenGroupBy (change)="getGreenPublicationsGroupByMobile(selectGreenGroupBy.value)" style="width: 230px; display: inline-block">
226
                  <option value="datasource">datasource</option>
227
                  <option value="organization">organization</option>
228
                  <option value="funder">funder</option>
229
                </select>
230
              </div>
231

  
232
              <iframe *ngIf="greenPublicationsGroupByView==='datasource' && greenPublicationsByDatasourceChartURLMobile"
233
                      width="100%" height="550" [src]="greenPublicationsByDatasourceChartURLMobile"></iframe>
234
              <iframe *ngIf="greenPublicationsGroupByView==='organization' && greenPublicationsByOrganizationChartURLMobile"
235
                      width="100%" height="550" [src]="greenPublicationsByOrganizationChartURLMobile"></iframe>
236
              <app-treemap-highchart *ngIf="greenPublicationsGroupByView==='funder' && greenPublicationsByFunderData"
237
                                     [chartTitle]="'Green OA publications by funder'"
238
                                     [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
239

  
291
          <!--MOBILE & PAD PORTRAIT-->
292
          <div class="uk-hidden@m">
293
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
294
              <label class="uk-margin-right">Show by: </label>
295
              <select class="md-input" #selectPIDGroupBy (change)="getPublicationsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="display: inline-block">
296
                <option value="datasource">datasource</option>
297
                <option value="organization">organization</option>
298
                <option value="funder">funder</option>
299
              </select>
240 300
            </div>
241 301

  
242
            <!--LAPTOP & PAD LANDSCAPE-->
243
            <div class="uk-visible@m">
244
              <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
245
                  data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
246
                <li class="uk-active"><a (click)="getGreenPublicationsGroupBy('datasource')">Datasource</a></li>
247
                <li><a (click)="getGreenPublicationsGroupBy('organization')">Organization</a></li>
248
                <li><a (click)="getGreenPublicationsGroupBy('funder')">Funder</a></li>
249
              </ul>
302
            <iframe *ngIf="publicationsWithPIDGroupByView==='datasource' && publicationsWithPIDByDatasourceChartURL"
303
                    width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
304
            <iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURL"
305
                    width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
306
            <app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
307
                                   [chartTitle]="'Open Access publications with PID'" [chartSubtitle]="'by funder (top funders)'"
308
                                   [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
250 309

  
251
              <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
252
                <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
253
                  <iframe *ngIf="greenPublicationsByDatasourceChartURL"
254
                          width="100%" height="350" [src]="greenPublicationsByDatasourceChartURL"></iframe>
255
                </li>
256
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
257
                  <iframe *ngIf="greenPublicationsByOrganizationChartURL"
258
                          width="100%" height="350" [src]="greenPublicationsByOrganizationChartURL"></iframe>
259
                </li>
260
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
261
                  <app-treemap-highchart *ngIf="greenPublicationsByFunderData"
262
                                         [chartTitle]="'Green OA publications by funder'"
263
                                         [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
264
                </li>
265
              </ul>
266
            </div>
267

  
268 310
          </div>
269
        </div>
270
      </div>
271 311

  
272
    </div>
273
  </div>
274
  <div class="greenVsGoldIndicator">
275
    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
312
          <!--LAPTOP & PAD LANDSCAPE-->
313
          <div class="uk-visible@m">
314
            <ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
315
                data-uk-switcher="{connect:'#switcher-content-a-fade-publications-pid', animation: 'fade'}">
316
              <li class="uk-active"><a (click)="getPublicationsWithPIDGroupBy('datasource')">Datasource</a></li>
317
              <li><a (click)="getPublicationsWithPIDGroupBy('organization')">Organization</a></li>
318
              <li><a (click)="getPublicationsWithPIDGroupBy('funder')">Funder</a></li>
319
            </ul>
276 320

  
277
      <div class="uk-grid-margin">
278
        <div class="md-card chartCard">
279
          <div class="md-card-content">
280
            <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
321
            <ul id="switcher-content-a-fade-publications-pid" class="uk-switcher uk-margin">
322
              <li aria-hidden="false" class="uk-active" aria-hidden="true" style="animation-duration: 200ms;" class="">
323
                <iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
324
                        width="100%" height="650" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
325
              </li>
326
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
327
                <iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
328
                        width="100%" height="650" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
329
              </li>
330
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
331
                <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
332
                                       [chartTitle]="'Open Access publications with PID'" [chartSubtitle]="'by funder (top funders)'"
333
                                       [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
334
              </li>
335
            </ul>
281 336
          </div>
337

  
282 338
        </div>
283 339
      </div>
284

  
285 340
    </div>
286 341
  </div>
342

  
287 343
</div>
344

  

Also available in: Unified diff