Merge branch '11-spider-chart-and-proper-buttons' into 'master'

Resolve "spider chart and proper buttons"

Closes #11

See merge request urbanite/private/wp5-integration-and-devops/urbanite-ui-template!16

src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.ts

@@ -132,6 +132,7 @@ export class ExistingSimulationsComponent implements OnInit {
 
   ngOnInit(): void {
     this.resetButtonsAndStatuses();
+    this.calculateKPISBtnDisabled = true;
 
     this.simulationService
       .getSimulationsAll()
@@ -203,6 +204,7 @@ export class ExistingSimulationsComponent implements OnInit {
     this.selectedSimulation = simulation;
     this.selectedSimulationToEmit.emit(simulation);
     this.compareWithSimulations = [];
+    this.calculateKPISBtnDisabled = false;
 
     this.simulations.forEach((sim) => {
       if (simulation.city.cityId == sim.city["cityId"]) {

src/app/pages/simulation-wizard/our-spider-chart/our-spider-chart.component.ts

@@ -48,7 +48,7 @@ export class OurSpiderChartComponent implements OnChanges {
         },
         ticks: {
           beginAtZero: true,
-          max: 4,
+          max: 5,
           min: 0,
           stepSize: 1,
         },
@@ -91,7 +91,7 @@ export class OurSpiderChartComponent implements OnChanges {
 
               for (let i = 0; i < tmpLabels.length; i++) {
                 if (tmpLabels[i] == entry[0]) {
-                  if (/^[0-4]$/.test(entry[1] as string)) {
+                  if (/^[0-5]$/.test(entry[1] as string)) {
                     if (j == 0) {
                       values_A.push(entry[1] as string);
                     } else if (j == 1) {
@@ -212,7 +212,7 @@ export class OurSpiderChartComponent implements OnChanges {
       entries.forEach((entry) => {
         for (let i = 0; i < tmpLabels.length; i++) {
           if (tmpLabels[i] == entry[0]) {
-            if (/^[0-4]$/.test(entry[1] as string)) {
+            if (/^[0-5]$/.test(entry[1] as string)) {
               if (j == 0) {
                 values_A.push(entry[1] as string);
               } else if (j == 1) {

src/app/pages/simulation-wizard/results-map/results-map.component.html

@@ -14,18 +14,20 @@
       <div id="loadGeojsonButtonsContainer">
         <button
           nbButton
-          size="small"
-          (click)="onLoadClick(l.buttonLabel)"
+          size="medium"
+          (click)="onLoadClick(l.buttonValue)"
           nbTooltip="Select a simulation in order to use this button. GET http://localhost:8083/dss/geojson/{id}/selectedKpi"
           [disabled]="selectedSimulation == undefined"
           [nbSpinner]="geojsonLoading"
-          [status]="selectedGeojson == l.buttonLabel ? 'control' : 'primary'"
+          [status]="selectedGeojson == l.buttonValue ? 'control' : 'primary'"
           *ngFor="let l of loadGeojsons"
         >
-          load {{ l.buttonLabel }} geojson
+          {{ l.buttonLabel }}
         </button>
+        <span class="flex-grow-1"></span>
         <button
           nbButton
+          size="medium"
           (click)="openOverviewOfIndicators(dialog)"
           nbTooltip="click for overview of indicators"
           [disabled]="selectedSimulation == undefined"

src/app/pages/simulation-wizard/results-map/results-map.component.scss

@@ -35,10 +35,11 @@
     width: calc(100% - 114px);
     border-radius: 0.25rem;
     display: flex;
-    justify-content: space-around;
+    justify-content: flex-start;
     flex-wrap: wrap;
     button {
-      margin: 2px;
+      margin: 2px 5px;
+      text-transform: capitalize;
     }
   }
 }

src/app/pages/simulation-wizard/results-map/results-map.component.ts

@@ -25,24 +25,7 @@ export class ResultsMapComponent implements OnChanges {
   };
   mapLegend = new L.Control({ position: "bottomright" });
   radioButtonLayersControl: any;
-  loadGeojsons: Object[] = [
-    {
-      response: undefined,
-      buttonLabel: "bikeability",
-    },
-    {
-      response: undefined,
-      buttonLabel: "bikeIntensity",
-    },
-    {
-      response: undefined,
-      buttonLabel: "bikeSafety",
-    },
-    {
-      response: undefined,
-      buttonLabel: "pollution",
-    },
-  ];
+  loadGeojsons: Object[] = [];
   checkedRadioButton: string = "";
   geoJsonStyleWeight: number = 5;
   geoJsonStyleOpacity: number = 0.8;
@@ -51,6 +34,7 @@ export class ResultsMapComponent implements OnChanges {
   geojsonLoading: boolean = false;
   @Input() selectedSimulation: Simulation;
   selectedGeojson: string = "";
+  extractingKeysLoopLimit: number = 3498;
 
   constructor(
     private simulationService: SimulationService,
@@ -88,13 +72,13 @@ export class ResultsMapComponent implements OnChanges {
   onLoadClick(selectedKpi: string) {
     this.selectedGeojson = selectedKpi;
     this.resetLayersAndButton();
-    this.setMapZoom();
+    this.setMapZoomAndLoadGeojsons();
 
     if (this.radioButtonLayersControl)
       this.radioButtonLayersControl.remove(this.map);
 
     this.loadGeojsons.forEach((geojson, index) => {
-      if (geojson["buttonLabel"] == selectedKpi) {
+      if (geojson["buttonValue"] == selectedKpi) {
         if (this.loadGeojsons[index]["response"] == undefined) {
           this.toastrService.show("This might take a while", "Info", {
             status: "info",
@@ -131,7 +115,7 @@ export class ResultsMapComponent implements OnChanges {
 
   handleResponse(selectedKpi, res) {
     this.loadGeojsons.forEach((geojson, index) => {
-      if (geojson["buttonLabel"] == selectedKpi) {
+      if (geojson["buttonValue"] == selectedKpi) {
         this.loadGeojsons[index]["response"] = res;
       }
     });
@@ -329,10 +313,11 @@ export class ResultsMapComponent implements OnChanges {
     }
 
     Object.entries(feature).forEach((element) => {
+      const tmp = this.limitMyDigits(element[1] as number).toString();
       if (element[0] == this.checkedRadioButton) {
-        text += `<u><strong>${element[0]}:</strong> ${element[1]}</u><br>`;
+        text += `<u><strong>${element[0]}:</strong> ${tmp}</u><br>`;
       } else {
-        text += `<strong>${element[0]}:</strong> ${element[1]}<br>`;
+        text += `<strong>${element[0]}:</strong> ${tmp}<br>`;
       }
       text += `<span style='display: inline-block; margin-bottom: 7px; color: #666'>(unrounded) ${element[1]}</span><br>`;
     });
@@ -357,7 +342,11 @@ export class ResultsMapComponent implements OnChanges {
 
   public extractKeys(jsonFile) {
     let allKeys = [];
-    for (let f = 0; f < jsonFile["features"].length && f < 3498; f++) {
+    for (
+      let f = 0;
+      f < jsonFile["features"].length && f < this.extractingKeysLoopLimit;
+      f++
+    ) {
       let iterator;
       Object.keys(jsonFile["features"][f]["properties"]).forEach((element) => {
         if (!allKeys.includes(element)) {
@@ -624,19 +613,118 @@ export class ResultsMapComponent implements OnChanges {
     el.style.filter = "grayscale(" + (100 - this.grayscale) + "%)";
   }
 
-  setMapZoom() {
+  setMapZoomAndLoadGeojsons() {
     if (this.selectedSimulation != undefined) {
       if (this.selectedSimulation["city"]["cityId"] == "amsterdam") {
         this.map.setView(new L.LatLng(52.4, 4.9), 9);
+        this.loadGeojsons = [
+          {
+            response: undefined,
+            buttonValue: "bikeability",
+            buttonLabel: "bikeability",
+          },
+          {
+            response: undefined,
+            buttonValue: "bikeIntensity",
+            buttonLabel: "bike Intensity",
+          },
+          {
+            response: undefined,
+            buttonValue: "bikeSafety",
+            buttonLabel: "bike Safety",
+          },
+          {
+            response: undefined,
+            buttonValue: "pollution",
+            buttonLabel: "pollution",
+          },
+        ];
       } else if (this.selectedSimulation["city"]["cityId"] == "bilbao") {
         this.map.setView(new L.LatLng(43.3, -2.9), 9);
+        console.log(
+          "%c buttons set might not be the right ones for bilbao",
+          "background: indianred; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
+        );
+        this.loadGeojsons = [
+          {
+            response: undefined,
+            buttonValue: "bikeability",
+            buttonLabel: "bikeability",
+          },
+          {
+            response: undefined,
+            buttonValue: "bikeIntensity",
+            buttonLabel: "bike Intensity",
+          },
+          {
+            response: undefined,
+            buttonValue: "bikeSafety",
+            buttonLabel: "bike Safety",
+          },
+          {
+            response: undefined,
+            buttonValue: "pollution",
+            buttonLabel: "pollution",
+          },
+        ];
       } else if (this.selectedSimulation["city"]["cityId"] == "helsinki") {
         this.map.setView(
           new L.LatLng(60.16005488265436, 24.920971999284017),
           13
         );
+        this.loadGeojsons = [
+          {
+            response: undefined,
+            buttonValue: "congestionsAndBottlenecks",
+            buttonLabel: "congestions And Bottlenecks",
+          },
+          {
+            response: undefined,
+            buttonValue: "harbourAreaTrafficFlow",
+            buttonLabel: "harbour Area Traffic Flow",
+          },
+          {
+            response: undefined,
+            buttonValue: "accousticPollution",
+            buttonLabel: "accoustic Pollution",
+          },
+          {
+            response: undefined,
+            buttonValue: "pollution",
+            buttonLabel: "pollution",
+          },
+        ];
       } else if (this.selectedSimulation["city"]["cityId"] == "messina") {
-        this.map.setView(new L.LatLng(38.2, 15.6), 9);
+        this.map.setView(
+          new L.LatLng(38.10119097299323, 15.491646372349038),
+          9
+        );
+        console.log(
+          "%c buttons set might not be the right ones for messina",
+          "background: magenta; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
+        );
+        this.loadGeojsons = [
+          {
+            response: undefined,
+            buttonValue: "bikeability",
+            buttonLabel: "bikeability",
+          },
+          {
+            response: undefined,
+            buttonValue: "bikeIntensity",
+            buttonLabel: "bike Intensity",
+          },
+          {
+            response: undefined,
+            buttonValue: "bikeSafety",
+            buttonLabel: "bike Safety",
+          },
+          {
+            response: undefined,
+            buttonValue: "pollution",
+            buttonLabel: "pollution",
+          },
+        ];
       } else {
         this.toastrService.show("Unexpected value for city name.", "Error", {
           status: "danger",
@@ -677,6 +765,6 @@ export class ResultsMapComponent implements OnChanges {
       entry[1]["response"] = undefined;
     });
 
-    this.setMapZoom();
+    this.setMapZoomAndLoadGeojsons();
   }
 }