✨ create service for each graph & add slider

Step #5 towards isolated components

src/app/discs-chart/discs-chart-base.service.ts

@@ -5,9 +5,10 @@ import {SdmDihService} from '../sdm-dih.service';
 
 @Injectable({providedIn: 'root'})
 export class DiscsChartBaseService {
-  graphRefreshes: Subject<{region?: string; domain?: string}> = new Subject();
+  graphRefreshes: Subject<{region?: string; domain?: string}>;
   selectedYear = '';
   constructor(public sdmDihService: SdmDihService) {
+    this.graphRefreshes = new Subject();
     this.sdmDihService.dataLoads.subscribe((loaded) => {
       if (!loaded) {
         return;

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

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 import {DiscComponent} from '../disc.component';
-import {DiscsChartBaseService} from '../discs-chart-base.service';
+import {FactorYearGraphService} from './factor-year-graph.service';
 import {SdmDihService} from '../../sdm-dih.service';
 
 @Component({
@@ -11,8 +11,8 @@ import {SdmDihService} from '../../sdm-dih.service';
 export class FactorYearDiscComponent extends DiscComponent {
   constructor(
     public sdmDihService: SdmDihService,
-    public yearGraphService: DiscsChartBaseService
+    public graphService: FactorYearGraphService
   ) {
-    super(sdmDihService, yearGraphService);
+    super(sdmDihService, graphService);
   }
 }

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

@@ -1,8 +1,21 @@
 <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; last as isLast">
-  <div *ngIf="sdmDihService.yearsLoaded; else loading">
+<div *ngIf="sdmDihService.yearsLoaded; else loading">
+  <div class="year-range">
+    <span><button (click)="prevYear()">&#9665;</button></span>
+    <span><button (click)="animateGraphs()">&#9654;</button></span>
+    &emsp;
+    <span>{{sdmDihService.firstYear}}</span>
+    <input type="range" class="form-range" [(ngModel)]="yearGraphService.selectedYear"
+      (ngModelChange)="yearGraphService.redrawGraphs()" [min]="sdmDihService.firstYear" [max]="sdmDihService.lastYear"
+      step="0.25" />
+    <span>{{sdmDihService.lastYear}}</span>
+    &emsp;
+    <span><button (click)="nextYear()">&#9655;</button></span>
+  </div>
+
+  <ng-container *ngFor="let region of sdmDihService.regions; last as isLast">
     <!--select
     class="form-select form-select-lg mb-3"
     aria-label=".form-select-lg example"
@@ -24,6 +37,6 @@
       </div>
     </div>
     <hr *ngIf="!isLast">
-  </div>
-  <ng-template #loading> Loading data... </ng-template>
-</ng-container>
+  </ng-container>
+</div>
+<ng-template #loading> Loading data... </ng-template>

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

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 
-import {DiscsChartBaseService} from '../discs-chart-base.service';
+import {FactorYearGraphService} from './factor-year-graph.service';
 import {SdmDihService} from '../../sdm-dih.service';
 
 @Component({
@@ -11,7 +11,7 @@ import {SdmDihService} from '../../sdm-dih.service';
 export class FactorYearGraphComponent implements OnInit {
   constructor(
     public sdmDihService: SdmDihService,
-    public yearGraphService: DiscsChartBaseService
+    public yearGraphService: FactorYearGraphService
   ) {}
 
   ngOnInit() {
@@ -22,4 +22,36 @@ export class FactorYearGraphComponent implements OnInit {
       //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/factor-year-graph/factor-year-graph.service.ts

@@ -0,0 +1,11 @@
+import {DiscsChartBaseService} from '../discs-chart-base.service';
+import {Injectable} from '@angular/core';
+
+import {SdmDihService} from '../../sdm-dih.service';
+
+@Injectable({providedIn: 'root'})
+export class FactorYearGraphService extends DiscsChartBaseService {
+  constructor(public sdmDihService: SdmDihService) {
+    super(sdmDihService);
+  }
+}

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

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 import {DiscComponent} from '../disc.component';
-import {DiscsChartBaseService} from '../discs-chart-base.service';
+import {ScenarioFactorYearGraphService} from './scenario-factor-year-graph.service';
 import {SdmDihService} from '../../sdm-dih.service';
 
 @Component({
@@ -11,8 +11,8 @@ import {SdmDihService} from '../../sdm-dih.service';
 export class ScenarioFactorYearDiscComponent extends DiscComponent {
   constructor(
     public sdmDihService: SdmDihService,
-    public yearGraphService: DiscsChartBaseService
+    public graphService: ScenarioFactorYearGraphService
   ) {
-    super(sdmDihService, yearGraphService);
+    super(sdmDihService, graphService);
   }
 }

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

@@ -1,16 +1,27 @@
 <h2>Comparison of different scenarios</h2>
-<select [(ngModel)]="selectedRegion" (ngModelChange)="yearGraphService.redrawGraphs({region: selectedRegion})">
-  <ng-container *ngFor="let region of sdmDihService.regions">
-    <option [ngValue]="region">{{region}}</option>
-  </ng-container>
-</select>
-<select [(ngModel)]="selectedDomain" (ngModelChange)="yearGraphService.redrawGraphs({domain: selectedDomain})">
-  <ng-container *ngFor="let domain of sdmDihService.domains | filter:baselineFilter">
-    <option [ngValue]="domain">{{domain}}</option>
-  </ng-container>
-</select>
-
 <div *ngIf="sdmDihService.yearsLoaded; else loading">
+  <select [(ngModel)]="selectedRegion" (ngModelChange)="yearGraphService.redrawGraphs({region: selectedRegion})">
+    <ng-container *ngFor="let region of sdmDihService.regions">
+      <option [ngValue]="region">{{region}}</option>
+    </ng-container>
+  </select>
+  <select [(ngModel)]="selectedDomain" (ngModelChange)="yearGraphService.redrawGraphs({domain: selectedDomain})">
+    <ng-container *ngFor="let domain of sdmDihService.domains | filter:baselineFilter">
+      <option [ngValue]="domain">{{domain}}</option>
+    </ng-container>
+  </select>
+  <div class="year-range">
+    <span><button (click)="prevYear()">&#9665;</button></span>
+    <span><button (click)="animateGraphs()">&#9654;</button></span>
+    &emsp;
+    <span>{{sdmDihService.firstYear}}</span>
+    <input type="range" class="form-range" [(ngModel)]="yearGraphService.selectedYear"
+      (ngModelChange)="yearGraphService.redrawGraphs()" [min]="sdmDihService.firstYear" [max]="sdmDihService.lastYear"
+      step="0.25" />
+    <span>{{sdmDihService.lastYear}}</span>
+    &emsp;
+    <span><button (click)="nextYear()">&#9655;</button></span>
+  </div>
   <!--select
     class="form-select form-select-lg mb-3"
     aria-label=".form-select-lg example"
@@ -30,7 +41,8 @@
     </div>
     <disc [region]="selectedRegion" show="scenario" inSitu="true"></disc>
     <div *ngFor="let scenario of filteredScenarios">
-      <scenario-factor-year-disc [region]="selectedRegion" [scenario]="scenario" show="scenario" inSitu="true"></scenario-factor-year-disc>
+      <scenario-factor-year-disc [region]="selectedRegion" [scenario]="scenario" show="scenario" inSitu="true">
+      </scenario-factor-year-disc>
     </div>
   </div>
 
@@ -44,7 +56,8 @@
       <disc-legend [region]="selectedRegion" scenario="baseline-2"></disc-legend>
     </div>
     <div *ngFor="let factor of sdmDihService.factors">
-      <scenario-factor-year-disc [region]="selectedRegion" [factor]="factor" show="factor" inSitu="true"></scenario-factor-year-disc>
+      <scenario-factor-year-disc [region]="selectedRegion" [factor]="factor" show="factor" inSitu="true">
+      </scenario-factor-year-disc>
     </div>
   </div>
   <hr>
@@ -58,7 +71,8 @@
         <disc-legend [region]="selectedRegion" [scenario]="scenario"></disc-legend>
       </div>
       <div *ngFor="let factor of sdmDihService.factors">
-        <scenario-factor-year-disc [region]="selectedRegion" [factor]="factor" [scenario]="scenario" show="factor" inSitu="true"></scenario-factor-year-disc>
+        <scenario-factor-year-disc [region]="selectedRegion" [factor]="factor" [scenario]="scenario" show="factor"
+          inSitu="true"></scenario-factor-year-disc>
       </div>
     </div>
     <hr *ngIf="!isLast">

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

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 
 import domain2scenario from '../../../assets/data/domain-scenario.json';
-import {DiscsChartBaseService} from '../discs-chart-base.service';
+import {ScenarioFactorYearGraphService} from './scenario-factor-year-graph.service';
 import {SdmDihService} from '../../sdm-dih.service';
 
 @Component({
@@ -16,7 +16,7 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
 
   constructor(
     public sdmDihService: SdmDihService,
-    public yearGraphService: DiscsChartBaseService
+    public yearGraphService: ScenarioFactorYearGraphService
   ) {}
 
   ngOnInit() {
@@ -41,7 +41,7 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
     return item !== 'baseline';
   };
 
-  /*animateGraphs() {
+  animateGraphs() {
     const MILLISECONDS_TO_ANIMATE = 100 as const;
     let i = 1;
     for (const year of this.sdmDihService.years) {
@@ -51,9 +51,9 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
       }, MILLISECONDS_TO_ANIMATE * i);
       i++;
     }
-  }*/
+  }
 
-  /*nextYear() {
+  nextYear() {
     const selectedYearIndex = this.sdmDihService.years.findIndex(
       (val) => val == this.yearGraphService.selectedYear
     );
@@ -61,9 +61,9 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
       this.sdmDihService.years[selectedYearIndex + 1] ??
       this.yearGraphService.selectedYear;
     this.yearGraphService.redrawGraphs();
-  }*/
+  }
 
-  /*prevYear() {
+  prevYear() {
     const selectedYearIndex = this.sdmDihService.years.findIndex(
       (val) => val == this.yearGraphService.selectedYear
     );
@@ -71,5 +71,5 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
       this.sdmDihService.years[selectedYearIndex - 1] ??
       this.yearGraphService.selectedYear;
     this.yearGraphService.redrawGraphs();
-  }*/
+  }
 }

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

@@ -0,0 +1,11 @@
+import {DiscsChartBaseService} from '../discs-chart-base.service';
+import {Injectable} from '@angular/core';
+
+import {SdmDihService} from '../../sdm-dih.service';
+
+@Injectable({providedIn: 'root'})
+export class ScenarioFactorYearGraphService extends DiscsChartBaseService {
+  constructor(public sdmDihService: SdmDihService) {
+    super(sdmDihService);
+  }
+}

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

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 
 import {DiscComponent} from '../disc.component';
-import {DiscsChartBaseService} from '../discs-chart-base.service';
 import {SdmDihService} from '../../sdm-dih.service';
+import {YearGraphService} from './year-graph.service';
 
 @Component({
   selector: 'year-disc',
@@ -11,8 +11,8 @@ import {SdmDihService} from '../../sdm-dih.service';
 export class YearDiscComponent extends DiscComponent {
   constructor(
     public sdmDihService: SdmDihService,
-    public yearGraphService: DiscsChartBaseService
+    public graphService: YearGraphService
   ) {
-    super(sdmDihService, yearGraphService);
+    super(sdmDihService, graphService);
   }
 }

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

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
-import {DiscsChartBaseService} from '../discs-chart-base.service';
 import {SdmDihService} from '../../sdm-dih.service';
+import {YearGraphService} from './year-graph.service';
 
 @Component({
   selector: 'year-graph',
@@ -11,7 +11,7 @@ import {SdmDihService} from '../../sdm-dih.service';
 export class YearGraphComponent {
   constructor(
     public sdmDihService: SdmDihService,
-    public yearGraphService: DiscsChartBaseService
+    public yearGraphService: YearGraphService
   ) {}
 
   animateGraphs() {

src/app/discs-chart/year-graph/year-graph.service.ts

@@ -0,0 +1,11 @@
+import {DiscsChartBaseService} from '../discs-chart-base.service';
+import {Injectable} from '@angular/core';
+
+import {SdmDihService} from '../../sdm-dih.service';
+
+@Injectable({providedIn: 'root'})
+export class YearGraphService extends DiscsChartBaseService {
+  constructor(public sdmDihService: SdmDihService) {
+    super(sdmDihService);
+  }
+}