🐛 ensure data are always available in view

Change dataLoads Subject to BehaviorSubject

src/app/app.component.html

@@ -27,9 +27,7 @@
     <ng-container [ngbNavItem]="2">
       <a ngbNavLink>1st ("Discs")</a>
       <ng-template ngbNavContent>
-        <div class="graph-row">
           <year-graph></year-graph>
-        </div>
       </ng-template>
     </ng-container>
     <ng-container ngbNavItem>

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {interpolate, quantize, select} from 'd3';
 
 import {SdmDihService} from '../../sdm-dih.service';
@@ -8,11 +8,16 @@ import {SdmDihService} from '../../sdm-dih.service';
   templateUrl: './year-graph.component.html',
   styleUrls: ['./year-graph.component.scss'],
 })
-export class YearGraphComponent {
+export class YearGraphComponent implements OnInit {
   selectedYear = '';
 
-  constructor(public sdmDihService: SdmDihService) {
-    this.sdmDihService.dataLoads.subscribe(() => {
+  constructor(public sdmDihService: SdmDihService) {}
+
+  ngOnInit() {
+    this.sdmDihService.dataLoads.subscribe((loaded) => {
+      if (!loaded) {
+        return;
+      }
       this.selectedYear = this.sdmDihService.firstYear;
       this.redrawGraphs();
       this.drawLegend();

src/app/dots-chart/all-in-one-graph/all-in-one-graph.component.html

@@ -1,4 +1,4 @@
-<h2>Rural attractiveness of regions between 2015 and 2040</h2>
+<h2>Rural attractiveness index of regions between 2015 and 2040</h2>
 <div id="plot-place" *ngIf="dataLoaded; else loading">
   <plotly-plot [data]="data" [layout]="layout" [className]="'plotly-plot'" [useResizeHandler]="true"></plotly-plot>
 </div>

src/app/dots-chart/all-in-one-graph/all-in-one-graph.component.ts

@@ -15,18 +15,18 @@ export class AllInOneGraphComponent implements OnInit {
     //width: '100%',
   };
 
-  constructor(public sdmDihService: SdmDihService) {
-    this.sdmDihService.dataLoads.subscribe(() => {
+  constructor(public sdmDihService: SdmDihService) {}
+
+  ngOnInit(): void {
+    this.sdmDihService.dataLoads.subscribe((loaded) => {
+      if (!loaded) {
+        return;
+      }
       this.processData();
       this.dataLoaded = true;
     });
   }
 
-  ngOnInit(): void {
-    this.processData();
-    this.dataLoaded = true;
-  }
-
   processData() {
     //TODO: parametrize the PARAM_TO_COMPARE
     const PARAM_TO_COMPARE = 'aggregated';

src/app/dots-chart/region-graph/region-graph.component.ts

@@ -17,7 +17,10 @@ export class RegionGraphComponent implements OnChanges {
   };
 
   constructor(public sdmDihService: SdmDihService) {
-    this.sdmDihService.dataLoads.subscribe(() => {
+    this.sdmDihService.dataLoads.subscribe((loaded) => {
+      if (!loaded) {
+        return;
+      }
       this.processData();
       this.dataLoaded = true;
     });

src/app/sdm-dih.service.ts

@@ -1,6 +1,6 @@
+import {BehaviorSubject} from 'rxjs';
 import {HttpClient} from '@angular/common/http';
 import {Injectable} from '@angular/core';
-import {Subject} from 'rxjs';
 import {csv} from 'd3';
 
 import vars2facts from '../assets/data/variables2factors.json';
@@ -16,24 +16,28 @@ export class SdmDihService {
   selectedYear = '';
   years = [];
   yearsLoaded = false;
-  dataLoads: Subject<void> = new Subject();
+  dataLoads: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   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();
-    });
+    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(true);
+      })
+      .catch((err) => {
+        console.warn('shit happened', err);
+      });
   }
 
   calcAggregatedIndex(regionData) {