add map view for continent page
This commit is contained in:
parent
00f8af98a2
commit
0496236948
|
@ -34,7 +34,7 @@ import {environment} from '../environments/environment';
|
|||
// CountriesTableComponent,
|
||||
DataViewComponent,
|
||||
CountriesMapOverviewComponent,
|
||||
EuropeMapOverviewComponent,
|
||||
// EuropeMapOverviewComponent,
|
||||
// CountryComponent,
|
||||
CountryMapComponent,
|
||||
GaugeChartComponent,
|
||||
|
@ -49,7 +49,7 @@ import {environment} from '../environments/environment';
|
|||
// NgxEchartsModule.forRoot({
|
||||
// echarts
|
||||
// }),
|
||||
NgxEchartsModule,
|
||||
// NgxEchartsModule,
|
||||
HighchartsChartModule,
|
||||
AutocompleteLibModule,
|
||||
MatomoModule.forRoot({
|
||||
|
|
|
@ -10,6 +10,15 @@
|
|||
<li><span>{{continentName | titlecase}}</span></li>
|
||||
</ul>
|
||||
|
||||
<!-- Europe Map -->
|
||||
<div class="uk-align-right">
|
||||
<a *ngIf="mapViewActive" (click)="toggleView('columns')">
|
||||
<img src="../../../assets/img/icons/switch_view_list_active.svg">
|
||||
</a>
|
||||
<a *ngIf="!mapViewActive" (click)="toggleView('map')">
|
||||
<img src="../../../assets/img/icons/switch_view_grid_active.svg">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div *ngIf="continentName" class="">
|
||||
<img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image" width="132" height="132">
|
||||
|
@ -38,10 +47,10 @@
|
|||
|
||||
|
||||
<section class="uk-padding-small uk-margin-top">
|
||||
<div class="uk-container uk-container-center uk-margin-medium-top">
|
||||
<div class="uk-container uk-container-center uk-margin-medium-top" [ngClass]="{'uk-container-expand': mapViewActive}">
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<div *ngIf="!mapViewActive" class="uk-visible@m">
|
||||
<div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
|
||||
<div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">
|
||||
|
||||
|
@ -171,6 +180,142 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Europe Map -->
|
||||
<div *ngIf="mapViewActive" class="uk-visible@m">
|
||||
<div class="uk-grid uk-grid-small">
|
||||
|
||||
<div class="uk-width-4-5@m">
|
||||
|
||||
<!--Map Container-->
|
||||
<app-europe-map-overview (emitSelectedCountry)="countrySelected($event)"></app-europe-map-overview>
|
||||
<!--<app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="selectedCountry($event)"></app-map-overview>-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="uk-width-1-5@m">
|
||||
<div class="md-card infoBox">
|
||||
<ng-container *ngIf="!selectedCountry">
|
||||
<div class="md-card-toolbar">
|
||||
<h3 class="uk-text-center">OPENAIRE OPEN SCIENCE OBSERVATORY</h3>
|
||||
</div>
|
||||
<div *ngIf="!selectedCountry" class="md-card-content">
|
||||
<div>An OpenAIRE service to:</div>
|
||||
<ul>
|
||||
<li>
|
||||
Better understand the European open research landscape
|
||||
</li>
|
||||
<li>
|
||||
Track trends for open access to publications, data, software
|
||||
</li>
|
||||
<li>
|
||||
Reveal hidden potential on existing resources
|
||||
</li>
|
||||
<li>
|
||||
View open collaboration patterns
|
||||
</li>
|
||||
</ul>
|
||||
<!--<div class="uk-text-center uk-margin-medium-top uk-margin-medium-bottom">-->
|
||||
<!--<button [routerLink]="['/methodology']" class="md-btn md-btn-primary">Learn More</button>-->
|
||||
<!--</div>-->
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="selectedCountry">
|
||||
<div class="md-card-toolbar">
|
||||
<h3 class="uk-text-center uk-margin-small-top">
|
||||
<a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>
|
||||
<img src="../../../assets/img/flags/{{selectedCountry.code | lowercase}}-flag-round.png" class="small-flag-image uk-margin-small-right" width="24" style="margin-top: -3px">
|
||||
<span>{{selectedCountry.name | uppercase}}</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div *ngIf="!selectedCountryData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
|
||||
<!--<div *ngIf="!selectedCountryData" class="loading-big">-->
|
||||
<!--<div uk-spinner="ratio: 2" class="uk-overlay uk-position-center uk-dark" style="margin: auto"></div>-->
|
||||
<!--<!–<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">–>-->
|
||||
<!--<!–{{ loadingMessage }}–>-->
|
||||
<!--<!–</div>–>-->
|
||||
<!--<div class="transparentFilm"></div>-->
|
||||
<!--</div>-->
|
||||
<div *ngIf="selectedCountryData" class="md-card-content">
|
||||
<div class="numbers">
|
||||
<div class="uk-margin-small-top">
|
||||
|
||||
<div class="indicator">
|
||||
<span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated!=null">{{selectedCountryData.publicationsAffiliated | number}}</span>
|
||||
<span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated===null">--</span>
|
||||
<span><i>OA publications</i> affiliated to an organization in the country</span>
|
||||
</div>
|
||||
|
||||
<div class="indicator uk-margin-small-top">
|
||||
<span class="number publications" *ngIf="selectedCountryData.publicationsDeposited!=null">{{selectedCountryData.publicationsDeposited | number}}</span>
|
||||
<span class="number publications" *ngIf="selectedCountryData.publicationsDeposited===null">--</span>
|
||||
<span><i>OA publications</i> from institutional repositories</span>
|
||||
</div>
|
||||
|
||||
<hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
|
||||
|
||||
<div class="indicator">
|
||||
<span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated!=null">{{selectedCountryData.datasetsAffiliated | number}}</span>
|
||||
<span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated===null">--</span>
|
||||
<span><i>OA datasets</i> affiliated to an organization in the country</span>
|
||||
</div>
|
||||
|
||||
<div class="indicator uk-margin-small-top">
|
||||
<span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited!=null">{{selectedCountryData.datasetsDeposited | number}}</span>
|
||||
<span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited===null">--</span>
|
||||
<span><i>OA datasets</i> from institutional repositories</span>
|
||||
</div>
|
||||
|
||||
<hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
|
||||
|
||||
<div class="indicator">
|
||||
<span class="number repositories" *ngIf="selectedCountryData.repositories!=null">{{selectedCountryData.repositories | number}}</span>
|
||||
<span class="number repositories" *ngIf="selectedCountryData.repositories===null">--</span>
|
||||
<span><i>repositories</i> from openDOAR & re3data</span>
|
||||
</div>
|
||||
|
||||
<hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
|
||||
|
||||
<div class="indicator">
|
||||
<span class="number journals" *ngIf="selectedCountryData.journals!=null">{{selectedCountryData.journals | number}}</span>
|
||||
<span class="number journals" *ngIf="selectedCountryData.journals===null">--</span>
|
||||
<span><i>journals</i> from DOAJ</span>
|
||||
</div>
|
||||
|
||||
<!--<hr class="greyBoldDivider uk-margin-top uk-margin-bottom">-->
|
||||
|
||||
<!--<div class="indicator">-->
|
||||
<!--<span class="number policies" *ngIf="selectedCountryData.policies!=null">{{selectedCountryData.policies | number}}</span>-->
|
||||
<!--<span class="number policies" *ngIf="selectedCountryData.policies===null">--</span>-->
|
||||
<!--<span>organisations with <i>OA policies</i></span>-->
|
||||
<!--</div>-->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="uk-text-center uk-margin-medium-top">
|
||||
<!--<button [routerLink]="['/country/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>-->
|
||||
<button [routerLink]="['/country' , selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->
|
||||
<!--<h2 class="heading_b">-->
|
||||
<!--Our Team-->
|
||||
<!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
|
||||
<!--</h2>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<div class="uk-hidden@m uk-text-center">
|
||||
<div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
|
||||
|
|
|
@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
|
|||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { DataService } from '../../services/data.service';
|
||||
import { DataHandlerService } from '../../services/data-handler.service';
|
||||
import { EuropeData } from '../../domain/overview-map-data';
|
||||
import {CountryOverviewData, EuropeData, SelectedCountry} from '../../domain/overview-map-data';
|
||||
|
||||
@Component({
|
||||
selector: 'app-continent',
|
||||
|
@ -18,6 +18,10 @@ export class ContinentComponent implements OnInit {
|
|||
|
||||
europeOverviewData: EuropeData;
|
||||
|
||||
mapViewActive = false;
|
||||
selectedCountry: SelectedCountry = null;
|
||||
selectedCountryData: CountryOverviewData = null;
|
||||
|
||||
constructor(private dataService: DataService,
|
||||
private dataHandlerService: DataHandlerService,
|
||||
private route: ActivatedRoute,
|
||||
|
@ -107,4 +111,31 @@ export class ContinentComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
/** Europe Map --> **/
|
||||
toggleView(show: string) {
|
||||
if (show === 'map') {
|
||||
this.mapViewActive = true;
|
||||
} else if (show === 'columns') {
|
||||
this.mapViewActive = false;
|
||||
}
|
||||
}
|
||||
|
||||
countrySelected(selectedCountry: SelectedCountry) {
|
||||
this.selectedCountry = selectedCountry;
|
||||
this.selectedCountryData = null;
|
||||
this.dataService.getCountryOverviewData(this.selectedCountry.code).subscribe(
|
||||
rawData => {
|
||||
this.selectedCountryData = this.dataHandlerService.convertRawDataToCountryOverviewData(rawData);
|
||||
}, error => {
|
||||
console.log(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
deselectCountry() {
|
||||
this.selectedCountry = null;
|
||||
this.selectedCountryData = null;
|
||||
}
|
||||
/** <-- Europe Map **/
|
||||
|
||||
}
|
||||
|
|
|
@ -14,6 +14,8 @@ import { TopmenuComponent } from '../topmenu/top-menu.component';
|
|||
import {TreemapHighchartsComponent} from '../../chart-components/treemap-highcharts/treemap-highcharts.component';
|
||||
import {HighchartsChartModule} from 'highcharts-angular';
|
||||
import {CountriesTableComponent} from '../../pages/home/countries-table.component';
|
||||
import {EuropeMapOverviewComponent} from "../../pages/home/europe-map-overview.component";
|
||||
import {NgxEchartsModule} from "ngx-echarts";
|
||||
|
||||
const myGroups = [
|
||||
];
|
||||
|
@ -28,6 +30,7 @@ const myGroups = [
|
|||
ReactiveFormsModule,
|
||||
HttpClientModule,
|
||||
HighchartsChartModule,
|
||||
NgxEchartsModule
|
||||
],
|
||||
declarations: [
|
||||
HelpContentComponent,
|
||||
|
@ -38,7 +41,8 @@ const myGroups = [
|
|||
CountriesTableComponent,
|
||||
ReadMoreComponent,
|
||||
ReadMoreTextComponent,
|
||||
...myGroups
|
||||
...myGroups,
|
||||
EuropeMapOverviewComponent
|
||||
],
|
||||
exports: [
|
||||
HelpContentComponent,
|
||||
|
@ -48,6 +52,7 @@ const myGroups = [
|
|||
TreemapHighchartsComponent,
|
||||
CountriesTableComponent,
|
||||
...myGroups,
|
||||
EuropeMapOverviewComponent,
|
||||
ReadMoreComponent,
|
||||
ReadMoreTextComponent
|
||||
],
|
||||
|
|
|
@ -0,0 +1,30 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="79px" height="28px" viewBox="0 0 79 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>switch_view_grid_active</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="UI--Category_Rearch-Result-Page-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="VS03" transform="translate(-1271.000000, -104.000000)">
|
||||
<g id="Group-6" transform="translate(410.000000, 104.000000)">
|
||||
<g id="switch_view_grid_active" transform="translate(861.000000, 0.000000)">
|
||||
<rect id="Rectangle-2" stroke="#37833F" fill="#BBD5BE" x="0.5" y="0.5" width="77.974359" height="27" rx="3"></rect>
|
||||
<path d="M39.4900017,1 L39.4900017,27 L4,27 C2.34314575,27 1,25.6568542 1,24 L1,4 C1,2.34314575 2.34314575,1 4,1 L39.4900017,1 Z" id="Combined-Shape" fill="#FFFFFF"></path>
|
||||
<g id="Group-16" transform="translate(10.769231, 6.461538)" stroke="#37833F" stroke-linecap="square" stroke-width="2">
|
||||
<g id="Group-13">
|
||||
<path d="M0.345167653,1.07692308 L17.658689,1.07692308" id="Line-2"></path>
|
||||
<path d="M0.345167653,7.53846154 L17.658689,7.53846154" id="Line-2-Copy"></path>
|
||||
<path d="M0.345167653,14 L17.658689,14" id="Line-2-Copy-2"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Group-15" transform="translate(51.692308, 5.743590)" fill="#37833F">
|
||||
<rect id="Rectangle" x="0" y="0" width="7.17948718" height="7.17948718"></rect>
|
||||
<rect id="Rectangle-Copy" x="9.33333333" y="0" width="7.17948718" height="7.17948718"></rect>
|
||||
<rect id="Rectangle-Copy-3" x="0" y="9.33333333" width="7.17948718" height="7.17948718"></rect>
|
||||
<rect id="Rectangle-Copy-2" x="9.33333333" y="9.33333333" width="7.17948718" height="7.17948718"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 2.2 KiB |
|
@ -0,0 +1,30 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="79px" height="28px" viewBox="0 0 79 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>switch_view_list_active</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="UI--Category_Rearch-Result-Page-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="VS01" transform="translate(-1271.000000, -167.000000)">
|
||||
<g id="Group-11" transform="translate(93.000000, 167.000000)">
|
||||
<g id="switch_view_list_active" transform="translate(1178.000000, 0.000000)">
|
||||
<path d="M39.4871795,0 L39.4871795,28 L3,28 C1.34314575,28 2.02906125e-16,26.6568542 0,25 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 L39.4871795,0 Z" id="Combined-Shape" fill="#BBD5BE"></path>
|
||||
<g id="Group-16" transform="translate(10.769231, 6.461538)" stroke="#37833F" stroke-linecap="square" stroke-width="2">
|
||||
<g id="Group-13">
|
||||
<path d="M0.345167653,1.07692308 L17.658689,1.07692308" id="Line-2"></path>
|
||||
<path d="M0.345167653,7.53846154 L17.658689,7.53846154" id="Line-2-Copy"></path>
|
||||
<path d="M0.345167653,14 L17.658689,14" id="Line-2-Copy-2"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Group-15" transform="translate(51.692308, 5.743590)" fill="#37833F">
|
||||
<rect id="Rectangle" x="0" y="0" width="7.17948718" height="7.17948718"></rect>
|
||||
<rect id="Rectangle-Copy" x="9.33333333" y="0" width="7.17948718" height="7.17948718"></rect>
|
||||
<rect id="Rectangle-Copy-3" x="0" y="9.33333333" width="7.17948718" height="7.17948718"></rect>
|
||||
<rect id="Rectangle-Copy-2" x="9.33333333" y="9.33333333" width="7.17948718" height="7.17948718"></rect>
|
||||
</g>
|
||||
<rect id="Rectangle-2" stroke="#37833F" x="0.5" y="0.5" width="77.974359" height="27" rx="3"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in New Issue