✨ add legend

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

@@ -24,3 +24,4 @@
 </div>
 <ng-template #loading> Loading data... </ng-template>
 <div id="year-graph-place"></div>
+<div id="year-graph-legend-place"></div>

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {select} from 'd3';
+import {interpolate, quantize, select} from 'd3';
 
 import {SdmDihService} from '../sdm-dih.service';
 
@@ -33,6 +33,7 @@ export class YearGraphComponent {
       console.log(this.regions);
       this.selectedYear = this.firstYear;
       this.redrawGraphs();
+      this.drawLegend();
     });
   }
 
@@ -76,6 +77,37 @@ export class YearGraphComponent {
       .style('text-anchor', 'middle');
   }
 
+  drawLegend() {
+    const width = 200;
+    const height = 20;
+    const g = select('#year-graph-legend-place')
+      .append('svg')
+      .attr('width', width)
+      .attr('height', height)
+      .attr('viewBox', [0, 0, width, height])
+      .style('overflow', 'visible')
+      .style('display', 'block')
+      .append('g');
+    for (let i = 0; i < 10; i++) {
+      g.append('rect')
+        .attr('x', i * 20)
+        .attr('y', 0)
+        .attr('width', width / 10)
+        .attr('height', height / 2)
+        .attr('fill', this.sdmDihService.perc2color(i / 10));
+    }
+    g.append('text')
+      .attr('x', 0 - 10)
+      .attr('y', 20)
+      .attr('dy', '.5em')
+      .text('0 %');
+    g.append('text')
+      .attr('x', 200 - 10)
+      .attr('y', 20)
+      .attr('dy', '.5em')
+      .text('100 %');
+  }
+
   redrawGraphs() {
     const width = 200;
     const height = 200;