✨ add prev/next buttons

src/app/graphs/quarter.pipe.ts

@@ -0,0 +1,12 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'quarter',
+})
+//FIXME: There is a bug which causes values like 2016.75 to be returned as 2016 Q1.2 instead of 2016 Q3
+export class QuarterPipe implements PipeTransform {
+  transform(value: any, ...args: any[]): any {
+    const [year, quarter] = value.split('.');
+    return `${year} Q${(quarter / 100) * 4 + 1}`;
+  }
+}

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

@@ -1,7 +1,9 @@
 <h2>Rural attractiveness of regions in {{ selectedYear }}</h2>
 <div *ngIf="sdmDihService.yearsLoaded; else loading">
   <div class="year-range">
-    <span><button (click)="animateGraphs()">&gt;</button></span>
+    <span><button (click)="prevYear()">&#9665;</button></span>
+    <span><button (click)="animateGraphs()">&#9654;</button></span>
+    &emsp;
     <span>{{sdmDihService.firstYear}}</span>
     <input
       type="range"
@@ -13,6 +15,8 @@
       step="0.25"
     />
     <span>{{sdmDihService.lastYear}}</span>
+    &emsp;
+    <span><button (click)="nextYear()">&#9655;</button></span>
   </div>
   <!--select
     class="form-select form-select-lg mb-3"

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

@@ -153,6 +153,24 @@ export class YearGraphComponent {
       .text('100 %');
   }
 
+  nextYear() {
+    const selectedYearIndex = this.sdmDihService.years.findIndex(
+      (val) => val == this.selectedYear
+    );
+    this.selectedYear =
+      this.sdmDihService.years[selectedYearIndex + 1] ?? this.selectedYear;
+    this.redrawGraphs();
+  }
+
+  prevYear() {
+    const selectedYearIndex = this.sdmDihService.years.findIndex(
+      (val) => val == this.selectedYear
+    );
+    this.selectedYear =
+      this.sdmDihService.years[selectedYearIndex - 1] ?? this.selectedYear;
+    this.redrawGraphs();
+  }
+
   redrawGraphs() {
     const width = 200;
     const height = 200;

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

@@ -2,12 +2,13 @@ import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
 
+import {QuarterPipe} from '../quarter.pipe';
 import {YearGraphComponent} from './year-graph.component';
 
 @NgModule({
   imports: [CommonModule, FormsModule],
   exports: [YearGraphComponent],
-  declarations: [YearGraphComponent],
+  declarations: [YearGraphComponent, QuarterPipe],
   providers: [],
 })
 export class YearGraphModule {}