🤡 mock a graph for each region

src/app/app.component.html

@@ -2,7 +2,7 @@
   <h1 class="pl-2">SMD - DIH integration bridge</h1>
   <div class="pl-2">
     <h3>About</h3>
-    <p>An attempt</p>
+    <p>...</p>
   </div>
   <div class="graph-row">
     <year-graph></year-graph>
@@ -11,8 +11,13 @@
     <all-in-one-graph></all-in-one-graph>
   </div>
   <div class="map-row">
+    <h2>Map-based comparison</h2>
     <div class="hs-map">
       <hslayers></hslayers>
     </div>
   </div>
+  <div class="graph-row">
+    race chart
+    #PLACEHOLDER
+  </div>
 </main>

src/app/app.component.scss

@@ -1,7 +1,16 @@
 .hs-map {
-  width: 75%;
+  width: 90%;
+  height: 100%;
 }
 .map-row {
-  display: flex;
-  height: 30rem;
+  //display: flex;
+  height: 20rem;
+}
+.graph-row {
+  height: 20rem;
+}
+
+hslayers {
+  height: 20rem;
+  display: block;
 }

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

@@ -1 +1,3 @@
+<h2>Rural attractiveness of regions between 2014 and 2040</h2>
 #PLACEHOLDER
+Here be dragons

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

@@ -16,11 +16,16 @@ export class SdmDihService {
     );
   }
   
+  calculateAttractiveness(data) {
+    
+    return data;
+  }
+
   calculateAggregation() {
-    console.log('aggreagating...', this.sdmData);
-    for (const year in this.sdmData) {
+    console.log('aggregating...', this.sdmData);
+    for (const year of Object.keys(this.sdmData)) {
       const yearData = this.sdmData[year];
-      const yearAggregated = yearData;
+      const yearAggregated = this.calculateAttractiveness(yearData);
       if (!this.aggregatedData[year]) {
         this.aggregatedData[year] = yearAggregated;
       } else {

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

@@ -1,9 +1,10 @@
+<h2>Rural attractiveness of regions in {{selectedYear}}</h2>
 <div *ngIf="yearsLoaded; else loading">
   <select
     class="form-select form-select-lg mb-3"
     aria-label=".form-select-lg example"
     [(ngModel)]="selectedYear"
-    (ngModelChange)="drawGraph()"
+    (ngModelChange)="redrawGraphs()"
   >
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select>

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

@@ -8,40 +8,68 @@ import { SdmDihService } from "../sdm-dih.service";
   templateUrl: "year-graph.component.html",
 })
 export class YearGraphComponent implements OnInit {
-  years = [];
+  firstYear: string;
+  lastYear: string;
   regions = [];
+  selectedYear = '';
+  years = [];
   yearsLoaded = false;
-  selectedYear = "";
 
   constructor(private 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);
     });
   }
 
   ngOnInit() {}
 
-  drawGraph() {
+  drawGraph(region: string) {
     const width = 200;
     const height = 200;
-    select("#year-graph-place").select("svg")?.remove();
+    //select("#year-graph-place").select("svg")?.remove();
     // append the svg object to the div called 'year-graph-place'
     const svg = select("#year-graph-place")
       .append("svg")
       .attr("width", width)
       .attr("height", height)
       .append("g")
+      .data(this.sdmDihService.aggregatedData[this.selectedYear])
       .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
-    const yearData = this.sdmDihService.aggregatedData[this.selectedYear];
-    const color = `rgba(100, 200, 100, ${yearData[0]['Natural_Capital']})`;
+    //const yearData = this.sdmDihService.aggregatedData[this.selectedYear];
+    //const color = `rgba(100, 200, 100, ${yearData[0]['Natural_Capital']})`;
     svg
       .append("circle")
       .attr("cx", 0)
       .attr("cy", 0)
       .attr("r", 50)
       .attr("stroke", "black")
-      .attr("fill", color);
+      .attr("fill", (d) => {
+        console.log(d);
+        return this.getColor(d['Natural_Capital']);
+      });
+    svg.append("text")
+      .attr("x", 50)
+      .attr("y", 50)
+      .attr("dy", ".35em")
+      .text((d) => d['MODEL']);
+  }
+
+  redrawGraphs() {
+    const width = 200;
+    const height = 200;
+    select("#year-graph-place").selectAll("svg")?.remove();
+    for (const region of this.regions) {
+      this.drawGraph(region);
+    }
+  }
+
+  getColor(value) {
+    return `rgba(100, 200, 100, ${value})`
   }
 }