From c0ce01f5615437fe3b9b490eb683070a6b21f9f3 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Mon, 11 May 2020 17:11:12 +0000
Subject: [PATCH] [Trunk | Connect]: 1. assets/connect-assets/home/entities:
 svg files added for entity types in community first page. 2.
 connect-custom.css: Classes added for icons in entity types in community
 first page. 3. community.component: Analytics tab redesigned - entity tabs
 added & charts in cards.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@58676 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/community/community.component.html    | 151 ++++++++++++++----
 src/app/community/community.component.ts      |  62 +++++++
 .../connect-assets/home/entities/dataset.svg  |   7 +
 .../connect-assets/home/entities/other.svg    |  13 ++
 .../home/entities/publication.svg             |  11 ++
 .../connect-assets/home/entities/software.svg |  11 ++
 src/assets/connect-custom.css                 |  27 ++++
 7 files changed, 247 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/connect-assets/home/entities/dataset.svg
 create mode 100644 src/assets/connect-assets/home/entities/other.svg
 create mode 100644 src/assets/connect-assets/home/entities/publication.svg
 create mode 100644 src/assets/connect-assets/home/entities/software.svg

diff --git a/src/app/community/community.component.html b/src/app/community/community.component.html
index 90cfed1..2c08703 100644
--- a/src/app/community/community.component.html
+++ b/src/app/community/community.component.html
@@ -48,7 +48,7 @@
 </ng-template>
 
 <ng-template #analytics_tab_content let-type="type" let-typeName="typeName">
-  <ng-container *ngIf="isEntityEnabled(type)
+  <div *ngIf="analyticsActiveTab == type && isEntityEnabled(type)
             && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum[type].total>0
             &&
             (  statistics.statisticsDisplay.entities[type].numbers.map['total']['showInMonitor']
@@ -63,15 +63,16 @@
                 && statistics.allowedChartsMode['showInMonitor'][type].length > 0)
             )">
       <div class="tab-header uk-margin-bottom">{{typeName}}</div>
+
       <ng-container *ngTemplateOutlet="stats; context: {
-                          entity: type, entityName: typeName,
-                          statisticsSum:statistics.statisticsSum, statisticsDisplay:statistics.statisticsDisplay,
-                          allowedEntities: statistics.allowedEntitiesMode['showInMonitor'],
-                          allowedCharts:statistics.allowedChartsMode['showInMonitor'],
-                          showChartTitle:  statistics.chartTitlesMode['showInMonitor'],
-                          chartsInfoMap:statistics.chartsInfoMap, showIn:'showInMonitor'}">
-      </ng-container>
-  </ng-container>
+                            entity: type, entityName: typeName,
+                            statisticsSum:statistics.statisticsSum, statisticsDisplay:statistics.statisticsDisplay,
+                            allowedEntities: statistics.allowedEntitiesMode['showInMonitor'],
+                            allowedCharts:statistics.allowedChartsMode['showInMonitor'],
+                            showChartTitle:  statistics.chartTitlesMode['showInMonitor'],
+                            chartsInfoMap:statistics.chartsInfoMap, showIn:'showInMonitor'}">
+        </ng-container>
+  </div>
 </ng-template>
 
 <ng-template #stats let-entity="entity" let-entityName="entityName" let-statisticsSum="statisticsSum"
@@ -89,54 +90,54 @@
   <div *ngIf="statisticsSum && statisticsDisplay && statisticsSum[entity].total > 0"
        [class]="'uk-grid uk-grid-small uk-grid-match ' + (showIn == 'showInMonitor' ? '  uk-child-width-1-3@s uk-child-width-1-6@m' : ' uk-child-width-1-1@s uk-child-width-1-3@m')" uk-grid>
     <div *ngIf="statisticsDisplay.entities[entity].numbers.map['total'][showIn]" class="">
-      <div class="uk-card portal-card uk-text-right uk-padding-small">
+      <div class="uk-card uk-card-default uk-padding-small">
         <div
-          class="uk-text-large">{{statisticsSum[entity].total|number}}</div>
+          class="uk-h4 uk-text-bold">{{statisticsSum[entity].total|number}}</div>
 <!--        <div>Total {{entityName}}</div>-->
         <div>Total</div>
       </div>
     </div>
     <div
-      *ngIf="statisticsDisplay.entities[entity].numbers.map['project'][showIn]" class="">
-      <div class="uk-card portal-card uk-text-right uk-padding-small">
+      *ngIf="statisticsDisplay.entities[entity].numbers.map['project'][showIn] && statisticsSum[entity].projects" class="">
+      <div class="uk-card uk-card-default uk-padding-small">
         <div
-          class="uk-text-large">{{statisticsSum[entity].projects|number}} </div>
+          class="uk-h4 uk-text-bold">{{statisticsSum[entity].projects|number}} </div>
 <!--        <div>Total projects linked to {{entityName}}</div>-->
         <div>Total linked projects</div>
       </div>
     </div>
     <div
-      *ngIf="statisticsDisplay.entities[entity].numbers.map['open'][showIn]" class="">
-      <div class="uk-card portal-card uk-text-right uk-padding-small">
+      *ngIf="statisticsDisplay.entities[entity].numbers.map['open'][showIn] && statisticsSum[entity].open_access" class="">
+      <div class="uk-card uk-card-default uk-padding-small">
         <div
-          class="uk-text-large">{{statisticsSum[entity].open_access|number}} </div>
+          class="uk-h4 uk-text-bold">{{statisticsSum[entity].open_access|number}} </div>
 <!--        <div>Open access {{entityName}}</div>-->
         <div>Open access</div>
       </div>
     </div>
-    <div *ngIf="statisticsDisplay.entities[entity].numbers.map['closed'][showIn]" class="">
-      <div class="uk-card portal-card uk-text-right uk-padding-small">
+    <div *ngIf="statisticsDisplay.entities[entity].numbers.map['closed'][showIn] && statisticsSum[entity].closed_access" class="">
+      <div class="uk-card uk-card-default uk-padding-small">
         <div
-          class="uk-text-large">{{statisticsSum[entity].closed_access|number}} </div>
+          class="uk-h4 uk-text-bold">{{statisticsSum[entity].closed_access|number}} </div>
 <!--        <div>Closed access {{entityName}}</div>-->
         <div>Closed access</div>
       </div>
     </div>
     <div
-      *ngIf="statisticsDisplay.entities[entity].numbers.map['embargo'][showIn]" class="">
-      <div class="uk-card portal-card uk-text-right uk-padding-small">
+      *ngIf="statisticsDisplay.entities[entity].numbers.map['embargo'][showIn] && statisticsSum[entity].embargo" class="">
+      <div class="uk-card uk-card-default uk-padding-small">
         <div
-          class="uk-text-large">{{statisticsSum[entity].embargo|number}} </div>
+          class="uk-h4 uk-text-bold">{{statisticsSum[entity].embargo|number}} </div>
 <!--        <div>Embargoed {{entityName}}</div>-->
         <div>Embargoed</div>
       </div>
     </div>
     <div
-      *ngIf="statisticsDisplay.entities[entity].numbers.map['restricted'][showIn]"
+      *ngIf="statisticsDisplay.entities[entity].numbers.map['restricted'][showIn] && statisticsSum[entity].restricted"
       class="">
-      <div class="uk-card portal-card uk-text-right uk-padding-small">
+      <div class="uk-card uk-card-default uk-padding-small">
         <div
-          class="uk-text-large">{{statisticsSum[entity].restricted|number}} </div>
+          class="uk-h4 uk-text-bold">{{statisticsSum[entity].restricted|number}} </div>
 <!--        <div>Restricted {{entityName}}</div>-->
         <div>Restricted</div>
       </div>
@@ -152,9 +153,10 @@
           <ul class="uk-list">
             <li *ngFor="let chart of allowedCharts[entity]">
 
-              <div class=" iframeContainer uk-height-medium uk-margin-medium-top">
-                <div *ngIf="showChartTitle[chart]" class="  uk-h5 ">
-                  {{chartsInfoMap[chart].title}}</div>
+              <div class=" iframeContainer uk-height-medium uk-margin-medium-top uk-card uk-card-default uk-card-body">
+                <div *ngIf="showChartTitle[chart]" class="">
+                  {{chartsInfoMap[chart].title}}
+                </div>
                 <iframe [src]=chartsInfoMap[chart].url scrolling="no"></iframe>
               </div>
             </li>
@@ -172,10 +174,11 @@
     <div *ngIf="showIn == 'showInMonitor'" class="uk-grid uk-child-width-1-2@l uk-child-width-1-1@m  ">
       <div *ngFor="let chart of allowedCharts[entity]" class="uk-clearfix uk-margin-bottom">
 
-        <div class=" iframeContainer uk-height-large uk-margin-medium-top">
-          <div *ngIf="showChartTitle[chart]" class="  uk-h5 ">
-            {{chartsInfoMap[chart].title}}</div>
-          <iframe [src]=chartsInfoMap[chart].url scrolling="no" class=""></iframe>
+        <div class=" iframeContainer uk-height-large uk-margin-medium-top uk-card uk-card-default uk-card-body">
+            <div *ngIf="showChartTitle[chart]" class="">
+              {{chartsInfoMap[chart].title}}
+            </div>
+            <iframe [src]=chartsInfoMap[chart].url scrolling="no" class=""></iframe>
         </div>
 
       </div>
@@ -282,8 +285,9 @@
               <a class="uk-width-1-1 uk-height-1-1">
                 <div class="tab-header">Other Research</div><div class="number">{{orpTotal|number}}</div></a>
             </li>
-            <li *ngIf="statistics && statistics.statisticsDisplay && statistics.statisticsDisplay.isActive"
-                class="uk-padding-remove statistics" (click)="show='analysis'; activeTab='analytics'">
+<!--            <li *ngIf="statistics && statistics.statisticsDisplay && statistics.statisticsDisplay.isActive"-->
+            <li *ngIf="showAnalyticsTab()"
+                class="uk-padding-remove statistics" (click)="show='analysis'; activeTab='analytics';">
               <a class="uk-width-1-1 uk-height-1-1">
                 <div class="tab-header">Analytics</div>
                 <div class="number">
@@ -428,6 +432,83 @@
             <li *ngIf="statistics && statistics.statisticsDisplay && statistics.statisticsDisplay.isActive"
                 class="uk-overflow-auto">
               <div *ngIf="statistics && activeTab=='analytics'" class="uk-width-expand uk-padding">
+
+                <div class="uk-text-center">
+                  <button *ngIf="isEntityEnabled('publication')
+                                && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum['publication'].total>0
+                                &&
+                                (  statistics.statisticsDisplay.entities['publication'].numbers.map['total']['showInMonitor']
+                                || statistics.statisticsDisplay.entities['publication'].numbers.map['project']['showInMonitor']
+                                || statistics.statisticsDisplay.entities['publication'].numbers.map['open']['showInMonitor']
+                                || statistics.statisticsDisplay.entities['publication'].numbers.map['closed']['showInMonitor']
+                                || statistics.statisticsDisplay.entities['publication'].numbers.map['embargo']['showInMonitor']
+                                || statistics.statisticsDisplay.entities['publication'].numbers.map['restricted']['showInMonitor']
+                                || ( statistics.allowedEntitiesMode['showInMonitor'] && statistics.statisticsSum
+                                    && statistics.allowedChartsMode['showInMonitor'] && statistics.statisticsSum['publication']
+                                    && statistics.allowedChartsMode['showInMonitor']['publication'] && statistics.statisticsSum['publication'].total > 0
+                                    && statistics.allowedChartsMode['showInMonitor']['publication'].length > 0))"
+                          [class]="(analyticsActiveTab == 'publication' ? 'active ' : '')+' publicationAnalytics uk-icon uk-icon-button uk-margin-right'"
+                          uk-tooltip="title: Publications" (click)="analyticsActiveTab = 'publication'">
+<!--                    <svg height="20" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><rect style="stroke: var(&#45;&#45;portal-main-color);" fill="none" height="16" stroke="#000" width="12" x="3.5" y="2.5"></rect><polyline style="stroke: var(&#45;&#45;portal-main-color);" fill="none" points="5 0.5 17.5 0.5 17.5 17" stroke="#000"></polyline></svg>-->
+                    <img src="assets/connect-assets/home/entities/publication.svg">
+                  </button>
+                  <button *ngIf="isEntityEnabled('dataset')
+                              && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum['dataset'].total>0
+                              &&
+                              (  statistics.statisticsDisplay.entities['dataset'].numbers.map['total']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['dataset'].numbers.map['project']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['dataset'].numbers.map['open']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['dataset'].numbers.map['closed']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['dataset'].numbers.map['embargo']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['dataset'].numbers.map['restricted']['showInMonitor']
+                              || ( statistics.allowedEntitiesMode['showInMonitor'] && statistics.statisticsSum
+                              && statistics.allowedChartsMode['showInMonitor'] && statistics.statisticsSum['dataset']
+                              && statistics.allowedChartsMode['showInMonitor']['dataset'] && statistics.statisticsSum['dataset'].total > 0
+                              && statistics.allowedChartsMode['showInMonitor']['dataset'].length > 0))"
+                          [class]="(analyticsActiveTab == 'dataset' ? 'active ' : '')+' datasetAnalytics uk-icon uk-icon-button uk-margin-right'"
+                          uk-tooltip="title: Research Data" (click)="analyticsActiveTab = 'dataset'">
+<!--                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="database"><ellipse style="stroke: var(&#45;&#45;portal-main-color);" fill="none" stroke="#000" cx="10" cy="4.64" rx="7.5" ry="3.14"></ellipse><path style="stroke: var(&#45;&#45;portal-main-color);" fill="none" stroke="#000" d="M17.5,8.11 C17.5,9.85 14.14,11.25 10,11.25 C5.86,11.25 2.5,9.84 2.5,8.11"></path><path style="stroke: var(&#45;&#45;portal-main-color);"fill="none" stroke="#000" d="M17.5,11.25 C17.5,12.99 14.14,14.39 10,14.39 C5.86,14.39 2.5,12.98 2.5,11.25"></path><path style="stroke: var(&#45;&#45;portal-main-color);" fill="none" stroke="#000" d="M17.49,4.64 L17.5,14.36 C17.5,16.1 14.14,17.5 10,17.5 C5.86,17.5 2.5,16.09 2.5,14.36 L2.5,4.64"></path></svg>-->
+                    <img src="assets/connect-assets/home/entities/dataset.svg">
+                  </button>
+                  <button *ngIf="isEntityEnabled('software')
+                              && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum['software'].total>0
+                              &&
+                              (  statistics.statisticsDisplay.entities['software'].numbers.map['total']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['software'].numbers.map['project']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['software'].numbers.map['open']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['software'].numbers.map['closed']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['software'].numbers.map['embargo']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['software'].numbers.map['restricted']['showInMonitor']
+                              || ( statistics.allowedEntitiesMode['showInMonitor'] && statistics.statisticsSum
+                              && statistics.allowedChartsMode['showInMonitor'] && statistics.statisticsSum['software']
+                              && statistics.allowedChartsMode['showInMonitor']['software'] && statistics.statisticsSum['software'].total > 0
+                              && statistics.allowedChartsMode['showInMonitor']['software'].length > 0))"
+                          [class]="(analyticsActiveTab == 'software' ? 'active ' : '')+' softwareAnalytics uk-icon uk-icon-button uk-margin-right'"
+                          uk-tooltip="title: Software" (click)="analyticsActiveTab = 'software'">
+<!--                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="cog"><circle style="stroke: var(&#45;&#45;portal-main-color);" fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle><path style="stroke: var(&#45;&#45;portal-main-color);" fill="none" stroke="#000" d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>-->
+                    <img src="assets/connect-assets/home/entities/software.svg">
+                  </button>
+                  <button *ngIf="isEntityEnabled('orp')
+                              && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum['orp'].total>0
+                              &&
+                              (  statistics.statisticsDisplay.entities['orp'].numbers.map['total']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['orp'].numbers.map['project']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['orp'].numbers.map['open']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['orp'].numbers.map['closed']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['orp'].numbers.map['embargo']['showInMonitor']
+                              || statistics.statisticsDisplay.entities['orp'].numbers.map['restricted']['showInMonitor']
+                              || ( statistics.allowedEntitiesMode['showInMonitor'] && statistics.statisticsSum
+                              && statistics.allowedChartsMode['showInMonitor'] && statistics.statisticsSum['orp']
+                              && statistics.allowedChartsMode['showInMonitor']['orp'] && statistics.statisticsSum['orp'].total > 0
+                              && statistics.allowedChartsMode['showInMonitor']['orp'].length > 0))"
+                          [class]="(analyticsActiveTab == 'orp' ? 'active ' : '')+' otherAnalytics uk-icon uk-icon-button'"
+                          uk-tooltip="title: Other Research Products" (click)="analyticsActiveTab = 'orp'">
+<!--                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="world"><path style="stroke: var(&#45;&#45;portal-main-color);" fill="none" stroke="#000" d="M1,10.5 L19,10.5"></path><path style="stroke: var(&#45;&#45;portal-main-color);" fill="none" stroke="#000" d="M2.35,15.5 L17.65,15.5"></path><path style="stroke: var(&#45;&#45;portal-main-color);" fill="none" stroke="#000" d="M2.35,5.5 L17.523,5.5"></path><path style="stroke: var(&#45;&#45;portal-main-color);" fill="none" stroke="#000" d="M10,19.46 L9.98,19.46 C7.31,17.33 5.61,14.141 5.61,10.58 C5.61,7.02 7.33,3.83 10,1.7 C10.01,1.7 9.99,1.7 10,1.7 L10,1.7 C12.67,3.83 14.4,7.02 14.4,10.58 C14.4,14.141 12.67,17.33 10,19.46 L10,19.46 L10,19.46 L10,19.46 Z"></path><circle style="stroke: var(&#45;&#45;portal-main-color);" fill="none" stroke="#000" cx="10" cy="10.5" r="9"></circle></svg>-->
+                    <img src="assets/connect-assets/home/entities/other.svg">
+                  </button>
+                </div>
+                <hr>
+
                 <ng-container *ngTemplateOutlet="analytics_tab_content; context: {
                   type: 'publication', typeName: 'publications'}">
                 </ng-container>
diff --git a/src/app/community/community.component.ts b/src/app/community/community.component.ts
index 71298dc..0202984 100644
--- a/src/app/community/community.component.ts
+++ b/src/app/community/community.component.ts
@@ -78,6 +78,7 @@ export class CommunityComponent {
   @ViewChild(StatisticsForDashboardComponent) statistics: StatisticsForDashboardComponent = null;
   public activeTab = "summary";
   public show: string = 'overview';
+  public analyticsActiveTab = "";
 
   searchLinkToResults: string = null;
 
@@ -473,4 +474,65 @@ export class CommunityComponent {
   public countSubscribersEvent($event){
     this.subscribers = $event.value;
   }
+
+  public checkStatistics(type: string) {
+    // if(this.isEntityEnabled(type)
+    // && this.statistics && this.statistics.statisticsDisplay && this.statistics.statisticsDisplay.isActive
+    // && this.statistics.statisticsSum && this.statistics.statisticsSum[type].total>0
+    // &&
+    // (  this.statistics.statisticsDisplay.entities[type].numbers.map['total']['showInMonitor']
+    //   || this.statistics.statisticsDisplay.entities[type].numbers.map['project']['showInMonitor']
+    //   || this.statistics.statisticsDisplay.entities[type].numbers.map['open']['showInMonitor']
+    //   || this.statistics.statisticsDisplay.entities[type].numbers.map['closed']['showInMonitor']
+    //   || this.statistics.statisticsDisplay.entities[type].numbers.map['embargo']['showInMonitor']
+    //   || this.statistics.statisticsDisplay.entities[type].numbers.map['restricted']['showInMonitor']
+    //   || ( this.statistics.allowedEntitiesMode['showInMonitor'] && this.statistics.statisticsSum
+    //     && this.statistics.allowedChartsMode['showInMonitor'] && this.statistics.statisticsSum[type]
+    //     && this.statistics.allowedChartsMode['showInMonitor'][type] && this.statistics.statisticsSum[type].total > 0
+    //     && this.statistics.allowedChartsMode['showInMonitor'][type].length > 0))) {
+    //   return true;
+    // } else {
+    //   return false;
+    // }
+    if(this.isEntityEnabled(type)
+      && this.statistics && this.statistics.statisticsDisplay && this.statistics.statisticsDisplay.isActive
+      && this.statistics.statisticsSum && this.statistics.statisticsSum[type] && this.statistics.statisticsSum[type].total>0
+      &&
+      (  this.statistics.statisticsDisplay.entities[type].numbers.map['total']['showInMonitor']
+        || this.statistics.statisticsDisplay.entities[type].numbers.map['project']['showInMonitor']
+        || this.statistics.statisticsDisplay.entities[type].numbers.map['open']['showInMonitor']
+        || this.statistics.statisticsDisplay.entities[type].numbers.map['closed']['showInMonitor']
+        || this.statistics.statisticsDisplay.entities[type].numbers.map['embargo']['showInMonitor']
+        || this.statistics.statisticsDisplay.entities[type].numbers.map['restricted']['showInMonitor']
+        || ( this.statistics.allowedEntitiesMode['showInMonitor']
+          && this.statistics.allowedChartsMode['showInMonitor'][type]
+          && this.statistics.allowedChartsMode['showInMonitor'][type].length > 0))) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  public initializeAnalyticsActiveTab() {
+    if(!this.analyticsActiveTab) {
+      if(this.checkStatistics("publication")) {
+        this.analyticsActiveTab = "publication";
+      } else if(this.checkStatistics("dataset")) {
+        this.analyticsActiveTab = "dataset";
+      } else if(this.checkStatistics("software")) {
+        this.analyticsActiveTab = "software";
+      } else if(this.checkStatistics("orp")) {
+        this.analyticsActiveTab = "orp";
+      }
+    }
+  }
+
+  public showAnalyticsTab() {
+    this.initializeAnalyticsActiveTab();
+    if(!this.analyticsActiveTab) {
+      return false;
+    } else {
+      return true;
+    }
+  }
 }
diff --git a/src/assets/connect-assets/home/entities/dataset.svg b/src/assets/connect-assets/home/entities/dataset.svg
new file mode 100644
index 0000000..a3c5ffa
--- /dev/null
+++ b/src/assets/connect-assets/home/entities/dataset.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12.331" height="15" viewBox="0 0 12.331 15">
+    <defs><style>.a{fill:#e2daf0;}.b{fill:#a98bd4;}</style></defs>
+    <g transform="translate(0 0)">
+        <path class="a" d="M6.09,0C9.453,0,11.9.208,11.9,3.571v7.084c0,3.363-2.444,3.588-5.808,3.588S0,14.018,0,10.655V3.571C0,.208,2.727,0,6.09,0Z" transform="translate(0.151 0.467)"/>
+        <path class="b" d="M6.165,0C3.2,0,0,.734,0,2.349v10.3C0,14.266,3.2,15,6.165,15s6.165-.734,6.165-2.347V2.349C12.331.734,9.134,0,6.165,0Zm0,3.816C2.99,3.816.883,2.933.883,2.351S2.99.887,6.165.887s5.285.883,5.285,1.464S9.341,3.816,6.165,3.816Zm0,3.433C2.7,7.249.883,6.295.883,5.785V3.609A10.7,10.7,0,0,0,6.163,4.7a10.931,10.931,0,0,0,5.28-1.071V5.785C11.448,6.295,9.634,7.249,6.165,7.249Zm0,3.435C2.7,10.684.883,9.73.883,9.22V7.038a10.658,10.658,0,0,0,5.28,1.071,10.661,10.661,0,0,0,5.282-1.071v2.18C11.448,9.8,9.341,10.684,6.165,10.684Zm0,3.435c-3.469,0-5.282-.954-5.282-1.464V10.473a10.731,10.731,0,0,0,5.28,1.092A11.046,11.046,0,0,0,11.45,10.5v2.153C11.45,13.236,9.341,14.119,6.165,14.119Z" transform="translate(0 0)"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/connect-assets/home/entities/other.svg b/src/assets/connect-assets/home/entities/other.svg
new file mode 100644
index 0000000..971cdf4
--- /dev/null
+++ b/src/assets/connect-assets/home/entities/other.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.53" height="4.666" viewBox="0 0 14.53 4.666">
+    <defs><style>.a,.b,.c{fill:#c5e0e9;}.a,.b{stroke:#708aa5;}.b{stroke-miterlimit:10;}.c{opacity:0.2;}</style></defs>
+    <g transform="translate(-2 -1.948)">
+        <g transform="translate(2.5 2.44)">
+            <path class="a" d="M1.833,0A1.833,1.833,0,1,1,0,1.833,1.833,1.833,0,0,1,1.833,0Z" transform="translate(0 0.008)"/>
+            <circle class="b" cx="1.833" cy="1.833" r="1.833" transform="translate(4.932 0.008)"/>
+            <circle class="b" cx="1.833" cy="1.833" r="1.833" transform="translate(9.864 0.008)"/>
+            <ellipse class="c" cx="1.837" cy="1.837" rx="1.837" ry="1.837" transform="translate(0.03)"/>
+            <ellipse class="c" cx="1.837" cy="1.837" rx="1.837" ry="1.837" transform="translate(4.91)"/>
+            <ellipse class="c" cx="1.837" cy="1.837" rx="1.837" ry="1.837" transform="translate(9.789)"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/connect-assets/home/entities/publication.svg b/src/assets/connect-assets/home/entities/publication.svg
new file mode 100644
index 0000000..ee15fdb
--- /dev/null
+++ b/src/assets/connect-assets/home/entities/publication.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.917" height="14.996" viewBox="0 0 14.917 14.996">
+    <defs><style>.a{fill:#f8d5e3;}.b{fill:#f17aa9;}</style></defs>
+    <g transform="translate(0)">
+        <path class="a" d="M2.262,0h7.86c1.948,0,2.251,1.579,2.251,3.528V8.846c0,1.948-.3,3.528-2.251,3.528H2.262C.313,12.373,0,10.794,0,8.846V3.528C0,1.579.313,0,2.262,0Z" transform="translate(0.225 2.327)"/>
+        <path class="b" d="M11.232,22.28H1.592A1.6,1.6,0,0,1,0,20.688V10.842A1.6,1.6,0,0,1,1.592,9.25h9.64a1.6,1.6,0,0,1,1.592,1.592v9.846a1.6,1.6,0,0,1-1.592,1.592ZM1.592,10.1a.744.744,0,0,0-.742.742v9.846a.742.742,0,0,0,.742.742h9.64a.742.742,0,0,0,.742-.742h0V10.842a.742.742,0,0,0-.742-.742Z" transform="translate(0 -7.284)"/>
+        <path class="b" d="M21.086,49.491H15.543a.4.4,0,1,1-.057-.8.259.259,0,0,1,.057,0h5.543a.4.4,0,1,1,.057.8Z" transform="translate(-11.903 -38.344)"/>
+        <path class="b" d="M21.192,38.979H15.65a.4.4,0,1,1,0-.8h5.543a.4.4,0,1,1,0,.8Z" transform="translate(-12.009 -30.066)"/>
+        <path class="b" d="M21.086,28.461H15.543a.4.4,0,1,1-.057-.8.259.259,0,0,1,.057,0h5.543a.4.4,0,1,1,.057.8Z" transform="translate(-11.903 -21.783)"/>
+        <path class="b" d="M24.493,12.424A.425.425,0,0,1,24.068,12V1.585A.746.746,0,0,0,23.326.85h-10.2a.425.425,0,0,1,0-.85h10.2a1.6,1.6,0,0,1,1.592,1.592V12.006A.425.425,0,0,1,24.493,12.424Z" transform="translate(-10.001 0)"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/connect-assets/home/entities/software.svg b/src/assets/connect-assets/home/entities/software.svg
new file mode 100644
index 0000000..4194c05
--- /dev/null
+++ b/src/assets/connect-assets/home/entities/software.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.53" height="15" viewBox="0 0 13.53 15">
+    <g id="Group_2288" data-name="Group 2288" transform="translate(-813 -666)">
+        <g id="Rectangle_1545" data-name="Rectangle 1545" transform="translate(813 666)" fill="#d4ecd6" stroke="#639c66" stroke-width="0.9">
+            <rect width="13.53" height="15" rx="2" stroke="none"/>
+            <rect x="0.45" y="0.45" width="12.63" height="14.1" rx="1.55" fill="none"/>
+        </g>
+        <line id="_Path_" data-name="&lt;Path&gt;" x1="2.26" y2="5.252" transform="translate(818.778 670.906)" fill="none" stroke="#639c66" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.7"/>
+        <path id="_Path_2" data-name="&lt;Path&gt;" d="M73.5,37.12,75.172,38.7,73.5,40.378" transform="translate(748.202 634.783)" fill="none" stroke="#639c66" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.9"/>
+        <path id="_Path_3" data-name="&lt;Path&gt;" d="M20.172,37.12,18.5,38.7l1.672,1.673" transform="translate(797.894 634.783)" fill="none" stroke="#639c66" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.9"/>
+    </g>
+</svg>
diff --git a/src/assets/connect-custom.css b/src/assets/connect-custom.css
index 1504a13..f09200a 100644
--- a/src/assets/connect-custom.css
+++ b/src/assets/connect-custom.css
@@ -266,6 +266,33 @@ a:hover .user-circle-background {
     font-family: 'Open Sans', sans-serif !important;
 }
 
+.publicationAnalytics.uk-icon-button:hover, .publicationAnalytics.uk-icon-button.active {
+    background: #FFE6E6;
+}
+.publicationAnalytics.uk-icon-button {
+    border-color: #F17AA9 !important;
+}
+
+.datasetAnalytics.uk-icon-button:hover, .datasetAnalytics.uk-icon-button.active {
+    background: #E2DAF0;
+}
+.datasetAnalytics.uk-icon-button {
+    border-color: #A98BD4 !important;
+}
+
+.softwareAnalytics.uk-icon-button:hover, .softwareAnalytics.uk-icon-button.active {
+    background: #D4ECD6;
+}
+.softwareAnalytics.uk-icon-button {
+    border-color: #639C66 !important;
+}
+
+.otherAnalytics.uk-icon-button:hover, .otherAnalytics.uk-icon-button.active {
+    background: #C5E0E9;
+}
+.otherAnalytics.uk-icon-button {
+    border-color: #708AA5 !important;
+}
 /*END OF CONNECT REDESIGN*/
 
 .communityApp .uk-logo{