💄 restructure main page

src/app/app.component.html

@@ -16,25 +16,53 @@
     <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>
-  <div class="graph-row">
-    <year-graph></year-graph>
-  </div>
-  <div class="graph-row-plotly">
-    <all-in-one-graph></all-in-one-graph>
-  </div>
-  <div class="graph-row-plotly">
-      <ng-container *ngFor="let region of sdmDihService.regions">
-        <region-graph [region]="region"></region-graph>
-      </ng-container>
-  </div>
-  <div class="map-row">
-    <h2>Map-based comparison</h2>
-    <div class="hs-map">
-      <hslayers></hslayers>
-    </div>
-  </div>
-  <div class="graph-row">
-    race chart
-    #PLACEHOLDER
-  </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>
+        <div class="graph-row">
+          <year-graph></year-graph>
+        </div>
+      </ng-template>
+    </ng-container>
+    <ng-container ngbNavItem>
+      <a ngbNavLink>2nd ("Dots")</a>
+      <ng-template ngbNavContent>
+        <div class="graph-row-plotly">
+          <all-in-one-graph></all-in-one-graph>
+        </div>
+        <div class="graph-row-plotly">
+            <ng-container *ngFor="let region of sdmDihService.regions">
+              <region-graph [region]="region"></region-graph>
+            </ng-container>
+        </div>
+      </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>

src/app/app.component.scss

@@ -1,3 +1,8 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/nav";
+
 .hs-map {
   width: 90%;
   height: 100%;

src/app/app.module.ts

@@ -1,6 +1,7 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
+import {NgbNavModule} from '@ng-bootstrap/ng-bootstrap';
 
 import {HslayersAppComponent} from './app.component';
 import {HslayersModule} from 'hslayers-ng';
@@ -14,6 +15,7 @@ import {DotsModule} from './dots-chart/dots.module';
     BrowserModule,
     FormsModule,
     HslayersModule,
+    NgbNavModule,
     DiscsModule,
     DotsModule,
   ],

src/app/dots-chart/all-in-one-graph/all-in-one-graph.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 import {SdmDihService} from '../../sdm-dih.service';
 
@@ -7,7 +7,7 @@ import {SdmDihService} from '../../sdm-dih.service';
   templateUrl: './all-in-one-graph.component.html',
   styleUrls: ['./all-in-one-graph.component.scss'],
 })
-export class AllInOneGraphComponent {
+export class AllInOneGraphComponent implements OnInit {
   dataLoaded = false;
   data = [];
   layout = {
@@ -22,6 +22,11 @@ export class AllInOneGraphComponent {
     });
   }
 
+  ngOnInit(): void {
+    this.processData();
+    this.dataLoaded = true;
+  }
+
   processData() {
     //TODO: parametrize the PARAM_TO_COMPARE
     const PARAM_TO_COMPARE = 'aggregated';