sdm-dih-bridge/src/app/app.component.html

<main>
  <h1 class="pl-2">Regional attractiveness of Polirural Pilot Regions based on system Dynamics models</h1>
  <div class="pl-2">
    <h3>SDM &ndash; DIH integration bridge</h3>
    <p>This page provides some showcase ideas about visualization of SDM model outputs in various points in time.
      SDM is a System Dynamics Model developed as a part of the Polirural project. <a href="hub.polirural.eu">DIH</a> is
      a Digital Innovation Hub developed as another part of the Polirural project.
      Regional attractiveness is one of the tools present in the DIH.</p>
  </div>
  <div class="pl-2">
    <h3>About System Dynamics Modelling</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto doloremque recusandae cumque minus qui modi
      deleniti molestiae harum eius, facere quae quas, inventore est. Ullam voluptate libero porro architecto dolores.
    </p>
    <p></p>
  </div>
  <div class="pl-2">
    <h3>About Regional Attractiveness</h3>
    <p>Attractiveness can be seen from the perspective of a farmer, a young man or woman, a businessman or a
      sociologist. As there is no singular perception of attractiveness, there cannot be a singular value representing
      it. In the Index of regional attractiveness, we emphasize the attractiveness of a region as a compound and
      relative value. Based on available statistical data about a region, each region is then assessed by several
      factors. In this showcase we differentiate social, anthropic, natural and economic factor.</p>
    <p></p>
  </div>

  <nav ngbNav #nav="ngbNav" [activeId]="2" class="nav-tabs">
    <ng-container ngbNavItem disabled="true">
      <a ngbNavLink>Visualizations:</a>
      <ng-template ngbNavContent>
        ...
      </ng-template>
    </ng-container>

    <ng-container [ngbNavItem]="2">
      <a ngbNavLink>1st ("Discs")</a>
      <ng-template ngbNavContent>
        <year-graph></year-graph>
        <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">
          <factor-year-graph [region]="region"></factor-year-graph>
        </ng-container>
        <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>
        <scenario-year-graph [region]="selectedRegion" [domain]="selectedDomain"></scenario-year-graph>
        <scenario-factor-year-graph [region]="selectedRegion" [domain]="selectedDomain"></scenario-factor-year-graph>
      </ng-template>
    </ng-container>

    <ng-container ngbNavItem>
      <a ngbNavLink>2nd ("Dots")</a>
      <ng-template ngbNavContent>
          <all-in-one-graph></all-in-one-graph>
          <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">
            <region-graph [region]="region"></region-graph>
          </ng-container>
      </ng-template>
    </ng-container>

    <ng-container ngbNavItem>
      <a ngbNavLink>3rd ("Map")</a>
      <ng-template ngbNavContent>
        <div class="map-row">
          <h2>Map-based comparison</h2>
          <div class="hs-map">
            <hslayers></hslayers>
          </div>
        </div>
      </ng-template>
    </ng-container>

    <ng-container ngbNavItem>
      <a ngbNavLink>4th ("Race")</a>
      <ng-template ngbNavContent>
        #PLACEHOLDER
      </ng-template>
    </ng-container>
  </nav>

  <div [ngbNavOutlet]="nav" class="mt-2"></div>
</main>