diff --git a/src/app/pages/simulation-wizard/results-map/map-colors-local.ts b/src/app/pages/simulation-wizard/results-map/map-colors-local.ts index 7f29ec8cd68762ee558b0815b2485305660cd5e3..150f685fc9333bc3092ae2ff6e7db4b157fab015 100644 --- a/src/app/pages/simulation-wizard/results-map/map-colors-local.ts +++ b/src/app/pages/simulation-wizard/results-map/map-colors-local.ts @@ -15,47 +15,10 @@ const color_5 = "#35b499"; const color_capacity_equal_9999 = "#ffffff00"; const color_value_undefined = "#9efcff33"; -export function getNewColor( - bioSection, - properties: any, - pro: any, - isCapacityEqual9999: boolean -): string { - if (isCapacityEqual9999 == true) { - return color_capacity_equal_9999; - } - let value = undefined; - - if (pro == "pedestrianTravelTime") { - value = properties; - } else { - for (let key in properties) { - if (key == pro) { - value = properties[key]; - } - } - } - - if (value == undefined) return color_value_undefined; - - return value > bioSection.get("legend_4").value - ? color_0 - : value > bioSection.get("legend_3").value - ? color_1 - : value > bioSection.get("legend_2").value - ? color_2 - : value > bioSection.get("legend_1").value - ? color_3 - : value > bioSection.get("legend_0").value - ? color_4 - : color_5; -} - export function getColor( properties: any, pro: any, - max: number, - ratiosBetweenGrades: number[], + ograjice: number[], isCapacityEqual9999: boolean ): string { if (isCapacityEqual9999 == true) { @@ -63,7 +26,11 @@ export function getColor( } let value = undefined; - if (pro == "pedestrianTravelTime") { + if ( + pro == "pedestrianTravelTime" || + pro == "dailyInternalBikeTravels" || + pro == "capacity" + ) { value = properties; } else { for (let key in properties) { @@ -75,24 +42,23 @@ export function getColor( if (value == undefined) return color_value_undefined; - return value > max / ratiosBetweenGrades[4] + return value > ograjice[4] ? color_0 - : value > max / ratiosBetweenGrades[3] + : value > ograjice[3] ? color_1 - : value > max / ratiosBetweenGrades[2] + : value > ograjice[2] ? color_2 - : value > max / ratiosBetweenGrades[1] + : value > ograjice[1] ? color_3 - : value > max / ratiosBetweenGrades[0] + : value > ograjice[0] ? color_4 : color_5; } -export function getColorHighToLow( +export function getColorOgrajiceHighToLow( properties: any, pro: any, - max: number, - ratiosBetweenGrades: number[], + ograjice: number[], isCapacityEqual9999: boolean ): string { if (isCapacityEqual9999 == true) { @@ -100,9 +66,11 @@ export function getColorHighToLow( } let value = undefined; - if (pro == "dailyInternalBikeTravels") { - value = properties; - } else if (pro == "capacity") { + if ( + pro == "pedestrianTravelTime" || + pro == "dailyInternalBikeTravels" || + pro == "capacity" + ) { value = properties; } else { for (let key in properties) { @@ -114,15 +82,15 @@ export function getColorHighToLow( if (value == undefined) return color_value_undefined; - return value > max / ratiosBetweenGrades[4] + return value > ograjice[4] ? color_5 - : value > max / ratiosBetweenGrades[3] + : value > ograjice[3] ? color_4 - : value > max / ratiosBetweenGrades[2] + : value > ograjice[2] ? color_3 - : value > max / ratiosBetweenGrades[1] + : value > ograjice[1] ? color_2 - : value > max / ratiosBetweenGrades[0] + : value > ograjice[0] ? color_1 : color_0; } 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 54ecdc058437a7f330a224f7bba303c61eeb678c..d4e57c2c4e3a92b004054ae4e9d72eb2c4c5d16e 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 @@ -41,6 +41,7 @@ export class ResultsMapComponent implements OnInit, OnChanges { grayscale: number = 50; loadGeojsons: Object[] = []; maxKeyValues: Object = {}; + ograjiceValues: Object = {}; newBrinkValuesForm = new FormGroup({ legend_0: new FormControl(undefined), legend_1: new FormControl(undefined), @@ -73,34 +74,34 @@ export class ResultsMapComponent implements OnInit, OnChanges { this.setMapPositionAndZoom(res); }); }, 50); - // setTimeout(() => { - // console.log( - // "%cTemporary", - // "background: peru; font-weight: bold; color: black; font-family: serif; padding: 0 10px;" - // ); - // const celkomplet: HTMLElement = document.querySelectorAll( - // ".buttons" - // )[0] as HTMLElement; - // celkomplet.style.display = "none"; - // }, 825); - // setTimeout(() => { - // const celkomplet1: HTMLElement = document.querySelectorAll( - // ".appearance-filled.size-medium.shape-rectangle.status-primary.ng-star-inserted.nb-transition" - // )[1] as HTMLElement; - // celkomplet1.click(); - // }, 1000); - // setTimeout(() => { - // const celkomplet2: HTMLElement = document.querySelectorAll( - // "#loadGeojsonButtonsContainer button" - // )[1] as HTMLElement; - // celkomplet2.click(); - // }, 1050); - // setTimeout(() => { - // const celkomplet3: HTMLElement = document.querySelectorAll( - // ".leaflet-control-layers-selector" - // )[2] as HTMLElement; - // celkomplet3.click(); - // }, 2228); + setTimeout(() => { + console.log( + "%cTemporary", + "background: peru; font-weight: bold; color: black; font-family: serif; padding: 0 10px;" + ); + const celkomplet: HTMLElement = document.querySelectorAll( + ".buttons" + )[0] as HTMLElement; + celkomplet.style.display = "none"; + }, 825); + setTimeout(() => { + const celkomplet1: HTMLElement = document.querySelectorAll( + ".appearance-filled.size-medium.shape-rectangle.status-primary.ng-star-inserted.nb-transition" + )[1] as HTMLElement; + celkomplet1.click(); + }, 1000); + setTimeout(() => { + const celkomplet2: HTMLElement = document.querySelectorAll( + "#loadGeojsonButtonsContainer button" + )[1] as HTMLElement; + celkomplet2.click(); + }, 1050); + setTimeout(() => { + const celkomplet3: HTMLElement = document.querySelectorAll( + ".leaflet-control-layers-selector" + )[8] as HTMLElement; + celkomplet3.click(); + }, 2228); } onLoadClick(selectedKpi: string) { @@ -223,116 +224,6 @@ export class ResultsMapComponent implements OnInit, OnChanges { this.newBrinkValuesApplied = true; } - setLegend(legendType) { - if (this.map != undefined && legendType == undefined) { - this.map.removeControl(this.mapLegend); - return; - } - if (this.map == undefined) { - return; - } - - this.mapLegend.onAdd = (map) => { - let direction: string; - if (legendInverted.indexOf(legendType) == -1) { - direction = "lowToHigh"; - } else { - direction = "highToLow"; - } - - if ( - this.maxKeyValues["maxValue_" + legendType] == undefined || - this.maxKeyValues["maxValue_" + legendType] == 0 - ) { - this.toastrService.info( - "Geojson not displayed because all values are undefined or zero!", - "Geojson not displayed" - ); - let div = L.DomUtil.create("div"); - div.innerHTML += `<p style='background:white; display: inline; font-size:17px; padding: 0 7px; background: #ff3d71'>Values for ${legendType} kpi are undefined or zero!</p>`; - return div; - } - - var div = L.DomUtil.create("div"); - let grades; - - if (this.newBrinkValuesApplied == true) { - grades = [ - 0, - this.newBrinkValuesForm.get("legend_0").value, - this.newBrinkValuesForm.get("legend_1").value, - this.newBrinkValuesForm.get("legend_2").value, - this.newBrinkValuesForm.get("legend_3").value, - this.newBrinkValuesForm.get("legend_4").value, - ]; - } else { - grades = [ - 0, - this.limitMyDigits( - this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[0] - ), - this.limitMyDigits( - this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[1] - ), - this.limitMyDigits( - this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[2] - ), - this.limitMyDigits( - this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[3] - ), - this.limitMyDigits( - this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[4] - ), - ]; - } - - this.setInputsLegendContainerColors(direction); - - if (direction == "lowToHigh") { - div.innerHTML += - "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + - MapColors.getColorForLegend(0) + - "'>■</span> <" + - grades[1] + - "</p>"; - for (let i = 1; i < 6; i++) { - div.innerHTML += - "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + - MapColors.getColorForLegend(i) + - "'>■</span> " + - grades[i] + - (grades[i + 1] ? "–" + grades[i + 1] + "</p>" : "+</p>"); - this.newBrinkValuesForm - .get(`legend_${i - 1}`) - .setValue(`${grades[i]}`); - } - } else { - div.innerHTML += - "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + - MapColors.getColorForLegendHighToLow(0) + - "'>■</span> <" + - grades[1] + - "</p>"; - - for (let i = 1; i < 6; i++) { - div.innerHTML += - "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + - MapColors.getColorForLegendHighToLow(i) + - "'>■</span> " + - grades[i] + - (grades[i + 1] ? "–" + grades[i + 1] + "</p>" : "+</p>"); - - this.newBrinkValuesForm - .get(`legend_${i - 1}`) - .setValue(`${grades[i]}`); - } - } - - return div; - }; - this.mapLegend.addTo(this.map); - } - private highlightFeature(e, feature) { const layer = e.target; let text = ""; @@ -391,7 +282,7 @@ export class ResultsMapComponent implements OnInit, OnChanges { }); } - private resetFeature(e, feature) { + private resetFeature(e) { const layer = e.target; layer.setStyle({ @@ -466,19 +357,22 @@ export class ResultsMapComponent implements OnInit, OnChanges { }); } else { if (this.newBrinkValuesApplied) { + let ograjice = []; + ograjice.push(this.newBrinkValuesForm.get("legend_0").value); + ograjice.push(this.newBrinkValuesForm.get("legend_1").value); + ograjice.push(this.newBrinkValuesForm.get("legend_2").value); + ograjice.push(this.newBrinkValuesForm.get("legend_3").value); + ograjice.push(this.newBrinkValuesForm.get("legend_4").value); + this.ograjiceValues[keys[f]] = ograjice; + if (keys[f] == "capacity") { - console.log( - "%c this has yet to be done, exception for capacity", - "background: maroon; color: black; font-weight: bold;" - ); tmp = L.geoJSON(<any>jsonFile, { style: (feature) => ({ weight: this.geoJsonStyleWeight, - color: MapColors.getColorHighToLow( + color: MapColors.getColorOgrajiceHighToLow( feature["properties"]["capacity"], keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - ratiosBetweenGrades, + ograjice, parseInt(feature["properties"]["capacity"]) == 9999 ? true : false @@ -489,29 +383,22 @@ export class ResultsMapComponent implements OnInit, OnChanges { layer.on({ mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), + mouseout: (e) => this.resetFeature(e), }), }); } else if ( keys[f] == "dailyInternalBikeTravels" || keys[f] == "pedestrianTravelTime" ) { - console.log( - "%c this has yet to be done, exception for dailyInternalBikeTravels or pedestrianTravelTime", - "background: sienna; color: black; font-weight: bold;" - ); tmp = L.geoJSON(<any>jsonFile, { style: (feature) => ({ weight: this.geoJsonStyleWeight, - color: MapColors.getColorHighToLow( + color: MapColors.getColor( feature["properties"]["cityWide"]["traffic"][keys[f]] || feature["properties"][keys[f]], keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - ratiosBetweenGrades, - parseInt(feature["properties"]["capacity"]) == 9999 - ? true - : false + ograjice, + false ), opacity: this.geoJsonStyleOpacity, }), @@ -519,21 +406,18 @@ export class ResultsMapComponent implements OnInit, OnChanges { layer.on({ mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), + mouseout: (e) => this.resetFeature(e), }), }); } else if (legendInverted.indexOf(keys[f]) > -1) { - console.log(" inverted and after new values"); tmp = L.geoJSON(<any>jsonFile, { style: (feature) => ({ weight: this.geoJsonStyleWeight, - color: MapColors.getNewColor( - this.newBrinkValuesForm, + color: MapColors.getColorOgrajiceHighToLow( feature["properties"], keys[f], - parseInt(feature["properties"]["capacity"]) == 9999 - ? true - : false + ograjice, + false ), opacity: this.geoJsonStyleOpacity, }), @@ -541,20 +425,18 @@ export class ResultsMapComponent implements OnInit, OnChanges { layer.on({ mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), + mouseout: (e) => this.resetFeature(e), }), }); } else { tmp = L.geoJSON(<any>jsonFile, { style: (feature) => ({ weight: this.geoJsonStyleWeight, - color: MapColors.getNewColor( - this.newBrinkValuesForm, + color: MapColors.getColor( feature["properties"], keys[f], - parseInt(feature["properties"]["capacity"]) == 9999 - ? true - : false + ograjice, + false ), opacity: this.geoJsonStyleOpacity, }), @@ -562,21 +444,28 @@ export class ResultsMapComponent implements OnInit, OnChanges { layer.on({ mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), + mouseout: (e) => this.resetFeature(e), }), }); } } else { // default, newBrinkValuesForm not applied + let ograjice = []; + ratiosBetweenGrades.forEach((r) => { + ograjice.push( + this.roundMyNumbers(this.maxKeyValues[`maxValue_${keys[f]}`] / r) + ); + }); + this.ograjiceValues[keys[f]] = ograjice; + if (keys[f] == "capacity") { tmp = L.geoJSON(<any>jsonFile, { style: (feature) => ({ weight: this.geoJsonStyleWeight, - color: MapColors.getColorHighToLow( + color: MapColors.getColorOgrajiceHighToLow( feature["properties"]["capacity"], keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - ratiosBetweenGrades, + ograjice, parseInt(feature["properties"]["capacity"]) == 9999 ? true : false @@ -587,7 +476,7 @@ export class ResultsMapComponent implements OnInit, OnChanges { layer.on({ mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), + mouseout: (e) => this.resetFeature(e), }), }); } else if ( @@ -597,15 +486,12 @@ export class ResultsMapComponent implements OnInit, OnChanges { tmp = L.geoJSON(<any>jsonFile, { style: (feature) => ({ weight: this.geoJsonStyleWeight, - color: MapColors.getColorHighToLow( + color: MapColors.getColor( feature["properties"]["cityWide"]["traffic"][keys[f]] || feature["properties"][keys[f]], keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - ratiosBetweenGrades, - parseInt(feature["properties"]["capacity"]) == 9999 - ? true - : false + ograjice, + false ), opacity: this.geoJsonStyleOpacity, }), @@ -613,22 +499,18 @@ export class ResultsMapComponent implements OnInit, OnChanges { layer.on({ mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), + mouseout: (e) => this.resetFeature(e), }), }); } else if (legendInverted.indexOf(keys[f]) > -1) { - // default but inverted tmp = L.geoJSON(<any>jsonFile, { style: (feature) => ({ weight: this.geoJsonStyleWeight, - color: MapColors.getColorHighToLow( - feature["properties"] || feature["properties"][keys[f]], + color: MapColors.getColorOgrajiceHighToLow( + feature["properties"], keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - ratiosBetweenGrades, - parseInt(feature["properties"]["capacity"]) == 9999 - ? true - : false + ograjice, + false ), opacity: this.geoJsonStyleOpacity, }), @@ -636,7 +518,7 @@ export class ResultsMapComponent implements OnInit, OnChanges { layer.on({ mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), + mouseout: (e) => this.resetFeature(e), }), }); } else { @@ -646,11 +528,8 @@ export class ResultsMapComponent implements OnInit, OnChanges { color: MapColors.getColor( feature["properties"], keys[f], - this.maxKeyValues[`maxValue_${keys[f]}`], - ratiosBetweenGrades, - parseInt(feature["properties"]["capacity"]) == 9999 - ? true - : false + ograjice, + false ), opacity: this.geoJsonStyleOpacity, }), @@ -658,7 +537,7 @@ export class ResultsMapComponent implements OnInit, OnChanges { layer.on({ mouseover: (e) => this.highlightFeature(e, feature.properties), - mouseout: (e) => this.resetFeature(e, feature.properties), + mouseout: (e) => this.resetFeature(e), }), }); } @@ -780,6 +659,114 @@ export class ResultsMapComponent implements OnInit, OnChanges { } } + public roundMyNumbers(n: number): number { + if (n > 1000) { + return Math.floor(n / 1000) * 1000; + } else if (n > 100) { + return Math.floor(n / 100) * 100; + } else if (n > 10) { + return Math.floor(n / 10) * 10; + } else if (n > 1) { + return Math.floor(n / 1) * 1; + } else if (n > 0.1) { + return Math.floor(n * 10) / 10; + } else if (n > 0.01) { + return Math.floor(n * 100) / 100; + } else if (n > 0.001) { + return Math.floor(n * 1000) / 1000; + } else if (n > 0.0001) { + return Math.floor(n * 10000) / 10000; + } else if (n > 0.00001) { + return Math.floor(n * 100000) / 100000; + } else { + return n; + } + } + + setLegend(legendType) { + if (this.map != undefined && legendType == undefined) { + this.map.removeControl(this.mapLegend); + return; + } + if (this.map == undefined) { + return; + } + + this.mapLegend.onAdd = (map) => { + let direction: string; + if (legendInverted.indexOf(legendType) == -1) { + direction = "lowToHigh"; + } else { + direction = "highToLow"; + } + + if ( + this.maxKeyValues["maxValue_" + legendType] == undefined || + this.maxKeyValues["maxValue_" + legendType] == 0 + ) { + this.toastrService.info( + "Geojson not displayed because all values are undefined or zero!", + "Geojson not displayed" + ); + let div = L.DomUtil.create("div"); + div.innerHTML += `<p style='background:white; display: inline; font-size:17px; padding: 0 7px; background: #ff3d71'>Values for ${legendType} kpi are undefined or zero!</p>`; + return div; + } + + var div = L.DomUtil.create("div"); + + this.setInputsLegendContainerColors(direction); + + if (direction == "lowToHigh") { + div.innerHTML += + "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + + MapColors.getColorForLegend(0) + + "'>■</span> <" + + this.ograjiceValues[legendType][0] + + "</p>"; + for (let i = 1; i < 6; i++) { + div.innerHTML += + "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + + MapColors.getColorForLegend(i) + + "'>■</span> " + + this.ograjiceValues[legendType][i - 1] + + (this.ograjiceValues[legendType][i] + ? "–" + this.ograjiceValues[legendType][i] + "</p>" + : "+</p>"); + + this.newBrinkValuesForm + .get(`legend_${i - 1}`) + .setValue(`${this.ograjiceValues[legendType][i - 1]}`); + } + } else { + div.innerHTML += + "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + + MapColors.getColorForLegendHighToLow(0) + + "'>■</span> <" + + this.ograjiceValues[legendType][0] + + "</p>"; + + for (let i = 0; i < 5; i++) { + div.innerHTML += + "<p style='background:white; display: inline; font-size:17px'> <span style='color:" + + MapColors.getColorForLegendHighToLow(i + 1) + + "'>■</span> " + + this.ograjiceValues[legendType][i] + + (this.ograjiceValues[legendType][i + 1] + ? "–" + this.ograjiceValues[legendType][i + 1] + "</p>" + : "+</p>"); + + this.newBrinkValuesForm + .get(`legend_${i}`) + .setValue(`${this.ograjiceValues[legendType][i]}`); + } + } + + return div; + }; + this.mapLegend.addTo(this.map); + } + grayscaleChange() { const el = <HTMLElement>( document.querySelectorAll(".leaflet-pane.leaflet-tile-pane")[0]