[plugins-functionality | WIP] add stats plugin

dashboard/plugins/components/openaireProducts/plugin-openaire-products.form.component.ts

@@ -15,13 +15,12 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
       </div>
         <ng-container *ngFor="let service of services">
           
-            <div class="uk-grid uk-grid-small uk-margin-xsmall-top">
+            <div class="  uk-margin-xsmall-top">
-                  <div class="uk-text-small uk-width-3-4">{{service.name}}</div>
+              <plugin-field-edit [value]="pluginObject.serviceIdsArray.indexOf(service.id)!=-1"
-                  <div class=" uk-width-1-4">
+                                 type="checkbox" field="sdgs" (editClicked)="pluginEditEvent = $event"
-                    <plugin-field-edit  [value]=" pluginObject.serviceIdsArray.indexOf(service.id)!=-1"
+                                 (changed)="serviceChanged(service.id,$event)">
-                                       type="boolean" field="serviceIdsArray"    (changed)="serviceChanged(service.id,$event)" >
+              </plugin-field-edit>
-                    </plugin-field-edit>
+                  {{service.name}} 
-                  </div>
             </div>
         </ng-container>
 

dashboard/plugins/components/stats/monitor.component.html

@@ -0,0 +1,196 @@
+<ng-container *ngIf="stakeholder; else nocommunity">
+<div *ngIf="activeSubCategory" class="uk-section-small">
+
+  <div  uk-slider class="uk-slider">
+    <ul  class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
+      <!--<li  class="uk-width-1-1 uk-padding">
+        <div [class.uk-margin-large-bottom]="activeSubCategory.numbers.length > 0 ">
+          <ng-container *ngFor="let number of activeSubCategory.numbers; let i = 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">
+              <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
+              <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
+                <div *ngIf="hasPermission(indicator.visibility)"
+                     [ngClass]="getNumberClassBySize(indicator.width)">
+                  <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
+                       [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
+                    <div *ngIf="!indicator.overlay">
+                      <div
+                          class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
+                      <div class="number uk-text-small uk-text-bold">
+                                        <span *ngIf="numberResults.get(i + '-' + j)"
+                                              [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)">&#45;&#45;</span>
+                      </div>
+                      <div *ngIf="indicator.description || indicator.additionalDescription"
+                           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 *ngIf="indicator.overlay && (indicator.description || indicator.additionalDescription)"
+                         click-outside-or-esc class="uk-overflow-auto"
+                         (clickOutside)="closeOverlay($event, indicator)">
+                      <div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
+                        <a class="uk-display-inline-block uk-button uk-button-link"
+                           (click)="changeOverlay($event, indicator, false)">
+                                              <span class="uk-flex uk-flex-middle">
+                                                <icon name="close" type="outlined" [flex]="true"></icon>
+                                              </span>
+                        </a>
+                      </div>
+                      <div class="uk-margin-small-top uk-margin-right">
+                        <p *ngIf="indicator.description">
+                          {{indicator.description}}
+                        </p>
+                        <p *ngIf="indicator.additionalDescription">
+                          {{indicator.additionalDescription}}
+                        </p>
+                      </div>
+                    </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)">&#45;&#45;</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </ng-template>
+                </div>
+              </div>
+            </div>
+          </ng-container>
+        </div>
+      </li>-->
+    <ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
+      <li  *ngIf="chart && showSection(chart)" class="uk-width-1-1 uk-padding">
+
+      <div 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">
+
+        <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
+          <div *ngIf="showIndicator(indicator)"
+               [ngClass]="getChartClassBySize(indicator.width)">
+            <div class="uk-card uk-card-default uk-position-relative"
+                 [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
+              <div class="uk-card-body uk-text-center uk-margin-small-bottom">
+                <h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
+                  {{indicator.name + " "}}
+                </h6>
+                <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
+                  <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
+                          class="uk-button"
+                          (click)="setActiveChart(i, j, indicatorPath.type)"
+                          [class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
+                    {{indicatorPath.type}}
+                  </button>
+                </div>
+                <iframe [class.uk-blend-multiply]="!isFullscreen"
+                        *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
+                        [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
+                        class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
+                        [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
+                <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
+                  <img class="uk-width-1-1 uk-blend-multiply"
+                       [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
+                       src="assets/chart-placeholder.png">
+                </div>
+                <img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
+                     [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
+                     class="uk-width-1-1 uk-blend-multiply"
+                     [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
+              </div>
+              <div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
+                <a *ngIf="indicator.description || indicator.additionalDescription"
+                   class="uk-display-inline-block uk-button uk-button-link uk-margin-right"
+                   (click)="changeOverlay($event, indicator, 'description')">
+                                    <span class="uk-flex uk-flex-middle">
+                                      <icon name="analytics" type="outlined" [flex]="true"></icon>
+                                      <span class="uk-margin-xsmall-left">Note</span>
+                                    </span>
+                </a>
+                <a class="uk-display-inline-block uk-button uk-button-link"
+                   (click)="changeOverlay($event, indicator, 'embed')">
+                                    <span class="uk-flex uk-flex-middle">
+                                      <icon name="code" type="outlined" [flex]="true"></icon>
+                                      <span class="uk-margin-xsmall-left">Embed</span>
+                                    </span>
+                </a>
+              </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 == 'description'" class="inner" click-outside-or-esc
+                     (clickOutside)="closeOverlay($event, indicator)">
+                  <div class="uk-padding-small">
+                    <div class="uk-flex uk-flex-right">
+                      <button class="uk-close uk-icon" (click)="changeOverlay($event, indicator, false)">
+                        <icon name="close" ratio="1"></icon>
+                      </button>
+                    </div>
+                    <div class="uk-padding-small uk-padding-remove-horizontal">
+                      <p *ngIf="indicator.description">
+                        {{indicator.description}}
+                      </p>
+                      <p *ngIf="indicator.additionalDescription">
+                        {{indicator.additionalDescription}}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div *ngIf="indicator.overlay === 'embed'" class="inner" click-outside-or-esc
+                     (clickOutside)="closeOverlay($event, indicator)">
+                  <div class="uk-padding-small">
+                    <div class="uk-flex uk-flex-right">
+                      <button class="uk-close uk-icon" (click)="changeOverlay($event, indicator, false)">
+                        <icon name="close" ratio="1"></icon>
+                      </button>
+                    </div>
+                    <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>
+                    </div>
+                    <div class="uk-flex uk-flex-right">
+                      <a class="uk-link-reset copy clipboard_btn" data-clipboard-target="#embed_content_id" title="Copy code">
+                        <icon [flex]="true" name="content_copy"></icon>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="printGap uk-hidden"></div>
+        </ng-template>
+    </div>
+      </li>
+    </ng-container>
+    </ul>
+    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top"></ul>
+
+  </div>
+  </div>
+
+
+</ng-container>
+<ng-template #nocommunity>
+  <div  class="uk-text-muted uk-text-center">
+    No community info available
+  </div>
+</ng-template>

dashboard/plugins/components/stats/monitor.component.ts

@@ -0,0 +1,92 @@
+import {ChangeDetectorRef, Component, Input} from "@angular/core";
+import { MonitorIndicatorStakeholderBaseComponent } from "src/app/openaireLibrary/monitor/monitor-indicator-stakeholder-base.component";
+import {map} from "rxjs/operators";
+import {StatisticsService} from "../../../../monitor-admin/utils/services/statistics.service";
+import {ActivatedRoute, Router} from "@angular/router";
+import {PiwikService} from "../../../../utils/piwik/piwik.service";
+import {DomSanitizer, Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "../../../../sharedComponents/SEO/SEO.service";
+import {SearchResearchResultsService} from "../../../../services/searchResearchResults.service";
+import {HttpClient} from "@angular/common/http";
+import {IndicatorPath, Section, Visibility} from "../../../../monitor/entities/stakeholder";
+import {LayoutService} from "../../../sharedComponents/sidebar/layout.service";
+import {CommunityService} from "../../../../connect/community/community.service";
+import {PluginStats} from "./plugin-stats.component";
+
+@Component({
+  selector: 'plugin-stats-monitor',
+  templateUrl: 'monitor.component.html'
+})
+export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
+  activeChartSectionIndex: number = 0;
+  stakeholder = null;
+  @Input() pluginObject:PluginStats;
+
+  constructor(protected _route: ActivatedRoute,
+              protected _router: Router,
+              protected _meta: Meta,
+              protected _title: Title,
+              protected _piwikService: PiwikService,
+              protected seoService: SEOService,
+              protected sanitizer: DomSanitizer,
+              protected cdr: ChangeDetectorRef,
+              protected layoutService: LayoutService,
+              protected statisticsService: StatisticsService,
+              protected searchResearchResultsService: SearchResearchResultsService,
+              private communityService: CommunityService,
+              private http:HttpClient) {
+    super();
+  }
+
+
+  ngOnInit() {
+    super.ngOnInit();
+    this.requireLogin = false;
+    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe( communityInfo => {
+    // this.subscriptions.push(this.http.get("https://services.openaire.eu/uoa-monitor-service/stakeholder/connect-template").
+    // subscribe(stakeholder => {
+    //     if (stakeholder) {
+
+          this.loading = true;
+          this.stakeholder = PluginStats.getMockStakeholder();
+      this.stakeholder.index_id = communityInfo.communityId
+      this.stakeholder.index_name = communityInfo.title;
+      this.stakeholder.index_shortName = communityInfo.shortTitle;
+
+          this.title = this.stakeholder.name;
+          this.description = this.stakeholder.name;
+
+          this.loading = true;
+          this.activeTopic = null;
+          this.activeCategory = null;
+          this.activeSubCategory = null;
+          this.numberResults = new Map<string, number>();
+          this.chartsActiveType = new Map<string, IndicatorPath>();
+          // this.subscriptions.push(this._route.queryParams.subscribe(queryParams => {
+           this.setView( {});
+      let ids =[];
+            for(let section of this.activeSubCategory.charts){
+              for(let indicator of section.indicators){
+                ids.push(indicator._id)
+              }
+            }
+           // this.setMetadata();
+        // }
+
+    // }));
+  }));
+  }
+
+  public showSection(section:Section): boolean {
+    for(let indicator of section.indicators){
+      if(this.showIndicator(indicator)){
+        return true;
+      }
+    }
+    return false;
+
+  }
+  public showIndicator(indicator): boolean {
+    return this.pluginObject.disabledIndicators.indexOf(indicator._id) == -1;
+  }
+}

dashboard/plugins/components/stats/monitor.module.ts

@@ -0,0 +1,34 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {MonitorComponent} from "./monitor.component";
+import {PageContentModule} from "../../../../dashboard/sharedComponents/page-content/page-content.module";
+import {SliderTabsModule} from "../../../../sharedComponents/tabs/slider-tabs.module";
+import {NumberRoundModule} from "../../../../utils/pipes/number-round.module";
+import {IconsModule} from "../../../../utils/icons/icons.module";
+import {ClickModule} from "../../../../utils/click/click.module";
+import {RangeFilterModule} from "../../../../utils/rangeFilter/rangeFilter.module";
+import {SearchFilterModule} from "../../../../searchPages/searchUtils/searchFilter.module";
+import {IconsService} from "../../../../utils/icons/icons.service";
+import {filters} from "../../../../utils/icons/icons";
+import {SliderUtilsModule} from "../../../../sharedComponents/slider-utils/slider-utils.module";
+import {LoadingModule} from "../../../../utils/loading/loading.module";
+
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild([
+    {path: '', component: MonitorComponent},
+    {path: ':topic/', component: MonitorComponent},
+    {path: ':topic/:category', component: MonitorComponent},
+    {path: ':topic/:category/:subCategory', component: MonitorComponent}
+  ]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule, RangeFilterModule, SearchFilterModule, SliderUtilsModule, LoadingModule],
+  declarations: [MonitorComponent],
+  exports: [
+    MonitorComponent
+  ]
+})
+export class MonitorModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([ filters]);
+  }
+}

dashboard/plugins/components/stats/plugin-stats.component.html

@@ -0,0 +1,4 @@
+<div *ngIf="pluginObject" class="uk-container uk-section">
+  <h3>{{pluginObject.title}} </h3>
+  <plugin-stats-monitor [pluginObject]="pluginObject"></plugin-stats-monitor>
+</div>

dashboard/plugins/components/stats/plugin-stats.form.component.ts

@@ -0,0 +1,67 @@
+import {Component} from '@angular/core';
+import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
+import {PluginStats} from "./plugin-stats.component";
+
+@Component({
+  selector: 'plugin-stats-form',
+  template: `
+    <div *ngIf="pluginObject" class="uk-padding-xsmall">
+      <plugin-field-edit [value]="pluginObject.title"
+                         type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
+
+<!--      <div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Number indicators</div>-->
+       
+<!--      <ng-container *ngFor="let number of stakeholder.topics[0].category[0].subcategory[0].numbers">-->
+
+<!--        <div class="uk-grid uk-grid-small uk-margin-xsmall-top">-->
+<!--          <div class="uk-text-small uk-width-3-4">{{service.name}}</div>-->
+<!--          <div class=" uk-width-1-4">-->
+<!--            <plugin-field-edit  [value]=" pluginObject.serviceIdsArray.indexOf(service.id)!=-1"-->
+<!--                                type="boolean" field="serviceIdsArray"    (changed)="serviceChanged(service.id,$event)" >-->
+<!--            </plugin-field-edit>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </ng-container>-->
+
+      <div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Chart indicators</div>
+      <ng-container *ngFor="let section of stakeholder.topics[0].categories[0].subCategories[0].charts">
+
+        <ng-container *ngFor="let indicator of section.indicators">
+          <div class=" uk-margin-xsmall-top">
+            <plugin-field-edit [value]=" pluginObject.disabledIndicators.indexOf(indicator._id)==-1"
+                               type="checkbox" field="sdgs" (editClicked)="pluginEditEvent = $event"
+                               (changed)="indicatorsChanged(indicator._id,$event)">
+            </plugin-field-edit>
+            {{indicator.indicatorPaths[0].name?indicator.name:(indicator.indicatorPaths[0].parameters['title'] )}}
+          <span class=" uk-text-xsmall"> 
+            {{ indicator.indicatorPaths[0].parameters['subtitle']? ' ' + indicator.indicatorPaths[0].parameters['subtitle']:''}}</span>
+         
+        </div>
+        </ng-container>
+      </ng-container>
+    </div>     
+<!-- -->  `,
+
+
+})
+export class PluginStatsFormComponent extends PluginBaseFormComponent<PluginStats> {
+  stakeholder = PluginStats.getMockStakeholder();
+  constructor() {
+    super()
+  }
+
+  indicatorsChanged(id,$event:PluginEditEvent ){
+    console.log("before", id,this.pluginObject.disabledIndicators)
+    let index = this.pluginObject.disabledIndicators.indexOf(id);
+    if(index !=-1){
+      this.pluginObject.disabledIndicators.splice(index,1);
+    }else{
+      this.pluginObject.disabledIndicators.push(id);
+    }
+    $event.value =this.pluginObject.disabledIndicators;
+    console.log("after",this.pluginObject.disabledIndicators)
+    this.valuesChanged.emit({field:$event.field, value: $event.value, type: 'parent'})
+  }
+
+
+}

dashboard/plugins/components/stats/plugin-stats.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {PluginsService} from "../../../../services/plugins.service";
+import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module";
+import {InputModule} from "../../../../sharedComponents/input/input.module";
+import {PluginStatsComponent} from "./plugin-stats.component";
+import {MonitorModule} from "./monitor.module";
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, FormsModule, PluginFieldEditModule, InputModule, MonitorModule
+  ],
+  providers: [
+    PluginsService
+  ],
+  declarations: [PluginStatsComponent],
+  exports: [PluginStatsComponent]
+})
+export class PluginStatsModule {
+
+}

dashboard/plugins/utils/pluginUtils.ts

@@ -10,6 +10,7 @@ import {PluginSearchDepositLink} from "../components/search-deposit-link/plugin-
 import {PluginOrganizations} from "../components/organizations/plugin-organizations.component";
 import {PluginSuggestedRepositories} from "../components/suggested-repositories/plugin-suggested-repositories.component";
 import {PluginGraphInfo} from "../components/graph-info/plugin-graph-info.component";
+import {PluginStats} from "../components/stats/plugin-stats.component";
 
 export class PluginUtils{
   public attrTypeOptions: Option[] = [
@@ -33,8 +34,9 @@ export class PluginUtils{
     {label:"Graph info", value:"graph-info"},
     {label:"Social", value:"social"},
     {label:"Contact us", value:"organizations"},
+    {label:"Statistics", value:"stats"},
   ];
-  public availablePluginCodes: string[] = ["openaire-products", "discover-by-subcommunity", "gateway-information", "search-deposit-link", "learn-and-connect", "how-to-use", "suggested-repositories", "featured-datasets", "organizations", "fos-sdgs", "graph-info", "social", "organizations"
+  public availablePluginCodes: string[] = ["openaire-products", "discover-by-subcommunity", "gateway-information", "search-deposit-link", "learn-and-connect", "how-to-use", "suggested-repositories", "featured-datasets", "organizations", "fos-sdgs", "graph-info", "social", "organizations", "stats"
   ];
   public placementsOptions: Option[] = [
     {label:"Right", value:"right"},
@@ -82,6 +84,9 @@ export class PluginUtils{
       case 'graph-info': {
         return (new PluginGraphInfo()).compare(oldObject);
       }
+      case 'stats': {
+        return (new PluginStats()).compare(oldObject);
+      }
       default: {
         return (new PluginBaseInfo()).compare(oldObject);
       }

dashboard/plugins/wrapper/plugin-edit-wrapper.component.ts

@@ -40,6 +40,9 @@ import {PluginUtils} from "../utils/pluginUtils";
           <ng-container *ngIf="pluginTemplate.code == 'graph-info'">
             <plugin-graph-info-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-graph-info-form>
           </ng-container>
+            <ng-container *ngIf="pluginTemplate.code == 'stats'">
+              <plugin-stats-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-stats-form>
+            </ng-container>
         </ng-container>
           <ng-template #noplugin>
             <div   class="uk-text-muted uk-text-center">

dashboard/plugins/wrapper/plugin-edit-wrapper.module.ts

@@ -15,13 +15,14 @@ import {IconsModule} from "../../../utils/icons/icons.module";
 import {PluginHowToUseFormComponent} from "../components/how-to-use/plugin-how-to-use.form.component";
 import {PluginSuggestedRepositoriesFormComponent} from "../components/suggested-repositories/plugin-suggested-repositories.form.component";
 import {PluginGraphInfoFormComponent} from "../components/graph-info/plugin-graph-info.form.component";
+import {PluginStatsFormComponent} from "../components/stats/plugin-stats.form.component";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, PluginFieldEditModule, IconsModule
   ],
   declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginLearnAndConnectFormComponent,
-    PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginHowToUseFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent],
+    PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginHowToUseFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent, PluginStatsFormComponent],
   exports: [PluginEditWrapperComponent]
 
 })

dashboard/plugins/wrapper/plugin-wrapper.component.ts

@@ -38,6 +38,9 @@ import {PluginUtils} from "../utils/pluginUtils";
         <ng-container *ngIf="pluginTemplate.code == 'graph-info'">
           <plugin-graph-info [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  ></plugin-graph-info>
         </ng-container>
+        <ng-container *ngIf="pluginTemplate.code == 'stats'">
+          <plugin-stats [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  ></plugin-stats>
+        </ng-container>
       </div>
       <ng-template #noplugin>
         <div   class="uk-text-muted uk-text-center">

dashboard/plugins/wrapper/plugin-wrapper.module.ts

@@ -13,12 +13,13 @@ import {PluginSuggestedRepositoriesModule} from '../components/suggested-reposit
 import {PluginFeaturedDatasetsModule} from '../components/featured-datasets/plugin-featured-datasets.module';
 import {PluginOrganizationsModule} from "../components/organizations/plugin-organizations.module";
 import {PluginGraphInfoModule} from "../components/graph-info/plugin-graph-info.module";
+import {PluginStatsModule} from "../components/stats/plugin-stats.module";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule,
     PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginLearnAndConnectModule,
-    PluginHowToUseModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginGraphInfoModule
+    PluginHowToUseModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginGraphInfoModule, PluginStatsModule
   ],
   declarations: [PluginWrapperComponent],
   exports: [PluginWrapperComponent]