🤡 mock year-graph

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

@@ -1 +1 @@
-also very nice graph
+#PLACEHOLDER

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

@@ -1,15 +1,45 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import {Subject} from 'rxjs';
 import {csv} from 'd3';
 
 @Injectable({providedIn: 'root'})
 export class SdmDihService {
+  readonly DATA_PATH = '../../assets/data/normalized_data.csv';
+  sdmData = {};
+  aggregatedData = {};
+  dataLoads: Subject<void> = new Subject();
+
   constructor(private httpClient: HttpClient) {
-    this.loadData();
+    this.loadData().then(
+      () => this.calculateAggregation()
+    );
   }
   
+  calculateAggregation() {
+    console.log('aggreagating...', this.sdmData);
+    for (const year in this.sdmData) {
+      const yearData = this.sdmData[year];
+      const yearAggregated = yearData;
+      if (!this.aggregatedData[year]) {
+        this.aggregatedData[year] = yearAggregated;
+      } else {
+        this.aggregatedData[year].push(yearAggregated)
+      }
+    }
+    this.dataLoads.next();
+  }
+
   async loadData() {
-    const data = await csv('../../assets/data/normalized_data.csv');
+    const data = await csv(this.DATA_PATH);
     console.log(data);
+    for (const row of data) {
+      if (!this.sdmData[row['TIME_STEP']]) {
+        this.sdmData[row['TIME_STEP']] = [row];
+      } else {
+        this.sdmData[row['TIME_STEP']].push(row);
+      }
+    }
+    console.log(this.sdmData);
   }
 }

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

@@ -1 +1,12 @@
-a very nice graph
+<div *ngIf="yearsLoaded; else loading">
+  <select
+    class="form-select form-select-lg mb-3"
+    aria-label=".form-select-lg example"
+    [(ngModel)]="selectedYear"
+    (ngModelChange)="drawGraph()"
+  >
+    <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
+  </select>
+</div>
+<ng-template #loading> Loading data... </ng-template>
+<div id="year-graph-place"></div>

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

@@ -1,13 +1,47 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { select } from "d3";
 
-import { SdmDihService } from '../sdm-dih.service';
+import { SdmDihService } from "../sdm-dih.service";
 
 @Component({
-  selector: 'year-graph',
-  templateUrl: 'year-graph.component.html',
+  selector: "year-graph",
+  templateUrl: "year-graph.component.html",
 })
 export class YearGraphComponent implements OnInit {
-  constructor(private sdmDihService: SdmDihService) { }
+  years = [];
+  regions = [];
+  yearsLoaded = false;
+  selectedYear = "";
 
-  ngOnInit() { }
+  constructor(private sdmDihService: SdmDihService) {
+    this.sdmDihService.dataLoads.subscribe(() => {
+      this.years = Object.keys(this.sdmDihService.sdmData);
+      this.yearsLoaded = true;
+      console.log(this.years);
+    });
+  }
+
+  ngOnInit() {}
+
+  drawGraph() {
+    const width = 200;
+    const height = 200;
+    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")
+      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+    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);
+  }
 }

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

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 
 import { YearGraphComponent } from './year-graph.component';
 
 @NgModule({
-  imports: [],
+  imports: [CommonModule, FormsModule,],
   exports: [YearGraphComponent],
   declarations: [YearGraphComponent],
   providers: [],