Project

General

Profile

« Previous | Next » 

Revision 62830

View differences:

country-os-orp-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=='licence'" class="licenceIndicator">
2
  <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">
3 3

  
4 4
    <div class="uk-grid-margin">
5 5
      <div class="md-card chartCard">
6 6
        <div class="md-card-content">
7
          <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
7
          <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>
8 8
        </div>
9 9
      </div>
10 10
    </div>
......
12 12
    <div class="uk-grid-margin">
13 13
      <div class="md-card chartCard">
14 14
        <div class="md-card-content">
15
          <iframe *ngIf="otherWithCCLicenceTimeline" width="100%" height="550" [src]="otherWithCCLicenceTimeline"></iframe>
16
        </div>
17
      </div>
18
    </div>
15 19

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

  
16 24
          <!--MOBILE & PAD PORTRAIT-->
17 25
          <div class="uk-hidden@m">
18 26
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
19 27
              <label class="uk-margin-right">Show by: </label>
20
              <select class="md-input" #selectPIDGroupBy (change)="getOtherWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
28
              <select class="md-input" #selectLicenceGroupBy (change)="getOtherWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="display: inline-block">
21 29
                <option value="datasource">datasource</option>
22 30
                <option value="organization">organization</option>
23 31
                <option value="funder">funder</option>
24 32
              </select>
25 33
            </div>
26 34

  
27
            <iframe *ngIf="otherWithPIDGroupByView==='datasource' && otherWithPIDByDatasourceChartURLMobile"
28
                    width="100%" height="550" [src]="otherWithPIDByDatasourceChartURLMobile"></iframe>
29
            <iframe *ngIf="otherWithPIDGroupByView==='organization' && otherWithPIDByOrganizationChartURLMobile"
30
                    width="100%" height="550" [src]="otherWithPIDByOrganizationChartURLMobile"></iframe>
31
            <app-treemap-highchart *ngIf="otherWithPIDGroupByView==='funder' && otherWithPIDByFunderData"
32
                                   [chartTitle]="'OA Other research products with PID by funder'"
33
                                   [chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
35
            <iframe *ngIf="otherWithLicenceGroupByView==='datasource' && otherWithLicenceByDatasourceChartURL"
36
                    width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
37
            <iframe *ngIf="otherWithLicenceGroupByView==='organization' && otherWithLicenceByOrganizationChartURL"
38
                    width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
39
            <app-treemap-highchart *ngIf="otherWithLicenceGroupByView==='funder' && otherWithLicenceByFunderData"
40
                                   [chartTitle]="'Open Access ORPs with licence'" [chartSubtitle]="'by funder (top funders)'"
41
                                   [chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
34 42

  
35 43
          </div>
36 44

  
37 45
          <!--LAPTOP & PAD LANDSCAPE-->
38 46
          <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)="getOtherWithPIDGroupBy('datasource')">Datasource</a></li>
42
              <li><a (click)="getOtherWithPIDGroupBy('organization')">Organization</a></li>
43
              <li><a (click)="getOtherWithPIDGroupBy('funder')">Funder</a></li>
47
            <ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
48
                data-uk-switcher="{connect:'#switcher-content-a-fade-other-licence', animation: 'fade'}">
49
              <li class="uk-active"><a (click)="getOtherWithLicenceGroupBy('datasource')">Datasource</a></li>
50
              <li><a (click)="getOtherWithLicenceGroupBy('organization')">Organization</a></li>
51
              <li><a (click)="getOtherWithLicenceGroupBy('funder')">Funder</a></li>
44 52
            </ul>
45 53

  
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="otherWithPIDByDatasourceChartURL"
49
                        width="100%" height="350" [src]="otherWithPIDByDatasourceChartURL"></iframe>
54
            <ul id="switcher-content-a-fade-other-licence" class="uk-switcher uk-margin">
55
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;" class="">
56
                <iframe *ngIf="otherWithLicenceByDatasourceChartURL"
57
                        width="100%" height="650" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
50 58
              </li>
51 59
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
52
                <iframe *ngIf="otherWithPIDByOrganizationChartURL"
53
                        width="100%" height="350" [src]="otherWithPIDByOrganizationChartURL"></iframe>
60
                <iframe *ngIf="otherWithLicenceByOrganizationChartURL"
61
                        width="100%" height="650" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
54 62
              </li>
55 63
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
56
                <app-treemap-highchart *ngIf="otherWithPIDByFunderData"
57
                                       [chartTitle]="'OA Other research products with PID by funder'"
58
                                       [chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
64
                <app-treemap-highchart *ngIf="otherWithLicenceByFunderData"
65
                                       [chartTitle]="'Open Access ORPs with licence'" [chartSubtitle]="'by funder (top funders)'"
66
                                       [chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor" [height]="650"></app-treemap-highchart>
59 67
              </li>
60 68
            </ul>
61 69
          </div>
......
64 72
      </div>
65 73
    </div>
66 74

  
75
    <div class="uk-grid-margin">
76
      <div class="md-card chartCard">
77
        <div class="md-card-content">
78

  
79
          <!--MOBILE & PAD PORTRAIT-->
80
          <div class="uk-hidden@m">
81
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
82
              <label class="uk-margin-right">Show by: </label>
83
              <select class="md-input" #selectCCLicenceGroupBy (change)="getOtherWithCCLicenceGroupByMobile(selectCCLicenceGroupBy.value)" style="display: inline-block">
84
                <option value="datasource">datasource</option>
85
                <option value="organization">organization</option>
86
                <option value="funder">funder</option>
87
              </select>
88
            </div>
89

  
90
            <iframe *ngIf="otherWithCCLicenceGroupByView==='datasource' && otherWithCCLicenceByDatasourceChartURL"
91
                    width="100%" height="550" [src]="otherWithCCLicenceByDatasourceChartURL"></iframe>
92
            <iframe *ngIf="otherWithCCLicenceGroupByView==='organization' && otherWithCCLicenceByOrganizationChartURL"
93
                    width="100%" height="550" [src]="otherWithCCLicenceByOrganizationChartURL"></iframe>
94
            <app-treemap-highchart *ngIf="otherWithCCLicenceGroupByView==='funder' && otherWithCCLicenceByFunderData"
95
                                   [chartTitle]="'Open Access ORPs with CC licence'" [chartSubtitle]="'by funder (top funders)'"
96
                                   [chartData]="otherWithCCLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
97

  
98
          </div>
99

  
100
          <!--LAPTOP & PAD LANDSCAPE-->
101
          <div class="uk-visible@m">
102
            <ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
103
                data-uk-switcher="{connect:'#switcher-content-a-fade-other-cc-licence', animation: 'fade'}">
104
              <li class="uk-active"><a (click)="getOtherWithCCLicenceGroupBy('datasource')">Datasource</a></li>
105
              <li><a (click)="getOtherWithCCLicenceGroupBy('organization')">Organization</a></li>
106
              <li><a (click)="getOtherWithCCLicenceGroupBy('funder')">Funder</a></li>
107
            </ul>
108

  
109
            <ul id="switcher-content-a-fade-other-cc-licence" class="uk-switcher uk-margin">
110
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;" class="">
111
                <iframe *ngIf="otherWithCCLicenceByDatasourceChartURL"
112
                        width="100%" height="650" [src]="otherWithCCLicenceByDatasourceChartURL"></iframe>
113
              </li>
114
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
115
                <iframe *ngIf="otherWithCCLicenceByOrganizationChartURL"
116
                        width="100%" height="650" [src]="otherWithCCLicenceByOrganizationChartURL"></iframe>
117
              </li>
118
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
119
                <app-treemap-highchart *ngIf="otherWithCCLicenceByFunderData"
120
                                       [chartTitle]="'Open Access ORPs with CC licence'" [chartSubtitle]="'by funder (top funders)'"
121
                                       [chartData]="otherWithCCLicenceByFunderData" [color]="otherResearchProductsColor" [height]="650"></app-treemap-highchart>
122
              </li>
123
            </ul>
124
          </div>
125

  
126
        </div>
127
      </div>
128
    </div>
129

  
67 130
  </div>
68 131
</div>
69
<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">
71 132

  
72
    <div class="uk-grid-margin">
133
<div *ngIf="indicator && indicator=='pid'" class="pidIndicator">
134

  
135
  <div class="uk-grid uk-grid-margin">
136
    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
73 137
      <div class="md-card chartCard">
74 138
        <div class="md-card-content">
75
          <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>
139
          <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
76 140
        </div>
77 141
      </div>
78 142
    </div>
143
  </div>
79 144

  
80
    <div class="uk-grid-margin">
145
  <div class="uk-grid uk-grid-margin">
146
    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
81 147
      <div class="md-card chartCard">
82 148
        <div class="md-card-content">
83 149

  
......
85 151
          <div class="uk-hidden@m">
86 152
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
87 153
              <label class="uk-margin-right">Show by: </label>
88
              <select class="md-input" #selectLicenceGroupBy (change)="getOtherWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
154
              <select class="md-input" #selectPIDGroupBy (change)="getOtherWithPIDGroupByMobile(selectPIDGroupBy.value)" style="display: inline-block">
89 155
                <option value="datasource">datasource</option>
90 156
                <option value="organization">organization</option>
91 157
                <option value="funder">funder</option>
92 158
              </select>
93 159
            </div>
94 160

  
95
            <iframe *ngIf="otherWithLicenceGroupByView==='datasource' && otherWithLicenceByDatasourceChartURLMobile"
96
                    width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURLMobile"></iframe>
97
            <iframe *ngIf="otherWithLicenceGroupByView==='organization' && otherWithLicenceByOrganizationChartURLMobile"
98
                    width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURLMobile"></iframe>
99
            <app-treemap-highchart *ngIf="otherWithLicenceGroupByView==='funder' && otherWithLicenceByFunderData"
100
                                   [chartTitle]="'OA Other research products with licence by funder'"
101
                                   [chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
161
            <iframe *ngIf="otherWithPIDGroupByView==='datasource' && otherWithPIDByDatasourceChartURL"
162
                    width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
163
            <iframe *ngIf="otherWithPIDGroupByView==='organization' && otherWithPIDByOrganizationChartURL"
164
                    width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
165
            <app-treemap-highchart *ngIf="otherWithPIDGroupByView==='funder' && otherWithPIDByFunderData"
166
                                   [chartTitle]="'Open Access ORPs with PID'" [chartSubtitle]="'by funder (top funders)'"
167
                                   [chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
102 168

  
103 169
          </div>
104 170

  
105 171
          <!--LAPTOP & PAD LANDSCAPE-->
106 172
          <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'}">
109
              <li class="uk-active"><a (click)="getOtherWithLicenceGroupBy('datasource')">Datasource</a></li>
110
              <li><a (click)="getOtherWithLicenceGroupBy('organization')">Organization</a></li>
111
              <li><a (click)="getOtherWithLicenceGroupBy('funder')">Funder</a></li>
173
            <ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
174
                data-uk-switcher="{connect:'#switcher-content-a-fade-other-pid', animation: 'fade'}">
175
              <li class="uk-active"><a (click)="getOtherWithPIDGroupBy('datasource')">Datasource</a></li>
176
              <li><a (click)="getOtherWithPIDGroupBy('organization')">Organization</a></li>
177
              <li><a (click)="getOtherWithPIDGroupBy('funder')">Funder</a></li>
112 178
            </ul>
113 179

  
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">
116
                <iframe *ngIf="otherWithLicenceByDatasourceChartURL"
117
                        width="100%" height="350" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
180
            <ul id="switcher-content-a-fade-other-pid" class="uk-switcher uk-margin">
181
              <li aria-hidden="false" class="uk-active" aria-hidden="true" style="animation-duration: 200ms;" class="">
182
                <iframe *ngIf="otherWithPIDByDatasourceChartURL"
183
                        width="100%" height="650" [src]="otherWithPIDByDatasourceChartURL"></iframe>
118 184
              </li>
119 185
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
120
                <iframe *ngIf="otherWithLicenceByOrganizationChartURL"
121
                        width="100%" height="350" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
186
                <iframe *ngIf="otherWithPIDByOrganizationChartURL"
187
                        width="100%" height="650" [src]="otherWithPIDByOrganizationChartURL"></iframe>
122 188
              </li>
123 189
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
124
                <app-treemap-highchart *ngIf="otherWithLicenceByFunderData"
125
                                       [chartTitle]="'OA Other research products with licence by funder'"
126
                                       [chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
190
                <app-treemap-highchart *ngIf="otherWithPIDByFunderData"
191
                                       [chartTitle]="'Open Access ORPs with PID'" [chartSubtitle]="'by funder (top funders)'"
192
                                       [chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor" [height]="650"></app-treemap-highchart>
127 193
              </li>
128 194
            </ul>
129 195
          </div>
......
131 197
        </div>
132 198
      </div>
133 199
    </div>
200
  </div>
134 201

  
135
  </div>
136 202
</div>

Also available in: Unified diff