D-Net

import { Component, OnInit } from '@angular/core';

import { Repository } from '../../domain/typeScriptClasses';

import { RepositoryService } from '../../services/repository.service';

import { AuthenticationService } from '../../services/authentication.service';

import { ActivatedRoute, Router } from '@angular/router';

@Component({

  selector: 'metrics-usagestats',

  templateUrl: 'metrics-usagestats.component.html'

})

export class MetricsUsagestatsComponent implements OnInit {

  errorMessage: string;

  title = 'Get usage statistics report';

  repo: Repository;

  repoId: string;

  constructor(private repoService: RepositoryService,

              private authService: AuthenticationService,

              private route: ActivatedRoute,

              private router: Router) {}

  ngOnInit() {

    this.getRepo();

    let body = document.getElementsByTagName('body')[0];

    body.classList.remove("top_bar_active");   //remove the class

    body.classList.remove("page_heading_active");

    body.classList.remove("landing");

    body.classList.add("dashboard");

  }

  getRepo() {

    this.repoId = this.route.snapshot.paramMap.get('id');

    if (this.repoId) {

      this.repoService.getRepositoryById(this.repoId).subscribe(

        repo => this.repo = repo,

        error => {

          console.log(error);

          this.errorMessage = 'The repository could not be retrieved';

        },

        () => {

          this.title = this.title + ' for ' + this.repo.officialName;

          console.log(this.authService.getUserEmail(), this.repo.registeredBy);

        }

      );

    }

  }

}

/**

 * Created by myrto on 11/27/17.

 */

import { NgModule } from '@angular/core';

import { TabsModule } from 'ngx-bootstrap';

import { CommonModule } from '@angular/common';

import { MetricsRouting } from './metrics.routing';

import { ReusableComponentsModule } from '../../shared/reusablecomponents/reusable-components.module';

import { ReactiveFormsModule } from '@angular/forms';

import { MetricsComponent } from './metrics.component';

import { MetricsEnableComponent } from './metrics-enable.component';

import { MetricsInstructionsComponent } from './metrics-instructions.component';

import { MetricsShowComponent } from './metrics-show.component';

import { MetricsUsagestatsComponent } from './metrics-usagestats.component';

import { MetricsUsagestatsReportComponent } from './metrics-usagestats-report.component';

import { MetricsUsagestatsReportResultsComponent } from './metrics-usagestats-report-results.component';

@NgModule ({

  imports: [

    CommonModule,

    TabsModule.forRoot(),

    MetricsRouting,

    ReusableComponentsModule,

    ReactiveFormsModule

  ],

  declarations: [

    MetricsComponent,

    MetricsEnableComponent,

    MetricsInstructionsComponent,

    MetricsShowComponent,

    MetricsUsagestatsComponent,

    MetricsUsagestatsReportComponent,

    MetricsUsagestatsReportResultsComponent

  ]

})

export class MetricsModule { }

import { Component, OnInit, ViewChild } from '@angular/core';

import { ActivatedRoute, Router } from '@angular/router';

import { ConfirmationDialogComponent } from '../../shared/reusablecomponents/confirmation-dialog.component';

import { PiwikService } from '../../services/piwik.service';

import { RepositoryService } from '../../services/repository.service';

import { PiwikInfo, Repository } from '../../domain/typeScriptClasses';

import { enabledMetricsError, enabledMetricsSuccess, enablingMetrics,

         loadingRepoError, loadingRepoMessage } from '../../domain/shared-messages';

import { AuthenticationService } from '../../services/authentication.service';

@Component ({

  selector: 'metrics-enable',

  templateUrl: 'metrics-enable.component.html'

})

export class MetricsEnableComponent implements OnInit {

  successMessage: string;

  errorMessage: string;

  loadingMessage: string;

  readonly analyticsUrl = 'https://analytics.openaire.eu/addsite.php?';

  readonly authenticationToken = '32846584f571be9b57488bf4088f30ea';  /* THE ACTUAL TOKEN WILL BE NEEDED EVENTUALLY!! */

  repo: Repository;

  oaId: string;

  modalTitle = 'Confirmation';

  modalButton = 'Yes, enable it';

  isModalShown: boolean;

  @ViewChild('confirmEnablingModal')

  public confirmEnablingModal: ConfirmationDialogComponent;

  constructor (

    private route: ActivatedRoute,

    private router: Router,

    private authService: AuthenticationService,

    private piwikService: PiwikService,

    private repoService: RepositoryService

  ) {}

  ngOnInit() {

    this.getRepo();

    this.isModalShown = false;

    let body = document.getElementsByTagName('body')[0];

    body.classList.remove("top_bar_active");   //remove the class

    body.classList.remove("page_heading_active");

    body.classList.remove("landing");

    body.classList.add("dashboard");

  }

  getRepo(): void {

    const id = this.route.snapshot.paramMap.get('id');

    this.loadingMessage = loadingRepoMessage;

    this.repoService.getRepositoryById(id).subscribe(

      repo => {

        this.repo = repo;

      },

      error => {

        console.log(error);

        this.errorMessage = loadingRepoError;

        this.loadingMessage = '';

      }, () => {

        if (this.repo) {

          this.getOAid();

        }

        this.loadingMessage = '';

      }

    );

  }

  getOAid () {

    this.piwikService.getOpenaireId(this.repo.id).subscribe(

      id => {

        this.oaId = id;

        console.log(`getOpenaireId responded: ${this.oaId}`);

      },

      error => console.log(`ERROR is ${error}`)

    );

  }

  confirmEnabling() {

    if (this.repo) {

      this.confirmEnablingModal.showModal();

    }

  }

  confirmedEnabling(event: any) {

    if (this.repo) {

      this.loadingMessage = enablingMetrics;

      const piwik: PiwikInfo = {

        repositoryId: this.repo.id,

        openaireId: this.oaId,

        repositoryName: this.repo.officialName,

        country: this.repo.countryName,

        siteId: '',

        authenticationToken: this.authenticationToken,

        creationDate: null,

        requestorName: this.authService.getUserName(),

        requestorEmail: this.authService.getUserEmail(),

        validated: false,

        validationDate: null,

        comment: ''

      };

      this.piwikService.enableMetricsForRepository(this.repo.officialName, this.repo.websiteUrl, piwik).subscribe(

        response => {

          console.log(`enableMetrics answered: ${response}`);

          this.successMessage = enabledMetricsSuccess;

          this.loadingMessage = '';

        },

        error => {

          console.log(error);

          this.errorMessage = enabledMetricsError;

          this.loadingMessage = '';

        },

        () => {

          this.router.navigate([`/getImpact/instructions/${this.repo.id}`]);

        }

      );

    }

  }

}

/**

 * Created by myrto on 11/27/17.

 */

import { RouterModule, Routes } from '@angular/router';

import { MetricsComponent } from './metrics.component';

import { MetricsEnableComponent } from './metrics-enable.component';

import { MetricsShowComponent } from './metrics-show.component';

import { MetricsInstructionsComponent } from './metrics-instructions.component';

import { MetricsUsagestatsComponent } from './metrics-usagestats.component';

import { MetricsUsagestatsReportComponent } from './metrics-usagestats-report.component';

import { MetricsUsagestatsReportResultsComponent } from './metrics-usagestats-report-results.component';

import { NgModule } from '@angular/core';

const metricsRoutes: Routes = [

    {

      path: '',

      component: MetricsComponent

    },

    {

      path: 'enable/:id',

      component: MetricsEnableComponent

    },

    {

      path: 'show_metrics/:id',

      component: MetricsShowComponent

    },

    {

      path: 'instructions/:id',

      component: MetricsInstructionsComponent

    },

    {

      path: 'usagestats/:id',

      component: MetricsUsagestatsComponent

    },

    {

      path: 'usagestats/:id/:reportID',

      component: MetricsUsagestatsReportComponent

    },

    {

      path: 'usagestats-report-results',

      component: MetricsUsagestatsReportResultsComponent

    }

];

@NgModule ({

  imports: [RouterModule.forChild(metricsRoutes)],

  exports: [RouterModule]

})

export class MetricsRouting {}

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { AuthenticationService } from '../../services/authentication.service';

import { UsagestatsService } from '../../services/usagestats.service';

import { ReportResponse } from '../../domain/usageStatsClasses';

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({

  selector: 'metrics-usagestats-report-results',

  templateUrl: 'metrics-usagestats-report-results.component.html',

  styleUrls: ['metrics-usagestats-report-results.component.css']

})

export class MetricsUsagestatsReportResultsComponent implements OnInit {

  loadingMessage: string;

  errorMessage: string;

  infoMessage: string;

  repoResponse: ReportResponse;

  coveredPeriod: string;

  params: URLSearchParams;

  page: number;

  pageSize: number;

  totalPages: number;

  selectedItemIndex: number;

  pageSizeSelect: FormGroup;

  chosenReport: string;

  constructor(private route: ActivatedRoute,

              private authService: AuthenticationService,

              private usageService: UsagestatsService,

              private fb: FormBuilder) {}

  ngOnInit() {

    this.page = 0;

    this.pageSize = 10;

    this.readParams();

    this.pageSizeSelect = this.fb.group({selectPageSize: ['']});

    let body = document.getElementsByTagName('body')[0];

    body.classList.remove("top_bar_active");   //remove the class

    body.classList.remove("page_heading_active");

    body.classList.remove("landing");

    body.classList.add("dashboard");

  }

  readParams() {

    this.params = new URLSearchParams();

    this.route.queryParams.subscribe( qparams => {

      this.params.append('Report', qparams['report']);

      this.params.append('Release', '4');

      this.params.append('RequestorID', this.authService.getUserEmail());

      this.params.append('BeginDate', qparams['beginDate']);

      this.params.append('EndDate', qparams['endDate']);

      this.params.append('RepositoryIdentifier', qparams['repoId']);

      this.params.append('ItemIdentifier', qparams['itemIdentifier']);

      this.params.append('ItemDataType', qparams['itemIdentifier']);

      this.params.append('Granularity', qparams['granularity']);

    });

    this.chosenReport = this.params.get('Report');

    this.getReportResponse();

  }

  getReportResponse() {

    this.errorMessage = '';

    this.loadingMessage = 'Loading results...';

    this.infoMessage = '';

    this.selectedItemIndex = null;

    this.repoResponse = null;

    this.usageService.getReportResponse(this.page.toString(), this.pageSize.toString(), this.params).subscribe(

      responseWrapper => {

        this.repoResponse = responseWrapper.ReportResponse;

      },

      error => {

        this.errorMessage = 'Failed to load the report results!';

        this.loadingMessage = '';

      },

      () => {

        this.errorMessage = '';

        this.loadingMessage = '';

        this.pageSizeSelect.get('selectPageSize').setValue(this.pageSize);

        this.pageSizeSelect.get('selectPageSize').updateValueAndValidity();

        this.totalPages = Math.ceil(

          +this.repoResponse.ReportDefinition.Filters

                  .ReportAttribute.filter(x => x['Name'] === 'ReportItemCount')[0].Value / this.pageSize);

        if ( this.totalPages === 0 ) {

          this.infoMessage = 'No results were found';

        }

        if (this.repoResponse.ReportDefinition && this.repoResponse.ReportDefinition.Filters &&

            this.repoResponse.ReportDefinition.Filters.ReportAttribute) {

          if (this.repoResponse.Report && this.repoResponse.ReportDefinition.Filters.UsageDateRange &&

            this.repoResponse.ReportDefinition.Filters.UsageDateRange.Begin &&

            this.repoResponse.ReportDefinition.Filters.UsageDateRange.End) {

            this.coveredPeriod = this.repoResponse.ReportDefinition.Filters.UsageDateRange.Begin + ' to ';

            this.coveredPeriod = this.coveredPeriod + this.repoResponse.ReportDefinition.Filters.UsageDateRange.End;

          } else {

            const defaultDatePeriod = this.repoResponse.Exception.filter(x => x['Message'] === 'Unspecified Date Arguments');

            this.coveredPeriod = defaultDatePeriod[0].Data.split(':')[1].trim() + ' to ';

            this.coveredPeriod = this.coveredPeriod + defaultDatePeriod[1].Data.split(':')[1].trim() + ' (default)';

          }

        } else {

          this.repoResponse = null;

        }

      }

    );

  }

  getPageSize() {

    this.pageSize = +(this.pageSizeSelect.get('selectPageSize').value);

    this.page = 0;

    this.getReportResponse();

  }

  goToNextPage() {

    if ( (this.page + 1) < this.totalPages) {

      this.page++;

      console.log(`Get me page ${this.page}!`);

      this.getReportResponse();

    }

  }

  goToPreviousPage() {

    if (this.page > 0) {

      this.page--;

      console.log(`Get me page ${this.page}!`);

      this.getReportResponse();

    }

  }

  displayItemPerformance(i: number) {

    if (this.selectedItemIndex === i) {

      this.selectedItemIndex = null;

    } else {

      this.selectedItemIndex = i;

    }

  }

  transformItem(itemIdentifiers: any[]) {

    let field: string;

    if (this.chosenReport === 'RR1') {

      field = 'URL';

    } else {

      field = 'URLs';

    }

    const i = itemIdentifiers.findIndex(x => x['Type'] === field);

    if ( i > -1 ) {

      const urls = itemIdentifiers[i]['Value'];

      return urls.split(';');

    }

    return '';

  }

}

import { Component, OnInit } from '@angular/core';

import { Repository } from '../../domain/typeScriptClasses';

import { ActivatedRoute, Router } from '@angular/router';

import { RepositoryService } from '../../services/repository.service';

import { AuthenticationService } from '../../services/authentication.service';

import { loadingRepoMessage } from '../../domain/shared-messages';

@Component({

  selector: 'metrics-usagestats-report',

  templateUrl: './metrics-usagestats-report.component.html'

})

export class MetricsUsagestatsReportComponent implements OnInit {

  errorMessage: string;

  loadingMessage: string;

  title: string;

  repo: Repository;

  repoId: string;

  shownRepoId: string;

  shownOpenaireId: string;

  useCurrentRepo: boolean;

  issnToShow = '';

  chosen_report: string;

  userEmail: string;

  beginDate = '';

  endDate = '';

  itemIdentifier = '';

  itemDataType = '';

  granularity = 'Monthly';

  constructor(private repoService: RepositoryService,

              private route: ActivatedRoute,

              private router: Router,

              private authService: AuthenticationService) {}

  ngOnInit() {

    this.getParams();

    this.getUserEmail();

    this.getRepo();

    let body = document.getElementsByTagName('body')[0];

    body.classList.remove("top_bar_active");   //remove the class

    body.classList.remove("page_heading_active");

    body.classList.remove("landing");

    body.classList.add("dashboard");

  }

  getParams() {

    this.repoId = this.route.snapshot.paramMap.get('id');

    this.chosen_report = this.route.snapshot.paramMap.get('reportID');

    this.shownRepoId = this.convertToDisplayedFormat(this.repoId);

    console.log(`shownRepoId is ${this.repoId}`);

    this.title = `${this.chosen_report} report`;

    if (this.chosen_report !== 'RR1') {

      this.useCurrentRepo = true;

    }

  }

  convertToDisplayedFormat(input: string) {

    const tempArray = this.repoId.split('____::');

    return tempArray[0] + ':' + tempArray[1];

  }

  getUserEmail() {

    this.userEmail = this.authService.getUserEmail();

  }

  getRepo() {

    this.loadingMessage = loadingRepoMessage;

    this.repoService.getRepositoryById(this.repoId).subscribe(

      repo => this.repo = repo,

      error => {

        console.log(error);

        this.loadingMessage = '';

          this.errorMessage = 'The repository could not be retrieved';

      },

      () => {

        this.loadingMessage = '';

        if (this.repo.piwikInfo) {

          this.shownOpenaireId = this.convertToDisplayedFormat(this.repo.piwikInfo.openaireId);

        }

        if (this.repo.issn && this.repo.issn !== 'null') {

          this.shownRepoId = this.repo.issn.slice(0, 4) + '-' + this.repo.issn.toString().slice(4);

        }

        this.title = `${this.chosen_report} report for ${this.repo.officialName}`;

      }

    );

  }

  updateBeginDate(event: any) {

    this.beginDate = event.target.value;

  }

  updateEndDate(event: any) {

    this.endDate = event.target.value;

  }

  updateItemDataType(event: any) {

    this.itemDataType = event.target.value;

  }

  updateItemIdentifier(event: any) {

    this.itemIdentifier = event.target.value;

  }

  updateGranularity(event: any) {

    this.granularity = event.target.value;

  }

  updateUseCurrentRepo(event: any) {

    this.useCurrentRepo = event.target.value;

  }

  goToReport() {

    if (!this.useCurrentRepo) { this.shownRepoId = ''; }

    this.router.navigate(['/getImpact/usagestats-report-results'], {

      queryParams: {

        report: this.chosen_report,

        beginDate: this.beginDate,

        endDate: this.endDate,

        repoId: this.shownRepoId,

        itemDataType: this.itemDataType,

        itemIdentifier: this.itemIdentifier,

        granularity: this.granularity

      }

    });

    /*const params = new URLSearchParams();

    params.append('Report', this.chosen_report);

    params.append('Release', '4');

    params.append('RequestorID', this.authService.getUserEmail());

    params.append('BeginDate', this.beginDate);

    params.append('EndDate', this.endDate);

    params.append('RepositoryIdentifier', this.shownRepoId);

    if (this.itemIdentifier) {

      params.append('ItemIdentifier', this.itemIdentifier);

    }

    if (this.itemDataType) {

      params.append('ItemDataType', this.itemDataType);

    }

    params.append('Pretty', 'Pretty');

    let url = `http://beta.services.openaire.eu/usagestats/sushilite/GetReport/?${params}`;

    console.log(`going to: ${url}`);

    window.location.href = url;*/

  }

}

.innerTable {

  padding: 50px;

}

.innerTable th, .innerTable td {

  padding: 11px 12px;

}

<div id="page_content">

  <div id="page_content_inner">

    <h2 class="heading_b uk-margin-bottom">{{ piwik ? piwik.repositoryName : 'Metrics'}}</h2>

    <!-- TOP HELP CONTENT -->

    <help-content #topHelperContent [position]="'top'"

                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

    <div class="uk-grid">

      <!-- LEFT HELP CONTENT -->

      <aside-help-content #leftHelperContent [position]="'left'"

                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

      <!-- MIDDLE -->

      <div class=" uk-width-expand@m">

        <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>

        <div *ngIf="loadingMessage" class="loading-big">

          <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

            {{ loadingMessage }}

          </div>

          <div class="transparentFilm"></div>

        </div>

        <div *ngIf="repoMetrics">

          <div class="uk-grid">

            <div class="uk-width-1-1">

              <div class="uk-float-right">

                <a class="uk-button uk-button-primary"

                   [routerLink]="['/getImpact/usagestats',repoId]" title="">Get statistics report</a>

              </div>

            </div>

          </div>

          <div class="uk-grid uk-grid-match uk-child-width-1-3@l uk-child-width-1-3@m uk-grid-medium uk-sortable sortable-handler" data-uk-sortable="" data-uk-grid-margin="">

            <div class="uk-row-first" style="">

              <div class="md-card">

                <div class="md-card-content">

                  <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_sale peity_data" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg class="peity" height="28" width="64"><polygon fill="#d1e4f6" points="0 27.5 0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5 64 27.5"></polygon><polyline fill="none" points="0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5" stroke="#0288d1" stroke-width="1" stroke-linecap="square"></polyline></svg></div>

                  <span class="uk-text-muted uk-text-small">views in OpenAIRE</span>

                  <h2 class="uk-margin-remove"><span class="countUpMe">{{ pageViews | number }}</span></h2>

                </div>

              </div>

            </div>

            <div style="">

              <div class="md-card">

                <div class="md-card-content">

                  <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_live peity_data" style="display: none;">3,5,2,10,2,7,0,2,8,8,7,2,4,8,0,6,6,7,9,5</span><svg class="peity" height="28" width="64"><polygon fill="#efebe9" points="0 27.5 0 19.4 3.3684210526315788 14 6.7368421052631575 22.1 10.105263157894736 0.5 13.473684210526315 22.1 16.842105263157894 8.600000000000001 20.210526315789473 27.5 23.57894736842105 22.1 26.94736842105263 5.899999999999999 30.31578947368421 5.899999999999999 33.68421052631579 8.600000000000001 37.05263157894737 22.1 40.421052631578945 16.7 43.78947368421052 5.899999999999999 47.1578947368421 27.5 50.526315789473685 11.3 53.89473684210526 11.3 57.263157894736835 8.600000000000001 60.63157894736842 3.1999999999999993 64 14 64 27.5"></polygon><polyline fill="none" points="0 19.4 3.3684210526315788 14 6.7368421052631575 22.1 10.105263157894736 0.5 13.473684210526315 22.1 16.842105263157894 8.600000000000001 20.210526315789473 27.5 23.57894736842105 22.1 26.94736842105263 5.899999999999999 30.31578947368421 5.899999999999999 33.68421052631579 8.600000000000001 37.05263157894737 22.1 40.421052631578945 16.7 43.78947368421052 5.899999999999999 47.1578947368421 27.5 50.526315789473685 11.3 53.89473684210526 11.3 57.263157894736835 8.600000000000001 60.63157894736842 3.1999999999999993 64 14" stroke="#5d4037" stroke-width="1" stroke-linecap="square"></polyline></svg></div>

                  <span class="uk-text-muted uk-text-small">views in local repository</span>

                  <h2 class="uk-margin-remove" id="peity_live_text">{{ totalViews | number }}

                    <span *ngIf="repoMetrics.metricsNumbers.total_openaire_views" class="comment">( {{ repoMetrics.metricsNumbers.total_openaire_views | number }} from OpenAIRE )</span></h2>

                </div>

              </div>

            </div>

            <div class="" style="">

              <div class="md-card">

                <div class="md-card-content">

                  <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_visitors peity_data" style="display: none;">5,3,9,6,5,9,7</span><svg class="peity" height="28" width="48"><rect data-value="5" fill="#d84315" x="1.3714285714285717" y="12.444444444444443" width="4.114285714285715" height="15.555555555555557"></rect><rect data-value="3" fill="#d84315" x="8.228571428571428" y="18.666666666666668" width="4.114285714285716" height="9.333333333333332"></rect><rect data-value="9" fill="#d84315" x="15.085714285714287" y="0" width="4.1142857142857086" height="28"></rect><rect data-value="6" fill="#d84315" x="21.942857142857147" y="9.333333333333336" width="4.114285714285707" height="18.666666666666664"></rect><rect data-value="5" fill="#d84315" x="28.800000000000004" y="12.444444444444443" width="4.114285714285707" height="15.555555555555557"></rect><rect data-value="9" fill="#d84315" x="35.65714285714286" y="0" width="4.114285714285707" height="28"></rect><rect data-value="7" fill="#d84315" x="42.51428571428572" y="6.222222222222221" width="4.114285714285707" height="21.77777777777778"></rect></svg></div>

                  <span class="uk-text-muted uk-text-small">downloads in local repository</span>

                  <h2 class="uk-margin-remove">{{ totalDownloads | number }}

                    <span *ngIf="repoMetrics.metricsNumbers.total_openaire_downloads" class="comment">( {{ repoMetrics.metricsNumbers.total_openaire_downloads | number }} from OpenAIRE )</span></h2>

                </div>

              </div>

            </div>

          </div>

          <div class="uk-grid">

            <div class="uk-width-1-1">

              <div class="md-card">

                <div class="md-card-content">

                  <iframe class="statsFrame" [src]="viewsUrl"></iframe>

                </div>

              </div>

            </div>

            <div class="uk-width-1-1 uk-margin-medium-top">

              <div class="md-card">

                <div class="md-card-content">

                  <iframe class="statsFrame" [src]="downloadsUrl"></iframe>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

      <!-- RIGHT HELP CONTENT -->

      <aside-help-content #rightHelperContent [position]="'right'"

                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

    </div>

    <!-- BOTTOM HELP CONTENT -->

    <help-content #bottomHelperContent [position]="'bottom'"

                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

  </div>

</div>

<div id="page_content">

  <div id="page_content_inner">

    <h2 class="heading_b uk-margin-bottom">{{ title }}</h2>

    <!-- TOP HELP CONTENT -->

    <help-content #topHelperContent [position]="'top'"

                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

    <div class="uk-grid">

      <!-- LEFT HELP CONTENT -->

      <aside-help-content #leftHelperContent [position]="'left'"

                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

      <!-- MIDDLE -->

      <div class=" uk-width-expand@m">

        <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{ errorMessage }}</div>

        <div *ngIf="repo">

          <h3>Supported Reports</h3>

          <div class="uk-grid uk-grid-match repositoryTypeSelection" data-uk-grid-margin="">

            <div class="uk-width-1-3@m uk-row-first">

              <div class="uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">

                <a [routerLink]="['AR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>

                <div class="uk-card-media-top">

                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_AR1.png" alt="" style="width: 100%;">

                </div>

                <div class="uk-card-body">

                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">

                    Article Report 1, number of successful article download requests by month and repository.

                  </h3>

                </div>

              </div>

            </div>

            <div class="uk-width-1-3@m">

              <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">

                <a [routerLink]="['IR1']" class="el-link uk-position-cover uk-margin-remove-adjacent" href=""></a>

                <div class="uk-card-media-top">

                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_IR1.png" alt="" style="width:100%;">

                </div>

                <div class="uk-card-body">

                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom" >

                    Item Report 1, number of successful item download requests by month and repository.

                  </h3>

                </div>

              </div>

            </div>

            <div class="uk-width-1-3@m">

              <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">

                <a [routerLink]="['RR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>

                <div class="uk-card-media-top">

                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_RR1.png" alt="" style="width:100%;">

                </div>

                <div class="uk-card-body">

                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">

                    Repository Report 1, number of successful item downloads for all repositories participating in the usage statistics service.

                  </h3>

                </div>

              </div>

            </div>

          </div>

          <div class="uk-grid uk-grid-match repositoryTypeSelection" data-uk-grid-margin="">

            <div class="uk-width-1-3@m uk-row-first">

              <div class="uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">

                <a [routerLink]="['BR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>

                <div class="uk-card-media-top">

                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_BR1.png" alt="" style="width: 100%;">

                </div>

                <div class="uk-card-body">

                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">

                    Book Report 1, number of successful title requests by month and title.

                  </h3>

                </div>

              </div>

            </div>

            <div class="uk-width-1-3@m">

              <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">

                <a [routerLink]="['BR2']" class="el-link uk-position-cover uk-margin-remove-adjacent" href=""></a>

                <div class="uk-card-media-top">

                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_BR2.png" alt="" style="width:100%;">

                </div>

                <div class="uk-card-body">

                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom" >

                    Book Report 2, number of successful section requests by month and title.

                  </h3>

                </div>

              </div>

            </div>

            <div *ngIf="repo.datasourceType === 'journal'" class="uk-width-1-3@m">

              <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">

                <a [routerLink]="['JR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>

                <div class="uk-card-media-top">

                  <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_JR1.png" alt="" style="width:100%;">

                </div>

                <div class="uk-card-body">

                  <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">

                    Journal Report 1, number of successful full-text article requests by month and journal.

                  </h3>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

      <!-- RIGHT HELP CONTENT -->

      <aside-help-content #rightHelperContent [position]="'right'"

                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

    </div>

    <!-- BOTTOM HELP CONTENT -->

    <help-content #bottomHelperContent [position]="'bottom'"

                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

  </div>

</div>

/**

 * Created by myrto on 11/27/17.

 */

import { Component, OnInit } from '@angular/core';

@Component ({

  selector: 'app-metrics',

  templateUrl: 'metrics.component.html'

})

export class MetricsComponent implements OnInit {

  tilesView: boolean = true;

  constructor() {}

  ngOnInit() {

    let body = document.getElementsByTagName('body')[0];

    body.classList.add("top_bar_active");   //add the class

    body.classList.remove("page_heading_active");

    body.classList.remove("landing");

    body.classList.add("dashboard");

  }

  changeView(view: string) {

    this.tilesView = (view == 'tiles');

  }

}

<div id="page_content">

  <div id="page_content_inner">

    <h2 class="heading_b uk-margin-bottom">Metrics for {{repo.officialName}}</h2>

    <!-- TOP HELP CONTENT -->

    <help-content #topHelperContent [position]="'top'"

                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

    <div class="uk-grid">

      <!-- LEFT HELP CONTENT -->

      <aside-help-content #leftHelperContent [position]="'left'"

                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

      <!-- MIDDLE -->

      <div class=" uk-width-expand@m">

        <div>

          <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>

          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>

          <div *ngIf="loadingMessage" class="loading-big">

            <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

              {{ loadingMessage }}

            </div>

            <div class="transparentFilm"></div>

          </div>

          <div *ngIf="repo && !loadingMessage">

            <div class="md-card">

              <div class="md-card-content large-padding">

                <div class="uk-article">

                  <p class="uk-article-lead uk-margin-bottom">You don't have metrics enabled for this repository yet. Would you like to enable them?</p>

                  <div class="uk-grid uk-margin-medium-top uk-margin-medium-bottom">

                    <figure class="uk-width-1-3 uk-first-column">

                      <img src="../../../assets/imgs/metricsWorkflow-new.svg" alt="" data-dense-cap="2" class="dense-image dense-ready">

                      <figcaption class="uk-thumbnail-caption">Usage stats enable workflow</figcaption>

                    </figure>

                    <div class="info uk-width-2-3">

                      <p>Once you select to enable metrics for your repository, the following steps need to be performed:</p>

                      <p><i>On your side</i><br>

                        1. Download the tracking code for your repository platform<br>

                        2. Configure the tracking code according to the instructions<br>

                        3. Deploy the tracking code in your repository platform

                      </p>

                      <p><i>On the OpenAIRE's side</i><br>

                        4. Validate the installation of the tracking code and inform the repository manager accordingly<br>

                      </p>

                    </div>

                  </div>

                  <blockquote>

                    For more details about the workflows and tools please consult the

                    <a target="_blank" href="https://openaire.github.io/usage-statistics-guidelines/">

                      “Guidelines for Collecting Usage Events and Provision of Usage Statistics”

                    </a>

                    .

                  </blockquote>

                  <button class="uk-button uk-button-primary uk-margin-top" (click)="confirmEnabling()">Enable Metrics</button>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

      <!-- RIGHT HELP CONTENT -->

      <aside-help-content #rightHelperContent [position]="'right'"

                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

    </div>

    <!-- BOTTOM HELP CONTENT -->

    <help-content #bottomHelperContent [position]="'bottom'"

                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

  </div>

</div>

<confirmation-dialog #confirmEnablingModal [title]="modalTitle" [isModalShown]="isModalShown"

                     [confirmActionButton]="modalButton" (emitObject)="confirmedEnabling($event)">

  Are you sure you want to enable metrics for this repository?

</confirmation-dialog>

/**

 * Created by myrto on 11/24/17.

 */

import { Component, OnInit } from '@angular/core';

import { PiwikInfo } from '../../domain/typeScriptClasses';

import { ActivatedRoute, Router } from '@angular/router';

import { PiwikService } from '../../services/piwik.service';

import { AuthenticationService } from '../../services/authentication.service';

@Component ({

  selector: 'app-metrics-instructions',

  templateUrl: 'metrics-instructions.component.html'

})

export class MetricsInstructionsComponent implements OnInit {

  piwik: PiwikInfo;

  errorMessage: string;

  constructor(

    private route: ActivatedRoute,

    private router: Router,

    private piwikService: PiwikService,

    private authService: AuthenticationService) {}

  ngOnInit() {

    this.getPiwik();

    let body = document.getElementsByTagName('body')[0];

    body.classList.remove("top_bar_active");   //remove the class

    body.classList.remove("page_heading_active");

    body.classList.remove("landing");

    body.classList.add("dashboard");

  }

  getPiwik(): void {

    const id = this.route.snapshot.paramMap.get('id');

    this.piwikService.getPiwikInfo(id).subscribe(

      piwik => this.piwik = piwik,

      error => console.log(error),

      () => {}

    );

  }

}

<div id="page_content">

  <div id="page_content_inner">

    <h2 class="heading_b uk-margin-bottom">Get usage statistics report</h2>

    <!-- TOP HELP CONTENT -->

    <help-content #topHelperContent [position]="'top'"

                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

    <div class="uk-grid">

      <!-- LEFT HELP CONTENT -->

      <aside-help-content #leftHelperContent [position]="'left'"

                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

      <!-- MIDDLE -->

      <div class=" uk-width-expand@m">

        <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{errorMessage}}</div>

        <div *ngIf="loadingMessage" class="loading-big">

          <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

            {{ loadingMessage }}

          </div>

          <div class="transparentFilm"></div>

        </div>

        <div *ngIf="repoResponse" class="md-card">

          <div class="md-card-content large-padding">

            <div class="uk-margin-bottom" data-uk-margin="">

              <div class="uk-grid">

                <div class="uk-width-4-5@m">

                  <h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results

                    <span *ngIf="repoResponse.Report &&

                              repoResponse.Report.Report &&

                              repoResponse.Report.Report.Customer &&

                              repoResponse.Report.Report.Customer.ReportItems &&

                              repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>

                  </h3>

                </div>

                <div class="uk-width-1-5@m">

                  <div [formGroup]="pageSizeSelect" class="md-input-wrapper md-input-filled">

                    <label class="">Results per page</label>

                    <select class="md-input" formControlName="selectPageSize" (change)="getPageSize()">

                      <option value="10" selected>10</option>

                      <option value="25">25</option>

                      <option value="50">50</option>

                      <option value="100">100</option>

                    </select>

                    <span class="md-input-bar"></span>

                  </div>

                </div>

              </div>

            </div>

            <hr>

            <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">

              <div class="uk-width-3-4@m uk-row-first">

                <!-- RESULTS TABLE -->

                <div class="uk-overflow-container">

                  <table class="uk-table table_check" style="overflow-wrap: anywhere;">

                    <thead>

                      <tr>

                        <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Title</th>

                        <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Publisher</th>

                        <th class="uk-width-1-6" *ngIf="chosenReport === 'RR1'">Platform name</th>

                        <th class="uk-width-1-6">{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>

                        <th class="uk-width-1-6">Type</th>

                        <th class="uk-width-1-6" colspan="2">Downloads/Views</th>

                        <!--<th class="uk-width-2-10">Repository</th>-->

                        <!--<th class="uk-width-1-10">Validation Type</th>-->

                        <!--<th class="uk-width-1-10">Status</th>-->

                        <!--<th class="uk-width-1-10">Score</th>-->

                        <!--<th class="uk-width-1-10">Started</th>-->

                        <!--<th class="uk-width-2-10">Guidelines</th>-->

                        <!--<th class="uk-width-1-10">Actions</th>-->

                        <!--<th class="uk-width-1-10"></th>-->

                      </tr>

                    </thead>

                    <tbody>

                      <tr *ngIf="infoMessage">

                        <td colspan="6">{{ infoMessage }}</td>

                      </tr>

                      <ng-container *ngIf="repoResponse?.Report?.Report?.Customer?.ReportItems">

                        <ng-container *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index">

                          <tr>

                            <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>

                            <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>

                            <td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>

                            <td>

                              <div *ngFor="let url of transformItem(item.ItemIdentifier); let i = index" class="uk-margin-small-bottom">

                                <!--<br *ngIf="i>0">-->

                                {{ url }}

                              </div>

                            </td>

                            <td>{{ item.ItemDataType }}</td>

                            <td class="uk-text-center"

                                *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">

                              <a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"

                                 (click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>

                            </td>

                            <td class="uk-text-center"

                                *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">

                              {{ item.ItemPerformance[0].Instance[0].Count }}

                            </td>

                            <td class="uk-text-center"

                                *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">

                              {{ item.ItemPerformance[0].Instance[1].Count }}

                            </td>

                          </tr>

                          <tr *ngIf="(selectedItemIndex === item_i)">

                            <td colspan="6">

                              <div class="uk-animation-slide-top-medium uk-margin-small-top">

                                <table class="uk-table uk-table-middle uk-table-striped innerTable uk-margin-small-top uk-margin-small-bottom">

                                  <tr>

                                    <th>Month</th>

                                    <th>Downloads</th>

                                    <th>Views</th>

                                  </tr>

                                  <tr *ngFor="let month of item.ItemPerformance">

                                    <td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>

                                    <td>{{ month.Instance[0].Count }}</td>

                                    <td>{{ month.Instance[1].Count }}</td>

                                  </tr>

                                </table>

                              </div>

                            </td>

                          </tr>

                        </ng-container>

                      </ng-container>

                    </tbody>

                  </table>

                </div>

                <!--<div>-->

                  <!--<div>-->

                    <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->

                      <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->

                        <!--<thead>-->

                        <!--<tr>-->

                          <!--<th *ngIf="chosenReport !== 'RR1'">Title</th>-->

                          <!--<th *ngIf="chosenReport !== 'RR1'">Publisher</th>-->

                          <!--<th *ngIf="chosenReport === 'RR1'">Platform name</th>-->

                          <!--<th>{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>-->

                          <!--<th>Type</th>-->

                          <!--<th colspan="2">Downloads/Views</th>-->

                        <!--</tr>-->

                        <!--</thead>-->

                        <!--<td colspan="6" *ngIf="infoMessage">{{ infoMessage }}</td>-->

                        <!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index"-->

                               <!--style="border-bottom: 1px solid whitesmoke;">-->

                        <!--<tr>-->

                          <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>-->

                          <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>-->

                          <!--<td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>-->

                          <!--<td style="min-width: 300px;">-->

                                  <!--<span *ngFor="let url of transformItem(item.ItemIdentifier); let i = index">-->

                                    <!--<br *ngIf="i>0">{{ url }}-->

                                  <!--</span>-->

                          <!--</td>-->

                          <!--<td>{{ item.ItemDataType }}</td>-->

                          <!--<td class="uk-text-center"-->

                              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">-->

                            <!--<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"-->

                               <!--(click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>-->

                          <!--</td>-->

                          <!--<td class="uk-text-center"-->

                              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->

                            <!--{{ item.ItemPerformance[0].Instance[0].Count }}-->

                          <!--</td>-->

                          <!--<td class="uk-text-center"-->

                              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->

                            <!--{{ item.ItemPerformance[0].Instance[1].Count }}-->

                          <!--</td>-->

                        <!--</tr>-->

                        <!--<tr *ngIf="(selectedItemIndex === item_i)">-->

                          <!--<td colspan="6">-->

                            <!--<div class="uk-animation-slide-top-medium uk-margin-small-top">-->

                              <!--<table class="uk-table uk-table-middle uk-table-striped innerTable">-->

                                <!--<tr>-->

                                  <!--<th>Month</th>-->

                                  <!--<th>Downloads</th>-->

                                  <!--<th>Views</th>-->

                                <!--</tr>-->

                                <!--<tr *ngFor="let month of item.ItemPerformance">-->

                                  <!--<td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>-->

                                  <!--<td>{{ month.Instance[0].Count }}</td>-->

                                  <!--<td>{{ month.Instance[1].Count }}</td>-->

                                <!--</tr>-->

                              <!--</table>-->

                            <!--</div>-->

                          <!--</td>-->

                        <!--</tr>-->

                        <!--</tbody>-->

                      <!--</table>-->

                    <!--</div>-->

                  <!--</div>-->

                <!--</div>-->

                <!-- BOTTOM PAGINATION LINKS -->

                <ul class="uk-pagination uk-margin-medium-top">

                  <li class="uk-pagination-previous"><a (click)="goToPreviousPage()"><i class="uk-icon-angle-left"></i><span class="uk-margin-left">Previous</span></a></li>

                  <li class=""><span>page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</span></li>

                  <li class="uk-pagination-next"><a (click)="goToNextPage()"><span class="uk-margin-right">Next</span><i class="uk-icon-angle-right"></i></a></li>

                </ul>

              </div>

              <div class="uk-width-1-4@m">

                <div class="uk-margin-medium-bottom">

                  <p>

                    Number of results:

                    <span class="uk-badge uk-badge-success uk-text-upper uk-margin-small-left">{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</span>

                  </p>

                  <p>

                    Filters:

                    <span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index" class="uk-badge uk-badge-outline uk-text-upper uk-margin-small-left">

                      {{ filter.Name }}: {{ filter.Value }}

                    </span>

                  </p>

                </div>

                <h2 class="heading_c uk-margin-small-bottom">Details</h2>

                <ul class="md-list md-list-addon">

                  <li>

                    <div class="md-list-addon-element">

                      <i class="md-list-addon-icon material-icons"></i>

                    </div>

                    <div class="md-list-content">

                      <span class="md-list-heading">{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</span>

                      <span class="uk-text-small uk-text-muted">Date run</span>

                    </div>

                  </li>

                  <li>

                    <div class="md-list-addon-element">

                      <i class="md-list-addon-icon material-icons"></i>

                    </div>

                    <div class="md-list-content">

                      <span class="md-list-heading">{{ coveredPeriod }}</span>

                      <span class="uk-text-small uk-text-muted">Period covered</span>

                    </div>

                  </li>

                </ul>

              </div>

            </div>

          </div>

        </div>

        <!--<div *ngIf="repoResponse" class="uk-margin-top">-->

          <!--<h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results-->

            <!--<span *ngIf="repoResponse.Report &&-->

                              <!--repoResponse.Report.Report &&-->

                              <!--repoResponse.Report.Report.Customer &&-->

                              <!--repoResponse.Report.Report.Customer.ReportItems &&-->

                              <!--repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>-->

          <!--</h3>-->

          <!--<div class="uk-width-1-2">-->

            <!--<table class="uk-table">-->

              <!--<tr>-->

                <!--<th>Period covered</th>-->

                <!--<td>{{ coveredPeriod }}</td>-->

              <!--</tr>-->

              <!--<tr>-->

                <!--<th>Filters</th>-->

                <!--<td>-->

                        <!--<span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index">-->

                          <!--<br *ngIf="i>0">-->

                          <!--{{ filter.Name }}: {{ filter.Value }}-->

                        <!--</span>-->

                <!--</td>-->

              <!--</tr>-->

              <!--<tr>-->

                <!--<th>Date run</th>-->

                <!--<td>{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</td>-->

              <!--</tr>-->

              <!--<tr>-->

                <!--<th>Number of results</th>-->

                <!--<td>{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</td>-->

              <!--</tr>-->

            <!--</table>-->

          <!--</div>-->

          <!--<div *ngIf="repoResponse.Report.Report.Customer &&-->

                            <!--repoResponse.Report.Report.Customer.ReportItems">-->

            <!--<div>-->

              <!--<div class="show-options uk-inline" style="float: right;">-->

                <!--<div class="filterLabel" style="display: inline;">Results per page:</div>-->

                <!--<div [formGroup]="pageSizeSelect" class="inlineBlock">-->

                  <!--<select class="form-control" formControlName="selectPageSize" (change)="getPageSize()">-->

                    <!--<option value="10" selected>10</option>-->

                    <!--<option value="25">25</option>-->

                    <!--<option value="50">50</option>-->

                    <!--<option value="100">100</option>-->

                  <!--</select>-->

                <!--</div>-->

              <!--</div>-->

            <!--</div><br>-->

            <!--<div class="contentAndPagerPanel">-->

              <!--&lt;!&ndash; TOP PAGINATION LINKS &ndash;&gt;-->

              <!--<div>-->

                <!--<ul class="uk-pagination">-->

                  <!--<li>-->

                    <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->

                      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->

                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->

                             <!--icon="pagination-previous" ratio="1"></svg>-->

                      <!--</span>-->

                      <!--Previous-->

                    <!--</a>-->

                  <!--</li>-->

                  <!--<li class="uk-margin-auto-left">-->

                    <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->

                      <!--Next-->

                      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->

                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->

                             <!--icon="pagination-next" ratio="1"></svg>-->

                      <!--</span>-->

                    <!--</a>-->

                  <!--</li>-->

                <!--</ul>-->

                <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->

              <!--</div>-->

              <!--&lt;!&ndash; RESULTS TABLE &ndash;&gt;-->

              <!--<div>-->

                <!--<div>-->

                  <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->

                    <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->

                      <!--<thead>-->

                      <!--<tr>-->

                        <!--<th *ngIf="chosenReport !== 'RR1'">Title</th>-->

                        <!--<th *ngIf="chosenReport !== 'RR1'">Publisher</th>-->

                        <!--<th *ngIf="chosenReport === 'RR1'">Platform name</th>-->

                        <!--<th>{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>-->

                        <!--<th>Type</th>-->

                        <!--<th colspan="2">Downloads/Views</th>-->

                      <!--</tr>-->

                      <!--</thead>-->

                      <!--<td colspan="6" *ngIf="infoMessage" class="uk-alert">{{ infoMessage }}</td>-->

                      <!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index"-->

                             <!--style="border-bottom: 1px solid whitesmoke;">-->

                      <!--<tr>-->

                        <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>-->

                        <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>-->

                        <!--<td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>-->

                        <!--<td style="min-width: 300px;">-->

                                  <!--<span *ngFor="let url of transformItem(item.ItemIdentifier); let i = index">-->

                                    <!--<br *ngIf="i>0">{{ url }}-->

                                  <!--</span>-->

                        <!--</td>-->

                        <!--<td>{{ item.ItemDataType }}</td>-->

                        <!--<td class="uk-text-center"-->

                            <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">-->

                          <!--<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"-->