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

<h2>Comparison of different scenarios</h2>
<select [(ngModel)]="selectedRegion" (ngModelChange)="yearGraphService.redrawGraphs({region: selectedRegion})">
  <ng-container *ngFor="let region of sdmDihService.regions">
    <option [ngValue]="region">{{region}}</option>
  </ng-container>
</select>
<select [(ngModel)]="selectedDomain" (ngModelChange)="yearGraphService.redrawGraphs({domain: selectedDomain})">
  <ng-container *ngFor="let domain of sdmDihService.domains | filter:baselineFilter">
    <option [ngValue]="domain">{{domain}}</option>
  </ng-container>
</select>

<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>Aggregated RAI</h4>
      <p>
        of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
      </p>
      <disc-legend [region]="selectedRegion" scenario="all-2"></disc-legend>
    </div>
    <disc [region]="selectedRegion" show="scenario" inSitu="true"></disc>
    <div *ngFor="let scenario of filteredScenarios">
      <disc [region]="selectedRegion" [scenario]="scenario" show="scenario" inSitu="true"></disc>
    </div>
  </div>

  <h3>Rural attractiveness factors</h3>
  <div class="d-flex">
    <div class="discs-caption">
      <h4>Baseline scenario</h4>
      <p>
        of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
      </p>
      <disc-legend [region]="selectedRegion" scenario="baseline-2"></disc-legend>
    </div>
    <div *ngFor="let factor of sdmDihService.factors">
      <disc [region]="selectedRegion" [factor]="factor" show="factor" inSitu="true"></disc>
    </div>
  </div>
  <hr>
  <div *ngFor="let scenario of filteredScenarios; last as isLast">
    <div class="d-flex">
      <div class="discs-caption">
        <h4>{{scenario}} scenario</h4>
        <p>
          of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
        </p>
        <disc-legend [region]="selectedRegion" [scenario]="scenario"></disc-legend>
      </div>
      <div *ngFor="let factor of sdmDihService.factors">
        <disc [region]="selectedRegion" [factor]="factor" [scenario]="scenario" show="factor" inSitu="true"></disc>
      </div>
    </div>
    <hr *ngIf="!isLast">
  </div>
</div>
<ng-template #loading> Loading data... </ng-template>