🐛 update legends properly

src/adjuster/adjuster-legend.service.ts

@@ -1,3 +1,4 @@
+/* eslint-disable valid-jsdoc */
 import hsv2rgb from 'hsv2rgb';
 import {Injectable} from '@angular/core';
 
@@ -28,12 +29,14 @@ export class AdjusterLegendService {
   ];
   serviceUrl: string;
   staticIndexLegend: any[];
+  staticClusterLegend: any[];
 
   constructor(public adjusterPresetsService: AdjusterPresetsService) {
     this.serviceUrl = this.adjusterPresetsService.serviceBaseUrl + 'georeport/';
     this.staticIndexLegend = [...Array(50).keys()].map((num) => {
       return perc2color(num / 50);
     });
+    this.staticClusterLegend = this.colorPalette;
   }
 
   createIndexLegend(): FakeLegend {
@@ -109,8 +112,13 @@ export class AdjusterLegendService {
     };*/
   }
 
+  /**
+   * Updates the color palette with and appropriate number of colors
+   * @param count - number of colors to generate
+   */
   refreshColorPalette(count: number): void {
     this.colorPalette = this.generateRandomColorPalette(count);
+    this.staticClusterLegend = this.colorPalette.slice(0, count);
   }
 
   /**
@@ -129,10 +137,10 @@ export class AdjusterLegendService {
       h += goldenRatioConjugate;
       h %= 1;
       h *= 360;
-      palette.push(hsv2rgb(h, 0.5, 0.95));
+      const [r, g, b] = hsv2rgb(h, 0.5, 0.95);
+      palette.push(`rgba(${r}, ${g}, ${b}, 1)`);
       i++;
     }
     return palette;
-    //return `rgba(${r}, ${g}, ${b}, 0.7)`;
   }
 }

src/adjuster/adjuster-simple-panel/adjuster-simple-panel.component.html

@@ -68,7 +68,7 @@
       <p class="lead">{{ 'ADJUSTER.clusterLegend' | translateHs: {app: 'default'} }}</p>
       <div class="container pb-2">
         <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
-          <div *ngFor="let color of adjusterLegendService.colorPalette; let i = index" class="col">
+          <div *ngFor="let color of adjusterLegendService.staticClusterLegend; let i = index" class="col">
             <div style="background-color: {{color}}" class="cluster-id text-center p-1 py-sm-3 my-1 my-sm-2">#{{i+1}}</div>
           </div>
         </div>

src/translations.json

@@ -50,7 +50,7 @@
       "calcAttractivity": "Calculating attractivity",
       "calcClusters": "Calculating clusters",
       "classifyBySchema": "Classify factors by schema",
-      "clusterLegend": "Cluster colours",
+      "clusterLegend": "Clusters' colours",
       "clusters": "Clusters",
       "clustersDescription": "Groups of similar regions",
       "index": "Index",