D-Net

    <dashboard-sidebar *ngIf="sideBar && stakeholder" [items]="sideBar.items"

                       [activeItem]="activeCategory?activeCategory.alias:null"

                       [activeSubItem]="activeSubCategory?activeSubCategory.alias:null" [showHeader]=false

    selector: 'monitor',

    templateUrl: 'monitor.component.html',

    public piwiksub: any;

    public pageContents = null;

    public divContents = null;

    public status: number;

    public loading: boolean = true;

    public indicatorUtils: IndicatorUtils = new IndicatorUtils();

    public stakeholderUtils: StakeholderUtils = new StakeholderUtils();

    public activeTopic: Topic = null;

    public activeCategory: Category = null;

    public activeSubCategory: SubCategory = null;

    public sideBar: Sidebar = null;

    public errorCodes: ErrorCodes;

    public stakeholder: Stakeholder;

    public numberResults: Map<number, number> = new Map<number, number>();

    public chartsActiveType: Map<number, IndicatorPath> = new Map<number, IndicatorPath>();

    private errorMessages: ErrorMessagesComponent;

    properties: EnvProperties;

    fundingL0;

    startYear;

    endYear;

    public keyword: FormControl;

    constructor(

        private route: ActivatedRoute,

        private _router: Router,

        private _meta: Meta,

        private _title: Title,

        private _piwikService: PiwikService,

        private helper: HelperService,

        private stakeholderService: StakeholderService,

        private statisticsService: StatisticsService,

        private layoutService: LayoutService,

        private seoService: SEOService,

        private cdr: ChangeDetectorRef,

        private sanitizer: DomSanitizer, private _fb: FormBuilder) {

        this.errorCodes = new ErrorCodes();

        this.errorMessages = new ErrorMessagesComponent();

        this.status = this.errorCodes.LOADING;

    }

    public ngOnInit() {

        this.keyword = this._fb.control('');

        this.keyword.valueChanges.subscribe(value => {

            console.log("KEyword Changed!");

            //TODO do a real action

        this.layoutService.setHasSidebar(false);

        this.layoutService.setHasHeader(false);

        this.route.data

            .subscribe((data: { envSpecific: EnvProperties }) => {

                this.route.params.subscribe(params => {

                    this.properties = data.envSpecific;

                    var url = data.envSpecific.baseLink + this._router.url;

                    if (!this.stakeholder || this.stakeholder.index_id !== params['stakeholder']) {

                        this.status = this.errorCodes.LOADING;

                        this.numberResults = new Map<number, number>();

                        this.chartsActiveType = new Map<number, IndicatorPath>();

                        // this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {

                        let stakeholder: Stakeholder = null;

                        if (params['stakeholder'] == "fwf") {

                            stakeholder = new Stakeholder("fwf", "funder", "fwf_________::FWF", "Austrian Science Fund (FWF)", "FWF",

                                false, "fwf", true, true, null);

                            stakeholder = this.stakeholderUtils.createFunderFromDefaultProfile(stakeholder, StakeholderCreator.createFunderDefaultProfile().topics);

                            stakeholder.logoUrl = "./assets/fwf.png";

                        } else if (params['stakeholder'] == "arc") {

                            stakeholder = new Stakeholder("arc", "funder", "arc_________::ARC",

                                "Australian Research Council (ARC)", "ARC",

                                false, "arc", true, true, null);

                            stakeholder = this.stakeholderUtils.createFunderFromDefaultProfile(stakeholder, StakeholderCreator.createFunderDefaultProfile().topics);

                            stakeholder.logoUrl = "./assets/arc1.gif";

                        } else {

                            stakeholder = new Stakeholder("ec", "funder", "ec__________::EC",

                                "European Commission", "EC",

                                false, "ec", true, true, null);

                            stakeholder = this.stakeholderUtils.createFunderFromDefaultProfile(stakeholder, StakeholderCreator.createFunderDefaultProfile().topics);

                            stakeholder.logoUrl = "./assets/ec.png";

                        }

                        if (stakeholder) {

                            this.stakeholder = stakeholder;

                            this.seoService.createLinkForCanonicalURL(url, false);

                            this._meta.updateTag({content: url}, "property='og:url'");

                            var description = "Monitor Dashboard | " + this.stakeholder.index_name;

                            var title = "Monitor Dashboard | " + this.stakeholder.index_shortName;

                            this._meta.updateTag({content: description}, "name='description'");

                            this._meta.updateTag({content: description}, "property='og:description'");

                            this._meta.updateTag({content: title}, "property='og:title'");

                            this._title.setTitle(title);

                            if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {

                                this.piwiksub = this._piwikService.trackView(this.properties, title, this.properties.piwikSiteId).subscribe();

                            }

                            //this.getDivContents();

                            this.getPageContents();

                            this.status = this.errorCodes.DONE;

                            this.setView(params);

                        }

                        // }, error => {

                        //   this.navigateToError();

                        // })

                    } else {

                        this.setView(params);

                    }

                });

            });

    }

    public get open() {

        return this.layoutService.open;

    }

    public toggleOpen(event = null) {

        if (!event) {

            this.layoutService.setOpen(!this.open);

        } else if (event && event['value'] === true) {

            this.layoutService.setOpen(false);

        }

    private getPageContents() {

        this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {

            this.pageContents = contents;

        })

    }

    private getDivContents() {

        this.helper.getDivHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {

            this.divContents = contents;

        })

    }

    private setView(params: Params) {

        if (params && params['topic']) {

            this.activeTopic = this.stakeholder.topics.

            find(topic => topic.alias === decodeURIComponent(params['topic']) && topic.isPublic && topic.isActive);

            if (this.activeTopic) {

                if (params['category']) {

                    this.activeCategory = this.activeTopic.categories.find(category =>

                        (category.alias === params['category']) && category.isPublic && category.isActive);

                } else {

                    this.activeCategory = this.activeTopic.categories.

                    find(category => category.isPublic && category.isActive);

                    if (this.activeCategory) {

                      this.activeSubCategory = this.activeCategory.subCategories.find(subCategory =>

                          subCategory.isPublic && subCategory.isActive);

                      if (this.activeSubCategory) {

                        this.setSideBar();

                        this.setIndicators();

                      } else {

                        this.navigateToError();

                      }

                    } else {

                        this.navigateToError();

                    }

                    return;

                }

                if (this.activeCategory) {

                    if (params['subCategory']) {

                        this.activeSubCategory = this.activeCategory.subCategories.find(subCategory =>

                            (subCategory.alias === params['subCategory'] && subCategory.isPublic && subCategory.isActive));

                    } else {

                        this.activeSubCategory = this.activeCategory.subCategories.find(subCategory =>

                            subCategory.isPublic && subCategory.isActive);

                    }

                    if (this.activeSubCategory) {

                        this.setSideBar();

                        this.setIndicators();

                    } else {

                       this.navigateToError();

                    }

                  return;

                }

            }

            this.navigateToError();

            this.activeTopic = this.stakeholder.topics.find(topic => topic.isPublic && topic.isActive);

            if(this.activeTopic) {

              this.activeCategory = this.activeTopic.categories.find(category => category.isPublic && category.isActive);

              if (this.activeCategory) {

                this.activeSubCategory = this.activeCategory.subCategories.find(subCategory => subCategory.isPublic && subCategory.isActive);

                if (this.activeSubCategory) {

                  this.setSideBar();

                  this.setIndicators();

                } else {

                  this.navigateToError();

                }

              } else {

                this.navigateToError();

              }

            } else {

              this.navigateToError();

            }

    private setSideBar() {

        let items: Item[] = [];

        this.activeTopic.categories.forEach(category => {

            if (category.isPublic && category.isActive) {

                let subItems: Item[] = [];

                category.subCategories.forEach(subCategory => {

                    if (subCategory.isPublic && subCategory.isActive) {

                        subItems.push(new Item(subCategory.alias, subCategory.name, (

                            '/' + this.stakeholder.alias + '/' + this.activeTopic.alias + '/' + category.alias + '/' + subCategory.alias),

                            null, null, false));

                    }

                });

                const open = this.activeCategory.alias === category.alias;

                items.push(new Item(category.alias, category.name, (

                    '/' + this.stakeholder.alias + '/' + this.activeTopic.alias + '/' + category.alias),

                    subItems, null, open));

            }

        this.sideBar = new Sidebar(items, null);

    }

    private setIndicators() {

        let urls: Map<string, number[]> = new Map<string, number[]>();

        this.activeSubCategory.numbers.forEach((number, index) => {

            if (number.isActive && number.isPublic) {

                let url = number.indicatorPaths[0].url;

                //add fundingLevel0 filter in the query

                if (this.fundingL0 && number.indicatorPaths[0].filters.get("fundingL0")) {

                    url = url + number.indicatorPaths[0].filters.get("fundingL0").replace(ChartHelper.prefix + 'fundingL0' + ChartHelper.suffix, encodeURIComponent(this.fundingL0));

                }

                const pair = JSON.stringify([number.indicatorPaths[0].source, url]);

                const indexes = urls.get(pair) ? urls.get(pair) : [];

                indexes.push(index);

                urls.set(pair, indexes);

        urls.forEach((indexes, pair) => {

            pair = JSON.parse(pair);

            this.statisticsService.getNumbers(pair[0], pair[1]).subscribe(response => {

                indexes.forEach(index => {

                    let result = JSON.parse(JSON.stringify(response));

                    this.activeSubCategory.numbers[index].indicatorPaths[0].jsonPath.forEach(jsonPath => {

                        if (result) {

                            result = result[jsonPath];

                        }

                    });

                    this.numberResults.set(index, result);

                });

            })

        });

        this.activeSubCategory.charts.forEach((chart, index) => {

            if (chart.indicatorPaths.length > 0) {

                chart.indicatorPaths[0].safeResourceUrl = this.getUrlByStakeHolder(chart.indicatorPaths[0]);

                this.chartsActiveType.set(index, chart.indicatorPaths[0]);

            }

        });

        this.cdr.detectChanges();

    }

    public getUrlByStakeHolder(indicatorPath: IndicatorPath) {

        return this.sanitizer.bypassSecurityTrustResourceUrl(

            this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath, this.fundingL0, this.startYear, this.endYear)));

    }

    public setActiveChart(index, type: string) {

        let activeChart = this.activeSubCategory.charts[index].indicatorPaths.filter(indicatorPath => indicatorPath.type === type)[0];

        activeChart.safeResourceUrl = this.getUrlByStakeHolder(activeChart);

        this.chartsActiveType.set(index, activeChart);

    }

    private navigateToError() {

        this._router.navigate(['/error'], {queryParams: {'page': this._router.url}});

    }

    public navigateTo(stakeholder: string, topic: string, category: string = null, subcategory: string = null) {

        let url = stakeholder + '/' + topic + ((category) ? ('/'

            + category) : '') + ((subcategory) ? ('/' + subcategory) : '');

        return this._router.navigate([url]);

    }

    public quote(param: string): string {

        return StringUtils.quote(param);

    }

    public ngOnDestroy() {

        if (this.piwiksub) {

            this.piwiksub.unsubscribe();

        }

  id: string;

  constructor(id: string, name: string, route: string, items: Item[], icon, open: boolean) {

    this.id = id;

  @Input() activeItem: string = '';

  @Input() activeSubItem: string = '';

  isTheActiveMenuItem(item: Item, subItem = false): boolean {

    return  (!subItem && this.activeItem === item.id) ||

        (subItem && this.activeSubItem === item.id);

        <li [class.current_section]="isTheActiveMenuItem(item)"

          <a *ngIf="item.items.length <= 1 && item.route" [routerLink]="!isTheActiveMenuItem(item)?item.route:null">

                <li *ngIf="subItem.route" [class.act_item]="isTheActiveMenuItem(subItem, true)">

                  <a [routerLink]="!isTheActiveMenuItem(subItem, true)?subItem.route:null">