♻️ move some business logic to service

src/app/graphs/all-in-one-graph/all-in-one-graph.component.ts

@@ -15,7 +15,7 @@ export class AllInOneGraphComponent {
     //width: '100%',
   };
 
-  constructor(private sdmDihService: SdmDihService) {
+  constructor(public sdmDihService: SdmDihService) {
     this.sdmDihService.dataLoads.subscribe(() => {
       this.processData();
       this.dataLoaded = true;

src/app/graphs/all-in-one-graph/all-in-one-graph.module.ts

@@ -1,5 +1,6 @@
 import Plotly from 'plotly.js-dist-min';
 import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
 import {PlotlyModule} from 'angular-plotly.js';
 
@@ -8,7 +9,7 @@ import {AllInOneGraphComponent} from './all-in-one-graph.component';
 PlotlyModule.plotlyjs = Plotly;
 
 @NgModule({
-  imports: [CommonModule, PlotlyModule],
+  imports: [CommonModule, FormsModule, PlotlyModule],
   exports: [AllInOneGraphComponent],
   declarations: [AllInOneGraphComponent],
   providers: [],

src/app/graphs/sdm-dih.service.ts

@@ -10,10 +10,28 @@ export class SdmDihService {
   readonly DATA_PATH = '../../assets/data/normalized_data.csv';
   sdmData = {};
   //aggregatedData = {};
+  firstYear: string;
+  lastYear: string;
+  regions = [];
+  selectedYear = '';
+  years = [];
+  yearsLoaded = false;
   dataLoads: Subject<void> = new Subject();
 
   constructor(private httpClient: HttpClient) {
     this.loadData().then(() => {
+      this.years = Object.keys(this.sdmData);
+      this.yearsLoaded = true;
+      console.log(this.years);
+      this.firstYear = this.years[0];
+      this.lastYear = this.years[this.years.length - 1];
+      this.regions = [
+        ...new Set(
+          this.sdmData[this.firstYear].map((yearData) => yearData['MODEL'])
+        ),
+      ];
+      console.log(this.regions);
+      this.selectedYear = this.firstYear;
       this.dataLoads.next();
     });
   }

src/app/graphs/year-graph/year-graph.component.html

@@ -1,17 +1,17 @@
 <h2>Rural attractiveness of regions in {{ selectedYear }}</h2>
-<div *ngIf="yearsLoaded; else loading">
+<div *ngIf="sdmDihService.yearsLoaded; else loading">
   <div class="year-range">
-    <span>{{firstYear}}</span>
+    <span>{{sdmDihService.firstYear}}</span>
     <input
       type="range"
       class="form-range"
       [(ngModel)]="selectedYear"
       (ngModelChange)="redrawGraphs()"
-      [min]="firstYear"
-      [max]="lastYear"
+      [min]="sdmDihService.firstYear"
+      [max]="sdmDihService.lastYear"
       step="0.25"
     />
-    <span>{{lastYear}}</span>
+    <span>{{sdmDihService.lastYear}}</span>
   </div>
   <!--select
     class="form-select form-select-lg mb-3"

src/app/graphs/year-graph/year-graph.component.ts

@@ -9,29 +9,11 @@ import {SdmDihService} from '../sdm-dih.service';
   styleUrls: ['./year-graph.component.scss'],
 })
 export class YearGraphComponent {
-  firstYear: string;
-  lastYear: string;
-  regions = [];
   selectedYear = '';
-  years = [];
-  yearsLoaded = false;
 
-  constructor(private sdmDihService: SdmDihService) {
+  constructor(public sdmDihService: SdmDihService) {
     this.sdmDihService.dataLoads.subscribe(() => {
-      this.years = Object.keys(this.sdmDihService.sdmData);
-      this.yearsLoaded = true;
-      console.log(this.years);
-      this.firstYear = this.years[0];
-      this.lastYear = this.years[this.years.length - 1];
-      this.regions = [
-        ...new Set(
-          this.sdmDihService.sdmData[this.firstYear].map(
-            (yearData) => yearData['MODEL']
-          )
-        ),
-      ];
-      console.log(this.regions);
-      this.selectedYear = this.firstYear;
+      this.selectedYear = this.sdmDihService.firstYear;
       this.redrawGraphs();
       this.drawLegend();
     });
@@ -44,8 +26,8 @@ export class YearGraphComponent {
     const regionData = this.sdmDihService.sdmData[year].find(
       (row) => row['MODEL'] === region
     );
-    const width = 100 / this.regions.length;
-    const height = 100 / this.regions.length;
+    const width = 100 / this.sdmDihService.regions.length;
+    const height = 100 / this.sdmDihService.regions.length;
     // append the svg object to the div called 'year-graph-place'
     const svg = select('#year-graph-place')
       .append('svg')
@@ -163,7 +145,7 @@ export class YearGraphComponent {
     const width = 200;
     const height = 200;
     select('#year-graph-place').selectAll('svg')?.remove();
-    for (const region of this.regions) {
+    for (const region of this.sdmDihService.regions) {
       this.drawGraph(region);
     }
   }