Project

General

Profile

« Previous | Next » 

Revision 60863

branching to play with gradients

View differences:

modules/open-science-observatory-ui/branches/gradient/angular.json
1
{
2
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3
  "version": 1,
4
  "newProjectRoot": "projects",
5
  "projects": {
6
    "open-science-observatory-ui": {
7
      "root": "",
8
      "sourceRoot": "src",
9
      "projectType": "application",
10
      "prefix": "app",
11
      "schematics": {},
12
      "architect": {
13
        "build": {
14
          "builder": "@angular-devkit/build-angular:browser",
15
          "options": {
16
            "outputPath": "dist/open-science-observatory-ui",
17
            "index": "src/index.html",
18
            "main": "src/main.ts",
19
            "polyfills": "src/polyfills.ts",
20
            "tsConfig": "src/tsconfig.app.json",
21
            "assets": [
22
              "src/favicon.ico",
23
              "src/assets"
24
            ],
25
            "styles": [
26
              "src/styles.css",
27
              "node_modules/font-awesome/css/font-awesome.css"
28
            ],
29
            "scripts": [
30
              "node_modules/jquery/dist/jquery.min.js",
31
              "node_modules/uikit/dist/js/uikit.min.js",
32
              "node_modules/uikit/dist/js/uikit-icons.min.js"
33
            ]
34
          },
35
          "configurations": {
36
            "production": {
37
              "fileReplacements": [
38
                {
39
                  "replace": "src/environments/environment.ts",
40
                  "with": "src/environments/environment.prod.ts"
41
                }
42
              ],
43
              "optimization": true,
44
              "outputHashing": "all",
45
              "sourceMap": false,
46
              "extractCss": true,
47
              "namedChunks": false,
48
              "aot": true,
49
              "extractLicenses": true,
50
              "vendorChunk": false,
51
              "buildOptimizer": true,
52
              "budgets": [
53
                {
54
                  "type": "initial",
55
                  "maximumWarning": "2mb",
56
                  "maximumError": "5mb"
57
                }
58
              ]
59
            },
60
            "beta": {
61
              "fileReplacements": [
62
                {
63
                  "replace": "src/environments/environment.ts",
64
                  "with": "src/environments/environment.beta.ts"
65
                }
66
              ],
67
              "optimization": true,
68
              "outputHashing": "all",
69
              "sourceMap": false,
70
              "extractCss": true,
71
              "namedChunks": false,
72
              "aot": true,
73
              "extractLicenses": true,
74
              "vendorChunk": false,
75
              "buildOptimizer": true,
76
              "budgets": [
77
                {
78
                  "type": "initial",
79
                  "maximumWarning": "2mb",
80
                  "maximumError": "5mb"
81
                }
82
              ]
83
            }
84
          }
85
        },
86
        "serve": {
87
          "builder": "@angular-devkit/build-angular:dev-server",
88
          "options": {
89
            "browserTarget": "open-science-observatory-ui:build"
90
          },
91
          "configurations": {
92
            "production": {
93
              "browserTarget": "open-science-observatory-ui:build:production"
94
            }
95
          }
96
        },
97
        "extract-i18n": {
98
          "builder": "@angular-devkit/build-angular:extract-i18n",
99
          "options": {
100
            "browserTarget": "open-science-observatory-ui:build"
101
          }
102
        },
103
        "test": {
104
          "builder": "@angular-devkit/build-angular:karma",
105
          "options": {
106
            "main": "src/test.ts",
107
            "polyfills": "src/polyfills.ts",
108
            "tsConfig": "src/tsconfig.spec.json",
109
            "karmaConfig": "src/karma.conf.js",
110
            "styles": [
111
              "src/styles.css"
112
            ],
113
            "scripts": [],
114
            "assets": [
115
              "src/favicon.ico",
116
              "src/assets"
117
            ]
118
          }
119
        },
120
        "lint": {
121
          "builder": "@angular-devkit/build-angular:tslint",
122
          "options": {
123
            "tsConfig": [
124
              "src/tsconfig.app.json",
125
              "src/tsconfig.spec.json"
126
            ],
127
            "exclude": [
128
              "**/node_modules/**"
129
            ]
130
          }
131
        }
132
      }
133
    },
134
    "open-science-observatory-ui-e2e": {
135
      "root": "e2e/",
136
      "projectType": "application",
137
      "prefix": "",
138
      "architect": {
139
        "e2e": {
140
          "builder": "@angular-devkit/build-angular:protractor",
141
          "options": {
142
            "protractorConfig": "e2e/protractor.conf.js",
143
            "devServerTarget": "open-science-observatory-ui:serve"
144
          },
145
          "configurations": {
146
            "production": {
147
              "devServerTarget": "open-science-observatory-ui:serve:production"
148
            }
149
          }
150
        },
151
        "lint": {
152
          "builder": "@angular-devkit/build-angular:tslint",
153
          "options": {
154
            "tsConfig": "e2e/tsconfig.e2e.json",
155
            "exclude": [
156
              "**/node_modules/**"
157
            ]
158
          }
159
        }
160
      }
161
    }
162
  },
163
  "defaultProject": "open-science-observatory-ui"
164
}
modules/open-science-observatory-ui/branches/gradient/package.json
1
{
2
  "name": "open-science-observatory-ui",
3
  "version": "0.0.0",
4
  "scripts": {
5
    "ng": "ng",
6
    "start": "ng serve",
7
    "build": "ng build",
8
    "test": "ng test",
9
    "lint": "ng lint",
10
    "e2e": "ng e2e"
11
  },
12
  "private": true,
13
  "dependencies": {
14
    "@angular/animations": "~7.0.0",
15
    "@angular/common": "~7.0.0",
16
    "@angular/compiler": "~7.0.0",
17
    "@angular/core": "~7.0.0",
18
    "@angular/forms": "~7.0.0",
19
    "@angular/http": "~7.0.0",
20
    "@angular/platform-browser": "~7.0.0",
21
    "@angular/platform-browser-dynamic": "~7.0.0",
22
    "@angular/router": "~7.0.0",
23
    "@highcharts/map-collection": "^1.1.2",
24
    "angular-ng-autocomplete": "^2.0.1",
25
    "core-js": "^2.5.4",
26
    "dom-to-image": "^2.6.0",
27
    "echarts": "^4.2.1",
28
    "font-awesome": "^4.7.0",
29
    "highcharts": "^7.2.0",
30
    "highcharts-angular": "^2.4.0",
31
    "jquery": "^3.4.1",
32
    "jspdf": "^1.5.3",
33
    "ngx-echarts": "^4.2.2",
34
    "proj4": "^2.5.0",
35
    "rxjs": "~6.3.3",
36
    "uikit": "^3.2.1",
37
    "zone.js": "~0.8.26"
38
  },
39
  "devDependencies": {
40
    "@angular-devkit/build-angular": "~0.10.0",
41
    "@angular/cli": "~7.0.4",
42
    "@angular/compiler-cli": "~7.0.0",
43
    "@angular/language-service": "~7.0.0",
44
    "@types/jasmine": "~2.8.8",
45
    "@types/jasminewd2": "~2.0.3",
46
    "codelyzer": "~4.5.0",
47
    "jasmine-core": "~2.99.1",
48
    "jasmine-spec-reporter": "~4.2.1",
49
    "karma": "~3.0.0",
50
    "karma-chrome-launcher": "~2.2.0",
51
    "karma-coverage-istanbul-reporter": "~2.0.1",
52
    "karma-jasmine": "~1.1.2",
53
    "karma-jasmine-html-reporter": "^0.2.2",
54
    "protractor": "~5.4.0",
55
    "ts-node": "~7.0.0",
56
    "tslint": "~5.11.0",
57
    "typescript": "~3.1.1"
58
  }
59
}
modules/open-science-observatory-ui/branches/gradient/tsconfig.json
1
{
2
  "compileOnSave": false,
3
  "compilerOptions": {
4
    "baseUrl": "./",
5
    "outDir": "./dist/out-tsc",
6
    "sourceMap": true,
7
    "declaration": false,
8
    "module": "es2015",
9
    "moduleResolution": "node",
10
    "emitDecoratorMetadata": true,
11
    "experimentalDecorators": true,
12
    "target": "es5",
13
    "typeRoots": [
14
      "node_modules/@types"
15
    ],
16
    "lib": [
17
      "es2018",
18
      "dom"
19
    ]
20
  }
21
}
modules/open-science-observatory-ui/branches/gradient/tslint.json
1
{
2
  "rulesDirectory": [
3
    "node_modules/codelyzer"
4
  ],
5
  "rules": {
6
    "arrow-return-shorthand": true,
7
    "callable-types": true,
8
    "class-name": true,
9
    "comment-format": [
10
      true,
11
      "check-space"
12
    ],
13
    "curly": true,
14
    "deprecation": {
15
      "severity": "warn"
16
    },
17
    "eofline": true,
18
    "forin": true,
19
    "import-blacklist": [
20
      true,
21
      "rxjs/Rx"
22
    ],
23
    "import-spacing": true,
24
    "indent": [
25
      true,
26
      "spaces"
27
    ],
28
    "interface-over-type-literal": true,
29
    "label-position": true,
30
    "max-line-length": [
31
      true,
32
      140
33
    ],
34
    "member-access": false,
35
    "member-ordering": [
36
      true,
37
      {
38
        "order": [
39
          "static-field",
40
          "instance-field",
41
          "static-method",
42
          "instance-method"
43
        ]
44
      }
45
    ],
46
    "no-arg": true,
47
    "no-bitwise": true,
48
    "no-console": [
49
      true,
50
      "debug",
51
      "info",
52
      "time",
53
      "timeEnd",
54
      "trace"
55
    ],
56
    "no-construct": true,
57
    "no-debugger": true,
58
    "no-duplicate-super": true,
59
    "no-empty": false,
60
    "no-empty-interface": true,
61
    "no-eval": true,
62
    "no-inferrable-types": [
63
      true,
64
      "ignore-params"
65
    ],
66
    "no-misused-new": true,
67
    "no-non-null-assertion": true,
68
    "no-redundant-jsdoc": true,
69
    "no-shadowed-variable": true,
70
    "no-string-literal": false,
71
    "no-string-throw": true,
72
    "no-switch-case-fall-through": true,
73
    "no-trailing-whitespace": true,
74
    "no-unnecessary-initializer": true,
75
    "no-unused-expression": true,
76
    "no-use-before-declare": true,
77
    "no-var-keyword": true,
78
    "object-literal-sort-keys": false,
79
    "one-line": [
80
      true,
81
      "check-open-brace",
82
      "check-catch",
83
      "check-else",
84
      "check-whitespace"
85
    ],
86
    "prefer-const": true,
87
    "quotemark": [
88
      true,
89
      "single"
90
    ],
91
    "radix": true,
92
    "semicolon": [
93
      true,
94
      "always"
95
    ],
96
    "triple-equals": [
97
      true,
98
      "allow-null-check"
99
    ],
100
    "typedef-whitespace": [
101
      true,
102
      {
103
        "call-signature": "nospace",
104
        "index-signature": "nospace",
105
        "parameter": "nospace",
106
        "property-declaration": "nospace",
107
        "variable-declaration": "nospace"
108
      }
109
    ],
110
    "unified-signatures": true,
111
    "variable-name": false,
112
    "whitespace": [
113
      true,
114
      "check-branch",
115
      "check-decl",
116
      "check-operator",
117
      "check-separator",
118
      "check-type"
119
    ],
120
    "no-output-on-prefix": true,
121
    "use-input-property-decorator": true,
122
    "use-output-property-decorator": true,
123
    "use-host-property-decorator": true,
124
    "no-input-rename": true,
125
    "no-output-rename": true,
126
    "use-life-cycle-interface": true,
127
    "use-pipe-transform-interface": true,
128
    "component-class-suffix": true,
129
    "directive-class-suffix": true
130
  }
131
}
modules/open-science-observatory-ui/branches/gradient/src/app/app.component.spec.ts
1
import { TestBed, async } from '@angular/core/testing';
2
import { RouterTestingModule } from '@angular/router/testing';
3
import { AppComponent } from './app.component';
4

  
5
describe('AppComponent', () => {
6
  beforeEach(async(() => {
7
    TestBed.configureTestingModule({
8
      imports: [
9
        RouterTestingModule
10
      ],
11
      declarations: [
12
        AppComponent
13
      ],
14
    }).compileComponents();
15
  }));
16

  
17
  it('should create the app', () => {
18
    const fixture = TestBed.createComponent(AppComponent);
19
    const app = fixture.debugElement.componentInstance;
20
    expect(app).toBeTruthy();
21
  });
22

  
23
  it(`should have as title 'open-science-observatory-ui'`, () => {
24
    const fixture = TestBed.createComponent(AppComponent);
25
    const app = fixture.debugElement.componentInstance;
26
    expect(app.title).toEqual('open-science-observatory-ui');
27
  });
28

  
29
  it('should render title in a h1 tag', () => {
30
    const fixture = TestBed.createComponent(AppComponent);
31
    fixture.detectChanges();
32
    const compiled = fixture.debugElement.nativeElement;
33
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to open-science-observatory-ui!');
34
  });
35
});
modules/open-science-observatory-ui/branches/gradient/src/app/pages/countrypage/country-page.component.html
1
<div class="greySection">
2
  <section class="uk-padding-small" id="sect-country-page">
3
    <div class="uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
4
      <!--<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">-->
5

  
6
      <div class="uk-grid uk-grid-match uk-grid-small">
7

  
8
        <div class="uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s">
9

  
10
          <div class="uk-container uk-container-expand uk-margin-medium-top">
11

  
12
            <!--LAPTOP & PAD LANDSCAPE-->
13
            <div class="uk-visible@m">
14
              <ul *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="uk-breadcrumb">
15
                <li><a routerLink="/home">Home</a></li>
16
                <li><span>{{countryPageOverviewData.name}}</span></li>
17
              </ul>
18

  
19

  
20
              <div class="countryPageHeader">
21
                <div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
22
                  <img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image" width="132" height="132">
23
                  <div class="uk-inline uk-margin-left">
24
                    <h1>{{countryPageOverviewData.name}}</h1>
25
                    <span class="lastUpdateInfo">Info Last Updated: </span>
26
                    <span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>
27
                  </div>
28
                </div>
29

  
30
                <!-- TODO uncomment when implemented -->
31
                <!--<div class="actionButtonsCountryPage uk-text-right">-->
32
                  <!--<a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>-->
33
                  <!--&lt;!&ndash;<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>&ndash;&gt;-->
34
                  <!--<a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>-->
35
                <!--</div>-->
36
              </div>
37
            </div>
38

  
39
            <!--MOBILE & PAD PORTRAIT-->
40
            <div class="uk-hidden@m uk-text-center">
41
              <div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
42
                <img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image uk-display-block uk-margin-auto-left uk-margin-auto-right" width="103" height="103">
43
                <div class="uk-margin-top">
44
                  <h1 class="uk-margin-small-bottom">{{countryPageOverviewData.name}}</h1>
45
                  <span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span>
46
                </div>
47
              </div>
48
            </div>
49

  
50

  
51

  
52
          </div>
53

  
54

  
55
          <div class="uk-container uk-container-expand uk-margin-large-top">
56

  
57
            <!--Overview cards-->
58
            <!--LAPTOP & PAD LANDSCAPE-->
59
            <div class="uk-visible@m">
60
              <div class="uk-width-1-1 indicatorCards">
61
                <div class="uk-grid uk-grid-small uk-child-width-1-2@s uk-child-width-1-4@m uk-child-width-1-4@l uk-margin-top uk-grid-match" data-uk-grid-margin="">
62
                  <!--<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="">-->
63

  
64
                  <div class="uk-row-first">
65
                    <div class="md-card">
66
                      <div class="md-card-content">
67

  
68
                        <!--top number-->
69
                        <div class="uk-margin-top">
70
                          <!--<div class="uk-float-right uk-margin-small-right">-->
71
                          <!--<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">-->
72
                          <!--</div>-->
73
                          <h3 class="uk-margin-remove">
74
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number">--</span>
75
                            <span *ngIf="countryPageOverviewData?.publicationsAffiliated?.oa" class="number">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</span>
76
                          </h3>
77
                        </div>
78
                        <div class="uk-margin-top">
79
                          <span class=""><i>OA publications affiliated to an organization in the country</i></span>
80
                        </div>
81
                        <div *ngIf="countryPageOverviewData?.publicationsAffiliated?.percentage" class="uk-margin-top">
82
                          <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
83
                          <div class="progress uk-margin-small-top">
84
                            <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
85
                          </div>
86
                        </div>
87

  
88
                        <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
89

  
90
                        <!--bottom number-->
91
                        <div class="uk-margin-top">
92
                          <div class="uk-float-right uk-margin-small-right">
93
                            <img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
94
                          </div>
95
                          <h3 class="uk-margin-remove">
96
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number">--</span>
97
                            <span *ngIf="countryPageOverviewData?.publicationsDeposited?.oa" class="number">{{countryPageOverviewData.publicationsDeposited.oa | number}}</span>
98
                          </h3>
99
                        </div>
100
                        <div class="uk-margin-top">
101
                          <span class=""><i>OA publications from institutional repositories</i></span>
102
                        </div>
103
                        <div *ngIf="countryPageOverviewData?.publicationsDeposited?.percentage" class="uk-margin-top">
104
                          <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
105
                          <div class="progress uk-margin-small-top">
106
                            <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
107
                          </div>
108
                        </div>
109

  
110
                      </div>
111
                    </div>
112
                  </div>
113

  
114
                  <div class="">
115
                    <div class="md-card">
116
                      <div class="md-card-content">
117

  
118
                        <!--top number-->
119
                        <div class="uk-margin-top">
120
                          <!--<div class="uk-float-right uk-margin-small-right">-->
121
                          <!--<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">-->
122
                          <!--</div>-->
123
                          <h3 class="uk-margin-remove">
124
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number">--</span>
125
                            <span *ngIf="countryPageOverviewData?.datasetsAffiliated?.oa" class="number">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</span>
126
                          </h3>
127
                        </div>
128
                        <div class="uk-margin-top">
129
                          <span class=""><i>OA datasets affiliated to an organization in the country</i></span>
130
                        </div>
131
                        <div *ngIf="countryPageOverviewData?.datasetsAffiliated?.percentage" class="uk-margin-top">
132
                          <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
133
                          <div class="progress uk-margin-small-top">
134
                            <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
135
                          </div>
136
                        </div>
137

  
138
                        <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
139

  
140
                        <!--bottom number-->
141
                        <div class="uk-margin-top">
142
                          <div class="uk-float-right uk-margin-small-right">
143
                            <img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
144
                          </div>
145
                          <h3 class="uk-margin-remove">
146
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number">--</span>
147
                            <span *ngIf="countryPageOverviewData?.datasetsDeposited?.oa" class="number">{{countryPageOverviewData.datasetsDeposited.oa | number}}</span>
148
                          </h3>
149
                        </div>
150
                        <div class="uk-margin-top">
151
                          <span class=""><i>OA datasets from institutional repositories</i></span>
152
                        </div>
153
                        <div *ngIf="countryPageOverviewData?.datasetsDeposited?.percentage" class="uk-margin-top">
154
                          <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
155
                          <div class="progress uk-margin-small-top">
156
                            <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
157
                          </div>
158
                        </div>
159
                      </div>
160
                    </div>
161
                  </div>
162

  
163
                  <div class="">
164
                    <div class="md-card" style="height: 47%">
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/journals-icon.svg" width="43" height="40">
169
                          </div>
170
                          <h3 class="uk-margin-remove">
171
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.journals || !countryPageOverviewData.journals.total" class="number">--</span>
172
                            <span *ngIf="countryPageOverviewData?.journals?.total" class="number">{{countryPageOverviewData.journals.total | number}}</span>
173
                            <!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
174
                            <!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
175
                          </h3>
176
                        </div>
177
                        <div class="uk-margin-top">
178
                          <span class=""><i>OA journals</i> from DOAJ</span>
179
                        </div>
180
                        <div *ngIf="countryPageOverviewData?.journals?.percentage" class="uk-margin-top">
181
                          <span class="number">{{countryPageOverviewData.journals.percentage | number :'1.0-1'}}%</span> Validated
182
                          <div class="progress uk-margin-small-top">
183
                            <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
184
                          </div>
185
                        </div>
186
                      </div>
187
                    </div>
188
                  </div>
189

  
190
                  <div class="">
191

  
192
                    <div class="md-card" style="height: 47%">
193
                      <div class="md-card-content">
194
                        <div class="uk-margin-top">
195
                          <div class="uk-float-right uk-margin-small-right">
196
                            <img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
197
                          </div>
198
                          <h3 class="uk-margin-remove">
199
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.repositories || !countryPageOverviewData.repositories.total" class="number">--</span>
200
                            <span *ngIf="countryPageOverviewData?.repositories?.total" class="number">{{countryPageOverviewData.repositories.total | number}}</span>
201
                          </h3>
202
                        </div>
203
                        <div class="uk-margin-top">
204
                          <span class=""><i>repositories</i> from openDOAR & re3data</span>
205
                        </div>
206
                        <div *ngIf="countryPageOverviewData?.repositories?.percentage" class="uk-margin-top">
207
                          <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> Validated
208
                          <div class="progress uk-margin-small-top">
209
                            <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
210
                          </div>
211
                        </div>
212
                      </div>
213
                    </div>
214

  
215
                    <!--<div class="md-card">-->
216
                      <!--<div class="md-card-content">-->
217
                        <!--<div class="uk-margin-top">-->
218
                          <!--<div class="uk-float-right uk-margin-small-right">-->
219
                            <!--<img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">-->
220
                          <!--</div>-->
221
                          <!--<h3 class="uk-margin-remove">-->
222
                            <!--<span *ngIf="!countryPageOverviewData || !countryPageOverviewData.journals || !countryPageOverviewData.journals.total" class="number">&#45;&#45;</span>-->
223
                            <!--<span *ngIf="countryPageOverviewData?.journals?.total" class="number">{{countryPageOverviewData.journals.total | number}}</span>-->
224
                            <!--&lt;!&ndash;<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>&ndash;&gt;-->
225
                            <!--&lt;!&ndash;<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">&#45;&#45;</span>&ndash;&gt;-->
226
                          <!--</h3>-->
227
                        <!--</div>-->
228
                        <!--<div class="uk-margin-top">-->
229
                          <!--<span class=""><i>OA journals</i> from DOAJ</span>-->
230
                        <!--</div>-->
231
                        <!--<div *ngIf="countryPageOverviewData?.journals?.percentage" class="uk-margin-top">-->
232
                          <!--<span class="number">{{countryPageOverviewData.journals.percentage | number :'1.0-1'}}%</span> Validated-->
233
                          <!--<div class="progress uk-margin-small-top">-->
234
                            <!--<div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>-->
235
                          <!--</div>-->
236
                        <!--</div>-->
237
                      <!--</div>-->
238
                    <!--</div>-->
239

  
240
                  </div>
241

  
242

  
243
                  <!--<div class="">-->
244

  
245
                    <!--<div class="md-card" style="height: 47%">-->
246
                      <!--<div class="md-card-content">-->
247
                        <!--<div class="uk-margin-top">-->
248
                          <!--<div class="uk-float-right uk-margin-small-right">-->
249
                            <!--<img src="../../../assets/img/icons/policies-icon.svg" width="36" height="40">-->
250
                          <!--</div>-->
251
                          <!--<h3 class="uk-margin-remove">-->
252
                            <!--<span class="number">&#45;&#45;</span>-->
253
                            <!--&lt;!&ndash;<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>&ndash;&gt;-->
254
                            <!--&lt;!&ndash;<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">&#45;&#45;</span>&ndash;&gt;-->
255
                          <!--</h3>-->
256
                        <!--</div>-->
257
                        <!--<div class="uk-margin-top">-->
258
                          <!--<span class="">organizations with <i>OA policies</i></span>-->
259
                        <!--</div>-->
260
                      <!--</div>-->
261
                    <!--</div>-->
262

  
263
                    <!--<div></div>-->
264
                  <!--</div>-->
265
                </div>
266
              </div>
267
            </div>
268

  
269
            <!--MOBILE & PAD PORTRAIT-->
270
            <div class="uk-hidden@m uk-text-center uk-margin-medium-top">
271
              <div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
272
                <div class="md-card-content">
273

  
274

  
275
                  <div class="uk-grid uk-margin-top">
276
                    <div class="uk-width-1-5">
277
                      <img src="../../../assets/img/icons/publications-icon.svg" width="30" height="30">
278
                    </div>
279
                    <div class="uk-width-2-5">
280
                      <div *ngIf="countryPageOverviewData.publicationsAffiliated?.oa" class="number big">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</div>
281
                      <div *ngIf="!countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number big">--</div>
282
                      <div class="uk-margin-small-top">OA PUBLICATIONS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
283
                    </div>
284
                    <div *ngIf="countryPageOverviewData.publicationsAffiliated?.percentage" class="uk-width-2-5">
285
                      <div class="progress">
286
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
287
                      </div>
288
                      <div class="uk-margin-small-top">
289
                        <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
290
                      </div>
291
                    </div>
292
                  </div>
293
                  <div class="uk-grid uk-margin-top">
294
                    <div class="uk-width-1-5">
295
                    </div>
296
                    <div class="uk-width-2-5">
297
                      <div *ngIf="countryPageOverviewData.publicationsDeposited?.oa" class="number big">{{countryPageOverviewData.publicationsDeposited.oa | number}}</div>
298
                      <div *ngIf="!countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number big">--</div>
299
                      <div class="uk-margin-small-top">OA PUBLICATIONS FROM INSTITUTIONAL REPOSITORIES</div>
300
                    </div>
301
                    <div *ngIf="countryPageOverviewData.publicationsDeposited?.percentage" class="uk-width-2-5">
302
                      <div class="progress">
303
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
304
                      </div>
305
                      <div class="uk-margin-small-top">
306
                        <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
307
                      </div>
308
                    </div>
309
                  </div>
310

  
311
                  <div class="uk-grid uk-margin-medium-top">
312
                    <div class="uk-width-1-5">
313
                      <img src="../../../assets/img/icons/datasets-icon.svg" width="30" height="30">
314
                    </div>
315
                    <div class="uk-width-2-5">
316
                      <div *ngIf="countryPageOverviewData.datasetsAffiliated?.oa" class="number big">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</div>
317
                      <div *ngIf="!countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number big">--</div>
318
                      <div class="uk-margin-small-top">OA DATASETS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
319
                    </div>
320
                    <div *ngIf="countryPageOverviewData.datasetsAffiliated?.percentage" class="uk-width-2-5">
321
                      <div class="progress">
322
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
323
                      </div>
324
                      <div class="uk-margin-small-top">
325
                        <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
326
                      </div>
327
                    </div>
328
                  </div>
329
                  <div class="uk-grid uk-margin-medium-top">
330
                    <div class="uk-width-1-5">
331
                    </div>
332
                    <div class="uk-width-2-5">
333
                      <div *ngIf="countryPageOverviewData.datasetsDeposited?.oa" class="number big">{{countryPageOverviewData.datasetsDeposited.oa | number}}</div>
334
                      <div *ngIf="!countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number big">--</div>
335
                      <div class="uk-margin-small-top">OA DATASETS FROM INSTITUTIONAL REPOSITORIES</div>
336
                    </div>
337
                    <div *ngIf="countryPageOverviewData.datasetsDeposited?.percentage" class="uk-width-2-5">
338
                      <div class="progress">
339
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
340
                      </div>
341
                      <div class="uk-margin-small-top">
342
                        <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
343
                      </div>
344
                    </div>
345
                  </div>
346

  
347
                  <div class="uk-grid uk-margin-medium-top">
348
                    <div class="uk-width-1-5">
349
                      <img src="../../../assets/img/icons/repositories-icon.svg" width="30" height="30">
350
                    </div>
351
                    <div class="uk-width-2-5">
352
                      <div *ngIf="countryPageOverviewData.repositories?.oa" class="number big">{{countryPageOverviewData.repositories.oa | number}}</div>
353
                      <div *ngIf="!countryPageOverviewData.repositories || !countryPageOverviewData.repositories.oa" class="number big">--</div>
354
                      <div class="uk-margin-small-top">VALIDATED REPOSITORIES</div>
355
                    </div>
356
                    <div *ngIf="countryPageOverviewData.repositories?.percentage" class="uk-width-2-5">
357
                      <div class="progress">
358
                        <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
359
                      </div>
360
                      <div class="uk-margin-small-top">
361
                        <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> VALIDATED
362
                      </div>
363
                    </div>
364
                  </div>
365

  
366
                  <div class="uk-grid uk-margin-medium-top">
367
                    <div class="uk-width-1-5">
368
                      <img src="../../../assets/img/icons/journals-icon.svg" width="30" height="30">
369
                    </div>
370
                    <div class="uk-width-2-5">
371
                      <div *ngIf="countryPageOverviewData.journals?.oa" class="number big">{{countryPageOverviewData.journals.oa | number}}</div>
372
                      <div *ngIf="!countryPageOverviewData.journals || !countryPageOverviewData.journals.oa" class="number big">--</div>
373
                      <div class="uk-margin-small-top">VALIDATED JOURNALS</div>
374
                    </div>
375
                    <div *ngIf="countryPageOverviewData.journals?.percentage" class="uk-width-2-5">
376
                      <div class="progress">
377
                        <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
378
                      </div>
379
                      <div class="uk-margin-small-top">
380
                        <span class="number">{{countryPageOverviewData.journals.percentage | number : '1.0-1'}}%</span> Validated
381
                      </div>
382
                    </div>
383
                  </div>
384

  
385
                  <!--<div class="uk-grid uk-margin-medium-top uk-margin-bottom">-->
386
                    <!--<div class="uk-width-1-5">-->
387
                      <!--<img src="../../../assets/img/icons/policies-icon.svg" width="30" height="30">-->
388
                    <!--</div>-->
389
                    <!--<div class="uk-width-2-5">-->
390
                      <!--<div *ngIf="countryPageOverviewData.policies?.oa" class="number big">{{countryPageOverviewData.policies.oa | number}}</div>-->
391
                      <!--<div *ngIf="!countryPageOverviewData.policies || !countryPageOverviewData.policies.oa" class="number big">&#45;&#45;</div>-->
392
                      <!--<div class="uk-margin-small-top">OA POLICIES</div>-->
393
                    <!--</div>-->
394
                    <!--<div class="uk-width-2-5">-->
395

  
396
                    <!--</div>-->
397
                  <!--</div>-->
398

  
399
                </div>
400
              </div>
401
            </div>
402

  
403

  
404
          </div>
405

  
406
        </div>
407

  
408
        <!--Research Overview-->
409
        <!--LAPTOP & PAD LANDSCAPE-->
410
        <div class="uk-visible@m uk-width-1-5@m uk-width-1-5@l">
411
          <div class="md-card infoBox">
412

  
413
            <div class="md-card-toolbar">
414
              <h3 class="uk-text-center uk-margin-small-top">
415
                Research overview
416
              </h3>
417
            </div>
418

  
419
            <div class="md-card-content">
420
              <div class="numbers">
421

  
422
                <div class="indicator uk-margin-small-top">
423
                  <ng-container *ngIf="countryPageOverviewData?.rndExpenditure">
424
                    <span class="number primary">{{countryPageOverviewData.rndExpenditure.expenditure}}%</span>
425
                    <span>
426
                      <span><i> of gdp for </i></span>
427
                      <span class="number primary">{{countryPageOverviewData.rndExpenditure.year}}</span>
428
                      <div><i> R&D expenditure</i></div>
429
                    </span>
430
                  </ng-container>
431
                  <ng-container *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure">
432
                    <span class="number primary">--</span>
433
                    <span><i>R&D expenditure</i></span>
434
                  </ng-container>
435
                </div>
436

  
437
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
438

  
439
                <div class="indicator">
440
                  <span class="number primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</span>
441
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</span>
442
                  <span><i>funding sources</i></span>
443
                </div>
444

  
445
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
446

  
447
                <div class="indicator">
448
                  <span class="number primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</span>
449
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</span>
450
                  <span><i>funding organizations</i></span>
451
                </div>
452

  
453
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
454

  
455
                <div class="indicator">
456
                  <span class="number primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</span>
457
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</span>
458
                  <span><i>organizations funded by the European commission since 2013</i></span>
459
                </div>
460

  
461
              </div>
462

  
463

  
464
              <div class="uk-text-center uk-margin-xlarge-top">
465

  
466
                <div class="uk-text-center uk-margin-medium-bottom">
467
                <span class="openaire-symbol-wrapper">
468
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
469
                </span>
470
                </div>
471
                <a class="uk-link" href="{{linkToCountryInOpenAIRE}}" target="_blank">Country page in <strong>OpenAIRE</strong><i class="fas fa-long-arrow-alt-right uk-margin-left"></i></a>
472
              </div>
473

  
474
            </div>
475
          </div>
476
        </div>
477

  
478
        <!--Research Overview-->
479
        <!--MOBILE & PAD PORTRAIT-->
480
        <div class="uk-hidden@m uk-width-1-1@s uk-margin-medium-top">
481
          <div class="uk-container uk-container-expand">
482
            <div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
483
              <div class="md-card-content">
484
                <div class="numbers">
485

  
486
                  <div class="">
487
                    <ng-container *ngIf="countryPageOverviewData?.rndExpenditure">
488
                      <span class="number big primary">{{countryPageOverviewData.rndExpenditure.expenditure}}%</span>
489
                      <span>
490
                      <span class="uk-margin-small-right uk-margin-small-left"> OF DGP FOR </span>
491
                      <span class="number big primary">{{countryPageOverviewData.rndExpenditure.year}}</span>
492
                      <div class="uk-margin-small-top"> R&D EXPENDITURE</div>
493
                    </span>
494
                    </ng-container>
495
                    <ng-container *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure">
496
                      <div class="number big primary">--</div>
497
                      <div class="uk-margin-small-top">R&D EXPENDITURE</div>
498
                    </ng-container>
499
                  </div>
500

  
501
                  <div class="uk-margin-medium-top">
502
                    <div class="number big primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</div>
503
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</div>
504
                    <div class="uk-margin-small-top">FUNDING SOURCES</div>
505
                  </div>
506

  
507
                  <div class="uk-margin-medium-top">
508
                    <div class="number big primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</div>
509
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</div>
510
                    <div class="uk-margin-small-top">FUNDING ORGANIZATIONS</div>
511
                  </div>
512

  
513
                  <div class=" uk-margin-medium-top">
514
                    <div class="number big primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</div>
515
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</div>
516
                    <div class="uk-margin-small-top">ORGANIZATIONS FUNDED BY THE EUROPEAN COMMISSION SINCE 2013</div>
517
                  </div>
518

  
519
                </div>
520
              </div>
521
            </div>
522
          </div>
523
        </div>
524

  
525

  
526
      </div>
527

  
528
    </div>
529
  </section>
530

  
531
  <!--TABS SECTION-->
532
  <section class="section uk-margin-large-top" id="sect-tabs">
533
    <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}">
534

  
535
      <div class="">
536

  
537
        <!--LAPTOP & PAD LANDSCAPE-->
538
        <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
539
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
540
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
541
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
542
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
543
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
544
          <!--<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>-->
545
        </ul>
546

  
547
        <!--MOBILE & PAD PORTRAIT-->
548
        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
549
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
550
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
551
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
552
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
553
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
554
          <!--<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>-->
555
        </ul>
556

  
557
        <ul id="team_tabbed" class="uk-switcher dataContainer">
558

  
559
          <!--OVERVIEW tab-->
560
          <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
561
            <div class="uk-margin tabContent">
562

  
563
              <div *ngIf="countryPageOAData" class="uk-grid uk-child-width-1-4@m uk-child-width-1-4@l uk-child-width-1-2@s uk-grid-match">
564

  
565
                <div>
566
                  <div class="md-card">
567
                    <div class="md-card-content">
568
                      <svg viewBox="0 0 36 36" class="circular-chart publications">
569
                        <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>
570
                        <path *ngIf="countryPageOAData.publicationsAffiliated?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.publicationsAffiliated.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>
571
                        <text *ngIf="countryPageOAData.publicationsAffiliated?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.publicationsAffiliated.percentage | number : '1.0-1'}}%</text>
572
                        <text *ngIf="!countryPageOAData.publicationsAffiliated || !countryPageOAData.publicationsAffiliated.percentage" x="18" y="20.35" class="percentage">0%</text>
573
                      </svg>
574
                      <div class="uk-margin-small-top uk-text-center">OA publications</div>
575
                    </div>
576
                  </div>
577
                </div>
578

  
579
                <div>
580
                  <div class="md-card">
581
                    <div class="md-card-content">
582
                      <svg viewBox="0 0 36 36" class="circular-chart datasets">
583
                        <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>
584
                        <path *ngIf="countryPageOAData.datasetsAffiliated?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.datasetsAffiliated.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>
585
                        <text *ngIf="countryPageOAData.datasetsAffiliated?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.datasetsAffiliated.percentage | number : '1.0-1'}}%</text>
586
                        <text *ngIf="!countryPageOAData.datasetsAffiliated || !countryPageOAData.datasetsAffiliated.percentage" x="18" y="20.35" class="percentage">0%</text>
587
                      </svg>
588
                      <div class="uk-margin-small-top uk-text-center">OA datasets</div>
589
                    </div>
590
                  </div>
591
                </div>
592

  
593
                <div>
594
                  <div class="md-card">
595
                    <div class="md-card-content">
596
                      <svg viewBox="0 0 36 36" class="circular-chart software">
597
                        <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>
598
                        <path *ngIf="countryPageOAData.software?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.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>
599
                        <text *ngIf="countryPageOAData.software?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.software.percentage | number : '1.0-1'}}%</text>
600
                        <text *ngIf="!countryPageOAData.software || !countryPageOAData.software.percentage" x="18" y="20.35" class="percentage">0%</text>
601
                      </svg>
602
                      <div class="uk-margin-small-top uk-text-center">OS software</div>
603
                    </div>
604
                  </div>
605
                </div>
606

  
607
                <div>
608
                  <div class="md-card">
609
                    <div class="md-card-content">
610
                      <svg viewBox="0 0 36 36" class="circular-chart other">
611
                        <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>
612
                        <path *ngIf="countryPageOAData.other?.percentage" class="circle" attr.stroke-dasharray="{{countryPageOAData.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>
613
                        <text *ngIf="countryPageOAData.other?.percentage" x="18" y="20.35" class="percentage">{{countryPageOAData.other.percentage | number : '1.0-1'}}%</text>
614
                        <text *ngIf="!countryPageOAData.other || !countryPageOAData.other.percentage" x="18" y="20.35" class="percentage">0%</text>
615
                      </svg>
616
                      <div class="uk-margin-small-top uk-text-center">OA other research products</div>
617
                    </div>
618
                  </div>
619
                </div>
620

  
621
              </div>
622

  
623
              <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">
624

  
625
                <div class="uk-grid-margin">
626
                  <div class="md-card chartCard">
627
                    <div class="md-card-content">
628
                      <iframe *ngIf="oaNonOAPublicationsTimelineChartURL" width="100%" height="350" [src]="oaNonOAPublicationsTimelineChartURL"></iframe>
629
                    </div>
630
                  </div>
631
                </div>
632

  
633
                <div class="uk-grid-margin">
634
                  <div class="md-card chartCard">
635
                    <div class="md-card-content">
636
                      <iframe *ngIf="oaNonOADatasetsTimelineChartURL" width="100%" height="350" [src]="oaNonOADatasetsTimelineChartURL"></iframe>
637
                    </div>
638
                  </div>
639
                </div>
640

  
641
                <div class="uk-grid-margin">
642
                  <div class="md-card chartCard">
643
                    <div class="md-card-content">
644
                      <iframe *ngIf="oaNonOASoftwareTimelineChartURL" width="100%" height="350" [src]="oaNonOASoftwareTimelineChartURL"></iframe>
645
                    </div>
646
                  </div>
647
                </div>
648

  
649
                <div class="uk-grid-margin">
650
                  <div class="md-card chartCard">
651
                    <div class="md-card-content">
652
                      <iframe *ngIf="oaNonOAOtherTimelineChartURL" width="100%" height="350" [src]="oaNonOAOtherTimelineChartURL"></iframe>
653
                    </div>
654
                  </div>
655
                </div>
656

  
657

  
658
              </div>
659

  
660
              <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-3@l uk-child-width-1-1@s">
661

  
662
                <div class="uk-grid-margin">
663
                  <div class="md-card chartCard">
664
                    <div class="md-card-content">
665
                      <iframe *ngIf="publicationsByDatasourceChartURL" width="100%" height="550" [src]="publicationsByDatasourceChartURL"></iframe>
666
                    </div>
667
                  </div>
668
                </div>
669

  
670
                <div class="uk-grid-margin">
671
                  <div class="md-card chartCard">
672
                    <div class="md-card-content">
673
                      <iframe *ngIf="publicationsByOrganizationChartURL" width="100%" height="550" [src]="publicationsByOrganizationChartURL"></iframe>
674
                    </div>
675
                  </div>
676
                </div>
677

  
678
                <div class="uk-grid-margin">
679
                  <div class="md-card chartCard">
680
                    <div class="md-card-content">
681
                      <app-treemap-highchart *ngIf="publicationsByFunderData" [chartTitle]="'OA Publications by funder'"
682
                                             [chartData]="publicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
683
                    </div>
684
                  </div>
685
                </div>
686

  
687
                <div class="uk-grid-margin">
688
                  <div class="md-card chartCard">
689
                    <div class="md-card-content">
690
                      <iframe *ngIf="datasetsByDatasourceChartURL" width="100%" height="550" [src]="datasetsByDatasourceChartURL"></iframe>
691
                    </div>
692
                  </div>
693
                </div>
694

  
695
                <div class="uk-grid-margin">
696
                  <div class="md-card chartCard">
697
                    <div class="md-card-content">
698
                      <iframe *ngIf="datasetsByOrganizationChartURL" width="100%" height="550" [src]="datasetsByOrganizationChartURL"></iframe>
699
                    </div>
700
                  </div>
701
                </div>
702

  
703
                <div class="uk-grid-margin">
704
                  <div class="md-card chartCard">
705
                    <div class="md-card-content">
706
                      <app-treemap-highchart *ngIf="datasetsByFunderData" [chartTitle]="'OA Datasets by funder'"
707
                                             [chartData]="datasetsByFunderData" [color]="datasetColor"></app-treemap-highchart>
708
                    </div>
709
                  </div>
710
                </div>
711

  
712
                <div class="uk-grid-margin">
713
                  <div class="md-card chartCard">
714
                    <div class="md-card-content">
715
                      <iframe *ngIf="softwareByDatasourceChartURL" width="100%" height="550" [src]="softwareByDatasourceChartURL"></iframe>
716
                    </div>
717
                  </div>
718
                </div>
719

  
720
                <div class="uk-grid-margin">
721
                  <div class="md-card chartCard">
722
                    <div class="md-card-content">
723
                      <iframe *ngIf="softwareByOrganizationChartURL" width="100%" height="550" [src]="softwareByOrganizationChartURL"></iframe>
724
                    </div>
725
                  </div>
726
                </div>
727

  
728
                <div class="uk-grid-margin">
729
                  <div class="md-card chartCard">
730
                    <div class="md-card-content">
731
                      <app-treemap-highchart *ngIf="softwareByFunderData" [chartTitle]="'OS Software by funder'"
732
                                             [chartData]="softwareByFunderData" [color]="softwareColor"></app-treemap-highchart>
733
                    </div>
734
                  </div>
735
                </div>
736

  
737
                <div class="uk-grid-margin">
738
                  <div class="md-card chartCard">
739
                    <div class="md-card-content">
740
                      <iframe *ngIf="otherByDatasourceChartURL" width="100%" height="550" [src]="otherByDatasourceChartURL"></iframe>
741
                    </div>
742
                  </div>
743
                </div>
744

  
745
                <div class="uk-grid-margin">
746
                  <div class="md-card chartCard">
747
                    <div class="md-card-content">
748
                      <iframe *ngIf="otherByOrganizationChartURL" width="100%" height="550" [src]="otherByOrganizationChartURL"></iframe>
749
                    </div>
750
                  </div>
751
                </div>
752

  
753
                <div class="uk-grid-margin">
754
                  <div class="md-card chartCard">
755
                    <div class="md-card-content">
756
                      <app-treemap-highchart *ngIf="otherByFunderData" [chartTitle]="'OA Other research products by funder'"
757
                                             [chartData]="otherByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
758
                    </div>
759
                  </div>
760
                </div>
761

  
762
              </div>
763

  
764
              <div class="uk-grid uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@s">
765

  
766
                <div class="uk-grid-margin">
767
                  <div class="md-card chartCard">
768
                    <div class="md-card-content">
769
                      <iframe *ngIf="resultsByTypeOANonOAChartURL" width="100%" height="550" [src]="resultsByTypeOANonOAChartURL"></iframe>
770
                    </div>
771
                  </div>
772
                </div>
773

  
774
              </div>
775

  
776
            </div>
777
          </li>
778

  
779
          <!--OPEN SCIENCE tab-->
780
          <li aria-hidden="true" style="animation-duration: 200ms;">
781
            <div class="uk-margin tabContent">
782

  
783
              <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
784
                <li aria-expanded="true" class="uk-active">
785
                  <a class="publicationsSubnav" (click)="changeInnerView('publications')" uk-tooltip="title: Publication; duration: 2000">
786
                    <img src="../../../assets/img/icons/publications-icon.svg" width="15">
787
                  </a>
788
                </li>
789
                <li aria-expanded="false" class="">
790
                  <a class="datasetsSubnav" (click)="changeInnerView('datasets')" uk-tooltip="title: Datasets; duration: 2000">
791
                    <img src="../../../assets/img/icons/datasets-icon.svg" width="15">
792
                  </a>
793
                </li>
794
                <li aria-expanded="false" class="">
795
                  <a class="softwareSubnav" (click)="changeInnerView('software')" uk-tooltip="title: Software; duration: 2000">
796
                    <img src="../../../assets/img/icons/software-icon.svg" width="15">
797
                  </a>
798
                </li>
799
                <li aria-expanded="false" class="">
800
                  <a class="otherSubnav" (click)="changeInnerView('other')" uk-tooltip="title: Other research products; duration: 2000">
801
                    <img src="../../../assets/img/icons/other-icon.svg" width="15">
802
                  </a>
803
                </li>
804
              </ul>
805

  
806
              <hr class="uk-visible@m">
807

  
808
              <ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
809
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
810

  
811
                  <div>
812

  
813
                    <div class="pidIndicator">
814
                      <h3 class="uk-margin-remove">PID</h3>
815
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
816

  
817
                        <div class="uk-grid-margin">
818
                          <div class="md-card chartCard">
819
                            <div class="md-card-content">
820
                              <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
821
                            </div>
822
                          </div>
823
                        </div>
824

  
825
                        <div class="uk-grid-margin">
826
                          <div class="md-card chartCard">
827
                            <div class="md-card-content">
828
                              <iframe *ngIf="publicationsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
829
                            </div>
830
                          </div>
831
                        </div>
832

  
833
                        <div class="uk-grid-margin">
834
                          <div class="md-card chartCard">
835
                            <div class="md-card-content">
836
                              <iframe *ngIf="publicationsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
837
                            </div>
838
                          </div>
839
                        </div>
840

  
841
                        <div class="uk-grid-margin">
842
                          <div class="md-card chartCard">
843
                            <div class="md-card-content">
844
                              <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData" [chartTitle]="'OA Publications with PID by funder'"
845
                                                     [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
846
                            </div>
847
                          </div>
848
                        </div>
849

  
850
                      </div>
851
                    </div>
852

  
853
                    <div class="licenceIndicator uk-margin-large-top">
854
                      <h3 class="uk-margin-remove">Licence</h3>
855
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
856

  
857
                        <div class="uk-grid-margin">
858
                          <div class="md-card chartCard">
859
                            <div class="md-card-content">
860
                              <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
861
                            </div>
862
                          </div>
863
                        </div>
864

  
865
                        <div class="uk-grid-margin">
866
                          <div class="md-card chartCard">
867
                            <div class="md-card-content">
868
                              <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
869
                            </div>
870
                          </div>
871
                        </div>
872

  
873
                        <div class="uk-grid-margin">
874
                          <div class="md-card chartCard">
875
                            <div class="md-card-content">
876
                              <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
877
                            </div>
878
                          </div>
879
                        </div>
880

  
881
                        <div class="uk-grid-margin">
882
                          <div class="md-card chartCard">
883
                            <div class="md-card-content">
884
                              <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData" [chartTitle]="'OA Publications with licence by funder'"
885
                                                     [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
886
                            </div>
887
                          </div>
888
                        </div>
889

  
890
                      </div>
891
                    </div>
892

  
893
                    <div class="goldIndicator uk-margin-large-top">
894
                      <h3 class="uk-margin-remove">Gold</h3>
895
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
896

  
897
                        <div class="uk-grid-margin">
898
                          <div class="md-card chartCard">
899
                            <div class="md-card-content">
900
                              <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
901
                            </div>
902
                          </div>
903
                        </div>
904

  
905
                        <div class="uk-grid-margin">
906
                          <div class="md-card chartCard">
907
                            <div class="md-card-content">
908
                              <iframe *ngIf="goldPublicationsByDatasourceChartURL" width="100%" height="550" [src]="goldPublicationsByDatasourceChartURL"></iframe>
909
                            </div>
910
                          </div>
911
                        </div>
912

  
913
                        <div class="uk-grid-margin">
914
                          <div class="md-card chartCard">
915
                            <div class="md-card-content">
916
                              <iframe *ngIf="goldPublicationsByOrganizationChartURL" width="100%" height="550" [src]="goldPublicationsByOrganizationChartURL"></iframe>
917
                            </div>
918
                          </div>
919
                        </div>
920

  
921
                        <div class="uk-grid-margin">
922
                          <div class="md-card chartCard">
923
                            <div class="md-card-content">
924
                              <app-treemap-highchart *ngIf="goldPublicationsByFunderData" [chartTitle]="'Gold OA publications by funder'"
925
                                                     [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
926
                            </div>
927
                          </div>
928
                        </div>
929

  
930
                      </div>
931
                    </div>
932

  
933
                    <div class="greenIndicator uk-margin-large-top">
934
                      <h3 class="uk-margin-remove">Green</h3>
935
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
936

  
937
                        <div class="uk-grid-margin">
938
                          <div class="md-card chartCard">
939
                            <div class="md-card-content">
940
                              <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
941
                            </div>
942
                          </div>
943
                        </div>
944

  
945
                        <div class="uk-grid-margin">
946
                          <div class="md-card chartCard">
947
                            <div class="md-card-content">
948
                              <iframe *ngIf="greenPublicationsByDatasourceChartURL" width="100%" height="550" [src]="greenPublicationsByDatasourceChartURL"></iframe>
949
                            </div>
950
                          </div>
951
                        </div>
952

  
953
                        <div class="uk-grid-margin">
954
                          <div class="md-card chartCard">
955
                            <div class="md-card-content">
956
                              <iframe *ngIf="greenPublicationsByOrganizationChartURL" width="100%" height="550" [src]="greenPublicationsByOrganizationChartURL"></iframe>
957
                            </div>
958
                          </div>
959
                        </div>
960

  
961
                        <div class="uk-grid-margin">
962
                          <div class="md-card chartCard">
963
                            <div class="md-card-content">
964
                              <app-treemap-highchart *ngIf="greenPublicationsByFunderData" [chartTitle]="'Green OA publications by funder'"
965
                                                     [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
966
                            </div>
967
                          </div>
968
                        </div>
969

  
970
                      </div>
971
                    </div>
972

  
973
                    <div class="greenVsGoldIndicator uk-margin-large-top">
974
                      <h3 class="uk-margin-remove">Green vs. Gold</h3>
975
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
976

  
977
                        <div class="uk-grid-margin">
978
                          <div class="md-card chartCard">
979
                            <div class="md-card-content">
980
                              <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
981
                            </div>
982
                          </div>
983
                        </div>
984

  
985
                      </div>
986
                    </div>
987

  
988
                  </div>
989

  
990
                </li>
991
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
992

  
993
                  <div>
994

  
995
                    <div class="pidIndicator">
996
                      <h3 class="uk-margin-remove">PID</h3>
997
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
998

  
999
                        <div class="uk-grid-margin">
1000
                          <div class="md-card chartCard">
1001
                            <div class="md-card-content">
1002
                              <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
1003
                            </div>
1004
                          </div>
1005
                        </div>
1006

  
1007
                        <div class="uk-grid-margin">
1008
                          <div class="md-card chartCard">
1009
                            <div class="md-card-content">
1010
                              <iframe *ngIf="datasetsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
1011
                            </div>
1012
                          </div>
1013
                        </div>
1014

  
1015
                        <div class="uk-grid-margin">
1016
                          <div class="md-card chartCard">
1017
                            <div class="md-card-content">
1018
                              <iframe *ngIf="datasetsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
1019
                            </div>
1020
                          </div>
1021
                        </div>
1022

  
1023
                        <div class="uk-grid-margin">
1024
                          <div class="md-card chartCard">
1025
                            <div class="md-card-content">
1026
                              <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData" [chartTitle]="'OA Datasets with PID by funder'"
1027
                                                     [chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
1028
                            </div>
1029
                          </div>
1030
                        </div>
1031

  
1032
                      </div>
1033
                    </div>
1034

  
1035
                    <div class="licenceIndicator uk-margin-large-top">
1036
                      <h3 class="uk-margin-remove">Licence</h3>
1037
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1038

  
1039
                        <div class="uk-grid-margin">
1040
                          <div class="md-card chartCard">
1041
                            <div class="md-card-content">
1042
                              <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>
1043
                            </div>
1044
                          </div>
1045
                        </div>
1046

  
1047
                        <div class="uk-grid-margin">
1048
                          <div class="md-card chartCard">
1049
                            <div class="md-card-content">
1050
                              <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
1051
                            </div>
1052
                          </div>
1053
                        </div>
1054

  
1055
                        <div class="uk-grid-margin">
1056
                          <div class="md-card chartCard">
1057
                            <div class="md-card-content">
1058
                              <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
1059
                            </div>
1060
                          </div>
1061
                        </div>
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff