✨ add detailed overview of all regions (by select)

src/app/app.component.html

@@ -1,11 +1,21 @@
 <main>
-  <h1 class="pl-2">SDM &ndash; DIH integration bridge</h1>
+  <h1 class="pl-2">Regional attractiveness of Polirural Pilot Regions based on system Dynamics models</h1>
   <div class="pl-2">
-    <h3>About</h3>
+    <h3>SDM &ndash; DIH integration bridge</h3>
     <p>This page provides some showcase ideas about visualization of SDM model outputs in various points in time. 
       SDM is a System Dynamics Model developed as a part of the Polirural project. <a href="hub.polirural.eu">DIH</a> is a Digital Innovation Hub developed as another part of the Polirural project.
       Regional attractiveness is one of the tools present in the DIH.</p>
   </div>
+  <div class="pl-2">
+    <h3>About System Dynamics Modelling</h3>
+    <p></p>
+    <p></p>
+  </div>
+  <div class="pl-2">
+    <h3>About Regional Attractiveness</h3>
+    <p>Attractiveness can be seen from the perspective of a farmer, a young man or woman, a businessman or a sociologist. As there is no singular perception of attractiveness, there cannot be a singular value representing it. In the Index of regional attractiveness, we emphasize the attractiveness of a region as a compound and relative value. Based on available statistical data about a region, each region is then assessed by several factors. In this showcase we differentiate social, anthropic, natural and economic factor.</p>
+    <p></p>
+  </div>
   <div class="graph-row">
     <year-graph></year-graph>
   </div>
@@ -13,7 +23,12 @@
     <all-in-one-graph></all-in-one-graph>
   </div>
   <div class="graph-row-plotly">
-  <region-graph [region]="'Apulia'"></region-graph>
+    <select [(ngModel)]="selectedRegion">
+      <ng-container *ngFor="let region of sdmDihService.regions">
+        <option [ngValue]="region">{{region}}</option>
+      </ng-container>
+    </select>
+    <region-graph [region]="selectedRegion"></region-graph>
   </div>
   <div class="map-row">
     <h2>Map-based comparison</h2>

src/app/app.component.scss

@@ -11,7 +11,12 @@
 }
 
 .graph-row-plotly {
-  height: 30rem;
+  height: 35rem;
+}
+
+.eq {
+  font-style: italic;
+  font-family: 'Times New Roman', Times, serif;
 }
 
 hslayers {

src/app/app.component.ts

@@ -7,6 +7,8 @@ import {Tile, Vector as VectorLayer} from 'ol/layer';
 
 import {HsConfig, HsEventBusService, HsToastService} from 'hslayers-ng';
 
+import {SdmDihService} from './graphs/sdm-dih.service';
+
 @Component({
   selector: 'application-root',
   templateUrl: './app.component.html',
@@ -15,12 +17,17 @@ import {HsConfig, HsEventBusService, HsToastService} from 'hslayers-ng';
 export class HslayersAppComponent {
   /* You can name your app as you like or not at all */
   title = 'hslayers-application';
+  selectedRegion: string;
   constructor(
     /* Inject here all modules from HSLayers-NG which you intend to use */
     public hsConfig: HsConfig /* public properties are visible in the template */,
     private hsEventBusService: HsEventBusService /* private properties are only visible from within this component class */,
-    private hsToastService: HsToastService
+    private hsToastService: HsToastService,
+    public sdmDihService: SdmDihService
   ) {
+    sdmDihService.dataLoads.subscribe(
+      () => (this.selectedRegion = this.sdmDihService.regions[0])
+    );
     /* Define and update the HsConfig configuration object */
     this.hsConfig.update({
       datasources: [

src/app/app.module.ts

@@ -1,4 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
+import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
 
 import {HslayersAppComponent} from './app.component';
@@ -12,6 +13,7 @@ import {YearGraphModule} from './graphs/year-graph/year-graph.module';
   declarations: [HslayersAppComponent],
   imports: [
     BrowserModule,
+    FormsModule,
     HslayersModule,
     YearGraphModule,
     AllInOneModule,

src/app/graphs/region-graph/region-graph.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
 
 import {SdmDihService} from '../sdm-dih.service';
 
@@ -7,7 +7,7 @@ import {SdmDihService} from '../sdm-dih.service';
   templateUrl: './region-graph.component.html',
   styleUrls: ['./region-graph.component.scss'],
 })
-export class RegionGraphComponent {
+export class RegionGraphComponent implements OnChanges {
   @Input() region: string;
   dataLoaded = false;
   data = [];
@@ -23,6 +23,10 @@ export class RegionGraphComponent {
     });
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    this.processData();
+  }
+
   processData() {
     const PARAM_TO_COMPARE = 'aggregated';
     const years = [];

src/app/graphs/year-graph/year-graph.component.html

@@ -1,4 +1,4 @@
-<h2>Rural attractiveness of regions in {{ selectedYear }}</h2>
+<h2>Rural attractiveness index of regions in {{ selectedYear }}</h2>
 <div *ngIf="sdmDihService.yearsLoaded; else loading">
   <div class="year-range">
     <span><button (click)="prevYear()">&#9665;</button></span>

src/styles.scss

@@ -75,10 +75,14 @@ main {
 h1 {
   color: #ff3e00;
   text-transform: uppercase;
-  font-size: 3em;
+  font-size: 2em;
   font-weight: 100;
 }
 
+h2 {
+  color: #ff3e00;
+}
+
 @media (min-width: 640px) {
   main {
     max-width: none;