2022-04-18 13:44:44 +02:00
|
|
|
<ng-template #selected_filters_pills>
|
2022-07-17 15:24:47 +02:00
|
|
|
<div class="uk-slider filters-slider" uk-slider="finite: true">
|
2022-05-06 12:00:24 +02:00
|
|
|
<div [class.uk-invisible]="list.children.length === 0" class="uk-position-relative">
|
|
|
|
<div class="uk-slider-container" style="height: 40px">
|
|
|
|
<ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap">
|
2022-05-05 16:18:58 +02:00
|
|
|
<li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
|
2022-04-21 15:25:05 +02:00
|
|
|
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
2022-05-05 16:18:58 +02:00
|
|
|
<span
|
|
|
|
class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
|
2022-08-02 22:15:38 +02:00
|
|
|
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon"
|
2022-05-05 16:18:58 +02:00
|
|
|
[disabled]="loading">
|
2022-04-21 15:25:05 +02:00
|
|
|
<icon name="close" flex="true" ratio="0.7"></icon>
|
|
|
|
</button>
|
2020-07-14 17:22:39 +02:00
|
|
|
</span>
|
2022-04-21 15:25:05 +02:00
|
|
|
</li>
|
2022-05-05 16:18:58 +02:00
|
|
|
<ng-container *ngFor="let filter of filters">
|
2022-04-21 15:25:05 +02:00
|
|
|
<ng-container *ngIf="filter.countSelectedValues > 0">
|
|
|
|
<ng-container *ngFor="let value of filter.values; let i = index;">
|
|
|
|
<ng-container *ngIf="value.selected">
|
2022-05-05 16:18:58 +02:00
|
|
|
<li>
|
|
|
|
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
|
|
|
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
|
|
|
|
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)"
|
|
|
|
class="uk-close uk-icon" [disabled]="loading">
|
|
|
|
<icon name="close" flex="true" ratio="0.7"></icon>
|
|
|
|
</button>
|
|
|
|
</span>
|
|
|
|
</li>
|
2022-04-21 15:25:05 +02:00
|
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
|
|
</ul>
|
|
|
|
</div>
|
2023-02-15 11:53:47 +01:00
|
|
|
<slider-arrow type="previous"></slider-arrow>
|
|
|
|
<slider-arrow type="next"></slider-arrow>
|
2022-04-21 15:25:05 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-07-14 17:22:39 +02:00
|
|
|
</ng-template>
|
2023-03-22 16:56:50 +01:00
|
|
|
<div page-content [border]="isMobile">
|
2022-08-04 14:33:49 +02:00
|
|
|
<div header>
|
2022-12-12 15:18:55 +01:00
|
|
|
<div *ngIf="stakeholder" class="uk-hidden">
|
|
|
|
<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
|
2022-05-05 16:18:58 +02:00
|
|
|
</div>
|
2020-10-31 17:02:30 +01:00
|
|
|
</div>
|
2023-02-15 11:53:47 +01:00
|
|
|
<div actions>
|
|
|
|
<sidebar-mobile-toggle *ngIf="isMobile" [class.uk-margin-bottom]="!activeCategory || countSubCategoriesToShow(activeCategory) <= 1" class="uk-margin-top uk-display-block"></sidebar-mobile-toggle>
|
|
|
|
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1"
|
|
|
|
[class.uk-margin-bottom]="isMobile" class="uk-margin-medium-top">
|
2023-11-14 09:18:29 +01:00
|
|
|
<slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile"
|
2023-02-15 11:53:47 +01:00
|
|
|
[tabsClass]="isMobile?'uk-subnav uk-subnav-pill-alt uk-text-small':'uk-tab'" [type]="'dynamic'">
|
|
|
|
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory>
|
|
|
|
<slider-tab *ngIf="hasPermission(subCategory.visibility)" [tabTitle]="subCategory.name"
|
|
|
|
[queryParams]="queryParams" customClass="uk-text-uppercase"
|
|
|
|
[routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
|
|
|
|
[active]="subCategory.alias === activeSubCategory.alias"></slider-tab>
|
|
|
|
</ng-template>
|
|
|
|
</slider-tabs>
|
|
|
|
</div>
|
2022-08-04 14:33:49 +02:00
|
|
|
</div>
|
|
|
|
<div inner>
|
2022-03-28 00:36:58 +02:00
|
|
|
<div *ngIf="privateStakeholder" class="message">
|
|
|
|
<div class="uk-text-center">
|
|
|
|
<h3 class="uk-flex uk-flex-middle">
|
2022-04-05 18:55:01 +02:00
|
|
|
<icon name="incognito" ratio="2" visuallyHidden="private"></icon>
|
2022-03-28 00:36:58 +02:00
|
|
|
<span class="uk-margin-left">Private data</span>
|
|
|
|
</h3>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div *ngIf="!privateStakeholder && stakeholder" class="uk-section">
|
2022-08-04 14:33:49 +02:00
|
|
|
<div *ngIf="activeSubCategory?.description" class="uk-margin-medium-bottom">
|
|
|
|
{{activeSubCategory.description}}
|
|
|
|
</div>
|
|
|
|
<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 : ""))}}
|
2020-05-13 12:00:12 +02:00
|
|
|
</div>
|
2022-08-04 14:33:49 +02:00
|
|
|
</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>
|
2023-01-11 15:09:26 +01:00
|
|
|
Nothing to see here!
|
2022-08-04 14:33:49 +02:00
|
|
|
</h3>
|
|
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
<ng-template #content>
|
2023-01-26 15:50:01 +01:00
|
|
|
<div *ngIf="countSectionsWithIndicatorsToShow(activeSubCategory.numbers) > 0" class="uk-margin-medium-bottom">
|
2022-11-08 08:54:18 +01:00
|
|
|
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
|
2023-02-15 11:53:47 +01:00
|
|
|
<ng-container *ngIf="!isMobile && countIndicatorsToShow(number.indicators) > 0">
|
|
|
|
<div class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-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="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
|
|
|
|
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
|
|
|
|
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
|
2023-12-18 12:52:18 +01:00
|
|
|
<div *ngIf="!indicator.overlay">
|
2023-02-15 11:53:47 +01:00
|
|
|
<div
|
|
|
|
class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
|
|
|
|
<div class="number uk-text-small uk-text-bold">
|
|
|
|
<span *ngIf="numberResults.get(i + '-' + j)"
|
2023-06-09 19:53:14 +02:00
|
|
|
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
|
2023-02-15 11:53:47 +01:00
|
|
|
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
|
|
|
|
</div>
|
|
|
|
<div *ngIf="indicator.description || indicator.additionalDescription"
|
2023-03-22 16:56:50 +01:00
|
|
|
class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
|
2023-02-15 11:53:47 +01:00
|
|
|
<a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note"
|
2024-02-13 10:02:52 +01:00
|
|
|
(click)="changeOverlay($event, indicator, 'description')">
|
2023-03-22 16:56:50 +01:00
|
|
|
<span class="uk-flex uk-flex-middle">
|
|
|
|
<icon name="analytics" type="outlined" [flex]="true"></icon>
|
|
|
|
</span>
|
2023-02-15 11:53:47 +01:00
|
|
|
</a>
|
|
|
|
</div>
|
2022-11-08 15:37:44 +01:00
|
|
|
</div>
|
2023-02-15 11:53:47 +01:00
|
|
|
<div
|
2023-12-18 12:52:18 +01:00
|
|
|
*ngIf="indicator.overlay && (indicator.description || indicator.additionalDescription)"
|
2023-02-15 11:53:47 +01:00
|
|
|
click-outside-or-esc class="uk-overflow-auto"
|
2024-02-13 10:02:52 +01:00
|
|
|
(clickOutside)="closeOverlay($event, indicator)">
|
2023-02-15 11:53:47 +01:00
|
|
|
<div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
|
|
|
|
<a class="uk-display-inline-block uk-button uk-button-link"
|
2024-02-13 10:02:52 +01:00
|
|
|
(click)="changeOverlay($event, indicator, false)">
|
2023-02-15 11:53:47 +01:00
|
|
|
<span class="uk-flex uk-flex-middle">
|
|
|
|
<icon name="close" type="outlined" [flex]="true"></icon>
|
|
|
|
</span>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="uk-margin-small-top uk-margin-right">
|
|
|
|
<p *ngIf="indicator.description">
|
|
|
|
{{indicator.description}}
|
|
|
|
</p>
|
|
|
|
<p *ngIf="indicator.additionalDescription">
|
|
|
|
{{indicator.additionalDescription}}
|
|
|
|
</p>
|
|
|
|
</div>
|
2022-11-08 15:37:44 +01:00
|
|
|
</div>
|
2022-08-04 14:33:49 +02:00
|
|
|
</div>
|
2023-02-15 11:53:47 +01:00
|
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="isMobile && countIndicatorsToShow(number.indicators) > 0">
|
|
|
|
<h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h6>
|
|
|
|
<div class="uk-card uk-card-default uk-padding-small number-card">
|
|
|
|
<div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid>
|
|
|
|
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
|
|
|
<div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
|
|
|
|
<div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
|
2023-12-18 12:52:18 +01:00
|
|
|
<div *ngIf="!indicator.overlay">
|
2023-02-15 11:53:47 +01:00
|
|
|
<div
|
|
|
|
class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
|
|
|
|
<div class="number uk-text-small uk-text-bold">
|
|
|
|
<span *ngIf="numberResults.get(i + '-' + j)"
|
2023-06-09 19:53:14 +02:00
|
|
|
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
|
2023-02-15 11:53:47 +01:00
|
|
|
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-07-14 13:38:20 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-02-15 11:53:47 +01:00
|
|
|
</ng-template>
|
2022-08-04 14:33:49 +02:00
|
|
|
</div>
|
2023-02-15 11:53:47 +01:00
|
|
|
</div>
|
|
|
|
</ng-container>
|
2022-08-04 14:33:49 +02:00
|
|
|
</ng-container>
|
2022-11-08 08:54:18 +01:00
|
|
|
</div>
|
|
|
|
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
|
|
|
|
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
|
2023-02-15 11:53:47 +01:00
|
|
|
class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
|
|
|
|
uk-height-match="target: .uk-card">
|
|
|
|
<h5 *ngIf="chart.title && !isMobile" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
|
|
|
|
<h6 *ngIf="chart.title && isMobile" class="uk-width-1-1">{{chart.title}}</h6>
|
2022-11-08 08:54:18 +01:00
|
|
|
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
2022-12-20 16:40:46 +01:00
|
|
|
<div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
|
2023-02-15 11:53:47 +01:00
|
|
|
[ngClass]="getChartClassBySize(indicator.width)">
|
2022-11-08 08:54:18 +01:00
|
|
|
<div class="uk-card uk-card-default uk-position-relative"
|
2023-02-15 11:53:47 +01:00
|
|
|
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
|
2022-11-08 08:54:18 +01:00
|
|
|
<div class="uk-card-body uk-text-center uk-margin-small-bottom">
|
2023-11-14 09:18:29 +01:00
|
|
|
<h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
|
|
|
|
{{indicator.name + " "}}
|
2023-01-26 15:50:01 +01:00
|
|
|
</h6>
|
2022-11-08 08:54:18 +01:00
|
|
|
<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 [class.uk-blend-multiply]="!isFullscreen"
|
2023-02-15 11:53:47 +01:00
|
|
|
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
|
|
|
|
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
|
|
|
|
class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
|
|
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
|
2022-11-08 08:54:18 +01:00
|
|
|
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
|
|
|
|
<img class="uk-width-1-1 uk-blend-multiply"
|
2023-02-15 11:53:47 +01:00
|
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
|
|
|
src="assets/chart-placeholder.png">
|
2022-11-08 08:54:18 +01:00
|
|
|
</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>
|
2023-12-18 12:52:18 +01:00
|
|
|
<div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
|
|
|
|
<a *ngIf="indicator.description || indicator.additionalDescription"
|
|
|
|
class="uk-display-inline-block uk-button uk-button-text"
|
2024-01-24 19:23:37 +01:00
|
|
|
(click)="changeOverlay($event, indicator, 'description')">
|
2022-11-08 08:54:18 +01:00
|
|
|
<span class="uk-flex uk-flex-middle">
|
|
|
|
<icon name="analytics" type="outlined" [flex]="true"></icon>
|
|
|
|
<span class="uk-margin-small-left">Note</span>
|
|
|
|
</span>
|
|
|
|
</a>
|
|
|
|
</div>
|
2023-12-18 12:52:18 +01:00
|
|
|
<div *ngIf="indicator.overlay" class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
|
2024-01-24 19:23:37 +01:00
|
|
|
<div *ngIf="indicator.overlay == 'description'" class="inner" click-outside-or-esc
|
|
|
|
(clickOutside)="closeOverlay($event, indicator)">
|
2022-11-08 14:35:48 +01:00
|
|
|
<div class="uk-padding-small">
|
|
|
|
<div class="uk-flex uk-flex-right">
|
2024-01-24 19:23:37 +01:00
|
|
|
<button class="uk-close uk-icon" (click)="changeOverlay($event, indicator, false)">
|
2022-11-08 14:35:48 +01:00
|
|
|
<icon name="close" ratio="1"></icon>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="uk-padding-small uk-padding-remove-horizontal">
|
|
|
|
<p *ngIf="indicator.description">
|
|
|
|
{{indicator.description}}
|
|
|
|
</p>
|
|
|
|
<p *ngIf="indicator.additionalDescription">
|
|
|
|
{{indicator.additionalDescription}}
|
|
|
|
</p>
|
|
|
|
</div>
|
2022-11-08 08:54:18 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="printGap uk-hidden"></div>
|
|
|
|
</ng-template>
|
|
|
|
</div>
|
|
|
|
</ng-container>
|
2022-08-04 14:33:49 +02:00
|
|
|
</ng-template>
|
2020-08-04 09:57:51 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-08-29 13:57:05 +02:00
|
|
|
<div sticky_footer class="uk-visible@m">
|
|
|
|
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
|
|
|
|
</div>
|
|
|
|
<ng-template #graph_and_feedback_template>
|
2023-02-15 11:53:47 +01:00
|
|
|
<div *ngIf="!view" class="uk-margin-small-top uk-margin-small-bottom uk-grid uk-grid-small uk-text-small hideInfo"
|
|
|
|
uk-grid>
|
2022-08-29 13:57:05 +02:00
|
|
|
<!-- Last Stats Date-->
|
2023-02-15 11:53:47 +01:00
|
|
|
<div class="uk-width-expand@m uk-width-1-1">
|
2023-05-15 16:05:33 +02:00
|
|
|
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
|
|
|
|
<img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 16px;">
|
|
|
|
</a>
|
2022-12-15 17:08:31 +01:00
|
|
|
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-meta">
|
2023-05-15 16:05:33 +02:00
|
|
|
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">-</span>
|
|
|
|
<span>Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}</span>
|
|
|
|
</span>
|
2022-08-29 13:57:05 +02:00
|
|
|
</div>
|
|
|
|
<!--Feedback-->
|
2023-02-15 11:53:47 +01:00
|
|
|
<div class="uk-width-auto@m uk-width-1-1">
|
2022-08-29 13:57:05 +02:00
|
|
|
<span class="uk-text-meta">Send us your </span>
|
|
|
|
<a class="uk-link" [href]="feedback" target="_self">feedback</a>
|
|
|
|
<span class="uk-text-meta">.</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ng-template>
|
2020-10-31 17:02:30 +01:00
|
|
|
</div>
|
2023-09-04 14:15:43 +02:00
|
|
|
<a *ngIf="stakeholder && !privateStakeholder " href="#style_switcher" uk-toggle="" id="filters_switcher_toggle"
|
|
|
|
class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-link-reset">
|
2022-04-07 16:50:49 +02:00
|
|
|
<icon name="filters" ratio="1.5" visuallyHidden="Filters" gradient="filters_icon"></icon>
|
2023-02-15 11:53:47 +01:00
|
|
|
<span [class.uk-hidden]="countSelectedFilters() === 0"
|
|
|
|
class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
|
2022-08-02 09:42:23 +02:00
|
|
|
{{countSelectedFilters()}}
|
|
|
|
</span>
|
2023-09-04 14:15:43 +02:00
|
|
|
</a>
|
2022-06-17 01:59:24 +02:00
|
|
|
<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="uk-offcanvas"
|
2022-03-04 16:36:38 +01:00
|
|
|
uk-offcanvas="flip:true; overlay: true">
|
2022-06-17 01:59:24 +02:00
|
|
|
<div class="uk-offcanvas-bar">
|
2020-10-31 17:02:30 +01:00
|
|
|
<div class="uk-float-right">
|
2022-06-17 01:59:24 +02:00
|
|
|
<button class="uk-offcanvas-close uk-close uk-icon" type="button">
|
2022-04-05 18:55:01 +02:00
|
|
|
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>
|
2022-03-30 18:18:06 +02:00
|
|
|
</button>
|
2020-06-11 19:06:45 +02:00
|
|
|
</div>
|
2022-06-17 01:59:24 +02:00
|
|
|
<div>
|
2022-07-17 15:24:47 +02:00
|
|
|
<div class="uk-flex uk-flex-middle uk-margin-bottom">
|
|
|
|
<h4 class="uk-margin-remove-bottom">Filters</h4>
|
|
|
|
<a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-left" (click)="clearAll()"> Clear All </a>
|
2020-07-10 10:37:51 +02:00
|
|
|
</div>
|
2022-07-17 15:24:47 +02:00
|
|
|
<ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
|
2022-04-05 18:55:01 +02:00
|
|
|
<div *ngIf="!user" class="uk-margin-top"><a class="uk-link" (click)="logIn()"> Sign in</a> to apply filters.</div>
|
2022-04-09 15:25:09 +02:00
|
|
|
<ul *ngIf="user" class="uk-list uk-list-xlarge uk-list-divider uk-margin-top">
|
2020-07-10 10:37:51 +02:00
|
|
|
<li>
|
2023-02-15 11:53:47 +01:00
|
|
|
<range-filter #rangeFilter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear"
|
|
|
|
[mandatoryRange]="true"
|
2020-10-31 17:02:30 +01:00
|
|
|
(onFilterChange)="filter()"></range-filter>
|
2020-07-10 10:37:51 +02:00
|
|
|
</li>
|
2020-07-14 17:22:39 +02:00
|
|
|
<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>
|
2020-07-10 10:37:51 +02:00
|
|
|
</ul>
|
2023-02-15 11:53:47 +01:00
|
|
|
<i *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-medium-top uk-text-small uk-display-block">
|
|
|
|
<sup>*</sup> If your filter selection cannot be applied to a chart, that chart will appear grayed-out.
|
|
|
|
</i>
|
2020-07-10 10:37:51 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-10-31 17:02:30 +01:00
|
|
|
</div>
|
2022-04-07 16:50:49 +02:00
|
|
|
|
2023-11-14 09:18:29 +01:00
|
|
|
<!-- <div *ngIf="stakeholder && !loading && activeTopic" id="print_toggle"
|
2022-06-17 01:59:24 +02:00
|
|
|
class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle" (click)="printReport()">
|
2022-04-14 11:51:31 +02:00
|
|
|
<icon name="print" ratio="1.5" customClass="uk-text-background" visuallyHidden="Print"></icon>
|
2022-06-27 16:19:56 +02:00
|
|
|
</div> -->
|