MaDgIK
/
irish-monitor
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

[master]: 1. Change style of labels in irish. 2. Add tabs for sections in monitor page.

This commit is contained in:
Konstantinos Triantafyllou 2024-02-02 12:06:06 +02:00
parent 308c5f6e98
commit 3de3882cba
8 changed files with 246 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 4c55fb252cec8c1801bc37a9544c8e09412ff504 Subproject commit bedb7f013bbca6afbc9508ce753e01078373e059

379
src/app/shared/monitor/monitor.component.html
View File

@ -1,5 +1,12 @@
<div page-content [border]="isMobile"> <div page-content [border]="isMobile">
<div class="uk-margin-top" actions> <div class="uk-margin-top" actions>
<div class="uk-margin-bottom uk-flex uk-flex-middle">
<span *ngIf="countSelectedFilters() > 0" class="uk-text-meta uk-margin-small-right"> Active filters:</span>
<div class="uk-width-expand">
<ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
</div>
<a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-small-left" (click)="clearAll()"> Clear All </a>
</div>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 0" [class.uk-margin-bottom]="isMobile"> <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 0" [class.uk-margin-bottom]="isMobile">
<slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile" [type]="'dynamic'"> <slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile" [type]="'dynamic'">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory> <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory>
@ -13,98 +20,105 @@
</div> </div>
</div> </div>
<div inner> <div inner>
<loading *ngIf="loading" class="uk-margin-top"></loading> <loading *ngIf="loading" class="uk-margin-top"></loading>
<div *ngIf="!activeSubCategory && !loading" class="message"> <div *ngIf="!activeSubCategory && !loading" class="message">
No {{entities.stakeholder}} yet. No {{entities.stakeholder}} yet.
</div> </div>
<div *ngIf="activeSubCategory" class="uk-section"> <div *ngIf="activeSubCategory" class="uk-section-small">
<div *ngIf="countSelectedFilters() > 0" class="uk-margin-bottom uk-flex uk-flex-center uk-grid-small" uk-grid> <div *ngIf="activeSubCategory.description" [innerHTML]="activeSubCategory.description" class="uk-margin-medium-bottom">
<span class="uk-width-auto uk-text-meta"> Active filters:</span> </div>
<div class="uk-width-expand"> <div [class.uk-margin-large-bottom]="activeSubCategory.numbers.length > 0 && !tabs">
<ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container> <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
</div> <div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid
<a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-left uk-width-auto" (click)="clearAll()"> Clear All </a> uk-height-match="target: .uk-card">
</div> <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;"> <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid uk-height-match="target: .uk-card"> <div *ngIf="hasPermission(indicator.visibility)"
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5> [ngClass]="getNumberClassBySize(indicator.width)">
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
<div *ngIf="hasPermission(indicator.visibility)" [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
[ngClass]="getNumberClassBySize(indicator.width)"> <div *ngIf="!indicator.overlay">
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative" <div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> <div class="number uk-text-small uk-text-bold">
<div *ngIf="!indicator.overlay"> <span *ngIf="numberResults.get(i + '-' + j)"
<div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div> [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
<div class="number uk-text-small uk-text-bold"> <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
<span *ngIf="numberResults.get(i + '-' + j)" </div>
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span> <div *ngIf="indicator.description || indicator.additionalDescription"
<span *ngIf="!numberResults.get(i + '-' + j)">--</span> class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
<a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note"
(click)="changeOverlay($event, indicator, 'description')">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
</span>
</a>
</div>
</div> </div>
<div *ngIf="indicator.description || indicator.additionalDescription" <div *ngIf="indicator.overlay && (indicator.description || indicator.additionalDescription)"
class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m"> click-outside-or-esc class="uk-overflow-auto"
<a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note" (clickOutside)="closeOverlay($event, indicator)">
(click)="changeOverlay($event, indicator, 'description')"> <div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
<span class="uk-flex uk-flex-middle"> <a class="uk-display-inline-block uk-button uk-button-link"
<icon name="analytics" type="outlined" [flex]="true"></icon> (click)="changeOverlay($event, indicator, false)">
</span> <span class="uk-flex uk-flex-middle">
</a> <icon name="close" type="outlined" [flex]="true"></icon>
</div> </span>
</div> </a>
<div *ngIf="indicator.overlay && (indicator.description || indicator.additionalDescription)" click-outside-or-esc class="uk-overflow-auto" (clickOutside)="closeOverlay($event, indicator)"> </div>
<div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right"> <div class="uk-margin-small-top uk-margin-right">
<a class="uk-display-inline-block uk-button uk-button-link" <p *ngIf="indicator.description">
(click)="changeOverlay($event, indicator, false)"> {{indicator.description}}
<span class="uk-flex uk-flex-middle"> </p>
<icon name="close" type="outlined" [flex]="true"></icon> <p *ngIf="indicator.additionalDescription">
</span> {{indicator.additionalDescription}}
</a> </p>
</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>
</div>
</div>
</div>
</ng-template>
</div>
<div *ngIf="isMobile">
<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()">
<div *ngIf="!indicator.overlay">
<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)"
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</ng-template> </div>
</ng-template>
</div>
<div *ngIf="isMobile">
<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()">
<div *ngIf="!indicator.overlay">
<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)"
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</div> </div>
</div> </div>
</div> </ng-container>
</ng-container> </div>
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;"> <div [class.section-container]="tabs">
<div class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid <ul *ngIf="tabs" class="tabs">
uk-height-match="target: .uk-card"> <li *ngFor="let tab of activeSubCategory.charts; let i = index;" [class.uk-active]="i === activeChartSectionIndex"
<h5 *ngIf="chart.title && !isMobile" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5> (click)="changeSection(i)" class="uk-text-truncate" [attr.uk-tooltip]="getSectionTitle(tab)">
<h6 *ngIf="chart.title && isMobile" class="uk-width-1-1">{{chart.title}}</h6> {{getSectionTitle(tab)}}
</li>
</ul>
<div *ngIf="chart" 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 && !tabs" class="uk-width-1-1 uk-margin-bottom">{{getSectionTitle(chart)}}</h5>
<div *ngIf="getSectionDescription(chart)" class="uk-width-1-1 uk-margin-bottom">{{getSectionDescription(chart)}}</div>
<h6 *ngIf="chart.title && isMobile && !tabs" class="uk-width-1-1">{{getSectionTitle(chart)}}</h6>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(i + '-' + j)" <div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(activeChartSectionIndex + '-' + j)"
[ngClass]="getChartClassBySize(indicator.width)"> [ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-position-relative" <div class="uk-card uk-card-default uk-position-relative"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"> [class.semiFiltered]="chartsActiveType.get(activeChartSectionIndex + '-' + j).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center uk-margin-small-bottom"> <div class="uk-card-body uk-text-center uk-margin-small-bottom">
<h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom"> <h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
{{indicator.name + " "}} {{indicator.name + " "}}
@ -112,87 +126,92 @@
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group"> <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
<button *ngFor="let indicatorPath of indicator.indicatorPaths;" <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
class="uk-button" class="uk-button"
(click)="setActiveChart(i, j, indicatorPath.type)" (click)="setActiveChart(activeChartSectionIndex, j, indicatorPath.type)"
[class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url"> [class.uk-button-secondary]="chartsActiveType.get(activeChartSectionIndex + '-' + j).url === indicatorPath.url">
{{indicatorPath.type}} {{indicatorPath.type}}
</button> </button>
</div> </div>
<iframe [class.uk-blend-multiply]="!isFullscreen" <iframe [class.uk-blend-multiply]="!isFullscreen"
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'" *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(activeChartSectionIndex + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl" [src]="chartsActiveType.get(activeChartSectionIndex + '-' + j).safeResourceUrl"
class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true" class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe> [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"> <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(activeChartSectionIndex + '-' + j).source !== 'image'">
<img class="uk-width-1-1 uk-blend-multiply" <img class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
src="assets/chart-placeholder.png"> src="assets/chart-placeholder.png">
</div> </div>
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'" <img *ngIf="chartsActiveType.get(activeChartSectionIndex + '-' + j).source === 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl" [src]="chartsActiveType.get(activeChartSectionIndex + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply" class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"> [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
</div> </div>
<div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m"> <div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
<a *ngIf="indicator.description || indicator.additionalDescription" <a *ngIf="indicator.description || indicator.additionalDescription"
class="uk-display-inline-block uk-button uk-button-link uk-margin-right" class="uk-display-inline-block uk-button uk-button-link uk-margin-right"
(click)="changeOverlay($event, indicator, 'description')"> (click)="changeOverlay($event, indicator, 'description')">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon> <icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Note</span> <span class="uk-margin-xsmall-left">Note</span>
</span> </span>
</a> </a>
<a class="uk-display-inline-block uk-button uk-button-link" <a class="uk-display-inline-block uk-button uk-button-link"
(click)="changeOverlay($event, indicator, 'embed')"> (click)="changeOverlay($event, indicator, 'embed')">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<icon name="code" type="outlined" [flex]="true"></icon> <icon name="code" type="outlined" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Embed</span> <span class="uk-margin-xsmall-left">Embed</span>
</span> </span>
</a> </a>
</div> </div>
<div *ngIf="indicator.overlay" class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center"> <div *ngIf="indicator.overlay"
<div *ngIf="indicator.overlay == 'description'" class="inner" click-outside-or-esc class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
(clickOutside)="closeOverlay($event, indicator)"> <div *ngIf="indicator.overlay == 'description'" class="inner" click-outside-or-esc
<div class="uk-padding-small"> (clickOutside)="closeOverlay($event, indicator)">
<div class="uk-flex uk-flex-right"> <div class="uk-padding-small">
<button class="uk-close uk-icon" (click)="changeOverlay($event, indicator, false)"> <div class="uk-flex uk-flex-right">
<icon name="close" ratio="1"></icon> <button class="uk-close uk-icon"
</button> (click)="changeOverlay($event, indicator, false)">
</div> <icon name="close" ratio="1"></icon>
<div class="uk-padding-small uk-padding-remove-horizontal"> </button>
<p *ngIf="indicator.description"> </div>
{{indicator.description}} <div class="uk-padding-small uk-padding-remove-horizontal">
</p> <p *ngIf="indicator.description">
<p *ngIf="indicator.additionalDescription"> {{indicator.description}}
{{indicator.additionalDescription}} </p>
</p> <p *ngIf="indicator.additionalDescription">
</div> {{indicator.additionalDescription}}
</p>
</div>
</div>
</div> </div>
</div> <div *ngIf="indicator.overlay === 'embed'" class="inner" click-outside-or-esc
<div *ngIf="indicator.overlay === 'embed'" class="inner" click-outside-or-esc (clickOutside)="closeOverlay($event, indicator)">
(clickOutside)="closeOverlay($event, indicator)"> <div class="uk-padding-small">
<div class="uk-padding-small"> <div class="uk-flex uk-flex-right">
<div class="uk-flex uk-flex-right"> <button class="uk-close uk-icon"
<button class="uk-close uk-icon" (click)="changeOverlay($event, indicator, false)"> (click)="changeOverlay($event, indicator, false)">
<icon name="close" ratio="1"></icon> <icon name="close" ratio="1"></icon>
</button> </button>
</div> </div>
<div class="clipboard-wrapper uk-margin-top uk-margin-bottom"> <div class="clipboard-wrapper uk-margin-top uk-margin-bottom">
<pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{chartsActiveType.get(i + '-' + j).safeResourceUrl.changingThisBreaksApplicationSecurity}}" <br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre> <pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{chartsActiveType.get(activeChartSectionIndex + '-' + j).safeResourceUrl.changingThisBreaksApplicationSecurity}}
</div> " <br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre>
<div class="uk-flex uk-flex-right"> </div>
<a class="uk-link-reset copy clipboard_btn" data-clipboard-target="#embed_content_id" title="Copy code"> <div class="uk-flex uk-flex-right">
<icon [flex]="true" name="content_copy"></icon> <a class="uk-link-reset copy clipboard_btn"
</a> data-clipboard-target="#embed_content_id" title="Copy code">
</div> <icon [flex]="true" name="content_copy"></icon>
</a>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="printGap uk-hidden"></div> <div class="printGap uk-hidden"></div>
</ng-template> </ng-template>
</div> </div>
</ng-container> </div>
</div> </div>
</div> </div>
</div> </div>
@ -215,40 +234,45 @@
<div> <div>
<div class="uk-flex uk-flex-middle uk-margin-bottom"> <div class="uk-flex uk-flex-middle uk-margin-bottom">
<h4 class="uk-margin-remove-bottom">Filters</h4> <h4 class="uk-margin-remove-bottom">Filters</h4>
<a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-left" (click)="clearAll()"> Clear All </a> <a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-left" (click)="clearAll()"> Clear
All </a>
</div> </div>
<div> <div>
<ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container> <ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
<ul class="uk-list uk-list-xlarge uk-list-divider uk-margin-top"> <ul class="uk-list uk-list-xlarge uk-list-divider uk-margin-top">
<li> <li>
<range-filter #rangeFilter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear" <range-filter #rangeFilter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear"
[mandatoryRange]="true" [mandatoryRange]="true"
(onFilterChange)="filter()"></range-filter> (onFilterChange)="filter()"></range-filter>
</li>
<ng-container *ngFor="let filter of filters ">
<li *ngIf="filter.values.length >0">
<a *ngIf="filter.filterId == 'fos'" class="uk-float-right" href="https://explore.openaire.eu/fields-of-science" target="_blank" uk-tooltip="title:More information about Fields of Science"><span uk-icon="info"></span></a>
<search-filter [filter]="filter" [showResultCount]=false
(onFilterChange)="filterChanged($event)"></search-filter>
</li> </li>
</ng-container> <ng-container *ngFor="let filter of filters ">
</ul> <li *ngIf="filter.values.length >0">
<i *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-medium-top uk-text-small uk-display-block"> <a *ngIf="filter.filterId == 'fos'" class="uk-float-right"
<sup>*</sup> If your filter selection cannot be applied to a chart, that chart will appear grayed-out. href="https://explore.openaire.eu/fields-of-science" target="_blank"
</i> uk-tooltip="title:More information about Fields of Science"><span uk-icon="info"></span></a>
</div> <search-filter [filter]="filter" [showResultCount]=false
(onFilterChange)="filterChanged($event)"></search-filter>
</li>
</ng-container>
</ul>
<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>
</div>
</div> </div>
</div> </div>
</div> </div>
<ng-template #selected_filters_pills> <ng-template #selected_filters_pills>
<div class="uk-slider filters-slider" uk-slider="finite: true"> <div class="uk-slider filters-slider" uk-slider="finite: true">
<div [class.uk-invisible]="list.children.length === 0" class="uk-position-relative"> <div [class.uk-invisible]="list.children.length === 0" class="uk-position-relative">
<div class="uk-slider-container" style="height: 40px"> <div class="uk-slider-container" style="height: 30px">
<ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap"> <ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap">
<li *ngIf="periodFilter.selectedFromAndToValues.length > 0"> <li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle"> <span class="uk-label uk-label-small uk-label-secondary uk-flex uk-flex-middle">
<span <span
class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span> class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon" <button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon"
[disabled]="loading"> [disabled]="loading">
<icon name="close" flex="true" ratio="0.7"></icon> <icon name="close" flex="true" ratio="0.7"></icon>
@ -260,22 +284,23 @@
<ng-container *ngFor="let value of filter.values; let i = index;"> <ng-container *ngFor="let value of filter.values; let i = index;">
<ng-container *ngIf="value.selected"> <ng-container *ngIf="value.selected">
<li> <li>
<span class="uk-label uk-label-primary uk-flex uk-flex-middle"> <span class="uk-label uk-label-small uk-label-secondary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate"> <span class="uk-margin-small-right uk-width-expand uk-text-truncate">
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean"> <ng-container
{{filter.title}}: *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
{{(value.name=='true'||value.name=='Yes')?'Yes':'No'}} {{filter.title}}:
</ng-container> {{(value.name == 'true' || value.name == 'Yes') ? 'Yes' : 'No'}}
<ng-template #noboolean> </ng-container>
{{value.name}} <ng-template #noboolean>
</ng-template> {{value.name}}
</span> </ng-template>
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)" </span>
class="uk-close uk-icon" [disabled]="loading"> <button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)"
<icon name="close" flex="true" ratio="0.7"></icon> class="uk-close uk-icon" [disabled]="loading">
</button> <icon name="close" flex="true" ratio="0.7"></icon>
</span> </button>
</span>
</li> </li>
</ng-container> </ng-container>
</ng-container> </ng-container>

27
src/app/shared/monitor/monitor.component.ts
View File

@ -7,7 +7,7 @@ import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/si
import {StatisticsService} from "../../openaireLibrary/monitor-admin/utils/services/statistics.service"; import {StatisticsService} from "../../openaireLibrary/monitor-admin/utils/services/statistics.service";
import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service"; import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
import {UserManagementService} from "../../openaireLibrary/services/user-management.service"; import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
import {IndicatorPath, Visibility} from "../../openaireLibrary/monitor/entities/stakeholder"; import {IndicatorPath, Section, Visibility} from "../../openaireLibrary/monitor/entities/stakeholder";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service"; import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service"; import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
@ -22,6 +22,7 @@ import {SearchFields} from "../../openaireLibrary/utils/properties/searchFields"
templateUrl: 'monitor.component.html' templateUrl: 'monitor.component.html'
}) })
export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent { export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
activeChartSectionIndex: number = 0;
constructor(protected _route: ActivatedRoute, constructor(protected _route: ActivatedRoute,
protected _router: Router, protected _router: Router,
@ -85,9 +86,6 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
hasPermission(visibility: Visibility): boolean { hasPermission(visibility: Visibility): boolean {
return true; return true;
} }
logIn() {
this.userManagementService.login();
}
postProcessingFosFilters(refineFilters:Filter[]){ postProcessingFosFilters(refineFilters:Filter[]){
let filters:Filter[] = []; let filters:Filter[] = [];
@ -128,4 +126,25 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
filters.push(publiclyFunded) filters.push(publiclyFunded)
return filters; return filters;
} }
get tabs() {
return this.activeSubCategory.charts.length > 1;
}
get chart(): Section {
return this.activeSubCategory.charts[this.activeChartSectionIndex];
}
changeSection(index: number) {
this.activeChartSectionIndex = index;
this.cdr.detectChanges();
}
getSectionTitle(section: Section) {
return section?.title?section.title.split('::')[0]:null;
}
getSectionDescription(section: Section) {
return section?.title?section.title.split('::')[1]:null;
}
} }

1
src/app/shared/monitor/monitor.module.ts
View File

@ -22,7 +22,6 @@ import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module"
{path: ':topic/:category/:subCategory', component: MonitorComponent} {path: ':topic/:category/:subCategory', component: MonitorComponent}
]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule, RangeFilterModule, SearchFilterModule, SliderUtilsModule, LoadingModule], ]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule, RangeFilterModule, SearchFilterModule, SliderUtilsModule, LoadingModule],
declarations: [MonitorComponent], declarations: [MonitorComponent],
exports: [MonitorComponent]
}) })
export class MonitorModule { export class MonitorModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit ee22e97b114be823b7ab4e6c41a9cbff93b24e3a Subproject commit 6cef9ebed0db7ecbcca023bae824239106907960

8
src/assets/extend-theme/less/_import.less vendored
View File

@ -7,9 +7,15 @@
@import "button"; @import "button";
@import "progress"; @import "progress";
// Layouts // Layout
@import "card"; @import "card";
// Common
@import "label";
// Javascript
@import "offcanvas";
// Navs // Navs
@import "navbar"; @import "navbar";

11
src/assets/extend-theme/less/label.less Normal file
View File

@ -0,0 +1,11 @@
@label-secondary-background: @irish-global-secondary-color;
@label-secondary-color: @global-inverse-color;
@label-secondary-border: @irish-global-secondary-color;
.hook-label-misc() {
.uk-label-secondary {
& .uk-close {
color: inherit !important;
}
}
}

1
src/assets/extend-theme/less/offcanvas.less Normal file
View File

@ -0,0 +1 @@
@offcanvas-count-background: @irish-global-secondary-color;