Colorize clusters

Add random colorization of regions based on the cluster they belong to

src/adjuster/adjuster.service.js

@@ -14,7 +14,7 @@ export class AdjusterService {
         ? 'https://jmacura.ml/ws/'
         : 'https://publish.lesprojekt.cz/nodejs/';
     this.factors = factors;
-    this.nutsCodeRecordRelations = {};
+    this.clusters = [];
     this.apply();
   }
 
@@ -35,8 +35,7 @@ export class AdjusterService {
           }),
         },*/
       }).then((response) => {
-        const clusters = response.data.response;
-        console.log(this.clusters);
+        const clusterData = response.data.response;
         /*let max = 0;
         this.clusters.forEach((a) => {
           if (a.aggregate > max) {
@@ -51,7 +50,8 @@ export class AdjusterService {
           this.nutsCodeRecordRelations[a.code] = a;
         });*/
         nuts.nuts3Source.forEachFeature((feature) => {
-          const featureData = clusters.find(
+          // Pair feature with its clustering data
+          const featureData = clusterData.find(
             (item) => item['nuts_id'] === feature.get('NUTS_ID')
           );
           Object.keys(featureData).forEach(function (key, index) {
@@ -60,6 +60,14 @@ export class AdjusterService {
             }
           });
         });
+        const clusters = [];
+        for (const region of clusterData) {
+          if (!clusters.includes(region['km25.cluster'])) {
+            clusters.push(region['km2.cluster']);
+          }
+        }
+        this.clusters = clusters;
+        this.$rootScope.$broadcast('clusters_loaded');
       });
     };
     this.HsUtilsService.debounce(f, 300)();

src/app.js

@@ -22,6 +22,8 @@ import {Fill, Stroke, Style} from 'ol/style';
 import {OSM} from 'ol/source';
 import {Tile} from 'ol/layer';
 
+let randomColorPalette = [];
+
 function getHostname() {
   const url = window.location.href;
   const urlArr = url.split('/');
@@ -34,14 +36,19 @@ const stroke = new Stroke({
   width: 0.25,
 });
 
+/**
+ * https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
+ * @param {number} colorCount Number of colors to randomly generate
+ * @returns {Array<Array<Number>>} Array of RGB colors
+ */
 function generateRandomColorPalette(colorCount) {
   const palette = [];
-  const golden_ratio_conjugate = 0.618033988749895;
+  const goldenRatioConjugate = 0.618033988749895;
   for (let i = 0; i < colorCount; i++) {
     let h = Math.random();
-    h += golden_ratio_conjugate;
+    h += goldenRatioConjugate;
     h %= 1;
-    console.log(hsv2rgb(h, 0.5, 0.95));
+    h *= 360;
     palette.push(hsv2rgb(h, 0.5, 0.95));
   }
   // eslint-disable-next-line no-unused-vars
@@ -51,7 +58,7 @@ function generateRandomColorPalette(colorCount) {
 }
 
 const styles = function (feature) {
-  if (isNaN(feature.get('total'))) {
+  if (isNaN(feature.get('km25.cluster'))) {
     return [
       new Style({
         fill: new Fill({
@@ -66,14 +73,12 @@ const styles = function (feature) {
         fill: new Fill({
           color: randomColorPalette[feature.get('km25.cluster')],
         }),
-        stroke: stroke,
+        //stroke: stroke,
       }),
     ];
   }
 };
 
-const randomColorPalette = generateRandomColorPalette(5);
-
 const nuts2Layer = new VectorLayer({
   source: nuts.nuts2Source,
   visible: false,
@@ -164,7 +169,7 @@ angular
     panelsEnabled: {
       composition_browser: false,
       draw: false,
-      info: false,
+      //info: false,
       saveMap: false,
       language: false,
     },
@@ -189,8 +194,7 @@ angular
     HsLayoutService.sidebarButtons = true;
     HsLayoutService.setDefaultPanel('adjuster');
     $scope.$on('scope_loaded', function (event, args) {
-      // eslint-disable-next-line eqeqeq
-      if (args == 'Sidebar') {
+      if (args === 'Sidebar') {
         const el = angular.element(
           '<pra.adjuster hs.draggable ng-if="HsCore.exists(\'pra.adjuster\')" ng-show="panelVisible(\'adjuster\', this)"></pra.adjuster>'
         )[0];
@@ -204,4 +208,9 @@ angular
         $compile(toolbarButton)(event.targetScope);
       }
     });
+    $scope.$on('clusters_loaded', function (event, args) {
+      randomColorPalette = generateRandomColorPalette(
+        PraAdjusterService.clusters.length
+      );
+    });
   });