polirural-attractiveness-clustering/src/app.component.ts

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';
    return HsCore.hslayersNgTemplate;
  },
  bindings: {},
  controllerAs: 'vm',
  controller: class HsComponent {
    exists;
    panelVisible;
    PraAdjusterService;
    constructor(
      gettext,
      HsCore,
      HsLayoutService,
      HsSidebarService,
      AdjusterService,
      AppService
    ) {
      'ngInject';
      const vm = this;
      //vm.exists = HsCore.exists;
      //vm.panelVisible = HsLayoutService.panelVisible;
      //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)`;
}