feat: change color palette

src/app.component.js

@@ -55,7 +55,7 @@ export const HsComponent = {
       }
     });
     $scope.$on('clusters_loaded', function (event, args) {
-      randomColorPalette = generateRandomColorPalette(
+      colorPalette = generateRandomColorPalette(
         PraAdjusterService.clusters.length
       );
     });
@@ -63,11 +63,25 @@ export const HsComponent = {
   controllerAs: 'vm',
 };
 
-let randomColorPalette = [];
+// https://colorbrewer2.org/?type=qualitative&scheme=Paired&n=12
+let colorPalette = [
+  '#a6cee3',
+  '#1f78b4',
+  '#b2df8a',
+  '#33a02c',
+  '#fb9a99',
+  '#e31a1c',
+  '#fdbf6f',
+  '#ff7f00',
+  '#cab2d6',
+  '#6a3d9a',
+  '#ffff99',
+  '#b15928',
+];
 
 const nuts2style = new Style({
   stroke: new Stroke({
-    color: '#FFFFFF',
+    color: '#000000',
     width: 0.5,
   }),
 });
@@ -91,7 +105,7 @@ const nuts3style = function (feature) {
     return [
       new Style({
         fill: new Fill({
-          color: randomColorPalette[feature.get(method) - 1],
+          color: colorPalette[feature.get(method) - 1],
         }),
       }),
     ];
@@ -123,18 +137,21 @@ nuts3Layer.set('popUp', {
 
 /**
  * https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
+ * @private
  * @param {number} colorCount Number of colors to randomly generate
  * @returns {Array<Array<Number>>} Array of RGB colors
  */
 function generateRandomColorPalette(colorCount) {
-  const palette = [];
+  const palette = colorPalette;
   const goldenRatioConjugate = 0.618033988749895;
-  for (let i = 0; i < colorCount; i++) {
+  let i = palette.length;
+  while (i < colorCount) {
     let h = Math.random();
     h += goldenRatioConjugate;
     h %= 1;
     h *= 360;
     palette.push(hsv2rgb(h, 0.5, 0.95));
+    i++;
   }
   return palette;
   //return `rgba(${r}, ${g}, ${b}, 0.7)`;