From 33fc6db16a837adfe891616b785dea7aa4c37b72 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 5 Apr 2024 20:33:00 +0300
Subject: [PATCH] [develop]: Add multi indicator Paths in monitor page.

---
 src/app/monitor/monitor.component.html | 65 +++++++++++++-------------
 src/app/monitor/monitor.component.ts   |  1 -
 src/app/openaireLibrary                |  2 +-
 src/assets/openaire-theme              |  2 +-
 4 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index 5f707ca..bd6e69b 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -104,12 +104,11 @@
                     <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="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)">--</span>
+                          <span *ngIf="numberResults.get(i + '-' + j + '-' + 0)"
+                                [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-' + 0) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-' + 0) | numberPercentage: stakeholder.locale))"></span>
+                          <span *ngIf="!numberResults.get(i + '-' + j + '-' + 0)">--</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">
@@ -158,9 +157,9 @@
                           <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)">--</span>
+                          <span *ngIf="numberResults.get(i + '-' + j + '-' + 0)"
+                                [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-' + 0) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-' + 0) | numberPercentage: stakeholder.locale))"></span>
+                            <span *ngIf="!numberResults.get(i + '-' + j + '-' + 0)">--</span>
                           </div>
                         </div>
                       </div>
@@ -178,40 +177,42 @@
             <h5 *ngIf="chart.title && !isMobile" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
             <h6 *ngIf="chart.title && isMobile" class="uk-width-1-1">{{chart.title}}</h6>
             <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
-              <div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
+              <div *ngIf="hasPermission(indicator.visibility)"
                    [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">
+                     [class.semiFiltered]="getActiveIndicatorPath(indicator).filtersApplied < countSelectedFilters()">
+                  <div class="uk-card-body 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>
+                        <ul class="uk-subnav uk-subnav-pill uk-subnav-small">
+                            <li *ngFor="let indicatorPath of indicator.indicatorPaths; let i=index"
+                                class="uk-flex uk-margin-small-top"
+                                [class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i">
+                                <a (click)="indicator.activePath = i">
+                                  <span>
+                                      {{indicatorPath.parameters.title ? indicatorPath.parameters.title : '--' }}
+                                  </span>
+                                </a>
+                            </li>
+                        </ul>
                     </div>
-                    <!--<div *ngIf="properties.environment === 'development'">
-                      Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}}  out of
-                      {{countSelectedFilters()}}</div>-->
                     <iframe [class.uk-blend-multiply]="!isFullscreen"
-                            *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
-                            [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
+                            *ngIf=" !properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'"
+                            [src]="getActiveIndicatorPath(indicator).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 *ngIf="properties.disableFrameLoad && getActiveIndicatorPath(indicator).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="getActiveIndicatorPath(indicator).source === 'image'"
+                             [src]="getActiveIndicatorPath(indicator).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-text"
diff --git a/src/app/monitor/monitor.component.ts b/src/app/monitor/monitor.component.ts
index b08809b..18b6ba4 100644
--- a/src/app/monitor/monitor.component.ts
+++ b/src/app/monitor/monitor.component.ts
@@ -66,7 +66,6 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent i
         }
         if (!this.stakeholder || this.stakeholder.alias !== params['stakeholder']) {
           this.numberResults = new Map<string, number>();
-          this.chartsActiveType = new Map<string, IndicatorPath>();
           subscription = this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
             if (stakeholder) {
               this.stakeholder = stakeholder;
diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary
index b34f423..e91830f 160000
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit b34f42326ca8069b6ade0e1934c7e7cd021112cb
+Subproject commit e91830f2f8c1182c6e728f87a03af3a2932d816e
diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme
index 954a1fe..43ed7e2 160000
--- a/src/assets/openaire-theme
+++ b/src/assets/openaire-theme
@@ -1 +1 @@
-Subproject commit 954a1fe8af0653740882c7db4b9bf92b8f9000f4
+Subproject commit 43ed7e267915bcae7f3ab03fab8c98136810f269