♻️ simplify factor-year-graph usage

Step #1 towards kinda standalone components

src/app/app.component.html

@@ -36,11 +36,7 @@
       <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>
+        <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">

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

@@ -1,6 +1,10 @@
-<h3>Rural attractiveness index of region {{region}} in {{yearGraphService.selectedYear}}</h3>
-<div *ngIf="sdmDihService.yearsLoaded; else loading">
-  <!--select
+<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">
+  <h3>Rural attractiveness index of region {{region}} in {{yearGraphService.selectedYear}}</h3>
+  <div *ngIf="sdmDihService.yearsLoaded; else loading">
+    <!--select
     class="form-select form-select-lg mb-3"
     aria-label=".form-select-lg example"
     [(ngModel)]="selectedYear"
@@ -8,11 +12,12 @@
   >
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select-->
-  <div class="d-flex">
-    <div *ngFor="let factor of sdmDihService.factors">
-      <disc [region]="region" [factor]="factor" [show]="'factor'"></disc>
+    <div class="d-flex">
+      <div *ngFor="let factor of sdmDihService.factors">
+        <disc [region]="region" [factor]="factor" [show]="'factor'"></disc>
+      </div>
     </div>
+    <disc-legend [region]="region"></disc-legend>
   </div>
-  <disc-legend [region]="region"></disc-legend>
-</div>
-<ng-template #loading> Loading data... </ng-template>
+  <ng-template #loading> Loading data... </ng-template>
+</ng-container>

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

@@ -1,5 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {interpolate, quantize, select} from 'd3';
+import {Component, OnInit} from '@angular/core';
 
 import {SdmDihService} from '../../sdm-dih.service';
 import {YearGraphService} from '../year-graph.service';
@@ -10,8 +9,6 @@ import {YearGraphService} from '../year-graph.service';
   styleUrls: ['./factor-year-graph.component.scss'],
 })
 export class FactorYearGraphComponent implements OnInit {
-  @Input() region: string;
-
   constructor(
     public sdmDihService: SdmDihService,
     public yearGraphService: YearGraphService