💄 use traffic lights colors

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

@@ -62,6 +62,23 @@ export class SdmDihService {
     console.log(this.sdmData);
   }
 
+  perc2color(perc: number): string {
+    perc = perc * 100;
+    let r;
+    let g;
+    const b = 0;
+    if (perc < 50) {
+      r = 255;
+      g = Math.round(5.1 * perc);
+    } else {
+      g = 255;
+      r = Math.round(510 - 5.1 * perc);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const h = r * 0x10000 + g * 0x100 + b * 0x1;
+    return `rgba(${r}, ${g}, ${b}, 0.7)`;
+  }
+
   /**
    * Change format of each input row into a two-level structure where datasets are classified by factors
    * @param inputRegionData - row as read by the CSV reader

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

@@ -58,7 +58,7 @@ export class YearGraphComponent {
       .attr('stroke', 'black')
       .attr('fill', (d) => {
         console.log(d);
-        return this.getColor(d['aggregated']);
+        return this.sdmDihService.perc2color(d['aggregated']);
       });
     svg
       .append('text')
@@ -76,8 +76,4 @@ export class YearGraphComponent {
       this.drawGraph(region);
     }
   }
-
-  getColor(value) {
-    return `rgba(100, 200, 100, ${value})`;
-  }
 }