[develop | DONE | ADDED] Add filters in dashboards, add fos lvl1 &lvl2 filters

src/app/shared/monitor/monitor.component.html

@@ -164,3 +164,85 @@
         </div>
     </div>
 </div>
+<a *ngIf="stakeholder" href="#style_switcher" uk-toggle="" id="filters_switcher_toggle"
+   class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-link-reset">
+    <icon name="filters" ratio="1.5" visuallyHidden="Filters" gradient="filters_icon"></icon>
+    <span [class.uk-hidden]="countSelectedFilters() === 0"
+          class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
+    {{countSelectedFilters()}}
+  </span>
+</a>
+<div *ngIf="stakeholder" id="style_switcher" class="uk-offcanvas"
+     uk-offcanvas="flip:true; overlay: true">
+    <div class="uk-offcanvas-bar">
+        <div class="uk-float-right">
+            <button class="uk-offcanvas-close uk-close uk-icon" type="button">
+                <icon name="close" ratio="1.5" visuallyHidden="close"></icon>
+            </button>
+        </div>
+        <div>
+            <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>
+            </div>
+            <ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
+            <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-xlarge uk-list-divider  uk-margin-top">
+                <li>
+                    <range-filter #rangeFilter [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">
+                        <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>
+                </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>
+<ng-template #selected_filters_pills>
+    <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-slider-container" style="height: 40px">
+                <ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap">
+                    <li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
+                        <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
+                          <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"
+                                  [disabled]="loading">
+                            <icon name="close" flex="true" ratio="0.7"></icon>
+                          </button>
+                        </span>
+                    </li>
+                    <ng-container *ngFor="let filter of filters">
+                        <ng-container *ngIf="filter.countSelectedValues > 0">
+                            <ng-container *ngFor="let value of filter.values; let i = index;">
+                                <ng-container *ngIf="value.selected">
+                                    <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>
+                                </ng-container>
+                            </ng-container>
+                        </ng-container>
+                    </ng-container>
+                </ul>
+            </div>
+            <slider-arrow type="previous"></slider-arrow>
+            <slider-arrow type="next"></slider-arrow>
+        </div>
+    </div>
+</ng-template>

src/app/shared/monitor/monitor.component.ts

@@ -11,6 +11,10 @@ import {IndicatorPath, Visibility} from "../../openaireLibrary/monitor/entities/
 import {ActivatedRoute, Router} from "@angular/router";
 import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
 import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {SearchResearchResultsService} from "../../openaireLibrary/services/searchResearchResults.service";
+import {CustomFilterService} from "../customFilter.service";
+import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
+import {Filter} from "../../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
 
 @Component({
   selector: 'monitor',
@@ -28,6 +32,8 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
               protected cdr: ChangeDetectorRef,
               protected layoutService: LayoutService,
               protected statisticsService: StatisticsService,
+              protected searchResearchResultsService: SearchResearchResultsService,
+              protected customFilterService: CustomFilterService,
               private userManagementService: UserManagementService,
               private stakeholderService: StakeholderService) {
     super();
@@ -47,15 +53,32 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
         this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
           if (stakeholder) {
             this.stakeholder = stakeholder;
+
             this.subscriptions.push(this._route.queryParams.subscribe(queryParams => {
               this.handleQueryParams(queryParams, params);
+              this.subscriptions.push(this.customFilterService.getCustomFilterAsObservable().subscribe(filters => {
+                if(filters) {
+                  let customFilterParams = "";
+                  for (let customFilter of filters) {
+                    if (customFilter.isHiddenFilter) {
+                      customFilterParams += "&fq=" + StringUtils.URIEncode(customFilter.queryFieldName + " exact " + StringUtils.quote((customFilter.valueId)));
+                    }
+                  }
+                  this.subscriptions.push(this.searchResearchResultsService.advancedSearchResults("publication", null, 1, 0, null, this.properties,
+                    "&refine=true&fields=fos&type=publications", ["fos"], customFilterParams).subscribe(res => {
+                    this.filters = this.postProcessingFosFilters(res[2]);
                     this.title = this.stakeholder.name;
                     this.description = this.stakeholder.name;
                     this.setMetadata();
                     this.setView(params);
                   }));
-          } else {
+
-            this.navigateToError();
+                }
+              }));
+
+            }));
+          // } else {
+            // this.navigateToError();
           }
         }));
       }));
@@ -65,4 +88,27 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
   hasPermission(visibility: Visibility): boolean {
     return true;
   }
+  logIn() {
+    this.userManagementService.login();
+  }
+
+  postProcessingFosFilters(refineFilters:Filter[]){
+    let filters:Filter[] = [];
+    for(let filter of refineFilters){
+      if(filter.filterId == "fos"){
+        let fos: Filter ={...filter};
+        fos.values = [];
+        for(let value of filter.values){
+          let code = value.id.split(" ")[0];
+          if(code.length <= 4){
+            fos.values.push(value);
+          }
+        }
+        filters.push(fos);
+      }else{
+        filters.push(filter);
+      }
+    }
+    return filters;
+  }
 }

src/app/shared/monitor/monitor.module.ts

@@ -7,6 +7,10 @@ import {SliderTabsModule} from "../../openaireLibrary/sharedComponents/tabs/slid
 import {NumberRoundModule} from "../../openaireLibrary/utils/pipes/number-round.module";
 import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
 import {ClickModule} from "../../openaireLibrary/utils/click/click.module";
+import {RangeFilterModule} from "../../openaireLibrary/utils/rangeFilter/rangeFilter.module";
+import {SearchFilterModule} from "../../openaireLibrary/searchPages/searchUtils/searchFilter.module";
+import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
+import {filters} from "../../openaireLibrary/utils/icons/icons";
 
 @NgModule({
   imports: [CommonModule, RouterModule.forChild([
@@ -14,10 +18,12 @@ import {ClickModule} from "../../openaireLibrary/utils/click/click.module";
     {path: ':topic/', component: MonitorComponent},
     {path: ':topic/:category', component: MonitorComponent},
     {path: ':topic/:category/:subCategory', component: MonitorComponent}
-  ]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule],
+  ]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule, RangeFilterModule, SearchFilterModule],
   declarations: [MonitorComponent],
   exports: [MonitorComponent]
 })
 export class MonitorModule {
-
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([ filters]);
+  }
 }

src/assets/irish-monitor.less

@@ -65,3 +65,10 @@
 svg .a {
   opacity: 1 !important;
 }
+
+
+&.semiFiltered {
+  &, & > * > .highcharts-series-group {
+    opacity: 0.5;
+  }
+}