refactor: Move layer definitions to service

src/app.component.ts

@@ -1,9 +1,3 @@
-import * as hsv2rgb from 'hsv2rgb';
-import {Fill, Stroke, Style} from 'ol/style';
-import {Vector as VectorLayer} from 'ol/layer';
-
-import {nuts} from './nuts';
-
 export const HsComponent = {
   template: (HsCore) => {
     'ngInject';
@@ -30,117 +24,7 @@ export const HsComponent = {
       //vm.PraAdjusterService = AdjusterService;
       HsLayoutService.sidebarRight = false;
       console.log(HsLayoutService.sidebarRight);
-      AdjusterService.clustersLoaded.subscribe(() => {
-        colorPalette = generateRandomColorPalette(
-          AdjusterService.clusters.length
-        );
-      });
     }
   },
 };
 
-// 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: '#000000',
-    width: 0.5,
-  }),
-});
-
-// TODO: 'method' must be obtained from AdjusterService
-const method = 'haclustwd2';
-const serviceUrl = 'https://jmacura.ml/ws/georeport/';
-const nuts3style = function (feature) {
-  if (isNaN(feature.get(method))) {
-    return [
-      new Style({
-        fill: new Fill({
-          color: '#FFF',
-        }),
-        stroke: new Stroke({
-          color: '#3399CC',
-          width: 0.25,
-        }),
-      }),
-    ];
-  } else {
-    return [
-      new Style({
-        fill: new Fill({
-          color: colorPalette[feature.get(method) - 1],
-        }),
-        stroke: new Stroke({
-          color: '#FFF',
-          width: 0.25,
-        }),
-      }),
-    ];
-  }
-};
-
-export const nuts2Layer = new VectorLayer({
-  source: nuts.nuts2Source,
-  editor: {editable: false},
-  visible: false,
-  style: nuts2style,
-  title: 'NUTS2 regions',
-});
-
-export const nuts3Layer = new VectorLayer({
-  source: nuts.nuts3Source,
-  editor: {editable: false},
-  visible: true,
-  style: nuts3style,
-  title: 'NUTS3 regions',
-});
-nuts3Layer.set('popUp', {
-  attributes: [
-    {attribute: 'CNTR_CODE', label: 'Country'},
-    {attribute: 'NUTS_NAME', label: 'Name'},
-    {attribute: method, label: 'Cluster ID'},
-    {
-      attribute: 'NUTS_ID',
-      label: 'Detailed report',
-      displayFunction: (x) => {
-        return `<a href="${serviceUrl}${x}" target="_blank">in a new page</a>.`;
-      },
-    },
-  ],
-});
-
-/**
- * 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 = colorPalette;
-  const goldenRatioConjugate = 0.618033988749895;
-  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)`;
-}

src/app.config.ts

@@ -1,7 +1,7 @@
 import View from 'ol/View';
 import {OSM} from 'ol/source';
 import {Tile} from 'ol/layer';
-import {nuts2Layer, nuts3Layer} from './app.component';
+import {nuts2Layer, nuts3Layer} from './app.service';
 
 function getHostname() {
   const url = window.location.href;

src/app.service.ts

@@ -1,21 +1,32 @@
+import * as hsv2rgb from 'hsv2rgb';
 import {Injectable} from '@angular/core';
+import {Fill, Stroke, Style} from 'ol/style';
+import {Vector as VectorLayer} from 'ol/layer';
 
-import {AdjusterLoaderComponent} from './adjuster/adjuster-loader.component';
 import {HsDialogContainerService} from 'hslayers-ng/components/layout/dialogs/dialog-container.service';
 import {HsLayoutService} from 'hslayers-ng/components/layout/layout.service';
 import {HsPanelContainerService} from 'hslayers-ng/components/layout/panels/panel-container.service';
 import {HsSidebarService} from 'hslayers-ng/components/sidebar/sidebar.service';
 
 import {AdjusterComponent} from './adjuster/adjuster.component';
+import {AdjusterLoaderComponent} from './adjuster/adjuster-loader.component';
+import {AdjusterService} from './adjuster/adjuster.service';
+import {nuts} from './nuts';
 
 @Injectable({providedIn: 'root'})
 export class AppService {
   constructor(
+    private adjusterService: AdjusterService,
     private hsDialogContainerService: HsDialogContainerService,
     private hsLayoutService: HsLayoutService,
     private hsSidebarService: HsSidebarService,
     private hsPanelContainerService: HsPanelContainerService
   ) {
+    adjusterService.clustersLoaded.subscribe(() => {
+      colorPalette = generateRandomColorPalette(
+        adjusterService.clusters.length
+      );
+    });
     this.init();
   }
 
@@ -34,3 +45,109 @@ export class AppService {
     //this.hsLayoutService.sidebarRight = false;
   }
 }
+
+// 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: '#000000',
+    width: 0.5,
+  }),
+});
+
+// TODO: 'method' must be obtained from AdjusterService
+const method = 'haclustwd2';
+const serviceUrl = 'https://jmacura.ml/ws/georeport/';
+const nuts3style = function (feature) {
+  if (isNaN(feature.get(method))) {
+    return [
+      new Style({
+        fill: new Fill({
+          color: '#FFF',
+        }),
+        stroke: new Stroke({
+          color: '#3399CC',
+          width: 0.25,
+        }),
+      }),
+    ];
+  } else {
+    return [
+      new Style({
+        fill: new Fill({
+          color: colorPalette[feature.get(method) - 1],
+        }),
+        stroke: new Stroke({
+          color: '#FFF',
+          width: 0.25,
+        }),
+      }),
+    ];
+  }
+};
+
+export const nuts2Layer = new VectorLayer({
+  source: nuts.nuts2Source,
+  editor: {editable: false},
+  visible: false,
+  style: nuts2style,
+  title: 'NUTS2 regions',
+});
+
+export const nuts3Layer = new VectorLayer({
+  source: nuts.nuts3Source,
+  editor: {editable: false},
+  visible: true,
+  style: nuts3style,
+  title: 'NUTS3 regions',
+});
+nuts3Layer.set('popUp', {
+  attributes: [
+    {attribute: 'CNTR_CODE', label: 'Country'},
+    {attribute: 'NUTS_NAME', label: 'Name'},
+    {attribute: method, label: 'Cluster ID'},
+    {
+      attribute: 'NUTS_ID',
+      label: 'Detailed report',
+      displayFunction: (x) => {
+        return `<a href="${serviceUrl}${x}" target="_blank">in a new page</a>.`;
+      },
+    },
+  ],
+});
+
+/**
+ * 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 = colorPalette;
+  const goldenRatioConjugate = 0.618033988749895;
+  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)`;
+}