♻️ Simplify scenario-factor-year-graph usage

Step #2 towards isolated components

src/app/app.component.html

@@ -37,20 +37,7 @@
       <ng-template ngbNavContent>
         <year-graph></year-graph>
         <factor-year-graph></factor-year-graph>
-        <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>
-        <scenario-year-graph [region]="selectedRegion" [domain]="selectedDomain"></scenario-year-graph>
-        <h3>Rural attractiveness factors</h3>
-        <scenario-factor-year-graph [region]="selectedRegion" [domain]="selectedDomain"></scenario-factor-year-graph>
+        <scenario-factor-year-graph></scenario-factor-year-graph>
       </ng-template>
     </ng-container>
 

src/app/app.component.ts

@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 
 import {SdmDihService} from './sdm-dih.service';
-import {YearGraphService} from './discs-chart/year-graph.service';
 
 @Component({
   selector: 'application-root',
@@ -9,14 +8,5 @@ import {YearGraphService} from './discs-chart/year-graph.service';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  selectedRegion = 'Apulia';
-  selectedDomain = 'INFR';
-  constructor(
-    public sdmDihService: SdmDihService,
-    public yearGraphService: YearGraphService
-  ) {}
-
-  baselineFilter = (item): boolean => {
-    return item !== 'baseline';
-  };
+  constructor(public sdmDihService: SdmDihService) {}
 }

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

@@ -8,7 +8,6 @@ import {FactorYearGraphComponent} from './factor-year-graph/factor-year-graph.co
 import {FilterPipe} from './filter.pipe';
 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 {YearGraphComponent} from './year-graph/year-graph.component';
 
 @NgModule({
@@ -19,7 +18,6 @@ import {YearGraphComponent} from './year-graph/year-graph.component';
     FactorYearGraphComponent,
     YearGraphComponent,
     ScenarioFactorYearGraphComponent,
-    ScenarioYearGraphComponent,
     FilterPipe,
   ],
   declarations: [
@@ -28,7 +26,6 @@ import {YearGraphComponent} from './year-graph/year-graph.component';
     FactorYearGraphComponent,
     YearGraphComponent,
     ScenarioFactorYearGraphComponent,
-    ScenarioYearGraphComponent,
     FilterPipe,
     QuarterPipe,
   ],

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

@@ -1,3 +1,15 @@
+<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
     class="form-select form-select-lg mb-3"
@@ -7,15 +19,30 @@
   >
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select-->
+
+  <div class="d-flex">
+    <div class="discs-caption">
+      <h4>Aggregated RAI</h4>
+      <p>
+        of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
+      </p>
+    </div>
+    <disc [region]="selectedRegion" show="scenario" inSitu="true"></disc>
+    <div *ngFor="let scenario of filteredScenarios">
+      <disc [region]="selectedRegion" [scenario]="scenario" show="scenario" inSitu="true"></disc>
+    </div>
+  </div>
+
+  <h3>Rural attractiveness factors</h3>
   <div class="d-flex">
     <div class="discs-caption">
       <h4>Baseline scenario</h4>
       <p>
-        of region {{region}} in {{yearGraphService.selectedYear}}
+        of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
       </p>
     </div>
     <div *ngFor="let factor of sdmDihService.factors">
-      <disc [region]="region" [factor]="factor" show="factor" inSitu="true"></disc>
+      <disc [region]="selectedRegion" [factor]="factor" show="factor" inSitu="true"></disc>
     </div>
   </div>
   <hr>
@@ -24,11 +51,11 @@
       <div class="discs-caption">
         <h4>{{scenario}} scenario</h4>
         <p>
-          of region {{region}} in {{yearGraphService.selectedYear}}
+          of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
         </p>
       </div>
       <div *ngFor="let factor of sdmDihService.factors">
-        <disc [region]="region" [factor]="factor" [scenario]="scenario" show="factor" inSitu="true"></disc>
+        <disc [region]="selectedRegion" [factor]="factor" [scenario]="scenario" show="factor" inSitu="true"></disc>
       </div>
     </div>
     <hr>

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

@@ -1 +1,25 @@
-@use "../scenario-year-graph/scenario-year-graph.component.scss";
+@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;
+}
+
+.discs-caption {
+  width: 100%;
+}

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

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 import domain2scenario from '../../../assets/data/domain-scenario.json';
 import {SdmDihService} from '../../sdm-dih.service';
@@ -10,9 +10,9 @@ import {YearGraphService} from '../year-graph.service';
   styleUrls: ['./scenario-factor-year-graph.component.scss'],
 })
 export class ScenarioFactorYearGraphComponent implements OnInit {
-  @Input() region: string;
-  @Input() domain: string;
   filteredScenarios = [];
+  selectedRegion = 'Apulia';
+  selectedDomain = 'INFR';
 
   constructor(
     public sdmDihService: SdmDihService,
@@ -26,20 +26,21 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
       }
       this.filterScenarios();
     });
-    this.yearGraphService.graphRefreshes.subscribe(({domain}) => {
-      if (domain) {
-        this.domain = domain;
-      }
+    this.yearGraphService.graphRefreshes.subscribe(() => {
       this.filterScenarios();
     });
   }
 
   filterScenarios(): void {
     this.filteredScenarios = this.sdmDihService.scenarios.filter((scenario) => {
-      return domain2scenario[this.domain].includes(scenario);
+      return domain2scenario[this.selectedDomain].includes(scenario);
     });
   }
 
+  baselineFilter = (item): boolean => {
+    return item !== 'baseline';
+  };
+
   /*animateGraphs() {
     const MILLISECONDS_TO_ANIMATE = 100 as const;
     let i = 1;

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

@@ -1,23 +0,0 @@
-<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-->
-  <div class="d-flex">
-    <div class="discs-caption">
-      <h4>Aggregated RAI</h4>
-      <p>
-        of region {{region}} in {{yearGraphService.selectedYear}}
-      </p>
-    </div>
-    <disc [region]="region" show="scenario" inSitu="true"></disc>
-    <div *ngFor="let scenario of filteredScenarios">
-      <disc [region]="region" [scenario]="scenario" show="scenario" inSitu="true"></disc>
-    </div>
-  </div>
-</div>
-<ng-template #loading> Loading data... </ng-template>

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

@@ -1,25 +0,0 @@
-@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;
-}
-
-.discs-caption {
-  width: 100%;
-}

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

@@ -1,74 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-
-import domain2scenario from '../../../assets/data/domain-scenario.json';
-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;
-  filteredScenarios = [];
-
-  constructor(
-    public sdmDihService: SdmDihService,
-    public yearGraphService: YearGraphService
-  ) {}
-
-  ngOnInit() {
-    this.sdmDihService.dataLoads.subscribe((loaded) => {
-      if (!loaded) {
-        return;
-      }
-      this.filterScenarios();
-    });
-    this.yearGraphService.graphRefreshes.subscribe(({domain}) => {
-      if (domain) {
-        this.domain = domain;
-      }
-      this.filterScenarios();
-    });
-  }
-
-  filterScenarios(): void {
-    this.filteredScenarios = this.sdmDihService.scenarios.filter((scenario) => {
-      return domain2scenario[this.domain].includes(scenario);
-    });
-  }
-
-  /*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();
-  }*/
-}