Project

General

Profile

« Previous | Next » 

Revision 58825

Working on the new version of the oso. Work on the home page almost done

View differences:

modules/open-science-observatory-ui/trunk/package.json
23 23
    "@highcharts/map-collection": "^1.1.2",
24 24
    "core-js": "^2.5.4",
25 25
    "dom-to-image": "^2.6.0",
26
    "echarts": "^4.8.0",
26 27
    "font-awesome": "^4.7.0",
27 28
    "highcharts": "^7.2.0",
28 29
    "highcharts-angular": "^2.4.0",
29 30
    "jquery": "^3.4.1",
30 31
    "jspdf": "^1.5.3",
32
    "ngx-echarts": "^5.0.0",
31 33
    "proj4": "^2.5.0",
32 34
    "rxjs": "~6.3.3",
33 35
    "uikit": "^3.2.1",
modules/open-science-observatory-ui/trunk/src/app/pages/countrypage/country-page.component.ts
2 2
import { DataService } from '../../services/data.service';
3 3
import { ActivatedRoute } from '@angular/router';
4 4
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
5
import {CountryOverview, OverviewData} from '../../domain/overview-data';
5
import { CountryOverview, OverviewData } from '../../domain/overview-data';
6 6

  
7 7
@Component({
8 8
  selector: 'app-country-page',
modules/open-science-observatory-ui/trunk/src/app/pages/home/countries-map-overview.component.ts
161 161
          click: event => {
162 162
            if (event.target.hasOwnProperty('point')) {
163 163
              console.log(event.target['point']['name']);
164
              // this.countrySelected(event.target['point']['name']);
164
              // this.selectedCountry(event.target['point']['name']);
165 165
            }
166 166
          }
167 167
        }
......
178 178
          cursor: 'pointer',
179 179
          events: {
180 180
            click: event => {
181
              console.log(event);
181 182
              this.countrySelected(event.point.name);
182 183
            }
183 184
          }
modules/open-science-observatory-ui/trunk/src/app/pages/home/europe-map-overview.component.html
1
<div class="{{isEmbedRoute()? 'mapContainerEmbed' : 'mapContainer'}}">
2
  <!--Map-->
3
  <ng-container>
4
    <div *ngIf="overviewMapData" echarts [options]="options" class="demo-chart" (chartClick)="onChartClick($event, 'chartClick')"></div>
5
    <div *ngIf="!overviewMapData" class="loading-big">
6
      <div uk-spinner="ratio: 2" class="uk-overlay uk-position-center uk-dark" style="margin: auto"></div>
7
      <!--<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">-->
8
      <!--{{ loadingMessage }}-->
9
      <!--</div>-->
10
      <div class="transparentFilm"></div>
11
    </div>
12
  </ng-container>
13

  
14

  
15
  <!--Map Controls-->
16
  <div class="uk-width-large-1-1 uk-container-center uk-text-center uk-margin-top mapControls">
17
    <ul class="uk-nav uk-nav-side uk-nav-horizontal uk-nav-parent-icon" data-uk-nav="{multiple:true}">
18
      <li>
19
        <a (click)="changeView('publications')">
20
          <span class="uk-nav-label" style="background-color: #F8D5E3 !important; border: 1px solid #F17AA9;"></span>
21
          <span class="text {{activeView=='publications' ? 'active' : ''}}">OA publications</span>
22
        </a>
23
      </li>
24
      <li>
25
        <a (click)="changeView('datasets')">
26
          <span class="uk-nav-label" style="background-color: #E2DAF0 !important; border: 1px solid #A98BD4;"></span>
27
          <span class="text {{activeView=='datasets' ? 'active' : ''}}">OA datasets</span>
28
        </a>
29
      </li>
30
      <li>
31
        <a (click)="changeView('repositories')">
32
          <span class="uk-nav-label" style="background-color: #C5E0E9 !important; border: 1px solid #708AA5;"></span>
33
          <span class="text {{activeView=='repositories' ? 'active' : ''}}">repositories</span>
34
        </a>
35
      </li>
36
      <li>
37
        <a (click)="changeView('journals')">
38
          <span class="uk-nav-label" style="background-color: #FBE8B1 !important; border: 1px solid #FFCE4E;"></span>
39
          <span class="text {{activeView=='journals' ? 'active' : ''}}">journals</span>
40
        </a>
41
      </li>
42
      <li>
43
        <a (click)="changeView('policies')">
44
          <span class="uk-nav-label" style="background-color: #D4ECD6 !important; border: 1px solid #639C66;"></span>
45
          <span class="text {{activeView=='policies' ? 'active' : ''}}">OA policies</span>
46
        </a>
47
      </li>
48
    </ul>
49
    <!--<h2 class="heading_b">-->
50
    <!--Our Team-->
51
    <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
52
    <!--</h2>-->
53
  </div>
54
</div>
modules/open-science-observatory-ui/trunk/src/app/pages/home/countries-table.component.html
2 2
  <thead>
3 3
    <tr>
4 4
      <th width="12,5%" class="" (click)="sortBy('country')">
5
        <span *ngIf="!isSortedBy || isSortedBy!='country'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
6
        <span *ngIf="isSortedBy && isSortedBy=='country' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
7
        <span *ngIf="isSortedBy && isSortedBy=='country' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
5 8
        Country
6
        <span *ngIf="isSortedBy && isSortedBy=='country' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
7
        <span *ngIf="isSortedBy && isSortedBy=='country' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
8 9
      </th>
9
      <th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('repositories')">
10
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA repositories
11
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
12
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
10
      <th width="12,5%" (click)="sortBy('repositories')">
11
        <span *ngIf="!isSortedBy || isSortedBy!='repositories'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
12
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
13
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
14
        OA repositories
13 15
      </th>
14
      <th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('journals')">
15
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA journals
16
        <span *ngIf="isSortedBy && isSortedBy=='journals' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
17
        <span *ngIf="isSortedBy && isSortedBy=='journals' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
16
      <th width="12,5%" (click)="sortBy('journals')">
17
        <span *ngIf="!isSortedBy || isSortedBy!='journals'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
18
        <span *ngIf="isSortedBy && isSortedBy=='journals' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
19
        <span *ngIf="isSortedBy && isSortedBy=='journals' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
20
        OA journals
18 21
      </th>
19
      <th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('policies')">
20
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA policies
21
        <span *ngIf="isSortedBy && isSortedBy=='policies' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
22
        <span *ngIf="isSortedBy && isSortedBy=='policies' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
22
      <!--<th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('policies')">-->
23
        <!--<span *ngIf="!isSortedBy || isSortedBy!='policies'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>-->
24
        <!--<span *ngIf="isSortedBy && isSortedBy=='policies' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>-->
25
        <!--<span *ngIf="isSortedBy && isSortedBy=='policies' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>-->
26
        <!--OA policies-->
27
      <!--</th>-->
28
      <th class="uk-text-center" width="12,5%" (click)="sortBy('publications')">
29
        <span *ngIf="!isSortedBy || isSortedBy!='publications'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
30
        <span *ngIf="isSortedBy && isSortedBy=='publications' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
31
        <span *ngIf="isSortedBy && isSortedBy=='publications' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
32
        OA publications
23 33
      </th>
24
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('publications')">
25
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA publications
26
        <span *ngIf="isSortedBy && isSortedBy=='publications' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
27
        <span *ngIf="isSortedBy && isSortedBy=='publications' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
34
      <th class="uk-text-center" width="12,5%" (click)="sortBy('datasets')">
35
        <span *ngIf="!isSortedBy || isSortedBy!='datasets'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
36
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
37
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
38
        OA data
28 39
      </th>
29
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('datasets')">
30
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA data
31
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
32
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
40
      <th class="uk-text-center" width="12,5%" (click)="sortBy('software')">
41
        <span *ngIf="!isSortedBy || isSortedBy!='software'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
42
        <span *ngIf="isSortedBy && isSortedBy=='software' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
43
        <span *ngIf="isSortedBy && isSortedBy=='software' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
44
        OA software
33 45
      </th>
34
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('software')">
35
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA software
36
        <span *ngIf="isSortedBy && isSortedBy=='software' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
37
        <span *ngIf="isSortedBy && isSortedBy=='software' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
46
      <th class="uk-text-center" width="12,5%" (click)="sortBy('other')">
47
        <span *ngIf="!isSortedBy || isSortedBy!='other'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
48
        <span *ngIf="isSortedBy && isSortedBy=='other' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
49
        <span *ngIf="isSortedBy && isSortedBy=='other' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
50
        OA other
38 51
      </th>
39
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('otherProducts')">
40
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA other research products
41
        <span *ngIf="isSortedBy && isSortedBy=='otherProducts' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
42
        <span *ngIf="isSortedBy && isSortedBy=='otherProducts' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
43
      </th>
44 52
    </tr>
45 53
  </thead>
46 54
  <tbody>
47
    <ng-container *ngIf="isPercentage">
48
      <tr *ngFor="let countryOverview of countries">
49
        <td class=""><a [routerLink]="['/countryDashboard/' + countryOverview.country]">{{countryOverview.country}}</a></td>
50
        <td *ngIf="type=='overview'" class="uk-text-center">
51
          <ng-container *ngIf="countryOverview.repositories?.oa !=null">{{countryOverview.repositories.oa | number}}</ng-container>
52
          <ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.oa===null">--</ng-container>
53
        </td>
54
        <td *ngIf="type=='overview'" class="uk-text-center">
55
          <ng-container *ngIf="countryOverview.journals?.oa !=null">{{countryOverview.journals.oa | number}}</ng-container>
56
          <ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.oa===null">--</ng-container>
57
        </td>
58
        <td *ngIf="type=='overview'" class="uk-text-center">
59
          <ng-container *ngIf="countryOverview.policies?.oa !=null">{{countryOverview.policies.oa | number}}</ng-container>
60
          <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">--</ng-container>
61
        </td>
62
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
63
          <ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.percentage===null">--</ng-container>
64
          <ng-container *ngIf="countryOverview.publications?.percentage !=null">
65
            {{countryOverview.publications.percentage | number}}%
66
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
67
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.publications.percentage | number}}% </span>-->
68
              <!--<ng-container *ngIf="countryOverview.publications?.percentage !=null">-->
69
                <!--<div class="progress">-->
70
                  <!--<div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>-->
71
                <!--</div>-->
72
              <!--</ng-container>-->
73
            <!--</span>-->
74

  
75
          </ng-container>
76
        </td>
77
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
78
          <ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.percentage===null">--</ng-container>
79
          <ng-container *ngIf="countryOverview.datasets?.percentage !=null">
80
            {{countryOverview.datasets.percentage | number}}%
81
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
82
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.datasets.percentage | number}}% </span>-->
83
              <!--<ng-container *ngIf="countryOverview.datasets?.percentage !=null">-->
84
                <!--<div class="progress">-->
85
                  <!--<div [ngStyle]="{'width': countryOverview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>-->
86
                <!--</div>-->
87
              <!--</ng-container>-->
88
            <!--</span>-->
89

  
90
          </ng-container>
91
        </td>
92
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
93
          <ng-container *ngIf="countryOverview.software===null || countryOverview.software.percentage===null">--</ng-container>
94
          <ng-container *ngIf="countryOverview.software?.percentage !=null">
95
            {{countryOverview.software.percentage | number}}%
96
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
97
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.software.percentage | number}}% </span>-->
98
              <!--<ng-container *ngIf="countryOverview.software?.percentage !=null">-->
99
                <!--<div class="progress">-->
100
                  <!--<div [ngStyle]="{'width': countryOverview.software.percentage+'%'}" class="progress-bar progress-bar-software animate-progress-bar"></div>-->
101
                <!--</div>-->
102
              <!--</ng-container>-->
103
            <!--</span>-->
104

  
105
          </ng-container>
106
        </td>
107
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
108
          <ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.percentage===null">--</ng-container>
109
          <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">
110
            {{countryOverview.otherProducts.percentage | number}}%
111
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
112
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.otherProducts.percentage | number}}% </span>-->
113
              <!--<ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">-->
114
                <!--<div class="progress">-->
115
                  <!--<div [ngStyle]="{'width': countryOverview.otherProducts.percentage+'%'}" class="progress-bar progress-bar-otherProducts animate-progress-bar"></div>-->
116
                <!--</div>-->
117
              <!--</ng-container>-->
118
            <!--</span>-->
119

  
120
          </ng-container>
121
        </td>
122
      </tr>
123
    </ng-container>
124
    <ng-container *ngIf="!isPercentage">
125
      <tr *ngFor="let countryOverview of countries">
126
        <td class=""><a [routerLink]="['/countryDashboard/' + countryOverview.country]">{{countryOverview.country}}</a></td>
127
        <td *ngIf="type=='overview'" class="uk-text-center">
128
          <ng-container *ngIf="countryOverview.repositories?.oa !=null">{{countryOverview.repositories.oa | number}}</ng-container>
129
          <ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.oa===null">--</ng-container>
130
        </td>
131
        <td *ngIf="type=='overview'" class="uk-text-center">
132
          <ng-container *ngIf="countryOverview.journals?.oa !=null">{{countryOverview.journals.oa | number}}</ng-container>
133
          <ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.oa===null">--</ng-container>
134
        </td>
135
        <td *ngIf="type=='overview'" class="uk-text-center">
136
          <ng-container *ngIf="countryOverview.policies?.oa !=null">{{countryOverview.policies.oa | number}}</ng-container>
137
          <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">--</ng-container>
138
        </td>
139
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
140
          <ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.oa===null">--</ng-container>
141
          <ng-container *ngIf="countryOverview.publications?.oa !=null">
142
            {{countryOverview.publications.oa | number}}
143
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
144
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.publications.oa | number}} </span>-->
145
              <!--<ng-container *ngIf="countryOverview.publications?.percentage !=null">-->
146
                <!--<div class="progress">-->
147
                  <!--<div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>-->
148
                <!--</div>-->
149
              <!--</ng-container>-->
150
            <!--</span>-->
151

  
152
          </ng-container>
153
        </td>
154
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
155
          <ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.oa===null">--</ng-container>
156
          <ng-container *ngIf="countryOverview.datasets?.oa !=null">
157
            {{countryOverview.datasets.oa | number}}
158
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
159
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.datasets.oa | number}} </span>-->
160
              <!--<ng-container *ngIf="countryOverview.datasets?.percentage !=null">-->
161
                <!--<div class="progress">-->
162
                  <!--<div [ngStyle]="{'width': countryOverview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>-->
163
                <!--</div>-->
164
              <!--</ng-container>-->
165
            <!--</span>-->
166

  
167
          </ng-container>
168
        </td>
169
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
170
          <ng-container *ngIf="countryOverview.software===null || countryOverview.software.oa===null">--</ng-container>
171
          <ng-container *ngIf="countryOverview.software?.oa !=null">
172
            {{countryOverview.software.oa | number}}
173
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
174
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.software.oa | number}} </span>-->
175
              <!--<ng-container *ngIf="countryOverview.software?.percentage !=null">-->
176
                <!--<div class="progress">-->
177
                  <!--<div [ngStyle]="{'width': countryOverview.software.percentage+'%'}" class="progress-bar progress-bar-software animate-progress-bar"></div>-->
178
                <!--</div>-->
179
              <!--</ng-container>-->
180
            <!--</span>-->
181

  
182
          </ng-container>
183
        </td>
184
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
185
          <ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.oa===null">--</ng-container>
186
          <ng-container *ngIf="countryOverview.otherProducts?.oa !=null">
187
            {{countryOverview.otherProducts.oa | number}}
188
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
189
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.otherProducts.oa | number}} </span>-->
190
              <!--<ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">-->
191
                <!--<div class="progress">-->
192
                  <!--<div [ngStyle]="{'width': countryOverview.otherProducts.percentage+'%'}" class="progress-bar progress-bar-otherProducts animate-progress-bar"></div>-->
193
                <!--</div>-->
194
              <!--</ng-container>-->
195
            <!--</span>-->
196

  
197
          </ng-container>
198
        </td>
199
      </tr>
200
    </ng-container>
55
    <tr *ngFor="let countryOverview of countries">
56
      <td class=""><a [routerLink]="['/countryDashboard/' + countryOverview.code]">{{countryOverview.name}}</a></td>
57
      <td class="uk-text-center">
58
        <ng-container *ngIf="countryOverview.repositories===null">--</ng-container>
59
        <ng-container *ngIf="countryOverview.repositories!=null">
60
          {{countryOverview.repositories | number}}<ng-container *ngIf="isPercentage">%</ng-container>
61
        </ng-container>
62
      </td>
63
      <td class="uk-text-center">
64
        <ng-container *ngIf="countryOverview.journals===null">--</ng-container>
65
        <ng-container *ngIf="countryOverview.journals!=null">
66
          {{countryOverview.journals | number}}<ng-container *ngIf="isPercentage">%</ng-container>
67
        </ng-container>
68
      </td>
69
      <!--<td class="uk-text-center">-->
70
      <!--<ng-container *ngIf="countryOverview.policies?.oa !=null">{{countryOverview.policies.oa | number}}</ng-container>-->
71
      <!--<ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">&#45;&#45;</ng-container>-->
72
      <!--</td>-->
73
      <td class="uk-text-center">
74
        <ng-container *ngIf="countryOverview.publications===null">--</ng-container>
75
        <ng-container *ngIf="countryOverview.publications!=null">
76
          {{countryOverview.publications | number}}<ng-container *ngIf="isPercentage">%</ng-container>
77
          <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
78
          <!--<span style="float:left; padding-right: 5px;">{{countryOverview.publications.percentage | number}}% </span>-->
79
          <!--<ng-container *ngIf="countryOverview.publications?.percentage !=null">-->
80
          <!--<div class="progress">-->
81
          <!--<div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>-->
82
          <!--</div>-->
83
          <!--</ng-container>-->
84
          <!--</span>-->
85
        </ng-container>
86
      </td>
87
      <td class="uk-text-center">
88
        <ng-container *ngIf="countryOverview.datasets===null">--</ng-container>
89
        <ng-container *ngIf="countryOverview.datasets!=null">
90
          {{countryOverview.datasets | number}}<ng-container *ngIf="isPercentage">%</ng-container>
91
        </ng-container>
92
      </td>
93
      <td class="uk-text-center">
94
        <ng-container *ngIf="countryOverview.software===null">--</ng-container>
95
        <ng-container *ngIf="countryOverview.software!=null">
96
          {{countryOverview.software | number}}<ng-container *ngIf="isPercentage">%</ng-container>
97
        </ng-container>
98
      </td>
99
      <td class="uk-text-center">
100
        <ng-container *ngIf="countryOverview.other===null">--</ng-container>
101
        <ng-container *ngIf="countryOverview.other!=null">
102
          {{countryOverview.other | number}}<ng-container *ngIf="isPercentage">%</ng-container>
103
        </ng-container>
104
      </td>
105
    </tr>
201 106
  </tbody>
202 107
</table>
modules/open-science-observatory-ui/trunk/src/app/pages/home/europe-map-overview.component.ts
1
import { MapCountryData } from '../../domain/map-country-data';;
2

  
3
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
4
import { CountryOverview } from '../../domain/overview-data';
5

  
6
import { DataService } from '../../services/data.service';
7
import { Router } from '@angular/router';
8
import {CountryMapData, JoinedMapData, OverviewMapData, SelectedCountry} from '../../domain/overview-map-data';
9
import { latlong } from '../../domain/countries-lat-lon';
10
import { DataHandlerService } from '../../services/data-handler.service';
11

  
12
import * as echarts from 'echarts';
13

  
14
declare var require: any;
15

  
16
const mapWorld = require('echarts/map/json/world.json');
17

  
18
@Component({
19
  selector: 'app-europe-map-overview',
20
  templateUrl: './europe-map-overview.component.html',
21
})
22

  
23
export class EuropeMapOverviewComponent implements OnInit {
24

  
25
  countries: CountryOverview[];
26

  
27
  @Output() emitSelectedCountry: EventEmitter<any> = new EventEmitter();
28

  
29
  activeView: string = 'publications';
30
  seriesColor: string = '#F17AA9';
31
  seriesName: string = 'OA publications';
32

  
33
  // tooltipBackgroundColor: string = '#EC4386';
34
  tooltipBackgroundColor: string = '#a52e5d';
35
  tooltipBorderColor: string = '#000';
36

  
37
  options = {};
38

  
39
  overviewMapData: OverviewMapData;
40

  
41
  countriesLatLong = latlong;
42

  
43
  joinedPublicationsMap: Map<string, JoinedMapData>;
44
  joinedDatasetsMap: Map<string, JoinedMapData>;
45

  
46
  constructor(private dataService: DataService,
47
              private dataHandlerService: DataHandlerService,
48
              private router: Router) {}
49

  
50
  ngOnInit(): void {
51

  
52
    echarts.registerMap('world', mapWorld);
53

  
54
    if (this.isEmbedRoute()) {
55
      const body = document.getElementsByTagName('body')[0];
56
      body.classList.remove('header_sticky');
57
    }
58

  
59
    this.dataService.getOverviewMapData().subscribe(
60
      rawData => {
61
        // console.log('==== Map RawData ====', rawData);
62
        this.overviewMapData = this.dataHandlerService.convertRawMapDataToMapData(rawData);
63
        this.joinedPublicationsMap = this.dataHandlerService.createJoinedPublicationsCountryMap(rawData);
64
        this.joinedDatasetsMap = this.dataHandlerService.createJoinedDatasetsCountryMap(rawData);
65

  
66
        // console.log('Country map data', this.overviewMapData[this.activeView]);
67
        this.loadMap(this.overviewMapData[this.activeView], this.seriesColor, this.seriesColor);
68
      },
69
      error => {
70
        console.log(error);
71
      }
72
    );
73
  }
74

  
75
  changeView(view: string) {
76
    this.activeView = view;
77

  
78
    if (this.activeView === 'publications') {
79
      this.seriesColor = '#F17AA9';
80
      this.seriesName = 'OA publications';
81
      this.tooltipBackgroundColor = '#a52e5d';
82
      this.tooltipBorderColor = '#000';
83
    } else if (this.activeView === 'datasets') {
84
      this.seriesColor = '#A98BD4';
85
      this.seriesName = 'OA datasets';
86
      this.tooltipBackgroundColor = '#7658a1';
87
      this.tooltipBorderColor = '#000';
88
    } else if (this.activeView === 'repositories') {
89
      this.seriesColor = '#708AA5';
90
      this.seriesName = 'OA repositories';
91
      this.tooltipBackgroundColor = '#3d5772';
92
      this.tooltipBorderColor = '#000';
93
    } else if (this.activeView === 'journals') {
94
      this.seriesColor = '#FFCE4E';
95
      this.seriesName = 'OA journals';
96
      this.tooltipBackgroundColor = '#cc9b1b';
97
      this.tooltipBorderColor = '#000';
98
    } else {
99
      this.seriesColor = '#639C66';
100
      this.seriesName = 'OA policies';
101
      this.tooltipBackgroundColor = '#306933';
102
      this.tooltipBorderColor = '#000';
103
    }
104
    this.loadMap(this.overviewMapData[view], this.seriesColor, this.seriesName);
105
  }
106

  
107
  loadMap(countryMapData: CountryMapData[], seriesColor: string, seriesName: string) {
108

  
109
    this.options = {
110
      title : {
111
        // text: 'World Population (2011)',
112
        // subtext: 'From Gapminder',
113
        left: 'center',
114
        top: 'top',
115
        textStyle: {
116
          color:  '#fff'
117
        }
118
      },
119
      responsive: true,
120
      tooltip : {
121
        trigger: 'item',
122
        // position: 'top',
123
        // formatter: '<strong>{b}</strong><br> {c2} {a}',
124
        // backgroundColor: '#f6c4d8',
125
        // borderColor: '#bf1d5e',
126
        // borderWidth: 0.2
127
      },
128
      visualMap: {
129
        show: false,
130
        min: 0,
131
        // max: max,
132
        max: 80000,
133
        inRange: {
134
          // symbolSize: [6, 60]
135
          // symbolSize: [0, 6]
136
        }
137
      },
138
      geo: {
139
        // name:  'World Population (2010)',
140
        type: 'map',
141
        map: 'world',
142
        // center: [15.2551, 54.5260],
143
        center: [14, 51],
144
        zoom: 4.7,
145
        // roam: true,
146
        label: {
147
          emphasis: {
148
            show: false
149
          }
150
        },
151
        itemStyle: {
152
          normal: {
153
            // color: 'rgba(139,151,167,0.4)',
154
            // borderColor: '#000',
155
            borderColor: '#fff',
156
            borderWidth: 0.5,
157
            areaColor: 'rgba(139,151,167,0.6)',
158
            // areaStyle: {
159
            //   color: 'rgba(139,151,167,0.2)'
160
            // }
161
          },
162
          emphasis: {
163
            // color: 'rgba(139,151,167,0.4)',
164
            // borderColor: '#000',
165
            borderColor: '#fff',
166
            borderWidth: 0.5,
167
            areaColor: 'rgba(139,151,167,0.8)',
168
            // areaStyle: {
169
            //   color: 'rgba(139,151,167,0.2)'
170
            // }
171
          }
172
        }
173
        // itemStyle: {
174
        //   // areacolor: '#ffffff',
175
        //   // bordercolor: '#111',
176
        //   // borderWidth: 1,
177
        //   // normal: {
178
        //   //   // areacolor: '#323c48',
179
        //   //   areacolor: '#ffffff',
180
        //   //   bordercolor: '#111'
181
        //   // },
182
        //   // emphasis: {
183
        //   //   areacolor: '#2a333d'
184
        //   // }
185
        // }
186
      },
187
      series : [
188
        {
189
          type: 'scatter',
190
          coordinateSystem: 'geo',
191
          name: seriesName,
192
          label: {
193
            show: true,
194
            position: 'inside',
195
            color: '#fff',
196
            opacity: 1,
197
            // formatter: '{@[2]}',
198
            formatter: (params => {
199
              return params.data.value[2].toLocaleString();
200
            }),
201
            textBorderColor: '#000',
202
            textBorderWidth: '2',
203
            fontSize: 15
204
            // formatter: '{b}: {@score}'
205
          },
206
          // activeOpacity: 0.6,
207
          data: countryMapData.map((itemOpt) => {
208
            // console.log('itemOpt.code', itemOpt.code);
209
            return {
210
              name: itemOpt.name,
211
              value: [
212
                this.countriesLatLong.get(itemOpt.code).longitude,
213
                this.countriesLatLong.get(itemOpt.code).latitude,
214
                itemOpt.value
215
              ],
216
              // label: {
217
              //   emphasis: {
218
              //     position: 'right',
219
              //     show: true
220
              //   }
221
              // },
222
              itemStyle: {
223
                normal: {
224
                  color:  seriesColor,
225
                  // color:  '#f8d5e3',
226
                  // opacity: 0.8,
227
                  borderColor: seriesColor,
228
                  borderWidth: 2
229
                }
230
              }
231
            };
232
          }),
233
          symbolSize: value => {
234
            // console.log('Math.sqrt(value[2]) / 1000: ' + (Math.sqrt(value[2]) / 1000) );
235
            // return Math.sqrt(value[2]) / 10;
236
            return Math.sqrt(value[2]) / 10 * this.resizeFactor(countryMapData);
237
            // return Math.sqrt(value[2]) / 10;
238
          },
239
          tooltip : {
240
            trigger: 'item',
241
            position: 'top',
242
            formatter: (params => {
243
              // console.log('params: ', params);
244
              // let bla = '<strong>' + params.data.name + '</strong><br>';
245
              // bla += params.data.value[2].toLocaleString() + ' ' + params.seriesName;
246
              // return bla;
247
              return this.createTooltip(params);
248
            }),
249
            backgroundColor: this.tooltipBackgroundColor,
250
            borderColor: this.tooltipBorderColor,
251
            borderWidth: 0.2
252
          },
253
        }
254
      ]
255
    };
256
  }
257

  
258
  onChartClick(event: any, type: string) {
259
    // console.log('chart event:', type, event);
260
    // console.log('country:', event.name);
261

  
262
    const selectedCountry: SelectedCountry = new SelectedCountry();
263
    selectedCountry.name = event.name;
264
    selectedCountry.code = this.joinedPublicationsMap.get(event.name).countryCode;
265

  
266
    // console.log('Selected country', selectedCountry);
267
    this.emitSelectedCountry.emit(selectedCountry);
268
  }
269

  
270
  // selectedCountry(countryName: string) {
271
  //   this.emitSelectedCountry.emit(countryName);
272
  // }
273

  
274
  isEmbedRoute() {
275
    return (this.router.url === '/overview-map-embed');
276
  }
277

  
278
  resizeFactor(countryMapData: CountryMapData[]) {
279

  
280
    let max = 0;
281
    for (const countryData of countryMapData) {
282
      if (countryData.value > max) {
283
        max = countryData.value;
284
      }
285
    }
286
    // console.log('resizeFactor', 100 / (Math.sqrt(max) / 10));
287
    return 100 / (Math.sqrt(max) / 10);
288
  }
289

  
290
  createTooltip(params: any) {
291

  
292
    // console.log('params: ', params);
293
    // console.log('params.name: ', params.name);
294

  
295
    let tooltip = '<div style="padding:10px">';
296

  
297
    tooltip += '<div class="uk-margin-small" style="font-weight: 600;">' + params.name + '</div>';
298

  
299
    if (this.activeView === 'publications') {
300

  
301
      tooltip += '<div class="numbers">';
302
      tooltip += '<div class="indicator">' +
303
        '<span class="number">' + params.data.value[2].toLocaleString() + '</span>' +
304
        '<span><i>OA publications</i> affiliated <br>to an organization in the country</span></div>';
305

  
306
      tooltip += '<div class="indicator uk-margin-small-top">' +
307
        '<span class="number">' + this.joinedPublicationsMap.get(params.name).deposited.toLocaleString() + '</span>' +
308
        '<span><i>OA publications</i> from <br>institutional repositories</span></div>';
309

  
310
      tooltip += '</div>';
311

  
312
    } else if (this.activeView === 'datasets') {
313

  
314
      tooltip += '<div class="numbers">';
315
      tooltip += '<div class="indicator">' +
316
        '<span class="number">' + params.data.value[2].toLocaleString() + '</span>' +
317
        '<span><i>OA datasets</i> affiliated <br>to an organization in the country</span></div>';
318

  
319
      tooltip += '<div class="indicator uk-margin-small-top">' +
320
        '<span class="number">' + this.joinedDatasetsMap.get(params.name).deposited.toLocaleString() + '</span>' +
321
        '<span><i>OA datasets</i> from <br>institutional repositories</span></div>';
322

  
323
      tooltip += '</div>';
324

  
325
    } else if (this.activeView === 'repositories') {
326

  
327
      tooltip += '<div class="numbers">';
328
      tooltip += '<div class="indicator">' +
329
        '<span class="number">' + params.data.value[2].toLocaleString() + '</span>' +
330
        '<span><i>repositories</i> from <br>openDOAR & re3data</span></div>';
331

  
332
      tooltip += '</div>';
333

  
334
    } else if (this.activeView === 'journals') {
335

  
336
      tooltip += '<div class="numbers">';
337
      tooltip += '<div class="indicator">' +
338
        '<span class="number">' + params.data.value[2].toLocaleString() + '</span>' +
339
        '<span><i>journals</i> from <br>DOAJ</span></div>';
340

  
341
      tooltip += '</div>';
342

  
343
    } else {
344

  
345
      tooltip += '<div class="numbers">';
346
      tooltip += '<div class="indicator">' +
347
        '<span class="number">' + params.data.value[2].toLocaleString() + '</span>' +
348
        '<span>organizations with <br><i>OA policies</i></span></div>';
349

  
350
      tooltip += '</div>';
351
    }
352

  
353
    tooltip += '</div>';
354
    return tooltip;
355
  }
356
}
modules/open-science-observatory-ui/trunk/src/app/pages/home/data-view.component.html
1
<!--<ul class="uk-subnav uk-subnav-pill uk-text-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">-->
2
  <!--<li aria-expanded="true" class="{{activeView=='absolute' ? 'uk-active' : ''}}"><a (click)="changeView('absolute')">Absolute</a></li>-->
3
  <!--<li aria-expanded="false" class="{{activeView=='percentage' ? 'uk-active' : ''}}"><a (click)="changeView('percentage')">Percentage</a></li>-->
4
  <!--<li aria-expanded="false" class="{{activeView=='graph' ? 'uk-active' : ''}}"><a (click)="changeView('graph')">Graph</a></li>-->
5
<!--</ul>-->
6

  
7
<!--<hr>-->
8

  
9
<!--<ul id="switcher-content-a-fade" class="uk-switcher uk-margin">-->
10
  <!--<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">Hello!</li>-->
11
  <!--<li aria-hidden="true" style="animation-duration: 200ms;" class="">Hello again!</li>-->
12
  <!--<li aria-hidden="true" style="animation-duration: 200ms;" class="">Bazinga!</li>-->
13
<!--</ul>-->
14

  
15
<!--<div *ngIf="activeView=='absolute'" class="">-->
16
  <!--<app-countries-table [isPercentage]="false" [type]="type" [countries]="countries"></app-countries-table>-->
17
<!--</div>-->
18

  
19
<!--<div *ngIf="activeView=='percentage'" class="">-->
20
  <!--<app-countries-table [isPercentage]="true" [type]="type" [countries]="countries"></app-countries-table>-->
21
<!--</div>-->
22

  
23
<!--<div *ngIf="activeView=='graph'" class="">-->
24
  <!--Graphs here....-->
25
<!--</div>-->
26

  
27 1
<ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
28 2
  <li aria-expanded="true" class="uk-active">
29 3
    <a href="#" (click)="changeView('absolute')">
......
41 15
    </a>
42 16
  </li>
43 17
</ul>
44
<div class="actionButtons uk-text-right">
45
  <!--<button class="md-btn md-btn-primary" (click)="printOverviewData('switcher-content-a-fade')"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</button>-->
46
  <a class="" (click)="printOverviewData('switcher-content-a-fade')"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</a>
47
  <!--<button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download report</button>-->
48
  <a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download report</a>
18

  
19
<div class="goToDetailedViewLink uk-text-right">
20
  <a class="" [routerLink]="['/overview/' + 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>
49 21
</div>
50 22

  
51 23
<hr>
52 24

  
53 25
<ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
54 26
  <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
55
    <!--<div class="dataContent">-->
56
      <!--<div class="actionButtons uk-text-right">-->
57
        <!--<button class="md-btn md-btn-secondary" (click)="printOverviewData('table-absolute')"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</button>-->
58
        <!--<button class="md-btn md-btn-secondary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download report</button>-->
59
      <!--</div>-->
60
    <!--</div>-->
61 27
    <div id="table-absolute" class="">
62
      <app-countries-table [isPercentage]="false" [type]="type" [countries]="countries"></app-countries-table>
28
      <div class="uk-margin-bottom">
29
        <label class="uk-margin-right">Show: </label>
30
        <select class="md-input" #selectContentAbsolute (change)="getContentAbsolute(selectContentAbsolute.value)" style="width: 230px; display: inline-block">
31
          <option value="affiliated">affiliated</option>
32
          <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
33
          <option value="deposited">deposited</option>
34
          <option value="deposited_peer_reviewed">deposited peer reviewed</option>
35
        </select>
36
        <!--<span class="md-input-bar"></span>-->
37
      </div>
38
      <div *ngIf="loading" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
39
      <app-countries-table *ngIf="tableAbsoluteData" [isPercentage]="false" [countries]="tableAbsoluteData"></app-countries-table>
63 40
    </div>
64 41
  </li>
65 42
  <li aria-hidden="true" style="animation-duration: 200ms;" class="">
66
    <!--<div class="dataContent">-->
67
      <!--<div class="actionButtons uk-text-right">-->
68
        <!--<button class="md-btn md-btn-secondary" (click)="printOverviewData('table-percentage')"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</button>-->
69
        <!--<button class="md-btn md-btn-secondary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download report</button>-->
70
      <!--</div>-->
71
    <!--</div>-->
43

  
72 44
    <div id="table-percentage" class="">
73
      <app-countries-table [isPercentage]="true" [type]="type" [countries]="countries"></app-countries-table>
45
      <div class="uk-margin-bottom">
46
        <label class="uk-margin-right">Show: </label>
47
        <select class="md-input" #selectContentPercentage (change)="getContentPercentage(selectContentPercentage.value)" style="width: 230px; display: inline-block">
48
          <option value="affiliated">affiliated</option>
49
          <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
50
          <option value="deposited">deposited</option>
51
          <option value="deposited_peer_reviewed">deposited peer reviewed</option>
52
        </select>
53
        <!--<span class="md-input-bar"></span>-->
54
      </div>
55
      <app-countries-table *ngIf="tablePercentageData" [isPercentage]="true" [countries]="tablePercentageData"></app-countries-table>
74 56
    </div>
75 57
  </li>
76 58
  <li aria-hidden="true" style="animation-duration: 200ms;" class="">
77
    <!--<div class="dataContent">-->
78
      <!--<div class="actionButtons uk-text-right">-->
79
        <!--<button class="md-btn md-btn-secondary" (click)="printOverviewData('graphs')"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</button>-->
80
        <!--&lt;!&ndash;<button class="md-btn md-btn-secondary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download report</button>&ndash;&gt;-->
81
      <!--</div>-->
82
      <!--<div id="graphs">-->
83
        <!--<div *ngIf="type=='overview'" class="uk-grid uk-margin-top">-->
84
          <!--<div class="uk-width-1-2">-->
85
            <!--<iframe *ngIf="oaJournalsURL" width="100%" height="440" [src]="oaJournalsURL"></iframe>-->
86
          <!--</div>-->
87
          <!--<div class="uk-width-1-2">-->
88
            <!--<iframe *ngIf="oaRepositoriesURL" width="100%" height="440" [src]="oaRepositoriesURL"></iframe>-->
89
          <!--</div>-->
90
        <!--</div>-->
91
        <!--<div class="uk-grid uk-margin-top">-->
92
          <!--<div class="uk-width-1-2">-->
93
            <!--<iframe *ngIf="oaPublicationsURL" width="100%" height="440" [src]="oaPublicationsURL"></iframe>-->
94
          <!--</div>-->
95
          <!--<div class="uk-width-1-2">-->
96
            <!--<iframe *ngIf="oaDatasetsURL" width="100%" height="440" [src]="oaDatasetsURL"></iframe>-->
97
          <!--</div>-->
98
        <!--</div>-->
99
        <!--<div class="uk-grid uk-margin-top">-->
100
          <!--<div class="uk-width-1-2">-->
101
            <!--<iframe *ngIf="oaSoftwareURL" width="100%" height="440" [src]="oaSoftwareURL"></iframe>-->
102
          <!--</div>-->
103
          <!--<div class="uk-width-1-2">-->
104
            <!--<iframe *ngIf="oaOtherURL" width="100%" height="440" [src]="oaOtherURL"></iframe>-->
105
          <!--</div>-->
106
        <!--</div>-->
107
      <!--</div>-->
108
    <!--</div>-->
109 59
    <div id="graphs">
110 60
      <div *ngIf="type=='overview'" class="uk-grid uk-margin-top">
111 61
        <div class="uk-width-1-2">
modules/open-science-observatory-ui/trunk/src/app/pages/home/countries-table.component.ts
1
import { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core';
2
import { CountryOverview } from '../../domain/overview-data';
1
import { Component, Input, OnChanges } from '@angular/core';
2
import { CountryTableData } from '../../domain/overview-map-data';
3 3

  
4 4
@Component({
5 5
  selector: 'app-countries-table',
6 6
  templateUrl: './countries-table.component.html',
7
  // styleUrls: ['./top-menu.component.css'],
8
  encapsulation: ViewEncapsulation.None
9 7
})
10 8

  
11 9
export class CountriesTableComponent implements OnChanges {
12 10

  
13 11
  @Input() isPercentage: boolean;
14
  @Input() type: string;
15
  @Input() countries: CountryOverview[];
12
  @Input() countries: CountryTableData[];
16 13

  
17 14
  isSortedBy: string;
18 15
  isDescending: boolean = true;
......
20 17
  constructor() {}
21 18

  
22 19
  ngOnChanges() {
23
    this.countries.sort((a, b) => (a['country'] > b['country']) ? 1 : -1);
20
    this.countries.sort((a, b) => (a['name'] > b['name']) ? 1 : -1);
24 21
  }
25 22

  
26 23
  sortBy(field: string) {
......
34 31
    this.isSortedBy = field;
35 32

  
36 33
    if (field !== 'country') {
37
      if (this.isPercentage) {
38
        if (this.isDescending) {
39
          this.countries.sort((a, b) => b[field].percentage - a[field].percentage);
40
        } else {
41
          this.countries.sort((a, b) => a[field].percentage - b[field].percentage);
42
        }
34
      if (this.isDescending) {
35
        this.countries.sort((a, b) => b[field] - a[field]);
43 36
      } else {
44
        if (this.isDescending) {
45
          this.countries.sort((a, b) => b[field].oa - a[field].oa);
46
        } else {
47
          this.countries.sort((a, b) => a[field].oa - b[field].oa);
48
        }
37
        this.countries.sort((a, b) => a[field] - b[field]);
49 38
      }
50 39
    } else {
51 40
      if (this.isDescending) {
52
        this.countries.sort((a, b) => (a[field] < b[field]) ? 1 : -1);
41
        this.countries.sort((a, b) => (a['name'] < b['name']) ? 1 : -1);
53 42
      } else {
54
        this.countries.sort((a, b) => (a[field] > b[field]) ? 1 : -1);
43
        this.countries.sort((a, b) => (a['name'] > b['name']) ? 1 : -1);
55 44
      }
56 45
    }
57 46

  
modules/open-science-observatory-ui/trunk/src/app/pages/home/data-view.component.ts
1
import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
2
import { CountryOverview } from '../../domain/overview-data';
1
import { Component, OnInit } from '@angular/core';
3 2
import { printPage } from '../../shared/reusablecomponents/print-function';
4 3
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
4
import { DataService } from '../../services/data.service';
5
import { DataHandlerService } from '../../services/data-handler.service';
6
import { CountryTableData } from '../../domain/overview-map-data';
5 7

  
6 8
@Component({
7 9
  selector: 'app-data-view',
8 10
  templateUrl: './data-view.component.html',
9
  // styleUrls: ['./top-menu.component.css'],
10
  encapsulation: ViewEncapsulation.None
11 11
})
12 12

  
13 13
export class DataViewComponent implements OnInit {
14 14

  
15
  @Input() type: string;
16
  @Input() countries: CountryOverview[];
15
  // @Input() type: string;
16
  // @Input() countries: CountryOverview[];
17 17

  
18 18
  activeView: string = 'absolute';
19
  contentAbsoluteSelection: string = 'affiliated';
20
  contentPercentageSelection: string = 'affiliated';
19 21

  
22
  tableAbsoluteData: CountryTableData[];
23
  tablePercentageData: CountryTableData[];
24

  
25
  loading: boolean = true;
26

  
20 27
  oaPublicationsURL: SafeResourceUrl;
21 28
  oaRepositoriesURL: SafeResourceUrl;
22 29
  oaJournalsURL: SafeResourceUrl;
......
24 31
  oaSoftwareURL: SafeResourceUrl;
25 32
  oaOtherURL: SafeResourceUrl;
26 33

  
27
  constructor(private sanitizer: DomSanitizer) {}
34
  constructor(private sanitizer: DomSanitizer,
35
              private dataService: DataService,
36
              private dataHandlerService: DataHandlerService) {}
28 37

  
38
  ngOnInit(): void {
39
    this.getAbsoluteData();
40
  }
41

  
42
  getAbsoluteData() {
43
    this.loading = true;
44
    this.dataService.getOverviewTableAbsoluteData(this.contentAbsoluteSelection).subscribe(
45
      rawData => {
46
        this.tableAbsoluteData = this.dataHandlerService.convertRawDataToAbsoluteTableData(rawData);
47
        this.loading = false;
48
      }, error => {
49
        console.log(error);
50
        this.loading = false;
51
      }
52
    );
53
  }
54

  
55
  getPercentageData() {
56
    this.loading = true;
57
    this.dataService.getOverviewTableAbsoluteData(this.contentPercentageSelection).subscribe(
58
      rawData => {
59
        this.tablePercentageData = this.dataHandlerService.convertRawDataToAbsoluteTableData(rawData);
60
        this.loading = false;
61
      }, error => {
62
        console.log(error);
63
        this.loading = false;
64
      }
65
    );
66
  }
67

  
68
  getContentAbsolute(contentSelection: string): void {
69
    this.contentAbsoluteSelection = contentSelection;
70
    this.getAbsoluteData();
71
  }
72

  
73
  getContentPercentage(contentSelection: string): void {
74
    this.contentPercentageSelection = contentSelection;
75
    this.getPercentageData();
76
  }
77

  
29 78
  changeView(view: string) {
30 79
    this.activeView = view;
31 80
    if (view === 'graph') {
......
59 108
  printOverviewData(sectionID: string) {
60 109
    printPage(sectionID);
61 110
  }
62

  
63
  ngOnInit(): void {
64
  }
65 111
}
modules/open-science-observatory-ui/trunk/src/app/pages/home/home.component.html
7 7
      <div class="uk-width-4-5">
8 8

  
9 9
        <!--Map Container-->
10
        <app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="countrySelected($event)"></app-map-overview>
10
        <app-europe-map-overview (emitSelectedCountry)="countrySelected($event)"></app-europe-map-overview>
11
        <!--<app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="selectedCountry($event)"></app-map-overview>-->
11 12

  
12 13

  
13 14

  
......
15 16

  
16 17
      <div class="uk-width-1-5">
17 18
        <div class="md-card infoBox">
18
          <ng-container *ngIf="!countrySelectedName">
19
          <ng-container *ngIf="!selectedCountry">
19 20
            <div class="md-card-toolbar">
20 21
              <h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3>
21 22
            </div>
22
            <div *ngIf="!countrySelectedName" class="md-card-content">
23
            <div *ngIf="!selectedCountry" class="md-card-content">
23 24
              <div>An OpenAIRE service to:</div>
24 25
              <ul>
25 26
                <li>
......
38 39
              <div class="uk-text-center uk-margin-medium-top uk-margin-medium-bottom">
39 40
                <button class="md-btn md-btn-primary">Learn More</button>
40 41
              </div>
41
              <div class="uk-text-meta uk-text-small">
42
                <span class="uk-margin-right" style="opacity: 0.8; float: left; margin-top: 7px;">
43
                  <img src="../../../assets/img/Open_Research_Graph.svg">
44
                </span>
45
                <span>Powered by <a target="_blank" href="" style="text-decoration: underline">OpenAIRE Open Research Graph</a></span>
46
              </div>
42

  
47 43
            </div>
48 44
            <div></div>
49 45
          </ng-container>
50 46

  
51
          <ng-container *ngIf="countrySelectedName">
47
          <ng-container *ngIf="selectedCountry">
52 48
            <div class="md-card-toolbar">
53 49
              <h3 class="uk-text-center uk-margin-small-top">
54
                <a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>{{countrySelectedName | uppercase}}
50
                <a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>
51
                <img src="../../../assets/img/flags/{{selectedCountry.code | lowercase}}-flag-round.png" class="small-flag-image uk-margin-small-right" width="24" style="margin-top: -3px">
52
                <span>{{selectedCountry.name | uppercase}}</span>
55 53
              </h3>
56 54
            </div>
57
            <div *ngIf="countrySelectedName" class="md-card-content">
55
            <div *ngIf="!selectedCountryData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
56
            <!--<div *ngIf="!selectedCountryData" class="loading-big">-->
57
              <!--<div uk-spinner="ratio: 2" class="uk-overlay uk-position-center uk-dark" style="margin: auto"></div>-->
58
              <!--&lt;!&ndash;<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">&ndash;&gt;-->
59
                <!--&lt;!&ndash;{{ loadingMessage }}&ndash;&gt;-->
60
              <!--&lt;!&ndash;</div>&ndash;&gt;-->
61
              <!--<div class="transparentFilm"></div>-->
62
            <!--</div>-->
63
            <div *ngIf="selectedCountryData" class="md-card-content">
58 64
              <div class="numbers">
59 65
                <div class="uk-margin-small-top">
60 66

  
61 67
                  <div class="indicator">
62
                    <span class="number publications" *ngIf="countrySelectedOverview.publications?.oa !=null">{{countrySelectedOverview.publications.oa | number}}</span>
63
                    <span class="number publications" *ngIf="countrySelectedOverview.publications===null || countrySelectedOverview.publications.oa===null">--</span>
64
                    <span><i>OA publications</i> from institutional repositories</span>
68
                    <span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated!=null">{{selectedCountryData.publicationsAffiliated | number}}</span>
69
                    <span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated===null">--</span>
70
                    <span><i>OA publications</i> affiliated to an organization in the country</span>
65 71
                  </div>
66 72

  
67 73
                  <div class="indicator uk-margin-small-top">
68
                    <span class="number publications" *ngIf="countrySelectedOverview.publications?.oa !=null">{{countrySelectedOverview.publications.oa | number}}</span>
69
                    <span class="number publications" *ngIf="countrySelectedOverview.publications===null || countrySelectedOverview.publications.oa===null">--</span>
70
                    <span><i>OA publications</i> affiliated to an organization in the country</span>
74
                    <span class="number publications" *ngIf="selectedCountryData.publicationsDeposited!=null">{{selectedCountryData.publicationsDeposited | number}}</span>
75
                    <span class="number publications" *ngIf="selectedCountryData.publicationsDeposited===null">--</span>
76
                    <span><i>OA publications</i> from institutional repositories</span>
71 77
                  </div>
72 78

  
73 79
                  <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
74 80

  
75 81
                  <div class="indicator">
76
                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets?.oa !=null">{{countrySelectedOverview.datasets.oa | number}}</span>
77
                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets===null || countrySelectedOverview.datasets.oa===null">--</span>
78
                    <span><i>OA datasets</i> from institutional repositories</span>
82
                    <span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated!=null">{{selectedCountryData.datasetsAffiliated | number}}</span>
83
                    <span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated===null">--</span>
84
                    <span><i>OA datasets</i> affiliated to an organization in the country</span>
79 85
                  </div>
80 86

  
81 87
                  <div class="indicator uk-margin-small-top">
82
                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets?.oa !=null">{{countrySelectedOverview.datasets.oa | number}}</span>
83
                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets===null || countrySelectedOverview.datasets.oa===null">--</span>
84
                    <span><i>OA datasets</i> affiliated to an organization in the country</span>
88
                    <span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited!=null">{{selectedCountryData.datasetsDeposited | number}}</span>
89
                    <span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited===null">--</span>
90
                    <span><i>OA datasets</i> from institutional repositories</span>
85 91
                  </div>
86 92

  
87 93
                  <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
88 94

  
89 95
                  <div class="indicator">
90
                    <span class="number repositories" *ngIf="countrySelectedOverview.repositories?.oa !=null">{{countrySelectedOverview.repositories.oa | number}}</span>
91
                    <span class="number repositories" *ngIf="countrySelectedOverview.repositories===null || countrySelectedOverview.repositories.oa===null">--</span>
96
                    <span class="number repositories" *ngIf="selectedCountryData.repositories!=null">{{selectedCountryData.repositories | number}}</span>
97
                    <span class="number repositories" *ngIf="selectedCountryData.repositories===null">--</span>
92 98
                    <span><i>repositories</i> from openDOAR & re3data</span>
93 99
                  </div>
94 100

  
95 101
                  <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
96 102

  
97 103
                  <div class="indicator">
98
                    <span class="number journals" *ngIf="countrySelectedOverview.journals?.oa !=null">{{countrySelectedOverview.journals.oa | number}}</span>
99
                    <span class="number journals" *ngIf="countrySelectedOverview.journals===null || countrySelectedOverview.journals.oa===null">--</span>
100
                    <span><i>OA journals</i> from DOAJ</span>
104
                    <span class="number journals" *ngIf="selectedCountryData.journals!=null">{{selectedCountryData.journals | number}}</span>
105
                    <span class="number journals" *ngIf="selectedCountryData.journals===null">--</span>
106
                    <span><i>journals</i> from DOAJ</span>
101 107
                  </div>
102 108

  
103 109
                  <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
104 110

  
105 111
                  <div class="indicator">
106
                    <span class="number policies" *ngIf="countrySelectedOverview.policies?.oa !=null">{{countrySelectedOverview.policies.oa | number}}</span>
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff