✨ display discs chart for all regions

src/app/app.component.html

@@ -35,7 +35,9 @@
       <a ngbNavLink>1st ("Discs")</a>
       <ng-template ngbNavContent>
         <year-graph></year-graph>
-        <factor-year-graph [region]="'Apulia'"></factor-year-graph>
+        <ng-container *ngFor="let region of sdmDihService.regions">
+          <factor-year-graph [region]="region"></factor-year-graph>
+        </ng-container>
       </ng-template>
     </ng-container>
     <ng-container ngbNavItem>

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

@@ -10,5 +10,5 @@
   </select-->
 </div>
 <ng-template #loading> Loading data... </ng-template>
-<div id="year-graph-place-{{region}}"></div>
-<div id="year-graph-legend-place-{{region}}"></div>
+<div id="year-graph-place-{{region.replace(' ', '-')}}"></div>
+<div id="year-graph-legend-place-{{region.replace(' ', '-')}}"></div>

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

@@ -11,6 +11,13 @@ import {YearGraphService} from '../year-graph.service';
 })
 export class FactorYearGraphComponent implements OnInit {
   @Input() region: string;
+  factors = [
+    'aggregated',
+    'http://www.semanticweb.org/attractiveness/anthropic',
+    'http://www.semanticweb.org/attractiveness/economic',
+    'http://www.semanticweb.org/attractiveness/natural',
+    'http://www.semanticweb.org/attractiveness/social',
+  ];
 
   constructor(
     public sdmDihService: SdmDihService,
@@ -24,6 +31,11 @@ export class FactorYearGraphComponent implements OnInit {
       }
       this.redrawGraphs();
       this.drawLegend();
+      console.log('data loads true');
+    });
+    this.yearGraphService.graphRefreshes.subscribe(() => {
+      this.redrawGraphs();
+      this.drawLegend();
     });
   }
 
@@ -39,8 +51,8 @@ export class FactorYearGraphComponent implements OnInit {
     );
     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-${region}`)
+    // append the svg object to the div called 'year-graph-place-Apulia' or alike
+    const svg = select(`#year-graph-place-${region.replace(' ', '-')}`)
       .append('svg')
       .attr('width', `${width}%`)
       .attr('height', `${height}%`)
@@ -86,7 +98,7 @@ export class FactorYearGraphComponent implements OnInit {
       .attr('r', 50)
       .attr('stroke', 'black')
       .attr('fill', (d) => {
-        return this.sdmDihService.perc2color(d[factor]?.index);
+        return this.sdmDihService.perc2color(d[factor]?.index ?? d[factor]);
       });
     svgContent
       .append('text')
@@ -101,7 +113,10 @@ export class FactorYearGraphComponent implements OnInit {
       .attr('y', 60)
       .attr('dy', '.35em')
       .text(
-        (d) => `${(Number.parseFloat(d[factor]?.index) * 100).toFixed(2)} %`
+        (d) =>
+          `${(Number.parseFloat(d[factor]?.index ?? d[factor]) * 100).toFixed(
+            2
+          )} %`
       )
       .style('text-anchor', 'middle');
     svgContent
@@ -113,14 +128,25 @@ export class FactorYearGraphComponent implements OnInit {
         'transform',
         // rotation is defined clockwise, hence -45 deg will turn the arrow up
         (d) =>
-          `rotate(${-45 * this.yearGraphService.getRegionProgress(d)}, 0, 0)`
+          `rotate(${
+            -45 * this.yearGraphService.getRegionProgress(d, {factor})
+          }, 0, 0)`
       );
+    console.log(
+      'drawing finished'
+      //select(`#year-graph-place-${region.replace(' ', '-')}`)
+    );
   }
 
   drawLegend() {
+    select(
+      `#year-graph-legend-place-${this.region.replace(' ', '-')}`
+    ).remove();
     const width = 200;
     const height = 20;
-    const g = select(`#year-graph-legend-place-${this.region}`)
+    const g = select(
+      `#year-graph-legend-place-${this.region.replace(' ', '-')}`
+    )
       .append('svg')
       .attr('width', width)
       .attr('height', height)
@@ -151,11 +177,13 @@ export class FactorYearGraphComponent implements OnInit {
   redrawGraphs() {
     const width = 200;
     const height = 200;
-    select(`#year-graph-place-${this.region}`).selectAll('svg')?.remove();
-    //for (const region of this.sdmDihService.regions) {
-    this.drawGraph(this.region, {
-      factor: 'http://www.semanticweb.org/attractiveness/economic',
-    });
-    //}
+    select(`#year-graph-place-${this.region.replace(' ', '-')}`)
+      .selectAll('svg')
+      ?.remove();
+    for (const factor of this.factors) {
+      this.drawGraph(this.region, {
+        factor: factor,
+      });
+    }
   }
 }

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

@@ -1,9 +1,11 @@
 import {Injectable} from '@angular/core';
+import {Subject} from 'rxjs';
 
 import {SdmDihService} from '../sdm-dih.service';
 
 @Injectable({providedIn: 'root'})
 export class YearGraphService {
+  graphRefreshes: Subject<void> = new Subject();
   selectedYear = '';
   constructor(public sdmDihService: SdmDihService) {
     this.sdmDihService.dataLoads.subscribe((loaded) => {
@@ -14,15 +16,14 @@ export class YearGraphService {
     });
   }
 
-  getRegionProgress(regionData): -1 | 0 | 1 {
-    //TODO: parametrize the PARAM_TO_COMPARE
+  getRegionProgress(regionData, {factor} = {factor: 'aggregated'}): -1 | 0 | 1 {
     //TODO: use i-2, i-1 comparison based on 2 previous steps
-    const PARAM_TO_COMPARE = 'aggregated';
+    const PARAM_TO_COMPARE = factor;
     const region = regionData['MODEL'];
     const year = regionData['TIME_STEP'];
-    const thisYearValue = +Number.parseFloat(
-      regionData[PARAM_TO_COMPARE]
-    ).toFixed(3);
+    const factorValue =
+      regionData[PARAM_TO_COMPARE]?.index ?? regionData[PARAM_TO_COMPARE];
+    const thisYearValue = +Number.parseFloat(factorValue).toFixed(3);
     let pastYear = Number.parseFloat(year) - 0.25 + '';
     pastYear = pastYear.includes('.') ? pastYear : pastYear + '.0';
     const pastYearData = this.sdmDihService.sdmData[pastYear];
@@ -30,9 +31,12 @@ export class YearGraphService {
       // We are in the first time step, so there is nothing to compare
       return 0;
     }
-    let pastYearValue = pastYearData.find(
+    const pastYearDataRegion = pastYearData.find(
       (regionPastYear) => regionPastYear['MODEL'] === region
-    )?.[PARAM_TO_COMPARE];
+    );
+    let pastYearValue =
+      pastYearDataRegion?.[PARAM_TO_COMPARE]?.index ??
+      pastYearDataRegion?.[PARAM_TO_COMPARE];
     pastYearValue = +Number.parseFloat(pastYearValue).toFixed(3);
     if (pastYearValue < thisYearValue) {
       return 1;
@@ -42,4 +46,8 @@ export class YearGraphService {
     }
     return 0;
   }
+
+  redrawGraphs() {
+    this.graphRefreshes.next();
+  }
 }

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

@@ -9,7 +9,7 @@
       type="range"
       class="form-range"
       [(ngModel)]="yearGraphService.selectedYear"
-      (ngModelChange)="redrawGraphs()"
+      (ngModelChange)="yearGraphService.redrawGraphs()"
       [min]="sdmDihService.firstYear"
       [max]="sdmDihService.lastYear"
       step="0.25"

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

@@ -23,6 +23,10 @@ export class YearGraphComponent implements OnInit {
       this.redrawGraphs();
       this.drawLegend();
     });
+    this.yearGraphService.graphRefreshes.subscribe(() => {
+      this.redrawGraphs();
+      this.drawLegend();
+    });
   }
 
   animateGraphs() {
@@ -31,7 +35,7 @@ export class YearGraphComponent implements OnInit {
     for (const year of this.sdmDihService.years) {
       setTimeout(() => {
         this.yearGraphService.selectedYear = year;
-        this.redrawGraphs();
+        this.yearGraphService.redrawGraphs();
       }, MILLISECONDS_TO_ANIMATE * i);
       i++;
     }
@@ -123,6 +127,7 @@ export class YearGraphComponent implements OnInit {
   }
 
   drawLegend() {
+    select(`#year-graph-legend-place`).remove();
     const width = 200;
     const height = 20;
     const g = select('#year-graph-legend-place')
@@ -160,7 +165,7 @@ export class YearGraphComponent implements OnInit {
     this.yearGraphService.selectedYear =
       this.sdmDihService.years[selectedYearIndex + 1] ??
       this.yearGraphService.selectedYear;
-    this.redrawGraphs();
+    this.yearGraphService.redrawGraphs();
   }
 
   prevYear() {
@@ -170,7 +175,7 @@ export class YearGraphComponent implements OnInit {
     this.yearGraphService.selectedYear =
       this.sdmDihService.years[selectedYearIndex - 1] ??
       this.yearGraphService.selectedYear;
-    this.redrawGraphs();
+    this.yearGraphService.redrawGraphs();
   }
 
   redrawGraphs() {