Project

General

Profile

1
<!--MAP AND OVERVIEW NUMBERS SECTION-->
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}">
4

    
5
    <div class="uk-grid uk-grid-small uk-margin-bottom uk-grid-match" uk-height-viewport="offset-bottom: 25">
6

    
7
      <div class="uk-width-4-5">
8

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

    
12

    
13

    
14
      </div>
15

    
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>
37
            </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>
48
              </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>
55
              </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
            </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>
79
                </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>
93
              </div>
94
            </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>
100
        </div>
101
      </div>
102

    
103

    
104
      <!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->
105
        <!--<h2 class="heading_b">-->
106
          <!--Our Team-->
107
          <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
108
        <!--</h2>-->
109
      <!--</div>-->
110
    </div>
111

    
112
  </div>
113
  <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
114

    
115
    <div class="">
116
      <!--Overview cards-->
117
      <div *ngIf="overviewData?.overview" class="uk-width-1-1 indicatorCards">
118
        <div class="uk-grid uk-grid-small uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5 uk-margin-top uk-grid-match" data-uk-grid-margin="">
119
          <div class="uk-row-first">
120
            <div class="md-card">
121
              <div class="md-card-content">
122
                <div class="uk-margin-top">
123
                  <div class="uk-float-right uk-margin-small-right">
124
                    <img src="../../../assets/img/icons/PUBLICATIONS.svg" width="30" height="30">
125
                  </div>
126
                  <h2 class="uk-margin-remove">
127
                    <span *ngIf="overviewData.overview.publications?.oa" class="number">{{overviewData.overview.publications.oa | number}}</span>
128
                    <span *ngIf="!overviewData.overview.publications || !overviewData.overview.publications.oa" class="number">--</span>
129
                  </h2>
130
                </div>
131
                <div class="uk-margin-top">
132
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
133
                  <span class="">Number of OA publications</span>
134
                </div>
135
                <div *ngIf="overviewData.overview.publications?.percentage" class="uk-margin-top">
136
                  <span class="number">{{overviewData.overview.publications.percentage | number}}%</span> are OA
137
                </div>
138
              </div>
139
            </div>
140
          </div>
141
          <div class="">
142
            <div class="md-card">
143
              <div class="md-card-content">
144
                <div class="uk-margin-top">
145
                  <div class="uk-float-right uk-margin-small-right">
146
                    <img src="../../../assets/img/icons/DATASETS.svg" width="30" height="30">
147
                  </div>
148
                  <h2 class="uk-margin-remove">
149
                    <span *ngIf="overviewData.overview.datasets?.oa" class="number">{{overviewData.overview.datasets.oa | number}}</span>
150
                    <span *ngIf="!overviewData.overview.datasets || !overviewData.overview.datasets.oa" class="number">--</span>
151
                  </h2>
152
                </div>
153
                <div class="uk-margin-top">
154
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
155
                  <span class="">Number of OA datasets</span>
156
                </div>
157
                <div *ngIf="overviewData.overview.datasets?.percentage" class="uk-margin-top">
158
                  <span class="number">{{overviewData.overview.datasets.percentage | number}}%</span> are OA
159
                </div>
160
              </div>
161
            </div>
162
          </div>
163
          <div class="">
164
            <div class="md-card">
165
              <div class="md-card-content">
166
                <div class="uk-margin-top">
167
                  <div class="uk-float-right uk-margin-small-right">
168
                    <img src="../../../assets/img/icons/REPOSITORIES.svg" width="30" height="30">
169
                  </div>
170
                  <h2 class="uk-margin-remove">
171
                    <span *ngIf="overviewData.overview.repositories?.oa" class="number">{{overviewData.overview.repositories.oa | number}}</span>
172
                    <span *ngIf="!overviewData.overview.repositories || !overviewData.overview.repositories.oa" class="number">--</span>
173
                  </h2>
174
                </div>
175
                <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>
178
                </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>-->
182
              </div>
183
            </div>
184
          </div>
185
          <div class="">
186
            <div class="md-card">
187
              <div class="md-card-content">
188
                <div class="uk-margin-top">
189
                  <div class="uk-float-right uk-margin-small-right">
190
                    <img src="../../../assets/img/icons/JOURNAL.svg" width="30" height="30">
191
                  </div>
192
                  <h2 class="uk-margin-remove">
193
                    <span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>
194
                    <span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>
195
                  </h2>
196
                </div>
197
                <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>
200
                </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>-->
204
              </div>
205
            </div>
206
          </div>
207
          <div class="">
208
            <div class="md-card">
209
              <div class="md-card-content">
210
                <div class="uk-margin-top">
211
                  <div class="uk-float-right uk-margin-small-right">
212
                    <img src="../../../assets/img/icons/POLICES.svg" width="30" height="30">
213
                  </div>
214
                  <h2 class="uk-margin-remove">
215
                    <span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>
216
                    <span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>
217
                  </h2>
218
                </div>
219
                <div class="uk-margin-top">
220
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
221
                  <span class="">Number of organizations with OA policies</span>
222
                </div>
223
                <!--<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">-->
224
                  <!--<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA-->
225
                <!--</div>-->
226
              </div>
227
            </div>
228
          </div>
229
        </div>
230
      </div>
231
    </div>
232

    
233
  </div>
234
</section>
235

    
236

    
237
<!--TABS SECTION-->
238
<section class="section greySection" id="sect-tabs">
239
  <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
240

    
241
    <div class="">
242
      <ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
243
        <li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>
244
        <li aria-expanded="false"><a href="#">Open Science</a></li>
245
        <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
246
        <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
247
        <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
248
        <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
249
      </ul>
250

    
251
      <ul *ngIf="overviewData?.countries" id="team_tabbed" class="uk-switcher">
252
        <!--OVERVIEW tab-->
253
        <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
254
          <div class="uk-margin tabContent">
255
            <app-data-view [type]="'overview'" [countries]="overviewData.countries"></app-data-view>
256
            <!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
257
          </div>
258
        </li>
259
        <!--OPEN SCIENCE tab-->
260
        <li aria-hidden="true" style="animation-duration: 200ms;">
261
          <div class="uk-margin tabContent">
262
            <app-data-view [type]="'openScience'" [countries]="overviewData.countries"></app-data-view>
263
            <!--<app-countries-table [isPercentage]="false" [type]="'openScience'" [countries]="overviewData.countries"></app-countries-table>-->
264
          </div>
265
        </li>
266
        <li aria-hidden="true">
267
          <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
268
          </div>
269
        </li>
270
        <li aria-hidden="true">
271
          <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
272
          </div>
273
        </li>
274
        <li aria-hidden="true">
275
          <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
276
          </div>
277
        </li>
278
      </ul>
279
    </div>
280

    
281
  </div>
282
</section>
(9-9/10)