Revision 58610
Added by Stefania Martziou almost 4 years ago
home.component.html | ||
---|---|---|
1 | 1 |
<!--MAP AND OVERVIEW NUMBERS SECTION--> |
2 | 2 |
<section class="section greySection" id="sect-overview"> |
3 |
<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove uk-margin-bottom" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
|
|
3 |
<div class="uk-container uk-container-large uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove uk-margin-bottom" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
|
|
4 | 4 |
|
5 | 5 |
<div class="uk-grid uk-grid-small uk-margin-bottom uk-grid-match" uk-height-viewport="offset-bottom: 25"> |
6 | 6 |
|
... | ... | |
14 | 14 |
</div> |
15 | 15 |
|
16 | 16 |
<div class="uk-width-1-5"> |
17 |
<div class="md-card dark-grey-box infoBox"> |
|
18 |
<div *ngIf="!countrySelectedName" class="md-card-content"> |
|
19 |
<h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3> |
|
20 |
<div>This tool allows you to:</div> |
|
21 |
<ul> |
|
22 |
<li> |
|
23 |
better understand the European Open Data landscape |
|
24 |
</li> |
|
25 |
<li> |
|
26 |
find data catalogues and datasets analyse and visualise available metadata |
|
27 |
</li> |
|
28 |
<li> |
|
29 |
find data catalogues and datasets analyse and visualise available metadata |
|
30 |
</li> |
|
31 |
<li> |
|
32 |
access the raw data |
|
33 |
</li> |
|
34 |
</ul> |
|
35 |
<div class="uk-text-center uk-margin-medium-top"> |
|
36 |
<button class="md-btn md-btn-primary">Learn More</button> |
|
17 |
<div class="md-card infoBox"> |
|
18 |
<ng-container *ngIf="!countrySelectedName"> |
|
19 |
<div class="md-card-toolbar"> |
|
20 |
<h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3> |
|
37 | 21 |
</div> |
38 |
</div> |
|
39 |
<div *ngIf="countrySelectedName" class="md-card-content"> |
|
40 |
<h3 class="uk-text-center"><a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>{{countrySelectedName | uppercase}}</h3> |
|
41 |
<div class="numbers"> |
|
42 |
<div class="uk-margin-medium-top"> |
|
43 |
<div class="number"> |
|
44 |
<ng-container *ngIf="countrySelectedOverview.repositories?.oa !=null">{{countrySelectedOverview.repositories.oa | number}}</ng-container> |
|
45 |
<ng-container *ngIf="countrySelectedOverview.repositories===null || countrySelectedOverview.repositories.oa===null">--</ng-container> |
|
46 |
</div> |
|
47 |
<div class="uk-margin-top">number of OA repositories</div> |
|
22 |
<div *ngIf="!countrySelectedName" class="md-card-content"> |
|
23 |
<div>An OpenAIRE service to:</div> |
|
24 |
<ul> |
|
25 |
<li> |
|
26 |
Better understand the European open research landscape |
|
27 |
</li> |
|
28 |
<li> |
|
29 |
Track trends for open access to publications, data, software |
|
30 |
</li> |
|
31 |
<li> |
|
32 |
Reveal hidden potential on existing resources |
|
33 |
</li> |
|
34 |
<li> |
|
35 |
View open collaboration patterns |
|
36 |
</li> |
|
37 |
</ul> |
|
38 |
<div class="uk-text-center uk-margin-medium-top uk-margin-medium-bottom"> |
|
39 |
<button class="md-btn md-btn-primary">Learn More</button> |
|
48 | 40 |
</div> |
49 |
<div class="uk-margin-medium-top"> |
|
50 |
<div class="number"> |
|
51 |
<ng-container *ngIf="countrySelectedOverview.journals?.oa !=null">{{countrySelectedOverview.journals.oa | number}}</ng-container> |
|
52 |
<ng-container *ngIf="countrySelectedOverview.journals===null || countrySelectedOverview.journals.oa===null">--</ng-container> |
|
53 |
</div> |
|
54 |
<div class="uk-margin-top">number of OA journals</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> |
|
55 | 46 |
</div> |
56 |
<div class="uk-margin-medium-top"> |
|
57 |
<div class="number"> |
|
58 |
<ng-container *ngIf="countrySelectedOverview.policies?.oa !=null">{{countrySelectedOverview.policies.oa | number}}</ng-container> |
|
59 |
<ng-container *ngIf="countrySelectedOverview.policies===null || countrySelectedOverview.policies.oa===null">--</ng-container> |
|
60 |
</div> |
|
61 |
<div class="uk-margin-top">number of organizations with OA policies</div> |
|
62 |
</div> |
|
63 | 47 |
</div> |
64 |
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom"> |
|
65 |
<div class="graphs"> |
|
66 |
<div class="uk-grid"> |
|
67 |
<div class="uk-width-1-2"> |
|
68 |
<ng-container *ngIf="countrySelectedOverview.publications?.percentage !=null"> |
|
69 |
<app-gauge-chart [chartData]="countrySelectedOverview.publications.percentage" [color]="'#5086BA'"></app-gauge-chart> |
|
70 |
</ng-container> |
|
71 |
<ng-container *ngIf="countrySelectedOverview.publications===null || countrySelectedOverview.publications.percentage===null"> |
|
72 |
<app-gauge-chart [chartData]="0" [color]="'#5086BA'"></app-gauge-chart> |
|
73 |
</ng-container> |
|
74 |
<!--<div class="epc_chart" data-percent="65" data-bar-color="#009688">--> |
|
75 |
<!--<span class="epc_chart_text"><span class="countUpMe">65</span>%</span>--> |
|
76 |
<!--<canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>--> |
|
77 |
<!--</div>--> |
|
78 |
<div class="uk-text-center">OA publications</div> |
|
48 |
<div></div> |
|
49 |
</ng-container> |
|
50 |
|
|
51 |
<ng-container *ngIf="countrySelectedName"> |
|
52 |
<div class="md-card-toolbar"> |
|
53 |
<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}} |
|
55 |
</h3> |
|
56 |
</div> |
|
57 |
<div *ngIf="countrySelectedName" class="md-card-content"> |
|
58 |
<div class="numbers"> |
|
59 |
<div class="uk-margin-small-top"> |
|
60 |
|
|
61 |
<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> |
|
65 |
</div> |
|
66 |
|
|
67 |
<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> |
|
71 |
</div> |
|
72 |
|
|
73 |
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom"> |
|
74 |
|
|
75 |
<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> |
|
79 |
</div> |
|
80 |
|
|
81 |
<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> |
|
85 |
</div> |
|
86 |
|
|
87 |
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom"> |
|
88 |
|
|
89 |
<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> |
|
92 |
<span><i>repositories</i> from openDOAR & re3data</span> |
|
93 |
</div> |
|
94 |
|
|
95 |
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom"> |
|
96 |
|
|
97 |
<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> |
|
101 |
</div> |
|
102 |
|
|
103 |
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom"> |
|
104 |
|
|
105 |
<div class="indicator"> |
|
106 |
<span class="number policies" *ngIf="countrySelectedOverview.policies?.oa !=null">{{countrySelectedOverview.policies.oa | number}}</span> |
|
107 |
<span class="number policies" *ngIf="countrySelectedOverview.policies===null || countrySelectedOverview.policies.oa===null">--</span> |
|
108 |
<span>organisations with <i>OA policies</i></span> |
|
109 |
</div> |
|
110 |
|
|
79 | 111 |
</div> |
80 |
<div class="uk-width-1-2"> |
|
81 |
<ng-container *ngIf="countrySelectedOverview.datasets?.percentage !=null"> |
|
82 |
<app-gauge-chart [chartData]="countrySelectedOverview.datasets.percentage" [color]="'#44653D'"></app-gauge-chart> |
|
83 |
</ng-container> |
|
84 |
<ng-container *ngIf="countrySelectedOverview.datasets===null || countrySelectedOverview.datasets.percentage===null"> |
|
85 |
<app-gauge-chart [chartData]="0" [color]="'#44653D'"></app-gauge-chart> |
|
86 |
</ng-container> |
|
87 |
<!--<div class="epc_chart" data-percent="43" data-bar-color="#009688">--> |
|
88 |
<!--<span class="epc_chart_text"><span class="countUpMe">43</span>%</span>--> |
|
89 |
<!--<canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>--> |
|
90 |
<!--</div>--> |
|
91 |
<div class="uk-text-center">OA datasets</div> |
|
92 |
</div> |
|
112 |
|
|
93 | 113 |
</div> |
114 |
|
|
115 |
<div class="uk-text-center uk-margin-medium-top"> |
|
116 |
<a class="" [routerLink]="['/countryDashboard/' + countrySelectedName]">Detailed View <i class="fas fa-arrow-right uk-margin-small-left"></i></a> |
|
117 |
</div> |
|
118 |
|
|
119 |
<div class="uk-text-meta uk-text-small uk-margin-medium-top"> |
|
120 |
<span class="uk-margin-right" style="opacity: 0.8; float: left; margin-top: 7px;"> |
|
121 |
<img src="../../../assets/img/Open_Research_Graph.svg"> |
|
122 |
</span> |
|
123 |
<span>Powered by <a target="_blank" href="" style="text-decoration: underline">OpenAIRE Open Research Graph</a></span> |
|
124 |
</div> |
|
94 | 125 |
</div> |
95 |
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom"> |
|
96 |
<div class="uk-text-center uk-margin-medium-top"> |
|
97 |
<button class="md-btn md-btn-primary" [routerLink]="['/countryDashboard/' + countrySelectedName]">Visit Country Page <i class="fas fa-arrow-right uk-margin-small-left"></i></button> |
|
98 |
</div> |
|
99 |
</div> |
|
126 |
<div></div> |
|
127 |
</ng-container> |
|
100 | 128 |
</div> |
101 | 129 |
</div> |
102 | 130 |
|
... | ... | |
121 | 149 |
<div class="md-card-content"> |
122 | 150 |
<div class="uk-margin-top"> |
123 | 151 |
<div class="uk-float-right uk-margin-small-right"> |
124 |
<img src="../../../assets/img/icons/PUBLICATIONS.svg" width="30" height="30">
|
|
152 |
<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
|
|
125 | 153 |
</div> |
126 |
<h2 class="uk-margin-remove">
|
|
154 |
<h3 class="uk-margin-remove">
|
|
127 | 155 |
<span *ngIf="overviewData.overview.publications?.oa" class="number">{{overviewData.overview.publications.oa | number}}</span> |
128 | 156 |
<span *ngIf="!overviewData.overview.publications || !overviewData.overview.publications.oa" class="number">--</span> |
129 |
</h2>
|
|
157 |
</h3>
|
|
130 | 158 |
</div> |
131 | 159 |
<div class="uk-margin-top"> |
132 | 160 |
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>--> |
133 |
<span class="">Number of OA publications</span>
|
|
161 |
<span class=""><i>OA publications</i></span>
|
|
134 | 162 |
</div> |
135 | 163 |
<div *ngIf="overviewData.overview.publications?.percentage" class="uk-margin-top"> |
136 |
<span class="number">{{overviewData.overview.publications.percentage | number}}%</span> are OA |
|
164 |
<span class="number">{{overviewData.overview.publications.percentage | number :'1.0-1'}}%</span> OA |
|
165 |
<div class="progress uk-margin-small-top"> |
|
166 |
<div [ngStyle]="{'width': overviewData.overview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div> |
|
167 |
</div> |
|
137 | 168 |
</div> |
138 | 169 |
</div> |
139 | 170 |
</div> |
... | ... | |
143 | 174 |
<div class="md-card-content"> |
144 | 175 |
<div class="uk-margin-top"> |
145 | 176 |
<div class="uk-float-right uk-margin-small-right"> |
146 |
<img src="../../../assets/img/icons/DATASETS.svg" width="30" height="30">
|
|
177 |
<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
|
|
147 | 178 |
</div> |
148 |
<h2 class="uk-margin-remove">
|
|
179 |
<h3 class="uk-margin-remove">
|
|
149 | 180 |
<span *ngIf="overviewData.overview.datasets?.oa" class="number">{{overviewData.overview.datasets.oa | number}}</span> |
150 | 181 |
<span *ngIf="!overviewData.overview.datasets || !overviewData.overview.datasets.oa" class="number">--</span> |
151 |
</h2>
|
|
182 |
</h3>
|
|
152 | 183 |
</div> |
153 | 184 |
<div class="uk-margin-top"> |
154 | 185 |
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>--> |
155 |
<span class="">Number of OA datasets</span>
|
|
186 |
<span class=""><i>OA datasets</i></span>
|
|
156 | 187 |
</div> |
157 | 188 |
<div *ngIf="overviewData.overview.datasets?.percentage" class="uk-margin-top"> |
158 |
<span class="number">{{overviewData.overview.datasets.percentage | number}}%</span> are OA |
|
189 |
<span class="number">{{overviewData.overview.datasets.percentage | number :'1.0-1'}}%</span> OA |
|
190 |
<div class="progress uk-margin-small-top"> |
|
191 |
<div [ngStyle]="{'width': overviewData.overview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div> |
|
192 |
</div> |
|
159 | 193 |
</div> |
160 | 194 |
</div> |
161 | 195 |
</div> |
... | ... | |
165 | 199 |
<div class="md-card-content"> |
166 | 200 |
<div class="uk-margin-top"> |
167 | 201 |
<div class="uk-float-right uk-margin-small-right"> |
168 |
<img src="../../../assets/img/icons/REPOSITORIES.svg" width="30" height="30">
|
|
202 |
<img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
|
|
169 | 203 |
</div> |
170 |
<h2 class="uk-margin-remove">
|
|
204 |
<h3 class="uk-margin-remove">
|
|
171 | 205 |
<span *ngIf="overviewData.overview.repositories?.oa" class="number">{{overviewData.overview.repositories.oa | number}}</span> |
172 | 206 |
<span *ngIf="!overviewData.overview.repositories || !overviewData.overview.repositories.oa" class="number">--</span> |
173 |
</h2>
|
|
207 |
</h3>
|
|
174 | 208 |
</div> |
175 | 209 |
<div class="uk-margin-top"> |
176 |
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>--> |
|
177 |
<span class="">Number of OA repositories</span> |
|
210 |
<span class=""><i>repositories</i> from openDOAR & re3data</span> |
|
178 | 211 |
</div> |
179 |
<!--<div *ngIf="overviewData.overview.repositories?.percentage" class="uk-margin-top">--> |
|
180 |
<!--<span class="number">{{overviewData.overview.repositories.percentage | number}}%</span> are OA--> |
|
181 |
<!--</div>--> |
|
212 |
<div *ngIf="overviewData.overview.repositories?.percentage" class="uk-margin-top"> |
|
213 |
<span class="number">{{overviewData.overview.repositories.percentage | number : '1.0-1'}}%</span> Certified |
|
214 |
<div class="progress uk-margin-small-top"> |
|
215 |
<div [ngStyle]="{'width': overviewData.overview.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div> |
|
216 |
</div> |
|
217 |
</div> |
|
182 | 218 |
</div> |
183 | 219 |
</div> |
184 | 220 |
</div> |
... | ... | |
187 | 223 |
<div class="md-card-content"> |
188 | 224 |
<div class="uk-margin-top"> |
189 | 225 |
<div class="uk-float-right uk-margin-small-right"> |
190 |
<img src="../../../assets/img/icons/JOURNAL.svg" width="30" height="30">
|
|
226 |
<img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
|
|
191 | 227 |
</div> |
192 |
<h2 class="uk-margin-remove">
|
|
228 |
<h3 class="uk-margin-remove">
|
|
193 | 229 |
<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span> |
194 | 230 |
<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span> |
195 |
</h2>
|
|
231 |
</h3>
|
|
196 | 232 |
</div> |
197 | 233 |
<div class="uk-margin-top"> |
198 |
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>--> |
|
199 |
<span class="">Number of OA journals</span> |
|
234 |
<span class=""><i>OA journals</i> from DOAJ</span> |
|
200 | 235 |
</div> |
201 |
<!--<div *ngIf="overviewData.overview.journals?.percentage" class="uk-margin-top">--> |
|
202 |
<!--<span class="number">{{overviewData.overview.journals.percentage | number}}%</span> are OA--> |
|
203 |
<!--</div>--> |
|
236 |
<div *ngIf="overviewData.overview.journals?.percentage" class="uk-margin-top"> |
|
237 |
<span class="number">{{overviewData.overview.journals.percentage | number : '1.0-1'}}%</span> Certified |
|
238 |
<div class="progress uk-margin-small-top"> |
|
239 |
<div [ngStyle]="{'width': overviewData.overview.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div> |
|
240 |
</div> |
|
241 |
</div> |
|
204 | 242 |
</div> |
205 | 243 |
</div> |
206 | 244 |
</div> |
... | ... | |
209 | 247 |
<div class="md-card-content"> |
210 | 248 |
<div class="uk-margin-top"> |
211 | 249 |
<div class="uk-float-right uk-margin-small-right"> |
212 |
<img src="../../../assets/img/icons/POLICES.svg" width="30" height="30">
|
|
250 |
<img src="../../../assets/img/icons/policies-icon.svg" width="36" height="40">
|
|
213 | 251 |
</div> |
214 |
<h2 class="uk-margin-remove">
|
|
252 |
<h3 class="uk-margin-remove">
|
|
215 | 253 |
<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span> |
216 | 254 |
<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span> |
217 |
</h2>
|
|
255 |
</h3>
|
|
218 | 256 |
</div> |
219 | 257 |
<div class="uk-margin-top"> |
220 | 258 |
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>--> |
221 |
<span class="">Number of organizations with OA policies</span>
|
|
259 |
<span class="">organizations with <i>OA policies</i></span>
|
|
222 | 260 |
</div> |
223 | 261 |
<!--<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">--> |
224 | 262 |
<!--<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA--> |
Also available in: Unified diff
New design for the current version of the open science observatory