Bladeren bron

🚧 draft the user-journey

jmacura 3 jaren geleden
bovenliggende
commit
144e0e70b3

+ 8 - 8
package-lock.json

@@ -8,6 +8,7 @@
       "name": "attractiveness-explorer-app",
       "version": "0.1.1",
       "dependencies": {
+        "@ng-bootstrap/ng-bootstrap": "^12.1.2",
         "@types/d3": "^7.1.0",
         "@types/plotly.js-dist-min": "^2.3.0",
         "angular-plotly.js": "^4.0.4",
@@ -2851,10 +2852,9 @@
       }
     },
     "node_modules/@ng-bootstrap/ng-bootstrap": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-11.0.0.tgz",
-      "integrity": "sha512-qDnB0+jbpQ4wjXpM4NPRAtwmgTDUCjGavoeRDZHOvFfYvx/MBf1RTjZEqTJ1Yqq1pKP4BWpzxCgVTunfnpmsjA==",
-      "peer": true,
+      "version": "12.1.2",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-12.1.2.tgz",
+      "integrity": "sha512-p27c+mYVdHiJMYrj5hwClVJxLdiZxafAqlbw1sdJh2xJ1rGOe+H/kCf5YDRbhlHqRN+34Gr0RQqIUeD1I2V8hg==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -2863,6 +2863,7 @@
         "@angular/core": "^13.0.0",
         "@angular/forms": "^13.0.0",
         "@angular/localize": "^13.0.0",
+        "@popperjs/core": "^2.10.2",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
@@ -18772,10 +18773,9 @@
       }
     },
     "@ng-bootstrap/ng-bootstrap": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-11.0.0.tgz",
-      "integrity": "sha512-qDnB0+jbpQ4wjXpM4NPRAtwmgTDUCjGavoeRDZHOvFfYvx/MBf1RTjZEqTJ1Yqq1pKP4BWpzxCgVTunfnpmsjA==",
-      "peer": true,
+      "version": "12.1.2",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-12.1.2.tgz",
+      "integrity": "sha512-p27c+mYVdHiJMYrj5hwClVJxLdiZxafAqlbw1sdJh2xJ1rGOe+H/kCf5YDRbhlHqRN+34Gr0RQqIUeD1I2V8hg==",
       "requires": {
         "tslib": "^2.3.0"
       }

+ 1 - 0
package.json

@@ -9,6 +9,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
     "@types/d3": "^7.1.0",
     "@types/plotly.js-dist-min": "^2.3.0",
     "angular-plotly.js": "^4.0.4",

+ 168 - 66
src/app/app.component.html

@@ -1,79 +1,181 @@
+<div class="menu-link">
+  <div class="container" (click)="toggleMenu()">
+    <div class="bar1"></div>
+    <div class="bar2"></div>
+    <div class="bar3"></div>
+  </div>
+</div>
+
 <main>
-  <h1 class="pl-2">Rural Attractiveness Explorer</h1>
-  <h2 class="pl-2">Regional attractiveness of Polirural Pilot Regions based on system Dynamics models</h2>
-  <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>
+  <a name="0-intro"></a><landing-page></landing-page>
+
+  <div class="page">
+    <a name="1-foresight"></a><h1 class="pl-2">Regional Foresight</h1>
+    <!--
+A short note on the POLIRURAL project as a host for 12 regional Foresight initiatives. 
+
+Links to FS related project deliverables
+Links to newsletter and related articles
+Links to internal deliverables (inventories, guides, compendia etc.)
+Links to the 12 Foresight pages
+Links to external pages for FUP
+    -->
+  </div>
+
+  <div class="page">
+    <a name="2-text-mining"></a><h1 class="pl-2">Text Mining applied to Regional Foresight</h1>
+    <!--
+A short text explaining TM, its application to Foresight, and the work done on TM in the POLIRURAL project.
+
+Links to TM related project deliverables
+Links to newsletter and related articles
+Links to CKA paper and PPT for ISPIM Copenhagen meeting in June22 
+Link to the “The Semantic Explorer”
+
+    -->
   </div>
-  <div class="pl-2">
-    <h3>About System Dynamics Modelling</h3>
-    <p>The SDM tool can be used to simulate the impacts of different policy approaches on various KPIs in the PoliRural
-      pilot regions through 2040. The outputs of this tool are highly interesting and relevant for decision-making and
-      planning activities.
+
+  <div class="page">
+    <a name="3-sdm"></a><h1 class="pl-2">System Dynamic Modelling applied to Regional Foresight</h1>
+    <!--
+A short text explaining 
+SDM, Its application to Foresight, and the work done on TM in the POLIRURAL project.
+The 3-layer model
+The 8-module master model
+
+Links to TM related project deliverables
+Links to newsletter and related articles
+Links to POLIRURAL paper with Milos et al...
+Link to page 4 entitled “The Policy Options Explorer”
+Link to page 5 entitled “The Rural Attractiveness Explorer”
+-->
+  </div>
+
+  <div class="page">
+    <a name="4-policy-options"></a><h1 class="pl-2">The Policy Options Explorer</h1>
+    <!--
+A short text explaining how the global model was adapted for each of the regions.
+
+Links to SDM related project deliverables
+Links to newsletter and related articles
+Link to the “The Policy Options Explorer” (pages of Runar and Antoni, or separate links for each region)
+
+    -->
+  </div>
+
+  <div class="page">
+    <a name="5-attractiveness"></a><h1 class="pl-2">The Rural Attractiveness Explorer</h1>
+    <p>In PoliRural, we observed that concepts of rural attractiveness often feature in regional development strategies,
+      that they differ significantly from region to region, and are conditioned by developmental priorities such as the
+      desire to attract investors, entrepreneurs, or tourists. Thus, what is understood as rural attractiveness may
+      depend on where, when, and by whom attractiveness is
+      determined Additionally, the attractiveness of a region can be determined only in comparison to other regions.
+      This means that a region that is rather attractive compared to one set of regions can be rather unattractive
+      compared to another set of regions. Due to this complexity, measuring and evaluating rural attractiveness is
+      challenging.</p>
+
+    <p>Nevertheless, there is some common understanding of and agreement on the general issues that matter for rural
+      attractiveness. These are aspects belonging to the following areas:</p>
+    <ul>
+      <li>social,</li>
+      <li>natural environment,</li>
+      <li>human-made environment,</li>
+      <li>economic,</li>
+      <li>institutional,</li>
+      <li>cultural.</li>
+    </ul>
+
+    <p>This minimum agreement provided the basis for the development of a Rural Attractiveness Index. This index is made
+      up of 6 sub-indices - one sub-index for each of the generally relevant areas mentioned above. Each of the
+      sub-indices includes a number of sub-sub indices, e.g. the social sub-index could include sub-sub indices
+      measuring the age composition or unemployment rate of the population in a region.
+      The Rural Attractiveness Index reflects the characteristics of the concept of rural attractiveness: The values of
+      the Index do not represent absolute estimates of the attractiveness of a region but reflect how attractive the
+      assessed regions are in comparison to each other. To account for the context dependency of rural attractiveness,
+      the concrete choice of sub-sub indices needs to be determined in each individual situation in which rural
+      attractiveness is supposed to be evaluated.</p>
+
+    <p>With the Rural Attractiveness Explorer, we want to enable users to explore the effects of different policy
+      choices on the rural attractiveness of the PoliRural pilot regions. Thus, we represent the outputs of the Policy
+      Explorer as a value of the Rural Attractiveness Index and visualise the results of that in different ways. For
+      this purpose, we adapted the Rural Attractiveness Index to fit with the Policy Options Explorer as follows
+      (notably, the version of the Rural Attractiveness Index used here consists of only 4 instead of 6 sub-indices):
+      <!-- TODO: image here -->
     </p>
-    <p></p>
+    <!-- 
+Links to RA related project deliverables
+Links to relevant newsletter and related articles
+
+Link to page 6 entitled “Comparing Rural Attractiveness across the regions of Europe”
+Link to page 7 entitled “Exploring the Dynamics of Rural Attractiveness”
+Link to page 8 entitled “Exploring the Impact of Policy Option on Rural Attractiveness”
+
+    -->
   </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 class="page">
+    <a name="6-comparing-europe"></a><h1 class="pl-2">Comparing Rural Attractiveness across the regions of Europe</h1>
+    <!--
+A short text introducing the idea of comparing rural attractiveness across the regions of Europe.
+    -->
+
+    Link to Map visualization for all regions
+
+    <!-- TODO: Link to map visualization for the project regions and its evolution over time
+    <div class="map-row">
+      <h2>Map-based comparison</h2>
+      <hslayers-map></hslayers-map>
+    </div>
+    -->
+    Link to ‘dots’ visualization for the project regions and its evolution over time
+    <all-in-one-graph></all-in-one-graph>
+
+    Link to ‘disc’ visualization for the project regions and its evolution over time
+    <year-graph></year-graph>
+
+    <!--
+TODO: Link to ‘data race’ visualization for the project regions and its evolution over time
+    -->
   </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>
+  <div class="page">
+    <a name="7-dynamics"></a><h1 class="pl-2">Exploring the Dynamics of Rural Attractiveness</h1>
+    <!--
+A short text introducing the idea of exploring the dynamics of rural attractiveness by drilling into the sub-indices
+    -->
 
-    <ng-container [ngbNavItem]="2">
-      <a ngbNavLink>1st ("Discs")</a>
-      <ng-template ngbNavContent>
-        <year-graph></year-graph>
-        <factor-year-graph></factor-year-graph>
-        <scenario-factor-year-graph></scenario-factor-year-graph>
-      </ng-template>
+    Link to ‘dots’ visualization of sub-indices for the regions and their evolution over time
+    <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-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>
+    Link to ‘disc’ visualization of sub-indices for the regions and their evolution over time
+    <factor-year-graph></factor-year-graph>
 
-    <ng-container ngbNavItem>
-      <a ngbNavLink>3rd ("Map")</a>
-      <ng-template ngbNavContent>
-        <div class="map-row">
-          <h2>Map-based comparison</h2>
-          <hslayers-map></hslayers-map>
-        </div>
-      </ng-template>
-    </ng-container>
+    <!--
+TODO: Link to ‘data race’ visualization of sub-indices for the regions and their evolution over time
+    -->
+  </div>
 
-    <ng-container ngbNavItem>
-      <a ngbNavLink>4th ("Race")</a>
-      <ng-template ngbNavContent>
-        #PLACEHOLDER
-      </ng-template>
-    </ng-container>
-  </nav>
+  <div class="page">
+    <a name="8-impacts"></a><h1 class="pl-2">Exploring the Impact of Policy Option on Rural Attractiveness</h1>
+    <!--
+A short text introducing the idea of exploring the impact of policy options on rural attractiveness, based on comparing the impact of different scenarios in each of three domains, for a single region
+Infrastructure (roads and broadband coverage)
+Agricultural policy
+Support for Entrepreneurship
+    -->
+    Link to ‘disc’ visualization of impact of different options on RA for each domain
+    Link to ‘disc’ visualization of impact of different options on sub-indices for each domain
+    <scenario-factor-year-graph></scenario-factor-year-graph>
+    <!--
+TODO: Link to ‘data-race’ visualization of impact of different options on RA for each domain
+TODO: Link to ‘data-race’ visualization of impact of different options on sub-indices for each domain
+    -->
+  </div>
 
-  <div [ngbNavOutlet]="nav" class="mt-2"></div>
 </main>

+ 42 - 1
src/app/app.component.scss

@@ -1,7 +1,6 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
-@import "bootstrap/scss/nav";
 
 .hs-map {
   width: 90%;
@@ -24,7 +23,49 @@
   font-family: 'Times New Roman', Times, serif;
 }
 
+.page {
+  margin-bottom: 5rem;
+}
+
 hslayers {
   height: 20rem;
   display: block;
 }
+
+.menu-link {
+  position: fixed;
+  left: 0;
+  top: 0;
+  margin: 1rem;
+}
+
+/* https://www.w3schools.com/howto/howto_css_menu_icon.asp */
+.container {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.bar1, .bar2, .bar3 {
+  width: 35px;
+  height: 5px;
+  background-color: #333;
+  margin: 6px 0;
+  transition: 0.4s;
+}
+
+/* Rotate first bar */
+.change .bar1 {
+  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
+  transform: rotate(-45deg) translate(-9px, 6px) ;
+}
+
+/* Fade out the second bar */
+.change .bar2 {
+  opacity: 0;
+}
+
+/* Rotate last bar */
+.change .bar3 {
+  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
+  transform: rotate(45deg) translate(-8px, -8px) ;
+}

+ 18 - 1
src/app/app.component.ts

@@ -1,5 +1,7 @@
 import {Component} from '@angular/core';
+import {NgbOffcanvas} from '@ng-bootstrap/ng-bootstrap';
 
+import {MenuComponent} from './menu/menu.component';
 import {SdmDihService} from './sdm-dih.service';
 
 @Component({
@@ -8,5 +10,20 @@ import {SdmDihService} from './sdm-dih.service';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  constructor(public sdmDihService: SdmDihService) {}
+  offcanvasRef;
+
+  constructor(
+    private offcanvasService: NgbOffcanvas,
+    public sdmDihService: SdmDihService
+  ) {}
+
+  toggleMenu() {
+    if (this.offcanvasService.hasOpenOffcanvas()) {
+      return;
+    }
+    this.offcanvasService.open(MenuComponent, {
+      scroll: true,
+      backdrop: true,
+    });
+  }
 }

+ 5 - 3
src/app/app.module.ts

@@ -1,20 +1,22 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
-import {NgbNavModule} from '@ng-bootstrap/ng-bootstrap';
+import {NgbOffcanvasModule} from '@ng-bootstrap/ng-bootstrap';
 
 import {AppComponent} from './app.component';
 
 import {DiscsModule} from './discs-chart/discs.module';
 import {DotsModule} from './dots-chart/dots.module';
+import {LandingPageComponent} from './landing.component';
 import {MapModule} from './map-chart/map.module';
+import {MenuComponent} from './menu/menu.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, LandingPageComponent, MenuComponent],
   imports: [
     BrowserModule,
     FormsModule,
-    NgbNavModule,
+    NgbOffcanvasModule,
     DiscsModule,
     DotsModule,
     MapModule,

+ 32 - 0
src/app/landing.component.html

@@ -0,0 +1,32 @@
+<h1 class="pl-2">Rural Attractiveness Explorer</h1>
+<h2 class="pl-2">Regional attractiveness of Polirural Pilot Regions based on system Dynamics models</h2>
+<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>The SDM tool can be used to simulate the impacts of different policy approaches on various KPIs in the PoliRural
+    pilot regions through 2040. The outputs of this tool are highly interesting and relevant for decision-making and
+    planning activities.
+  </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>
+
+<!--
+  Link to page 1 entitled “Regional Foresight”
+  Link to page 2 entitled “Text Mining applied to Regional Foresight”
+  Link to page 3 entitled “SDM applied to Regional Foresight”
+  -->

+ 9 - 0
src/app/landing.component.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'landing-page',
+  templateUrl: './landing.component.html',
+})
+export class LandingPageComponent {
+  constructor() {}
+}

+ 13 - 0
src/app/menu/menu.component.html

@@ -0,0 +1,13 @@
+<div class="offcanvas-header">
+  <h5 class="offcanvas-title">Chapters</h5>
+  <button type="button" class="btn-close text-reset" aria-label="Close" (click)="activeOffcanvas.close('Cross click')"></button>
+</div>
+<div class="offcanvas-body">
+  <div>
+    <ol>
+      <ng-container *ngFor="let item of menuItems">
+        <li [ngClass]="{'no-number': item.order === 0}"><a href="#{{item.order}}-{{item.link}}">{{item.label}}</a></li>
+      </ng-container>
+    </ol>
+  </div>
+</div>

+ 7 - 0
src/app/menu/menu.component.scss

@@ -0,0 +1,7 @@
+li.no-number {
+  list-style-type: none;
+}
+
+.btn-close {
+  cursor: pointer;
+}

+ 48 - 0
src/app/menu/menu.component.ts

@@ -0,0 +1,48 @@
+import {Component} from '@angular/core';
+import {NgbActiveOffcanvas} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'offcanvas-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.scss'],
+})
+export class MenuComponent {
+  menuItems;
+  constructor(public activeOffcanvas: NgbActiveOffcanvas) {
+    this.menuItems = [
+      {order: 0, link: 'intro', label: 'Home'},
+      {order: 1, link: 'foresight', label: 'Regional Foresight'},
+      {
+        order: 2,
+        link: 'text-mining',
+        label: 'Text Mining applied to Regional Foresight',
+      },
+      {
+        order: 3,
+        link: 'sdm',
+        label: 'System Dynamic Modelling applied to Regional Foresight',
+      },
+      {order: 4, link: 'policy-options', label: 'The Policy Options Explorer'},
+      {
+        order: 5,
+        link: 'attractiveness',
+        label: 'The Rural Attractiveness Explorer',
+      },
+      {
+        order: 6,
+        link: 'comparing-europe',
+        label: 'Comparing Rural Attractiveness across the regions of Europe',
+      },
+      {
+        order: 7,
+        link: 'dynamics',
+        label: 'Exploring the Dynamics of Rural Attractiveness',
+      },
+      {
+        order: 8,
+        link: 'impacts',
+        label: 'Exploring the Impact of Policy Option on Rural Attractiveness',
+      },
+    ];
+  }
+}

+ 7 - 3
src/styles.scss

@@ -1,6 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
-//@import "bootstrap/scss/functions";
-//@import "bootstrap/scss/variables";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/close";
 
 html, body {
   position: relative;
@@ -67,7 +71,7 @@ button:focus {
 }
 
 main {
-  padding: 1em;
+  padding: 1em 1em 1em calc(2 * 1em + 35px);
   max-width: 240px;
   margin: 0 auto;
 }