Project

General

Profile

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

    
4
    <div class="uk-grid-margin">
5
      <div class="md-card chartCard">
6
        <div class="md-card-content">
7
          <iframe *ngIf="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></iframe>
8
        </div>
9
      </div>
10
    </div>
11

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

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

    
24
          <!--MOBILE & PAD PORTRAIT-->
25
          <div class="uk-hidden@m">
26
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
27
              <label class="uk-margin-right">Show by: </label>
28
              <select class="md-input" #selectLicenceGroupBy (change)="getSoftwareWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="display: inline-block">
29
                <option value="datasource">datasource</option>
30
                <option value="organization">organization</option>
31
                <option value="funder">funder</option>
32
              </select>
33
            </div>
34

    
35
            <iframe *ngIf="softwareWithLicenceGroupByView==='datasource' && softwareWithLicenceByDatasourceChartURL"
36
                    width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
37
            <iframe *ngIf="softwareWithLicenceGroupByView==='organization' && softwareWithLicenceByOrganizationChartURL"
38
                    width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
39
            <app-treemap-highchart *ngIf="softwareWithLicenceGroupByView==='funder' && softwareWithLicenceByFunderData"
40
                                   [chartTitle]="'Open Source software with licence'" [chartSubtitle]="'by funder (top funders)'"
41
                                   [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
42

    
43
          </div>
44

    
45
          <!--LAPTOP & PAD LANDSCAPE-->
46
          <div class="uk-visible@m">
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-software-licence', animation: 'fade'}">
49
              <li class="uk-active"><a (click)="getSoftwareWithLicenceGroupBy('datasource')">Datasource</a></li>
50
              <li><a (click)="getSoftwareWithLicenceGroupBy('organization')">Organization</a></li>
51
              <li><a (click)="getSoftwareWithLicenceGroupBy('funder')">Funder</a></li>
52
            </ul>
53

    
54
            <ul id="switcher-content-a-fade-software-licence" class="uk-switcher uk-margin">
55
              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;" class="">
56
                <iframe *ngIf="softwareWithLicenceByDatasourceChartURL"
57
                        width="100%" height="650" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
58
              </li>
59
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
60
                <iframe *ngIf="softwareWithLicenceByOrganizationChartURL"
61
                        width="100%" height="650" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
62
              </li>
63
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
64
                <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData"
65
                                       [chartTitle]="'Open Source software with licence'" [chartSubtitle]="'by funder (top funders)'"
66
                                       [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor" [height]="650"></app-treemap-highchart>
67
              </li>
68
            </ul>
69
          </div>
70

    
71
        </div>
72
      </div>
73
    </div>
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)="getSoftwareWithCCLicenceGroupByMobile(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="softwareWithCCLicenceGroupByView==='datasource' && softwareWithCCLicenceByDatasourceChartURL"
91
                    width="100%" height="550" [src]="softwareWithCCLicenceByDatasourceChartURL"></iframe>
92
            <iframe *ngIf="softwareWithCCLicenceGroupByView==='organization' && softwareWithCCLicenceByOrganizationChartURL"
93
                    width="100%" height="550" [src]="softwareWithCCLicenceByOrganizationChartURL"></iframe>
94
            <app-treemap-highchart *ngIf="softwareWithCCLicenceGroupByView==='funder' && softwareWithCCLicenceByFunderData"
95
                                   [chartTitle]="'Open Source software with CC licence'" [chartSubtitle]="'by funder (top funders)'"
96
                                   [chartData]="softwareWithCCLicenceByFunderData" [color]="softwareColor"></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-software-cc-licence', animation: 'fade'}">
104
              <li class="uk-active"><a (click)="getSoftwareWithCCLicenceGroupBy('datasource')">Datasource</a></li>
105
              <li><a (click)="getSoftwareWithCCLicenceGroupBy('organization')">Organization</a></li>
106
              <li><a (click)="getSoftwareWithCCLicenceGroupBy('funder')">Funder</a></li>
107
            </ul>
108

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

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

    
130
  </div>
131
</div>
132

    
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">
137
      <div class="md-card chartCard">
138
        <div class="md-card-content">
139
          <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
140
        </div>
141
      </div>
142
    </div>
143
  </div>
144

    
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">
147
      <div class="md-card chartCard">
148
        <div class="md-card-content">
149

    
150
          <!--MOBILE & PAD PORTRAIT-->
151
          <div class="uk-hidden@m">
152
            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
153
              <label class="uk-margin-right">Show by: </label>
154
              <select class="md-input" #selectPIDGroupBy (change)="getSoftwareWithPIDGroupByMobile(selectPIDGroupBy.value)" style="display: inline-block">
155
                <option value="datasource">datasource</option>
156
                <option value="organization">organization</option>
157
                <option value="funder">funder</option>
158
              </select>
159
            </div>
160

    
161
            <iframe *ngIf="softwareWithPIDGroupByView==='datasource' && softwareWithPIDByDatasourceChartURL"
162
                    width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
163
            <iframe *ngIf="softwareWithPIDGroupByView==='organization' && softwareWithPIDByOrganizationChartURL"
164
                    width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
165
            <app-treemap-highchart *ngIf="softwareWithPIDGroupByView==='funder' && softwareWithPIDByFunderData"
166
                                   [chartTitle]="'Open Source software with PID'" [chartSubtitle]="'by funder (top funders)'"
167
                                   [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
168

    
169
          </div>
170

    
171
          <!--LAPTOP & PAD LANDSCAPE-->
172
          <div class="uk-visible@m">
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-software-pid', animation: 'fade'}">
175
              <li class="uk-active"><a (click)="getSoftwareWithPIDGroupBy('datasource')">Datasource</a></li>
176
              <li><a (click)="getSoftwareWithPIDGroupBy('organization')">Organization</a></li>
177
              <li><a (click)="getSoftwareWithPIDGroupBy('funder')">Funder</a></li>
178
            </ul>
179

    
180
            <ul id="switcher-content-a-fade-software-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="softwareWithPIDByDatasourceChartURL"
183
                        width="100%" height="650" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
184
              </li>
185
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
186
                <iframe *ngIf="softwareWithPIDByOrganizationChartURL"
187
                        width="100%" height="650" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
188
              </li>
189
              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
190
                <app-treemap-highchart *ngIf="softwareWithPIDByFunderData"
191
                                       [chartTitle]="'Open Source software with PID'" [chartSubtitle]="'by funder (top funders)'"
192
                                       [chartData]="softwareWithPIDByFunderData" [color]="softwareColor" [height]="650"></app-treemap-highchart>
193
              </li>
194
            </ul>
195
          </div>
196

    
197
        </div>
198
      </div>
199
    </div>
200
  </div>
201

    
202
</div>
(1-1/6)