💄 prevent animations from multiple starting

src/app/discs-chart/factor-year-graph/factor-year-graph.component.html

@@ -3,7 +3,7 @@
   <div *ngIf="sdmDihService.yearsLoaded; else loading" class="card-body">
     <div class="year-range">
       <span><button (click)="prevYear()">&#9665;</button></span>
-      <span><button (click)="animateGraphs()">&#9654;</button></span>
+      <span><button (click)="animateGraphs()" [disabled]="animationRunning">&#9654;</button></span>
       &emsp;
       <span>{{sdmDihService.firstYear}}</span>
       <input type="range" class="form-range" [(ngModel)]="yearGraphService.selectedYear"

src/app/discs-chart/factor-year-graph/factor-year-graph.component.ts

@@ -9,6 +9,8 @@ import {SdmDihService} from '../../sdm-dih.service';
   styleUrls: ['./factor-year-graph.component.scss'],
 })
 export class FactorYearGraphComponent implements OnInit {
+  animationRunning = false;
+
   constructor(
     public sdmDihService: SdmDihService,
     public yearGraphService: FactorYearGraphService
@@ -24,6 +26,7 @@ export class FactorYearGraphComponent implements OnInit {
   }
 
   animateGraphs() {
+    this.animationRunning = true;
     const MILLISECONDS_TO_ANIMATE = 100 as const;
     let i = 1;
     for (const year of this.sdmDihService.years) {
@@ -33,6 +36,9 @@ export class FactorYearGraphComponent implements OnInit {
       }, MILLISECONDS_TO_ANIMATE * i);
       i++;
     }
+    setTimeout(() => {
+      this.animationRunning = false;
+    }, MILLISECONDS_TO_ANIMATE * this.sdmDihService.years.length);
   }
 
   nextYear() {

src/app/discs-chart/scenario-factor-year-graph/scenario-factor-year-graph.component.html

@@ -15,7 +15,7 @@
     </select>
     <div class="year-range">
       <span><button (click)="prevYear()">&#9665;</button></span>
-      <span><button (click)="animateGraphs()">&#9654;</button></span>
+      <span><button (click)="animateGraphs()" [disabled]="animationRunning">&#9654;</button></span>
       &emsp;
       <span>{{sdmDihService.firstYear}}</span>
       <input type="range" class="form-range" [(ngModel)]="yearGraphService.selectedYear"

src/app/discs-chart/scenario-factor-year-graph/scenario-factor-year-graph.component.ts

@@ -10,6 +10,7 @@ import {SdmDihService} from '../../sdm-dih.service';
   styleUrls: ['./scenario-factor-year-graph.component.scss'],
 })
 export class ScenarioFactorYearGraphComponent implements OnInit {
+  animationRunning = false;
   filteredScenarios = [];
   selectedRegion = 'Apulia';
   selectedDomain = 'INFR';
@@ -42,6 +43,7 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
   };
 
   animateGraphs() {
+    this.animationRunning = true;
     const MILLISECONDS_TO_ANIMATE = 100 as const;
     let i = 1;
     for (const year of this.sdmDihService.years) {
@@ -51,6 +53,9 @@ export class ScenarioFactorYearGraphComponent implements OnInit {
       }, MILLISECONDS_TO_ANIMATE * i);
       i++;
     }
+    setTimeout(() => {
+      this.animationRunning = false;
+    }, MILLISECONDS_TO_ANIMATE * this.sdmDihService.years.length);
   }
 
   nextYear() {

src/app/discs-chart/year-graph/year-graph.component.html

@@ -3,7 +3,7 @@
   <div *ngIf="sdmDihService.yearsLoaded; else loading" class="card-body">
     <div class="year-range">
       <span><button (click)="prevYear()">&#9665;</button></span>
-      <span><button (click)="animateGraphs()">&#9654;</button></span>
+      <span><button (click)="animateGraphs()" [disabled]="animationRunning">&#9654;</button></span>
       &emsp;
       <span>{{sdmDihService.firstYear}}</span>
       <input type="range" class="form-range" [(ngModel)]="yearGraphService.selectedYear"

src/app/discs-chart/year-graph/year-graph.component.ts

@@ -9,12 +9,15 @@ import {YearGraphService} from './year-graph.service';
   styleUrls: ['./year-graph.component.scss'],
 })
 export class YearGraphComponent {
+  animationRunning = false;
+
   constructor(
     public sdmDihService: SdmDihService,
     public yearGraphService: YearGraphService
   ) {}
 
   animateGraphs() {
+    this.animationRunning = true;
     const MILLISECONDS_TO_ANIMATE = 100 as const;
     let i = 1;
     for (const year of this.sdmDihService.years) {
@@ -24,6 +27,9 @@ export class YearGraphComponent {
       }, MILLISECONDS_TO_ANIMATE * i);
       i++;
     }
+    setTimeout(() => {
+      this.animationRunning = false;
+    }, MILLISECONDS_TO_ANIMATE * this.sdmDihService.years.length);
   }
 
   nextYear() {