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

import VectorLayer from 'ol/layer/Vector';
import hsv2rgb from 'hsv2rgb';
import nuts from './nuts.js';
import {Fill, Stroke, Style} from 'ol/style';

export const HsComponent = {
  template: (HsCore) => {
    'ngInject';
    return HsCore.hslayersNgTemplate;
  },
  bindings: {},
  controller: function (
    $scope,
    $compile,
    $element,
    gettext,
    HsCore,
    HsLayoutService,
    HsSidebarService,
    PraAdjusterService
  ) {
    'ngInject';
    const vm = this;
    vm.exists = HsCore.exists;
    vm.panelVisible = HsLayoutService.panelVisible;
    vm.PraAdjusterService = PraAdjusterService;
    HsLayoutService.fullScreenMap($element, HsCore);
    HsLayoutService.sidebarRight = false;
    // HsLayoutService.sidebarToggleable = false;
    // HsCore.singleDatasources = true;
    //HsLayoutService.sidebarButtons = true;
    HsSidebarService.buttons.push({
      panel: 'adjuster',
      module: 'pra.adjuster',
      order: '6',
      title: 'Adjust factors',
      description: '',
      icon: 'icon-analytics-piechart',
    });
    $scope.$on('scope_loaded', function (event, args) {
      if (args === 'Sidebar') {
        const el = angular.element(
          '<pra-adjuster hs.draggable ng-if="vm.exists(\'pra.adjuster\')" ng-show="vm.panelVisible(\'adjuster\', this)"></pra-adjuster>'
        )[0];
        HsLayoutService.panelListElement.appendChild(el);
        $compile(el)($scope);
        HsLayoutService.setDefaultPanel('adjuster');
        const loader = angular.element(
          '<pra-adjuster-loader class="loader-splash" ng-if="vm.PraAdjusterService.isClusteringInProcess()"></pra-adjuster-loader>'
        )[0];
        HsLayoutService.contentWrapper
          .querySelector('.hs-page-content')
          .appendChild(loader);
        $compile(loader)(event.targetScope);
      }
    });
    $scope.$on('clusters_loaded', function (event, args) {
      randomColorPalette = generateRandomColorPalette(
        PraAdjusterService.clusters.length
      );
    });
  },
  controllerAs: 'vm',
};

let randomColorPalette = [];

const nuts2style = new Style({
  stroke: new Stroke({
    color: '#FFFFFF',
    width: 0.5,
  }),
});

// TODO: 'method' must be obtained from AdjusterService
const method = 'haclust';
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: randomColorPalette[feature.get(method) - 1],
        }),
      }),
    ];
  }
};

export const nuts2Layer = new VectorLayer({
  source: nuts.nuts2Source,
  editor: {editable: false},
  visible: true,
  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'},
  ],
});

/**
 * 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 goldenRatioConjugate = 0.618033988749895;
  for (let i = 0; i < colorCount; i++) {
    let h = Math.random();
    h += goldenRatioConjugate;
    h %= 1;
    h *= 360;
    palette.push(hsv2rgb(h, 0.5, 0.95));
  }
  return palette;
  //return `rgba(${r}, ${g}, ${b}, 0.7)`;
}