Merge branch '12-map-legend-further' into 'master'

Resolve "map legend further"

Closes #12

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

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

@@ -416,9 +416,10 @@ export class ExistingSimulationsComponent implements OnInit {
       .subscribe(
         (res) => {
           this.showToast(
-            `onRunDss is over. Deselect the simulation and select it again to have newly generated file loaded.`,
+            `onRunDss is over.`,
             "Success",
-            "success"
+            "success",
+            15000
           );
           this.runDss.status = "";
 
@@ -426,12 +427,12 @@ export class ExistingSimulationsComponent implements OnInit {
           this.selectedSimulationToEmit.emit(undefined);
           setTimeout(() => {
             this.selectedSimulationToEmit.emit(this.selectedSimulation);
-            this.showToast(`Updating spider chart.`, "Info", "info");
+            this.showToast(`Updating spider chart.`, "Info", "info", 8000);
           }, 0);
         },
         (error) => {
           this.runDss.status = "error";
-          this.showToast(`Working, please wait`, `Info`, "info");
+          this.showToast(`Working, please wait`, `Info`, "info", 8000);
         }
       )
       .add(() => {

src/app/pages/simulation-wizard/results-map/map-colors-local.ts

@@ -6,14 +6,19 @@ const color_2 = "#fed98b";
 const color_3 = "#c2e3ee";
 const color_4 = "#6da5cc";
 const color_5 = "#35b499";
+// const color_5 = "darkseagreen";
+// const color_4 = "cornflowerblue";
+// const color_3 = "lightblue";
+// const color_2 = "navajowhite";
+// const color_1 = "orange";
+// const color_0 = "red";
 const color_capacity_equal_9999 = "#ffffff00";
 const color_value_undefined = "#9efcff33";
 
 export function getColor(
   properties: any,
   pro: any,
-  max: number,
-  ratiosBetweenGrades: number[],
+  brinkValues: number[],
   isCapacityEqual9999: boolean
 ): string {
   if (isCapacityEqual9999 == true) {
@@ -21,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) {
@@ -33,15 +42,15 @@ export function getColor(
 
   if (value == undefined) return color_value_undefined;
 
-  return value > max / ratiosBetweenGrades[4]
+  return value > brinkValues[4]
     ? color_0
-    : value > max / ratiosBetweenGrades[3]
+    : value > brinkValues[3]
     ? color_1
-    : value > max / ratiosBetweenGrades[2]
+    : value > brinkValues[2]
     ? color_2
-    : value > max / ratiosBetweenGrades[1]
+    : value > brinkValues[1]
     ? color_3
-    : value > max / ratiosBetweenGrades[0]
+    : value > brinkValues[0]
     ? color_4
     : color_5;
 }
@@ -49,8 +58,7 @@ export function getColor(
 export function getColorHighToLow(
   properties: any,
   pro: any,
-  max: number,
-  ratiosBetweenGrades: number[],
+  brinkValues: number[],
   isCapacityEqual9999: boolean
 ): string {
   if (isCapacityEqual9999 == true) {
@@ -58,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) {
@@ -72,32 +82,45 @@ export function getColorHighToLow(
 
   if (value == undefined) return color_value_undefined;
 
-  return value > max / ratiosBetweenGrades[4]
+  return value > brinkValues[4]
     ? color_5
-    : value > max / ratiosBetweenGrades[3]
+    : value > brinkValues[3]
     ? color_4
-    : value > max / ratiosBetweenGrades[2]
+    : value > brinkValues[2]
     ? color_3
-    : value > max / ratiosBetweenGrades[1]
+    : value > brinkValues[1]
     ? color_2
-    : value > max / ratiosBetweenGrades[0]
+    : value > brinkValues[0]
     ? color_1
     : color_0;
 }
 
-export function getColorForLegend(
-  d: number,
-  current_brink_values: object
-): string {
-  return current_brink_values[d] > current_brink_values[4]
+export function getColorForLegend(id: number): string {
+  return id == 5
     ? color_0
-    : current_brink_values[d] > current_brink_values[3]
+    : id == 4
     ? color_1
-    : current_brink_values[d] > current_brink_values[2]
+    : id == 3
     ? color_2
-    : current_brink_values[d] > current_brink_values[1]
+    : id == 2
     ? color_3
-    : current_brink_values[d] > current_brink_values[0]
+    : id == 1
     ? color_4
     : color_5;
 }
+
+export function getColorForLegendHighToLow(id: number): string {
+  return id == 5
+    ? color_5
+    : id == 4
+    ? color_4
+    : id == 3
+    ? color_3
+    : id == 2
+    ? color_2
+    : id == 1
+    ? color_1
+    : color_0;
+}
+
+export const colorsAll = [color_0, color_1, color_2, color_3, color_4, color_5];

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

@@ -56,7 +56,6 @@
           </nb-card-footer>
         </nb-card>
       </ng-template>
-    </div>
       <div id="grayscaleInput">
         <input
           type="range"
@@ -64,5 +63,83 @@
           (change)="grayscaleChange()"
         />
       </div>
+    </div>
+    <div id="inputsLegendContainer">
+      <form
+        [formGroup]="newBrinkValuesForm"
+        (ngSubmit)="onApplyNewValuesSubmit()"
+      >
+        <div>
+          <div>
+            <label for="">1st color, up to</label>
+            <input
+              nbInput
+              size="tiny"
+              type="number"
+              min="0"
+              max="1000000"
+              formControlName="legend_0"
+            />
+          </div>
+          <div>
+            <label for="">2nd color, up to</label>
+            <input
+              nbInput
+              size="tiny"
+              type="number"
+              min="0"
+              max="1000000"
+              formControlName="legend_1"
+            />
+          </div>
+          <div>
+            <label for="">3rd color, up to</label>
+            <input
+              nbInput
+              size="tiny"
+              type="number"
+              min="0"
+              max="1000000"
+              formControlName="legend_2"
+            />
+          </div>
+          <div>
+            <label for="">4th color, up to</label>
+            <input
+              nbInput
+              size="tiny"
+              type="number"
+              min="0"
+              max="1000000"
+              formControlName="legend_3"
+            />
+          </div>
+          <div>
+            <label for="">5th color, up to</label>
+            <input
+              nbInput
+              size="tiny"
+              type="number"
+              min="0"
+              max="1000000"
+              formControlName="legend_4"
+            />
+          </div>
+          <div>
+            <label for="">6th color, up to unlimited</label>
+          </div>
+        </div>
+        <div>
+          <button
+            nbButton
+            status="primary"
+            type="submit"
+            [disabled]="!newBrinkValuesForm.dirty"
+          >
+            Apply new values
+          </button>
+        </div>
+      </form>
+    </div>
   </nb-card-body>
 </nb-card>

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

@@ -28,7 +28,7 @@
     padding: 4px 3px 0 3px;
   }
   #loadGeojsonButtonsContainer {
-    z-index: 997;
+    z-index: 1003;
     position: absolute;
     top: 5px;
     left: 57px;
@@ -42,6 +42,36 @@
       text-transform: capitalize;
     }
   }
+  #inputsLegendContainer {
+    padding: 10px;
+    form {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      div:nth-of-type(6) label {
+        width: 100%;
+        text-align: center;
+      }
+      div label {
+        display: inline-block;
+        width: 140px;
+        border-radius: 0.25rem;
+        text-align: right;
+        font-weight: bold;
+        padding: 3px 7px;
+      }
+      input {
+        margin-bottom: 2px;
+        margin-left: 5px;
+        height: 1rem;
+        width: 10rem;
+      }
+      div:nth-child(2) button {
+        margin-left: 8px;
+      }
+    }
+  }
 }
 nb-radio {
   display: inline;