♻️ create envelope components for each disc chart

Step #3 towards isolated components

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

@@ -4,17 +4,18 @@ import {NgModule} from '@angular/core';
 
 import {DiscComponent} from './disc.component';
 import {DiscLegendComponent} from './disc-legend.component';
+import {FactorYearDiscComponent} from './factor-year-graph/factor-year-disc.component';
 import {FactorYearGraphComponent} from './factor-year-graph/factor-year-graph.component';
 import {FilterPipe} from './filter.pipe';
 import {QuarterPipe} from './quarter.pipe';
+import {ScenarioFactorYearDiscComponent} from './scenario-factor-year-graph/scenario-factor-year-disc.component';
 import {ScenarioFactorYearGraphComponent} from './scenario-factor-year-graph/scenario-factor-year-graph.component';
+import {YearDiscComponent} from './year-graph/year-disc.component';
 import {YearGraphComponent} from './year-graph/year-graph.component';
 
 @NgModule({
   imports: [CommonModule, FormsModule],
   exports: [
-    DiscComponent,
-    DiscLegendComponent,
     FactorYearGraphComponent,
     YearGraphComponent,
     ScenarioFactorYearGraphComponent,
@@ -23,8 +24,11 @@ import {YearGraphComponent} from './year-graph/year-graph.component';
   declarations: [
     DiscComponent,
     DiscLegendComponent,
+    FactorYearDiscComponent,
     FactorYearGraphComponent,
+    YearDiscComponent,
     YearGraphComponent,
+    ScenarioFactorYearDiscComponent,
     ScenarioFactorYearGraphComponent,
     FilterPipe,
     QuarterPipe,

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

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+
+import {DiscComponent} from '../disc.component';
+import {SdmDihService} from '../../sdm-dih.service';
+import {YearGraphService} from '../year-graph.service';
+
+@Component({
+  selector: 'factor-year-disc',
+  templateUrl: '../disc.component.html',
+})
+export class FactorYearDiscComponent extends DiscComponent {
+  constructor(
+    public sdmDihService: SdmDihService,
+    public yearGraphService: YearGraphService
+  ) {
+    super(sdmDihService, yearGraphService);
+  }
+}

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

@@ -20,7 +20,7 @@
         <disc-legend [region]="region"></disc-legend>
       </div>
       <div *ngFor="let factor of sdmDihService.factors">
-        <disc [region]="region" [factor]="factor" [show]="'factor'"></disc>
+        <factor-year-disc [region]="region" [factor]="factor" [show]="'factor'"></factor-year-disc>
       </div>
     </div>
     <hr *ngIf="!isLast">

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

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+
+import {DiscComponent} from '../disc.component';
+import {SdmDihService} from '../../sdm-dih.service';
+import {YearGraphService} from '../year-graph.service';
+
+@Component({
+  selector: 'scenario-factor-year-disc',
+  templateUrl: '../disc.component.html',
+})
+export class ScenarioFactorYearDiscComponent extends DiscComponent {
+  constructor(
+    public sdmDihService: SdmDihService,
+    public yearGraphService: YearGraphService
+  ) {
+    super(sdmDihService, yearGraphService);
+  }
+}

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

@@ -30,7 +30,7 @@
     </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>
+      <scenario-factor-year-disc [region]="selectedRegion" [scenario]="scenario" show="scenario" inSitu="true"></scenario-factor-year-disc>
     </div>
   </div>
 
@@ -44,7 +44,7 @@
       <disc-legend [region]="selectedRegion" scenario="baseline-2"></disc-legend>
     </div>
     <div *ngFor="let factor of sdmDihService.factors">
-      <disc [region]="selectedRegion" [factor]="factor" show="factor" inSitu="true"></disc>
+      <scenario-factor-year-disc [region]="selectedRegion" [factor]="factor" show="factor" inSitu="true"></scenario-factor-year-disc>
     </div>
   </div>
   <hr>
@@ -58,7 +58,7 @@
         <disc-legend [region]="selectedRegion" [scenario]="scenario"></disc-legend>
       </div>
       <div *ngFor="let factor of sdmDihService.factors">
-        <disc [region]="selectedRegion" [factor]="factor" [scenario]="scenario" show="factor" inSitu="true"></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/year-graph/year-disc.component.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+
+import {DiscComponent} from '../disc.component';
+import {SdmDihService} from '../../sdm-dih.service';
+import {YearGraphService} from '../year-graph.service';
+
+@Component({
+  selector: 'year-disc',
+  templateUrl: '../disc.component.html',
+})
+export class YearDiscComponent extends DiscComponent {
+  constructor(
+    public sdmDihService: SdmDihService,
+    public yearGraphService: YearGraphService
+  ) {
+    super(sdmDihService, yearGraphService);
+  }
+}

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

@@ -26,11 +26,11 @@
   >
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select-->
-</div>
-<ng-template #loading> Loading data... </ng-template>
-<div class="d-flex">
-  <div *ngFor="let region of sdmDihService.regions">
-    <disc [region]="region"></disc>
+  <div class="d-flex">
+    <div *ngFor="let region of sdmDihService.regions">
+      <year-disc [region]="region"></year-disc>
+    </div>
   </div>
+  <disc-legend></disc-legend>
 </div>
-<disc-legend></disc-legend>
+<ng-template #loading> Loading data... </ng-template>