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

<div class="card">
  <h2>Evolution of sub-indices in the pilot regions</h2>
  <div *ngIf="sdmDihService.yearsLoaded; else loading" class="card-body">
    <div class="year-range">
      <span><button (click)="prevYear()">&#9665;</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"
        (ngModelChange)="yearGraphService.redrawGraphs()" [min]="sdmDihService.firstYear" [max]="sdmDihService.lastYear"
        step="0.25" />
      <span>{{sdmDihService.lastYear}}</span>
      &emsp;
      <span><button (click)="nextYear()">&#9655;</button></span>
    </div>

    <ng-container *ngFor="let region of sdmDihService.regions; last as isLast">
      <!--select
    class="form-select form-select-lg mb-3"
    aria-label=".form-select-lg example"
    [(ngModel)]="selectedYear"
    (ngModelChange)="redrawGraphs()"
  >
    <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
  </select-->
      <div class="d-flex">
        <div class="discs-caption">
          <h4>Index of Rural Attractiveness</h4>
          <p>
            of region <strong>{{region}}</strong> in {{yearGraphService.selectedYear}}
          </p>
          <disc-legend [region]="region"></disc-legend>
        </div>
        <div *ngFor="let factor of sdmDihService.factors">
          <factor-year-disc [region]="region" [factor]="factor" [show]="'factor'"></factor-year-disc>
        </div>
      </div>
      <hr *ngIf="!isLast">
    </ng-container>
  </div>
  <ng-template #loading> Loading data... </ng-template>
</div>