Project

General

Profile

1
<ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
2
  <li aria-expanded="true" class="uk-active">
3
    <a href="#" (click)="changeView('absolute')">
4
      <i class="fas fa-hashtag"></i>
5
    </a>
6
  </li>
7
  <li aria-expanded="false" class="">
8
    <a href="#" (click)="changeView('percentage')">
9
      <i class="fas fa-percentage"></i>
10
    </a>
11
  </li>
12
  <li aria-expanded="false" class="">
13
    <a href="#" (click)="changeView('graph')">
14
      <i class="fas fa-chart-line"></i>
15
    </a>
16
  </li>
17
</ul>
18

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

    
23
<hr>
24

    
25
<ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
26
  <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
27
    <div id="table-absolute" class="">
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="display: inline-block">
31
          <option value="affiliated_peer_reviewed">affiliated</option>
32
          <option value="affiliated">affiliated (incl. non-peer reviewed publications)</option>
33
          <option value="deposited_peer_reviewed">deposited</option>
34
          <option value="deposited">deposited (incl. non-peer reviewed publications)</option>
35
        </select>
36
        <!--<span class="md-input-bar"></span>-->
37
      </div>
38
      <div *ngIf="loadingAbsoluteTable" 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" [view]="'overview'"></app-countries-table>
40
    </div>
41
  </li>
42
  <li aria-hidden="true" style="animation-duration: 200ms;" class="">
43

    
44
    <div id="table-percentage" class="">
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="display: inline-block">
48
          <option value="affiliated_peer_reviewed">affiliated</option>
49
          <option value="affiliated">affiliated (incl. non-peer reviewed publications)</option>
50
          <option value="deposited_peer_reviewed">deposited</option>
51
          <option value="deposited">deposited (incl. non-peer reviewed publications)</option>
52
        </select>
53
        <!--<span class="md-input-bar"></span>-->
54
      </div>
55
      <div *ngIf="loadingPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
56
      <app-countries-table *ngIf="tablePercentageData" [isPercentage]="true" [countries]="tablePercentageData" [view]="'overview'"></app-countries-table>
57
    </div>
58
  </li>
59
  <li aria-hidden="true" style="animation-duration: 200ms;" class="">
60
    <div id="graphs">
61

    
62
      <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4@m uk-child-width-1-4@l uk-child-width-1-2@s uk-grid-match">
63

    
64
        <div>
65
          <div class="md-card">
66
            <div class="md-card-content">
67
              <svg *ngIf="europeOverviewData.publications?.percentage" viewBox="0 0 36 36" class="circular-chart publications">
68
                <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
69
                <path class="circle" attr.stroke-dasharray="{{europeOverviewData.publications.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
70
                <text x="18" y="20.35" class="percentage">{{europeOverviewData.publications.percentage | number : '1.0-1'}}%</text>
71
              </svg>
72
              <div class="uk-margin-small-top uk-text-center">OA publications</div>
73
            </div>
74
          </div>
75
        </div>
76

    
77
        <div>
78
          <div class="md-card">
79
            <div class="md-card-content">
80
              <svg *ngIf="europeOverviewData.datasets?.percentage" viewBox="0 0 36 36" class="circular-chart datasets">
81
                <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
82
                <path class="circle" attr.stroke-dasharray="{{europeOverviewData.datasets.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
83
                <text x="18" y="20.35" class="percentage">{{europeOverviewData.datasets.percentage | number : '1.0-1'}}%</text>
84
              </svg>
85
              <div class="uk-margin-small-top uk-text-center">OA datasets</div>
86
            </div>
87
          </div>
88
        </div>
89

    
90
        <div>
91
          <div class="md-card">
92
            <div class="md-card-content">
93
              <svg *ngIf="europeOverviewData.software?.percentage" viewBox="0 0 36 36" class="circular-chart software">
94
                <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
95
                <path class="circle" attr.stroke-dasharray="{{europeOverviewData.software.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
96
                <text x="18" y="20.35" class="percentage">{{europeOverviewData.software.percentage | number : '1.0-1'}}%</text>
97
              </svg>
98
              <div class="uk-margin-small-top uk-text-center">OA software</div>
99
            </div>
100
          </div>
101
        </div>
102

    
103
        <div>
104
          <div class="md-card">
105
            <div class="md-card-content">
106
              <svg *ngIf="europeOverviewData.other?.percentage" viewBox="0 0 36 36" class="circular-chart other">
107
                <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
108
                <path class="circle" attr.stroke-dasharray="{{europeOverviewData.other.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
109
                <text x="18" y="20.35" class="percentage">{{europeOverviewData.other.percentage | number : '1.0-1'}}%</text>
110
              </svg>
111
              <div class="uk-margin-small-top uk-text-center">OA other research products</div>
112
            </div>
113
          </div>
114
        </div>
115

    
116
      </div>
117

    
118
      <div class="uk-grid uk-grid-row-medium uk-margin-small-top uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
119

    
120
        <div class="uk-grid-margin">
121
          <div class="md-card chartCard">
122
            <div class="md-card-content">
123
              <iframe *ngIf="oaNoaPublicationsTimelineURL" width="100%" height="350" [src]="oaNoaPublicationsTimelineURL"></iframe>
124
            </div>
125
          </div>
126
        </div>
127

    
128
        <div class="uk-grid-margin">
129
          <div class="md-card chartCard">
130
            <div class="md-card-content">
131
              <iframe *ngIf="oaNoaDatasetsTimelineURL" width="100%" height="350" [src]="oaNoaDatasetsTimelineURL"></iframe>
132
            </div>
133
          </div>
134
        </div>
135

    
136
        <div class="uk-grid-margin">
137
          <div class="md-card chartCard">
138
            <div class="md-card-content">
139
              <iframe *ngIf="oaNoaSoftwareTimelineURL" width="100%" height="350" [src]="oaNoaSoftwareTimelineURL"></iframe>
140
            </div>
141
          </div>
142
        </div>
143

    
144
        <div class="uk-grid-margin">
145
          <div class="md-card chartCard">
146
            <div class="md-card-content">
147
              <iframe *ngIf="oaNoaOtherTimelineURL" width="100%" height="350" [src]="oaNoaOtherTimelineURL"></iframe>
148
            </div>
149
          </div>
150
        </div>
151

    
152

    
153
      </div>
154

    
155
      <!--<div class="uk-grid uk-grid-row-medium uk-margin-small-top uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@s">-->
156
        <!--<div class="uk-grid-margin">-->
157
          <!--<div class="md-card chartCard">-->
158
            <!--<div class="md-card-content">-->
159
              <!--<app-treemap-highchart *ngIf="fundersResultsData" [chartTitle]="'Research results by funder (top funders)'"-->
160
                                     <!--[chartData]="fundersResultsData" [color]="resultColor"></app-treemap-highchart>-->
161
            <!--</div>-->
162
          <!--</div>-->
163
        <!--</div>-->
164
      <!--</div>-->
165

    
166
    </div>
167
  </li>
168
</ul>
(5-5/12)