Add format in number indicators in order to support percentages.

src/app/monitor/monitor.component.html

@@ -108,7 +108,7 @@
                             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]="numberResults.get(i + '-' + j) | numberRound: 2:1"></span>
+                                [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1):(numberResults.get(i + '-' + j) | numberPercentage))"></span>
                           <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
                         </div>
                         <div *ngIf="indicator.description || indicator.additionalDescription"
@@ -159,7 +159,7 @@
                               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]="numberResults.get(i + '-' + j) | numberRound: 2:1"></span>
+                                [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1):(numberResults.get(i + '-' + j) | numberPercentage))"></span>
                             <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
                           </div>
                         </div>

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit e88bb206dcfbe6da62542c45794d4fe6e552fb09
+Subproject commit a49970aca66cf98a2ee9cd767e8dc87badc0b80f

src/app/topic/indicators.component.html

@@ -68,7 +68,7 @@
                   </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]="numberResults.get(i + '-' + j) | numberRound: 2:1"></span>
+                    <span *ngIf="numberResults.get(i + '-' + j)" [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1):(numberResults.get(i + '-' + j) | numberPercentage))"></span>
                     <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
                   </div>
                 </div>
@@ -257,11 +257,16 @@
                     now</a>
                   </div>
                 </div>
-                <div class="uk-width-1-1">
+                <div class="uk-width-1-2@m">
                   <div input [formInput]="indicatorPath.get('source')" placeholder="Source"
                        [options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes" type="select">
                   </div>
                 </div>
+                <div class="uk-width-1-2@m">
+                  <div input [formInput]="indicatorPath.get('format')" placeholder="Format"
+                       [options]="indicatorUtils.formats" type="select">
+                  </div>
+                </div>
               </div>
             </div>
             <div formArrayName="jsonPath" class="uk-width-1-1">
@@ -297,7 +302,8 @@
             <div class="uk-width-1-1 uk-flex uk-flex-center">
               <div class="uk-flex uk-position-relative">
                 <span class="uk-padding number number-preview uk-flex uk-flex-column uk-flex-center uk-text-center">
-                  <span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0">
+                  <span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0"
+                        [innerHTML]="(numberIndicatorPaths.at(i).get('format').value == 'NUMBER'?(numberIndicatorPaths.at(i).get('result').value | numberRound: 2:1):(numberIndicatorPaths.at(i).get('result').value | numberPercentage))">
                     {{numberIndicatorPaths.at(i).get('result').value | number}}
                   </span>
                   <span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">

src/app/topic/indicators.component.ts

@@ -11,6 +11,7 @@ import {
   ViewChild
 } from "@angular/core";
 import {
+  Format,
   Indicator,
   IndicatorPath,
   IndicatorSize,
@@ -20,7 +21,14 @@ import {
   Visibility
 } from "../openaireLibrary/monitor/entities/stakeholder";
 import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
-import {AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from "@angular/forms";
+import {
+  AbstractControl,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators
+} from "@angular/forms";
 import {AlertModal} from "../openaireLibrary/utils/modal/alert";
 import {StatisticsService} from "../utils/services/statistics.service";
 import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
@@ -468,7 +476,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     return this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath));
   }
 
-  public addNumberIndicatorPath(url: string = '', parameters: UntypedFormArray = new UntypedFormArray([]), source: string = 'stats-tool', jsonPath: UntypedFormArray = new UntypedFormArray([])) {
+  public addNumberIndicatorPath(url: string = '', parameters: UntypedFormArray = new UntypedFormArray([]), source: string = 'stats-tool', jsonPath: UntypedFormArray = new UntypedFormArray([]), format: Format = "NUMBER") {
     if (jsonPath.length === 0) {
       jsonPath.push(this.fb.control('', Validators.required));
     }
@@ -476,8 +484,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         url: this.fb.control(url, [Validators.required, StringUtils.urlValidator()]),
         jsonPath: jsonPath,
         result: this.fb.control(0, Validators.required),
-        // parameters: parameters,
+        source: this.fb.control(source, Validators.required),
-        source: this.fb.control(source, Validators.required)
+        format: this.fb.control(format, Validators.required)
       }
     ));
     let index = this.numberIndicatorPaths.length - 1;
@@ -645,7 +653,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         defaultId: this.fb.control(this.indicator.defaultId)
       });
       this.indicator.indicatorPaths.forEach(indicatorPath => {
-        this.addNumberIndicatorPath(this.statisticsService.getNumberUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath)), indicatorPath.parameters, indicatorPath.source, this.getJsonPathAsFormArray(indicatorPath));
+        this.addNumberIndicatorPath(this.statisticsService.getNumberUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath)), indicatorPath.parameters, indicatorPath.source, this.getJsonPathAsFormArray(indicatorPath), indicatorPath.format);
       });
     } else {
       this.indicator = new Indicator('', '', '', 'number', 'small', 'small', "PUBLIC", []);
@@ -1201,17 +1209,18 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   private checkForSchemaEnhancements(url: string) {
     this.showCheckForSchemaEnhancements = this.isAdministrator && url && !this.properties.useOldStatisticsSchema && this.indicatorUtils.checkForSchemaEnhancements(url);
   }
-  migrateFromOldImportJsonFile(charts){
+
+  migrateFromOldImportJsonFile(charts) {
     // first section contains numbers
     // second contains charts
     let hasNumbers = false;
-     for (let chart of charts) {
+    for (let chart of charts) {
       if (chart['type'] == 'number') {
         hasNumbers = true;
         break;
       }
     }
-    let chartsSection = (hasNumbers?1:0); // no numbers: first sections contains charts 
+    let chartsSection = (hasNumbers ? 1 : 0); // no numbers: first sections contains charts
     for (let chart of charts) {
       if (chart['sectionIndex'] == null) {
         chart['sectionIndex'] = chart['type'] == 'chart' ? chartsSection : 0;

src/app/utils/indicator-utils.ts

@@ -39,7 +39,6 @@ export class StakeholderUtils {
     {icon: 'incognito', value: "PRIVATE", label: 'Private'},
   ];
 
-
   visibilityIcon: Map<Visibility, string> = new Map<Visibility, string>([
     ["PUBLIC", 'earth'],
     ["PRIVATE", 'incognito'],
@@ -59,10 +58,8 @@ export class StakeholderUtils {
   public createFunderFromDefaultProfile(funder: Stakeholder, defaultTopics: Topic[]): Stakeholder {
     funder.topics = HelperFunctions.copy(defaultTopics);
     for (let topic of funder.topics) {
-      // console.log('id:' + topic._id);
       topic.defaultId = topic._id;
       topic._id = null;
-      // console.log('defaultId:' + topic.defaultId);
       for (let category of topic.categories) {
         category.defaultId = category._id;
         category._id = null;
@@ -132,7 +129,6 @@ export class StakeholderUtils {
         category.subCategories = subTokeep;
       }
     }
-    //console.log (funder);
     return funder;
   }
 
@@ -192,6 +188,12 @@ export class IndicatorUtils {
     {value: 'statistics', label: 'Statistics'},
     {value: 'stats-tool', label: 'Statistics tool'}
   ];
+
+  formats: Option[] = [
+    {value: "NUMBER", label: "Number"},
+    {value: "PERCENTAGE", label: "Percentage"}
+  ];
+
   sourceTypes: Option[] = [
     {value: 'stats-tool', label: 'Statistics tool'}
   ];
@@ -311,7 +313,7 @@ export class IndicatorUtils {
     indicatorPath.filtersApplied = 0;
     let replacedUrl = indicatorPath.chartObject ? indicatorPath.chartObject : indicatorPath.url;
     if (stakeholder.statsProfile) {
-      replacedUrl = replacedUrl.split(ChartHelper.prefix + this.statsProfileParameter + ChartHelper.suffix).join(stakeholder.statsProfile)
+      replacedUrl = replacedUrl.split(ChartHelper.prefix + this.statsProfileParameter + ChartHelper.suffix).join(stakeholder.statsProfile);
     }
     if (indicatorPath.parameters) {
       Object.keys(indicatorPath.parameters).forEach(key => {
@@ -379,7 +381,6 @@ export class IndicatorUtils {
       replacedUrl = replacedUrl.split(ChartHelper.prefix + 'index_shortName' + ChartHelper.suffix).join(encodeURIComponent(stakeholder.index_shortName))
     }
     //Check  apply enhancements return this.applySchemaEnhancements( ..);
-    console.log(replacedUrl);
     return (indicatorPath.chartObject ? indicatorPath.url + encodeURIComponent(replacedUrl) : replacedUrl);
 
   }
@@ -432,10 +433,6 @@ export class IndicatorUtils {
           }
         } else {
           let paramFields = queries["query"]["name"].split(".").slice(3);
-          // console.debug("Field Params length:" + paramFields.length)
-          // console.debug(paramFields)
-          // console.debug("Parameters length:" + queries["query"]["parameters"].length)
-
           if ((paramFields.length + 2) == queries["query"]["parameters"].length || (paramFields.length * 2 + 4) == queries["query"]["parameters"].length) {
             filterApplied = true;
             if (filterType == "start_year") {
@@ -453,7 +450,6 @@ export class IndicatorUtils {
             }
           }
         }
-        // console.debug(queries["query"])
         // it is a name query
         continue;
       }
@@ -522,7 +518,6 @@ export class IndicatorUtils {
         }
       }
     }
-    // console.debug(values);
     return values.length > 1;
   }
 
@@ -532,6 +527,7 @@ export class IndicatorUtils {
     indicator._id = form._id;
     form.indicatorPaths.forEach((indicatorPath, index) => {
       indicator.indicatorPaths[index].type = indicatorPath.type;
+      indicator.indicatorPaths[index].format = indicatorPath.format;
       if (addParameters) {
         indicatorPath.parameters.forEach(parameter => {
           indicator.indicatorPaths[index].parameters[parameter.key] = parameter.value;
@@ -590,7 +586,6 @@ export class IndicatorUtils {
         indicatorPath.url = indicatorPath.url.split("/")[indicatorPath.url.split("/").length - 1];
         indicatorPath.chartObject = decodeURIComponent(url.split("json=")[1]);
         let chart = JSON.parse(indicatorPath.chartObject);
-        // console.debug(indicatorPath);
         if (indicatorPath.url == "chart?json=") {
 
           if (chart["library"] && (chart["library"] == "HighCharts" || chart["library"] == "eCharts" || chart["library"] == "HighMaps")) {
@@ -614,7 +609,6 @@ export class IndicatorUtils {
           this.extractStartYear(chart, indicatorPath);
           this.extractEndYear(chart, indicatorPath);
           indicatorPath.chartObject = JSON.stringify(chart);
-          console.log(indicatorPath);
         }
       } else if (source === 'old') {
         indicatorPath.url = url.split("data=")[0].split("/stats/")[1] + "data=";
@@ -634,8 +628,6 @@ export class IndicatorUtils {
       indicatorPath.url = url;
       indicatorPath.type = type;
     }
-    // console.debug(indicatorPath.parameters);
-    // console.debug(indicatorPath.chartObject);
     if (indicatorPath.type == null) {
       indicatorPath.type = this.defaultChartType;
     }
@@ -684,7 +676,7 @@ export class IndicatorUtils {
       return;
     }
     for (let query of this.getQueryObjectName(obj) ? obj[this.getDescriptionObjectName(obj)][this.getQueryObjectName(obj)] : obj[this.getDescriptionObjectName(obj)]) {
-      if(query["query"]["profile"]) {
+      if (query["query"]["profile"]) {
         query["query"]["profile"] = ChartHelper.prefix + this.statsProfileParameter + ChartHelper.suffix;
       }
       if (!query["query"]["filters"]) {
@@ -713,7 +705,7 @@ export class IndicatorUtils {
       return;
     }
     for (let query of this.getQueryObjectName(obj) ? obj[this.getDescriptionObjectName(obj)][this.getQueryObjectName(obj)] : obj[this.getDescriptionObjectName(obj)]) {
-      if(query["query"]["profile"]) {
+      if (query["query"]["profile"]) {
         query["query"]["profile"] = ChartHelper.prefix + this.statsProfileParameter + ChartHelper.suffix;
       }
       if (!query["query"]["filters"]) {
@@ -740,7 +732,7 @@ export class IndicatorUtils {
       return;
     }
     for (let query of this.getQueryObjectName(obj) ? obj[this.getDescriptionObjectName(obj)][this.getQueryObjectName(obj)] : obj[this.getDescriptionObjectName(obj)]) {
-      if(query["query"]["profile"]) {
+      if (query["query"]["profile"]) {
         query["query"]["profile"] = ChartHelper.prefix + this.statsProfileParameter + ChartHelper.suffix;
       }
       if (!query["query"]["filters"]) {
@@ -971,8 +963,6 @@ export class IndicatorUtils {
       }
       url = url.split('json=')[0] + "json=" + encodeURIComponent(JSON.stringify(obj));
     }
-    console.debug(changes);
-    console.debug(url);
     return url;
   }
 }