✨ add per scenario disc charts

src/app/app.component.html

@@ -31,15 +31,32 @@
         ...
       </ng-template>
     </ng-container>
+
     <ng-container [ngbNavItem]="2">
       <a ngbNavLink>1st ("Discs")</a>
       <ng-template ngbNavContent>
         <year-graph></year-graph>
+        <h2>Detailed overview of individual regions</h2>
+        <p>An aggregated attractiveness index is composed of six factors: anthropic, cultural, economic, institutional, natural and social. Due to the incompleteness of data provided by different regions, we only present four of them below.</p>
         <ng-container *ngFor="let region of sdmDihService.regions">
           <factor-year-graph [region]="region"></factor-year-graph>
         </ng-container>
+        <h2>Comparison of different scenarios</h2>
+        <select [(ngModel)]="selectedRegion">
+          <ng-container *ngFor="let region of sdmDihService.regions">
+            <option [ngValue]="region">{{region}}</option>
+          </ng-container>
+        </select>
+        <select [(ngModel)]="selectedDomain">
+          <ng-container *ngFor="let domain of sdmDihService.domains">
+            <option [ngValue]="domain">{{domain}}</option>
+          </ng-container>
+        </select>
+        <scenario-year-graph [region]="selectedRegion" [domain]="selectedDomain"></scenario-year-graph>
+        <scenario-factor-year-graph [region]="selectedRegion" [domain]="selectedDomain"></scenario-factor-year-graph>
       </ng-template>
     </ng-container>
+
     <ng-container ngbNavItem>
       <a ngbNavLink>2nd ("Dots")</a>
       <ng-template ngbNavContent>
@@ -51,6 +68,7 @@
           </ng-container>
       </ng-template>
     </ng-container>
+
     <ng-container ngbNavItem>
       <a ngbNavLink>3rd ("Map")</a>
       <ng-template ngbNavContent>
@@ -62,6 +80,7 @@
         </div>
       </ng-template>
     </ng-container>
+
     <ng-container ngbNavItem>
       <a ngbNavLink>4th ("Race")</a>
       <ng-template ngbNavContent>

src/app/app.component.ts

@@ -17,6 +17,8 @@ import {SdmDihService} from './sdm-dih.service';
 export class HslayersAppComponent {
   /* You can name your app as you like or not at all */
   title = 'hslayers-application';
+  selectedRegion = 'Apulia';
+  selectedDomain = 'INFR';
   constructor(
     /* Inject here all modules from HSLayers-NG which you intend to use */
     public hsConfig: HsConfig /* public properties are visible in the template */,

src/app/discs-chart/disc.component.ts

@@ -28,9 +28,9 @@ export class DiscComponent implements OnInit, AfterViewInit {
   ) {}
 
   ngOnInit(): void {
-    const regionSafeName = this.region.replace(' ', '_');
-    const scenarioSafeName = this.scenario.replace(' ', '_');
-    const factorSafeName = this.factor.split('/').slice(-1).pop();
+    const regionSafeName = this.region.replaceAll(' ', '_');
+    const scenarioSafeName = this.scenario.replaceAll(' ', '_');
+    const factorSafeName = this.factor.split('/').pop();
     const nonce = Math.round(Math.random() * 10000) + '';
     this.divId = `graph-place-${regionSafeName}-${scenarioSafeName}-${factorSafeName}-${nonce}`;
   }

src/app/discs-chart/discs.module.ts

@@ -6,8 +6,8 @@ import {DiscComponent} from './disc.component';
 import {DiscLegendComponent} from './disc-legend.component';
 import {FactorYearGraphComponent} from './factor-year-graph/factor-year-graph.component';
 import {QuarterPipe} from './quarter.pipe';
-//import {ScenarioFactorYearGraphComponent} from './scenario-factor-year-graph/scenario-factor-year-graph.component';
-//import {ScenarioYearGraphComponent} from './scenario-year-graph/scenario-year-graph.component';
+import {ScenarioFactorYearGraphComponent} from './scenario-factor-year-graph/scenario-factor-year-graph.component';
+import {ScenarioYearGraphComponent} from './scenario-year-graph/scenario-year-graph.component';
 import {YearGraphComponent} from './year-graph/year-graph.component';
 
 @NgModule({
@@ -17,16 +17,16 @@ import {YearGraphComponent} from './year-graph/year-graph.component';
     DiscLegendComponent,
     FactorYearGraphComponent,
     YearGraphComponent,
-    //ScenarioFactorYearGraphComponent,
-    //ScenarioYearGraphComponent,
+    ScenarioFactorYearGraphComponent,
+    ScenarioYearGraphComponent,
   ],
   declarations: [
     DiscComponent,
     DiscLegendComponent,
     FactorYearGraphComponent,
     YearGraphComponent,
-    //ScenarioFactorYearGraphComponent,
-    //ScenarioYearGraphComponent,
+    ScenarioFactorYearGraphComponent,
+    ScenarioYearGraphComponent,
     QuarterPipe,
   ],
   providers: [],

src/app/discs-chart/factor-year-graph/factor-year-graph.component.html

@@ -9,7 +9,7 @@
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select-->
   <div class="d-flex">
-    <div *ngFor="let factor of factors">
+    <div *ngFor="let factor of sdmDihService.factors">
       <disc [region]="region" [factor]="factor" [show]="'factor'"></disc>
     </div>
   </div>

src/app/discs-chart/factor-year-graph/factor-year-graph.component.ts

@@ -11,13 +11,6 @@ import {YearGraphService} from '../year-graph.service';
 })
 export class FactorYearGraphComponent implements OnInit {
   @Input() region: string;
-  factors = [
-    'aggregated',
-    'http://www.semanticweb.org/attractiveness/anthropic',
-    'http://www.semanticweb.org/attractiveness/economic',
-    'http://www.semanticweb.org/attractiveness/natural',
-    'http://www.semanticweb.org/attractiveness/social',
-  ];
 
   constructor(
     public sdmDihService: SdmDihService,
@@ -29,7 +22,7 @@ export class FactorYearGraphComponent implements OnInit {
       if (!loaded) {
         return;
       }
-      //TODO: fill in factors here dynamically?
+      //unused
     });
   }
 }

src/app/discs-chart/scenario-factor-year-graph/scenario-factor-year-graph.component.html

@@ -0,0 +1,27 @@
+<h3>Rural attractiveness index of region {{region}} in {{yearGraphService.selectedYear}} scenario comparison</h3>
+<div *ngIf="sdmDihService.yearsLoaded; else loading">
+  <!--select
+    class="form-select form-select-lg mb-3"
+    aria-label=".form-select-lg example"
+    [(ngModel)]="selectedYear"
+    (ngModelChange)="redrawGraphs()"
+  >
+    <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
+  </select-->
+  <h4>Baseline scenario</h4>
+  <div class="d-flex">
+    <div *ngFor="let factor of sdmDihService.factors">
+      <disc [region]="region" [factor]="factor" show="factor"></disc>
+    </div>
+  </div>
+
+  <div *ngFor="let scenario of sdmDihService.scenarios">
+    <h4>{{scenario}} scenario</h4>
+    <div class="d-flex">
+      <div *ngFor="let factor of sdmDihService.factors">
+        <disc [region]="region" [factor]="factor" [scenario]="scenario" show="factor"></disc>
+      </div>
+    </div>
+  </div>
+</div>
+<ng-template #loading> Loading data... </ng-template>

src/app/discs-chart/scenario-factor-year-graph/scenario-factor-year-graph.component.scss

@@ -0,0 +1 @@
+@use "../scenario-year-graph/scenario-year-graph.component.scss";

src/app/discs-chart/scenario-factor-year-graph/scenario-factor-year-graph.component.ts

@@ -0,0 +1,61 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+import {SdmDihService} from '../../sdm-dih.service';
+import {YearGraphService} from '../year-graph.service';
+
+@Component({
+  selector: 'scenario-factor-year-graph',
+  templateUrl: './scenario-factor-year-graph.component.html',
+  styleUrls: ['./scenario-factor-year-graph.component.scss'],
+})
+export class ScenarioFactorYearGraphComponent implements OnInit {
+  @Input() region: string;
+  @Input() domain: string;
+  constructor(
+    public sdmDihService: SdmDihService,
+    public yearGraphService: YearGraphService
+  ) {}
+
+  ngOnInit() {
+    this.sdmDihService.dataLoads.subscribe((loaded) => {
+      if (!loaded) {
+        return;
+      }
+    });
+    this.yearGraphService.graphRefreshes.subscribe(() => {
+      //unused
+    });
+  }
+
+  animateGraphs() {
+    const MILLISECONDS_TO_ANIMATE = 100 as const;
+    let i = 1;
+    for (const year of this.sdmDihService.years) {
+      setTimeout(() => {
+        this.yearGraphService.selectedYear = year;
+        this.yearGraphService.redrawGraphs();
+      }, MILLISECONDS_TO_ANIMATE * i);
+      i++;
+    }
+  }
+
+  nextYear() {
+    const selectedYearIndex = this.sdmDihService.years.findIndex(
+      (val) => val == this.yearGraphService.selectedYear
+    );
+    this.yearGraphService.selectedYear =
+      this.sdmDihService.years[selectedYearIndex + 1] ??
+      this.yearGraphService.selectedYear;
+    this.yearGraphService.redrawGraphs();
+  }
+
+  prevYear() {
+    const selectedYearIndex = this.sdmDihService.years.findIndex(
+      (val) => val == this.yearGraphService.selectedYear
+    );
+    this.yearGraphService.selectedYear =
+      this.sdmDihService.years[selectedYearIndex - 1] ??
+      this.yearGraphService.selectedYear;
+    this.yearGraphService.redrawGraphs();
+  }
+}

src/app/discs-chart/scenario-year-graph/scenario-year-graph.component.html

@@ -0,0 +1,20 @@
+<h3>Rural attractiveness index of region {{region}} in {{yearGraphService.selectedYear}} scenario comparison</h3>
+<div *ngIf="sdmDihService.yearsLoaded; else loading">
+  <!--select
+    class="form-select form-select-lg mb-3"
+    aria-label=".form-select-lg example"
+    [(ngModel)]="selectedYear"
+    (ngModelChange)="redrawGraphs()"
+  >
+    <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
+  </select-->
+  <h4>Aggregated RAI</h4>
+  <div class="d-flex">
+      <disc [region]="region" show="factor"></disc>
+      <div *ngFor="let scenario of sdmDihService.scenarios">
+        <disc [region]="region" [scenario]="scenario" show="factor"></disc>
+      </div>
+  </div>
+</div>
+<ng-template #loading> Loading data... </ng-template>
+

src/app/discs-chart/scenario-year-graph/scenario-year-graph.component.scss

@@ -0,0 +1,22 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/forms";
+
+.year-range {
+  text-align: center;
+}
+
+.year-range span {
+  font-size: 1.5rem;
+  margin: 0 0 .5em;
+}
+
+.form-range {
+  max-width: 20rem;
+}
+
+.d-flex {
+  display: flex;
+}
+

src/app/discs-chart/scenario-year-graph/scenario-year-graph.component.ts

@@ -0,0 +1,61 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+import {SdmDihService} from '../../sdm-dih.service';
+import {YearGraphService} from '../year-graph.service';
+
+@Component({
+  selector: 'scenario-year-graph',
+  templateUrl: './scenario-year-graph.component.html',
+  styleUrls: ['./scenario-year-graph.component.scss'],
+})
+export class ScenarioYearGraphComponent implements OnInit {
+  @Input() region: string;
+  @Input() domain: string;
+  constructor(
+    public sdmDihService: SdmDihService,
+    public yearGraphService: YearGraphService
+  ) {}
+
+  ngOnInit() {
+    this.sdmDihService.dataLoads.subscribe((loaded) => {
+      if (!loaded) {
+        return;
+      }
+    });
+    this.yearGraphService.graphRefreshes.subscribe(() => {
+      //unused
+    });
+  }
+
+  animateGraphs() {
+    const MILLISECONDS_TO_ANIMATE = 100 as const;
+    let i = 1;
+    for (const year of this.sdmDihService.years) {
+      setTimeout(() => {
+        this.yearGraphService.selectedYear = year;
+        this.yearGraphService.redrawGraphs();
+      }, MILLISECONDS_TO_ANIMATE * i);
+      i++;
+    }
+  }
+
+  nextYear() {
+    const selectedYearIndex = this.sdmDihService.years.findIndex(
+      (val) => val == this.yearGraphService.selectedYear
+    );
+    this.yearGraphService.selectedYear =
+      this.sdmDihService.years[selectedYearIndex + 1] ??
+      this.yearGraphService.selectedYear;
+    this.yearGraphService.redrawGraphs();
+  }
+
+  prevYear() {
+    const selectedYearIndex = this.sdmDihService.years.findIndex(
+      (val) => val == this.yearGraphService.selectedYear
+    );
+    this.yearGraphService.selectedYear =
+      this.sdmDihService.years[selectedYearIndex - 1] ??
+      this.yearGraphService.selectedYear;
+    this.yearGraphService.redrawGraphs();
+  }
+}

src/app/sdm-dih.service.ts

@@ -12,6 +12,17 @@ export class SdmDihService {
   //aggregatedData = {};
   firstYear: string;
   lastYear: string;
+  /**
+   * TODO: fill this in auto-magically
+   */
+  factors = [
+    'aggregated',
+    'http://www.semanticweb.org/attractiveness/anthropic',
+    'http://www.semanticweb.org/attractiveness/economic',
+    'http://www.semanticweb.org/attractiveness/natural',
+    'http://www.semanticweb.org/attractiveness/social',
+  ];
+  domains = [];
   regions = [];
   scenarios = [];
   years = [];
@@ -38,6 +49,12 @@ export class SdmDihService {
           ),
         ];
         console.log(this.scenarios);
+        this.domains = [
+          ...new Set(
+            this.sdmData[this.firstYear].map((yearData) => yearData['DOMAIN'])
+          ),
+        ];
+        console.log(this.domains);
         this.dataLoads.next(true);
       })
       .catch((err) => {

tsconfig.json

@@ -8,7 +8,7 @@
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "lib": ["es2018", "dom"],
+    "lib": ["es2021", "dom"],
     "module": "es2020",
     "moduleResolution": "node",
     "outDir": "./dist/out-tsc",