277 lines
16 KiB
HTML
277 lines
16 KiB
HTML
<ng-template #selected_filters_pills let-margin="margin">
|
|
<span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-grid-margin">
|
|
<a (click)="clearPeriodFilter()" [class]="((loading)?' uk-disabled':' ')+' uk-link-text '"> <span
|
|
class="filter-tag" [class.uk-margin-small-left]="margin"
|
|
title="Remove {{periodFilter.selectedFromAndToValues}}">
|
|
<i uk-icon="close"></i>
|
|
<span class="uk-margin-small-left">{{periodFilter.selectedFromAndToValues}}</span>
|
|
</span></a>
|
|
</span>
|
|
<ng-container *ngFor="let filter of filters ">
|
|
<ng-container *ngIf="filter.countSelectedValues > 0">
|
|
<ng-container *ngFor="let value of filter.values; let i = index; let end = last; ">
|
|
<ng-container *ngIf="value.selected">
|
|
<span class="uk-grid-margin">
|
|
<span class="filter-tag" [class.uk-margin-small-left]="margin" [title]="'Remove '+value.name"
|
|
(click)="value.selected = false; filter.radioValue=''; filter.countSelectedValues=
|
|
filter.countSelectedValues -1;
|
|
filterChanged({value:filter}) ">
|
|
<a [class.uk-disabled]="loading">
|
|
<span class=" clickable" aria-hidden="true">
|
|
<span class="uk-icon">
|
|
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
|
|
icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6"
|
|
d="M16,16 L4,4"></path><path fill="none"
|
|
stroke="#000"
|
|
stroke-width="1.6"
|
|
d="M16,4 L4,16"></path></svg>
|
|
</span>
|
|
</span>
|
|
<span class="uk-margin-small-left"
|
|
[innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
|
|
</a>
|
|
</span>
|
|
</span>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-template>
|
|
<div page-content (stickyEmitter)="stickyPageHeader = $event">
|
|
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
|
|
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
|
|
<img [src]="stakeholder | logoUrl" class="uk-width-small uk-margin-right">
|
|
<div class="uk-width-expand">
|
|
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Dashboard</div>
|
|
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin-top">
|
|
<ul class="uk-tab">
|
|
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
|
|
<li *ngIf="isPublicOrIsMember(category.visibility)"
|
|
[class.uk-active]="category.alias === activeCategory.alias">
|
|
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
|
|
[queryParams]="queryParams">
|
|
<span class="title">{{category.name}}</span>
|
|
</a>
|
|
</li>
|
|
</ng-template>
|
|
</ul>
|
|
<!-- TODO add Print on the right side -->
|
|
<!--<div class="uk-width-auto@m uk-width-1-1 uk-flex uk-flex-center">
|
|
<a class="uk-text-uppercase uk-flex uk-flex-middle uk-flex-center">
|
|
<button class="uk-icon-button large uk-button-secondary" (click)="printReport()">
|
|
<icon name="print"></icon>
|
|
</button>
|
|
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary" (click)="printReport()">
|
|
Print Report
|
|
</button>
|
|
</a>
|
|
</div>-->
|
|
</div>
|
|
<!-- TODO reconsider filters-->
|
|
<!--<div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom uk-text-small">
|
|
<span class="uk-grid-margin">Filters: </span>
|
|
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
|
|
</div>-->
|
|
</div>
|
|
<div inner>
|
|
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right">
|
|
<ul class="uk-subnav uk-subnav-pill-alt">
|
|
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
|
|
<li *ngIf="isPublicOrIsMember(subCategory.visibility)"
|
|
[ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
|
|
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
|
|
[queryParams]="queryParams"
|
|
class="uk-margin-remove-bottom"
|
|
><span>{{subCategory.name}}</span></a>
|
|
</li>
|
|
</ng-template>
|
|
</ul>
|
|
</div>
|
|
<div *ngIf="privateStakeholder" class="message">
|
|
<div class="uk-text-center">
|
|
<h3 class="uk-flex uk-flex-middle">
|
|
<icon name="incognito" ratio="2" visuallyHidden="private"></icon>
|
|
<span class="uk-margin-left">Private data</span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="!privateStakeholder && stakeholder" class="uk-section">
|
|
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
|
|
&& ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) ||
|
|
(activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
|
|
(activeTopic && activeTopic.description && activeTopic.description.length > 0))" class="uk-text-center">
|
|
<div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
|
|
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
|
|
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
|
|
(activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
|
|
</div>
|
|
</div>
|
|
<ng-template [ngIf]="!loading && !privateStakeholder &&
|
|
(!activeSubCategory ||
|
|
((activeSubCategory.numbers.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.numbers) == 0) &&
|
|
(activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
|
|
|| !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
|
|
<div class="message uk-text-center">
|
|
<h3>
|
|
No indicators available yet. Stay tuned!
|
|
</h3>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #content>
|
|
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
|
|
<div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-margin-large-bottom" uk-grid
|
|
uk-height-match="target: .uk-card">
|
|
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
|
|
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
|
<div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)"
|
|
class="uk-margin-bottom">
|
|
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
|
|
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
|
|
<div class="uk-text-center">
|
|
<!--<div *ngIf="properties.environment === 'development'">
|
|
Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
|
|
</div>-->
|
|
<div class="number uk-text-bold uk-text-primary-gradient">
|
|
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
|
|
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
|
|
</div>
|
|
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
|
|
</div>
|
|
<div *ngIf="indicator.description || indicator.additionalDescription"
|
|
class="uk-overlay uk-position-bottom">
|
|
<div class="uk-padding-small">
|
|
<div *ngIf="indicator.description">
|
|
{{indicator.description}}
|
|
</div>
|
|
<div *ngIf="indicator.additionalDescription">
|
|
{{indicator.additionalDescription}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</ng-container>
|
|
<div [class.uk-margin-large-top]="countSectionsWithIndicatorsToShow(activeSubCategory.numbers) > 0">
|
|
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
|
|
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
|
|
class="uk-grid uk-grid-column-medium uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid uk-height-match="target: .uk-card">
|
|
<h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
|
|
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
|
<div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
|
|
[ngClass]="getChartClassBySize(indicator.width)">
|
|
<div class="uk-card uk-card-default"
|
|
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
|
|
<div class="uk-card-body uk-text-center">
|
|
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
|
|
<div>{{indicator.name + " "}}</div>
|
|
</h4>
|
|
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
|
|
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
|
|
class="uk-button"
|
|
(click)="setActiveChart(i, j, indicatorPath.type)"
|
|
[class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
|
|
{{indicatorPath.type}}
|
|
</button>
|
|
</div>
|
|
<div *ngIf="properties.environment === 'development'">
|
|
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
|
|
{{countSelectedFilters()}}</div>
|
|
<iframe *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
|
|
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
|
|
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
|
|
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
|
|
class="uk-alert uk-alert-danger uk-text-center">
|
|
I frames preview is disabled
|
|
</div>
|
|
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
|
|
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
|
|
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
|
|
</div>
|
|
<!-- TODO Check description-->
|
|
<div *ngIf="indicator.description || indicator.additionalDescription"
|
|
class="uk-overlay uk-position-bottom">
|
|
<div class="uk-padding multi-line-ellipsis lines-3">
|
|
<p class="uk-margin-remove">
|
|
<span *ngIf="indicator.description">
|
|
{{indicator.description}}
|
|
</span>
|
|
<br>
|
|
<span *ngIf="indicator.additionalDescription">
|
|
{{indicator.additionalDescription}}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
<div class="uk-margin-medium-top uk-flex hideInfo">
|
|
<!-- Last Stats Date-->
|
|
<div class="uk-width-2-3@m uk-width-1-2 graph">
|
|
<icon name="graph" customClass="uk-text-primary"></icon>
|
|
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by
|
|
<a href="https://graph.openaire.eu" class="uk-link">OpenAIRE Research Graph</a></span>
|
|
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-muted">
|
|
. Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
|
|
</span>
|
|
</div>
|
|
<!--Feedback-->
|
|
<div class="uk-width-expand uk-text-right">
|
|
<span class="uk-text-muted">Send us your <a class="uk-link" [href]="feedback" target="_self">feedback</a>.</span>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--(click)="filterToggle= !filterToggle"
|
|
[style.display]="(filterToggle?'none':'inherit')"-->
|
|
<div *ngIf="stakeholder && !privateStakeholder " href="#style_switcher" uk-toggle="" id="filters_switcher_toggle"
|
|
class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle">
|
|
<icon name="filter_alt" ratio="1.5" customClass="uk-text-primary-gradient" visuallyHidden="Filters"></icon>
|
|
</div>
|
|
<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="uk-offcanvas offcanvas"
|
|
uk-offcanvas="flip:true; overlay: true">
|
|
<div class="uk-offcanvas-bar">
|
|
<div class="uk-float-right">
|
|
<button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
|
|
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>
|
|
</button>
|
|
</div>
|
|
<div class="uk-padding">
|
|
<div class="uk-grid uk-flex uk-flex-middle">
|
|
<h4>Filters</h4>
|
|
<a *ngIf="countSelectedFilters() > 1"
|
|
class="uk-text-small uk-width-1-2" (click)="clearAll()"> Clear All </a>
|
|
</div>
|
|
<div class="uk-grid uk-grid-small uk-text-small" uk-grid>
|
|
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
|
|
</div>
|
|
<div *ngIf="!user" class="uk-margin-top"><a class="uk-link" (click)="logIn()"> Sign in</a> to apply filters.</div>
|
|
<ul *ngIf="user" class="uk-list uk-list-divider uk-margin-top">
|
|
<li>
|
|
<range-filter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear" [mandatoryRange]="true"
|
|
(onFilterChange)="filter()"></range-filter>
|
|
</li>
|
|
<ng-container *ngFor="let filter of filters ">
|
|
<li *ngIf="filter.values.length >0">
|
|
<search-filter [filter]="filter" [showResultCount]=false
|
|
(onFilterChange)="filterChanged($event)"></search-filter>
|
|
</li>
|
|
</ng-container>
|
|
</ul>
|
|
<div *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-medium-top uk-alert uk-alert-primary">
|
|
If your filter selection cannot be applied to a chart, that chart will appear grayed-out.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|