✨ add progress arrows

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

@@ -54,11 +54,39 @@ export class YearGraphComponent {
       .append('svg')
       .attr('x', '50%')
       .attr('y', '50%')
-      .attr('overflow', 'visible')
-      .append('g')
-      .data([regionData]);
+      .attr('overflow', 'visible');
+    // arrow symbol for later re-use
+    const arrow = svg.append('symbol').attr('id', 'arrow');
+    // horizontal line
+    arrow
+      .append('line')
+      .attr('x1', 0)
+      .attr('y1', 30)
+      .attr('x2', 60)
+      .attr('y2', 30)
+      .attr('stroke', 'black')
+      .style('stroke-width', 4);
+    // upper line
+    arrow
+      .append('line')
+      .attr('x1', 40)
+      .attr('y1', 10)
+      .attr('x2', 60)
+      .attr('y2', 30)
+      .attr('stroke', 'black')
+      .style('stroke-width', 4);
+    // bottom line
+    arrow
+      .append('line')
+      .attr('x1', 40)
+      .attr('y1', 50)
+      .attr('x2', 60)
+      .attr('y2', 30)
+      .attr('stroke', 'black')
+      .style('stroke-width', 4);
+    const svgContent = svg.append('g').data([regionData]);
     //.attr('transform', 'translate(' + width / 2 + '% ,' + height / 2 + '% )');
-    svg
+    svgContent
       .append('circle')
       .attr('cx', 0)
       .attr('cy', 0)
@@ -67,20 +95,37 @@ export class YearGraphComponent {
       .attr('fill', (d) => {
         return this.sdmDihService.perc2color(d['aggregated']);
       });
-    svg
+    svgContent
       .append('text')
       .attr('x', 0)
       .attr('y', -60)
       .attr('dy', '.35em')
       .text((d) => d['MODEL'])
       .style('text-anchor', 'middle');
-    svg
+    svgContent
+      .append('text')
+      .attr('x', 0)
+      .attr('y', 60)
+      .attr('dy', '.35em')
+      .text((d) => `${(Number.parseFloat(d['aggregated']) * 100).toFixed(2)} %`)
+      .style('text-anchor', 'middle');
+    svgContent
       .append('text')
       .attr('x', 0)
       .attr('y', 60)
       .attr('dy', '.35em')
       .text((d) => `${(Number.parseFloat(d['aggregated']) * 100).toFixed(2)} %`)
       .style('text-anchor', 'middle');
+    svgContent
+      .append('use')
+      .attr('xlink:href', '#arrow')
+      .attr('x', -30)
+      .attr('y', -30)
+      .attr(
+        'transform',
+        // rotation is defined clockwise, hence -45 deg will turn the arrow up
+        (d) => `rotate(${-45 * this.getRegionProgress(d)}, 0, 0)`
+      );
   }
 
   drawLegend() {
@@ -122,4 +167,29 @@ export class YearGraphComponent {
       this.drawGraph(region);
     }
   }
+
+  getRegionProgress(regionData): -1 | 0 | 1 {
+    //TODO: parametrize the PARAM_TO_COMPARE
+    const PARAM_TO_COMPARE = 'aggregated';
+    const region = regionData['MODEL'];
+    const year = regionData['TIME_STEP'];
+    const thisYearValue = regionData[PARAM_TO_COMPARE];
+    let pastYear = Number.parseFloat(year) - 0.25 + '';
+    pastYear = pastYear.includes('.') ? pastYear : pastYear + '.0';
+    const pastYearData = this.sdmDihService.sdmData[pastYear];
+    if (!pastYearData) {
+      // We are in the first time step, so there is nothing to compare
+      return 0;
+    }
+    const pastYearValue = pastYearData.find(
+      (regionPastYear) => regionPastYear['MODEL'] === region
+    )?.[PARAM_TO_COMPARE];
+    if (pastYearValue < thisYearValue) {
+      return 1;
+    }
+    if (pastYearValue > thisYearValue) {
+      return -1;
+    }
+    return 0;
+  }
 }