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

<h2>Detailed overview of individual regions</h2>
<p>An aggregated attractiveness index is composed of six factors: anthropic, cultural, economic, institutional, natural
  and social. Due to the incompleteness of data provided by different regions, we only present four of them below.</p>
<ng-container *ngFor="let region of sdmDihService.regions; last as isLast">
  <div *ngIf="sdmDihService.yearsLoaded; else loading">
    <!--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>Rural attractiveness index</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">
  </div>
  <ng-template #loading> Loading data... </ng-template>
</ng-container>