From cd8f5b1579be4a3805e7ae62615aa6547b4dc013 Mon Sep 17 00:00:00 2001
From: zdenevuk <zdenko.vuk@ijs.si>
Date: Fri, 25 Nov 2022 10:20:55 +0100
Subject: [PATCH] This is a combination of 9 commits.tree
345d5b0f4ecd561cb09cf2e19b49d01bef3120d0 parent
5c5986415812c7a0c3dad3fcfdd37a211ff0b58f author zdenevuk <zdenko.vuk@ijs.si>
1669368055 +0100 committer zdenevuk <zdenko.vuk@ijs.si> 1669388562 +0100
This is a combination of 4 commits. Updates on geojson buttons, spider chart max increased from 4 to 5, css fixes.
WIP
WIP 2
WIP 3
WIP 4
updates on load geojson buttons, style, maximum value for spider chart increased from 4 to 5.
improved button disabling
fixed rounding issue
updated messina location
increased button size
buton label and value are now not the same
fixed newly generated bug, buttons now work again
changed messina zoom lat lgn
---
.../existing-simulations.component.ts | 2 +
.../our-spider-chart.component.ts | 6 +-
.../results-map/results-map.component.html | 10 +-
.../results-map/results-map.component.scss | 5 +-
.../results-map/results-map.component.ts | 169 ++++++++++++++----
5 files changed, 146 insertions(+), 46 deletions(-)
diff --git a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.ts b/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.ts
index 440df5c8..10779fb4 100644
--- a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.ts
+++ b/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"]) {
diff --git a/src/app/pages/simulation-wizard/our-spider-chart/our-spider-chart.component.ts b/src/app/pages/simulation-wizard/our-spider-chart/our-spider-chart.component.ts
index ca1c8f45..09d7dca6 100644
--- a/src/app/pages/simulation-wizard/our-spider-chart/our-spider-chart.component.ts
+++ b/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) {
diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.html b/src/app/pages/simulation-wizard/results-map/results-map.component.html
index e1c6c6f0..49c04840 100644
--- a/src/app/pages/simulation-wizard/results-map/results-map.component.html
+++ b/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"
diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.scss b/src/app/pages/simulation-wizard/results-map/results-map.component.scss
index 8541f106..44a89677 100644
--- a/src/app/pages/simulation-wizard/results-map/results-map.component.scss
+++ b/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;
}
}
}
diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.ts b/src/app/pages/simulation-wizard/results-map/results-map.component.ts
index c5584b28..bb280c98 100644
--- a/src/app/pages/simulation-wizard/results-map/results-map.component.ts
+++ b/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,123 @@ export class ResultsMapComponent implements OnChanges {
el.style.filter = "grayscale(" + (100 - this.grayscale) + "%)";
}
- setMapZoom() {
- if (this.selectedSimulation["city"]["cityId"] == "amsterdam") {
- this.map.setView(new L.LatLng(52.4, 4.9), 9);
- } else if (this.selectedSimulation["city"]["cityId"] == "bilbao") {
- this.map.setView(new L.LatLng(43.3, -2.9), 9);
- } else if (this.selectedSimulation["city"]["cityId"] == "helsinki") {
- this.map.setView(new L.LatLng(60.2, 24.9), 9);
- } else if (this.selectedSimulation["city"]["cityId"] == "messina") {
- this.map.setView(new L.LatLng(38.2, 15.6), 9);
- } else {
- this.toastrService.show("Unexpected value for city name.", "Error", {
- status: "danger",
- });
+ 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.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",
+ });
+ }
}
}
@@ -671,5 +764,7 @@ export class ResultsMapComponent implements OnChanges {
Object.entries(this.loadGeojsons).forEach((entry) => {
entry[1]["response"] = undefined;
});
+
+ this.setMapZoomAndLoadGeojsons();
}
}
--
GitLab