♻️ user journey paged part 3

custom-webpack.config.js

@@ -9,11 +9,6 @@ module.exports = {
       exclude: ['vendor.*.js'],
     })
   ],
-  output: {
-    path: path.resolve('dist'),
-    publicPath: '/',
-    filename: 'bundle.js'
-  },
   module: {
     rules: [
       {

src/app/discs-chart/year-graph/year-graph.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="card">
   <h2>Rural attractiveness index of regions in {{yearGraphService.selectedYear}}</h2>
   <div *ngIf="sdmDihService.yearsLoaded; else loading" class="card-body">
     <div class="year-range">

src/app/discs-chart/year-graph/year-graph.component.scss

@@ -1,7 +1,8 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
-//@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities";
 @import "bootstrap/scss/forms";
 @import "bootstrap/scss/card";
 

src/app/pages/about-rural-attractiveness-explorer/about-rural-attractiveness-explorer.component.html

@@ -65,10 +65,10 @@
         among
         the economic sub-sub indices, which is not included in the current version of the IRA.</p>
 
-    <div class="card col-8 mx-auto my-5">
+    <div class="card col-8 mx-auto my-5 shadow">
         <img class="card-img-top" src="assets/fig/fig-04-rurattridx.png" />
         <div class="card-body">
-            <p class="card-text">Fig 3: Composition of the preliminary Index of Rural Attractiveness Index used in the
+            <p class="card-text">Composition of the preliminary Index of Rural Attractiveness Index used in the
                 Rural Attractiveness Explorer</p>
         </div>
     </div>

src/app/pages/comparing-rural-attractiveness/comparing-rural-attractiveness.component.html

@@ -3,20 +3,30 @@
                 Comparing Rural Attractiveness across the Regions of Europe
 
         </h2>
-        <p>Comparing the rural attractiveness of different regions in Europe can provide various insights: Evidently, it
-                helps to get an impression on where a region stands compared to the rest of Europe. Additionally, by
-                looking at regions that fare especially well in terms of rural attractiveness, it is possible to find
-                out about best practices that may help other regions to improve their rural attractiveness, too. Also,
-                finding regions that are similar in their rural attractiveness characteristics can help to establish
-                cooperation between these similar regions so they can learn from each other and possibly work together
+        <p>Comparing the rural attractiveness of different regions in Europe can provide various insights:
+                Evidently, it
+                helps to get an impression on where a region stands compared to the rest of Europe.
+                Additionally, by
+                looking at regions that fare especially well in terms of rural attractiveness, it is possible to
+                find
+                out about best practices that may help other regions to improve their rural attractiveness, too.
+                Also,
+                finding regions that are similar in their rural attractiveness characteristics can help to
+                establish
+                cooperation between these similar regions so they can learn from each other and possibly work
+                together
                 on strategies to advance in terms of rural attractiveness.
         </p>
-        <p>In PoliRural, we have developed several tools that support the comparison of different European regions
+        <p>In PoliRural, we have developed several tools that support the comparison of different European
+                regions
                 regarding their rural attractiveness:
         </p>
-        <p>Our Rural Attractiveness Map application shows the current values of the Index of Rural Attractiveness (IRA)
-                [link to page 5] for all regions in Europe. The Map application allows you to change the settings of the
-                IRA (Which aspects are to be included in the Index? What is the relative importance of the 6 sub-indices
+        <p>Our Rural Attractiveness Map application shows the current values of the Index of Rural
+                Attractiveness (IRA)
+                [link to page 5] for all regions in Europe. The Map application allows you to change the
+                settings of the
+                IRA (Which aspects are to be included in the Index? What is the relative importance of the 6
+                sub-indices
                 to you?). Thus, the map can be adapted to your own preferences and needs. Additionally, the Map
                 application can also show groups of similar regions (so-called clusters).
         </p>
@@ -40,7 +50,7 @@
         <p><a href="https://publish.lesprojekt.cz/attractiveness-clustering/" target="_blank">Map visualization for all
                 regions</a></p>
         <div class="card p-3 my-5">
-                <year-graph></year-graph>
+                <all-in-one-graph></all-in-one-graph>
                 <div class="card-body">
                         <p class="card-text"> “Dots” visualization for the project regions and its evolution over time
                         </p>
@@ -53,7 +63,7 @@
                 step. The direction of the arrow (up, straight, down) shows how the value of rural attractiveness has
                 changed compared to the previous time step.</p>
         <div class="card p-3 my-5">
-                <all-in-one-graph></all-in-one-graph>
+                <year-graph></year-graph>
                 <div class="card-body">
                         <p class="card-text">‘Disc’ visualization for the project regions and its evolution over time
                         </p>
@@ -64,10 +74,12 @@
                 any time), and the bars representing the different pilot regions change their length and order depending
                 on their “performance” at each time step.</p>
 
-        <div class="card p-3 my-5">
-                <iframe class="iframe-100" frameborder="0" scrolling="no" src="http://localhost:3000/?domain=baseline&scenario=baseline&showControls=true"></iframe>
+        <div class="card p-3 my-5 col-8 mx-auto">
+                <iframe id="iframe" class="iframe-100" frameborder="0" scrolling="no"
+                        src="https://polirural-rae.avinet.no/barchartrace?domain=baseline&scenario=baseline"></iframe>
                 <div class="card-body">
-                        <p class="card-text">‘Data race’ visualization for the project regions and its evolution over time</p>
+                        <p class="card-text">‘Data race’ visualization for the project regions and its evolution over
+                                time</p>
                 </div>
         </div>
 

src/app/pages/exploring-dynamics/exploring-dynamics.component.html

@@ -14,27 +14,38 @@
         2015 to 2040 under a business-as-usual scenario, which means everything continues as is. See here [link to page
         6] to find out more about the different visualization types:
     </p>
-    <p>[Embed ‘dots’ visualization of sub-indices for the regions and their evolution over time]</p>
-    <p>[Embed ‘disc’ visualization of sub-indices for the regions and their evolution over time]</p>
-    <p>[Embed ‘data race’ visualization of sub-indices for the regions and their evolution over time]</p>
-    <p>A ‘dots’ visualization of sub-indices for the regions and their evolution over time</p>
-  <div class="card">
-    <h2>Detailed overview of individual regions</h2>
-    <div class="card-body">
+
+    <div class="card my-5">
+      <h2>Detailed overview of individual regions</h2>
+      <div class="card-body">
       <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">
-        <region-graph [region]="region"></region-graph>
-        <hr *ngIf="!isLast">
-      </ng-container>
+        <ng-container *ngFor="let region of sdmDihService.regions; last as isLast">
+            <region-graph [region]="region"></region-graph>
+            <hr *ngIf="!isLast">
+        </ng-container>
+        <div class="card-body p-3">
+            <h5 class="card-title">‘Dots’ visualization of sub-indices for the regions and their evolution over time]
+            </h5>
+        </div>
+    </div>
+
+    <div class="card my-5">
+        <factor-year-graph></factor-year-graph>
+        <div class="card-body p-3">
+            <h5 class="card-title">‘Disc’ visualization of sub-indices for the regions and their evolution over time
+            </h5>
+        </div>
     </div>
-  </div>
 
-  <p>A ‘disc’ visualization of sub-indices for the regions and their evolution over time</p>
-  <factor-year-graph></factor-year-graph>
+    <div class="card my-5">
+        <iframe class="iframe-100" id="iframe" frameborder="0" scrolling="no"
+            src="https://polirural-rae.avinet.no/barchartrace?showSecondBarchartRace&showParamSelector&scenario=baseline&param1=rur_attr&param2=tourist_visitors"></iframe>
+        <div class="card-body p-3">
+            <h5 class="card-title">‘Data race’ visualization of sub-indices for the regions and their evolution over
+                time</h5>
+        </div>
+    </div>
 
-  <!--
-TODO: Link to ‘data race’ visualization of sub-indices for the regions and their evolution over time
-  -->
 </div>

src/app/pages/exploring-impact/exploring-impact.component.html

@@ -46,16 +46,28 @@
     </ul>
 
     <p>These scenarios are designed for demonstration purposes as well as to allow users to understand how single policy
-    measures play out. They are not meant to reflect any realistic policy strategies, which would include packages of
-    different measures and more nuanced approaches.</p>
+        measures play out. They are not meant to reflect any realistic policy strategies, which would include packages
+        of
+        different measures and more nuanced approaches.</p>
 
 
-    <p>[Embed ‘disc’ visualization of impact of different options on RA and its sub-indices for each domain]</p>
-    <p>[Embed ‘data-race’ visualization of impact of different options on RA and its sub-indices for each domain]</p>
-      <!-- Link to ‘disc’ visualization of impact of different options on RA for each domain -->
-  <p>A ‘disc’ visualization of impact of different options on RAI and its sub-indices for each domain</p>
-  <scenario-factor-year-graph></scenario-factor-year-graph>
-  <!--
+    <div class="card my-5">
+        <scenario-factor-year-graph></scenario-factor-year-graph>
+        <div class="card-body p-3">
+            ‘Disc’ visualization of impact of different options on RA and its sub-indices for each domain
+        </div>
+    </div>
+
+    <div class="card my-5 col-8 mx-auto">
+        <iframe class="iframe-100" id="iframe" frameborder="0" scrolling="no"
+            src="https://polirural-rae.avinet.no/barchartrace?showModelSelector&showParamSelector&showScenarioSelector&model=Hame"></iframe>
+        <div class="card-body p-3">
+            <h5 class="card-title">‘Data-race’ visualization of impact of different options on RA and its sub-indices
+                for each domain</h5>
+        </div>
+    </div>
+
+      <!--
 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
   -->

src/app/pages/landing-page/landing-page.component.html

@@ -41,9 +41,10 @@
       developed novel IT
       systems intended to support and enrich stakeholder engagement in those 12 regional Foresight exercises.
     </p>
+    <a class="btn" [routerLink]="['rural-attractiveness-explorer', 'comparing-rural-attractiveness']" >Skip directly to the Rural Attractiveness Explorer</a>
   </div>
   <div class="row mt-4">
-    <div class="col-6 p-5 bg-light">
+    <div class="col-8 p-5 bg-light">
       <p>
         One of those systems employed a wide range of Text Mining and Machine learning techniques to support the
         work of readers
@@ -58,20 +59,20 @@
         EXPLORER (SE).
       </p>
     </div>
-    <div class="col-6 p-3">
-      <div class="card">
+    <div class="col-4 p-3">
+      <div class="card shadow">
         <img class="card-image-top" src="assets/fig/ill-text-mining.jpeg" />
       </div>
     </div>
   </div>
   <div class="row mt-4">
-    <div class="col-6">
-      <div class="card">
+    <div class="col-4">
+      <div class="card shadow">
           <img class="card-image-top" src="assets/fig/ill-sdm.png" />
       </div>
   </div>
 
-    <div class="col-6 p-5 bg-light">
+    <div class="col-8 p-5 bg-light">
       <p>
 
       </p>
@@ -86,7 +87,7 @@
     </div>
   </div>
   <div class="row mt-4">
-    <div class="col-6 p-5 bg-light">
+    <div class="col-8 p-5 bg-light">
       <p>
         Our third tool is the RURAL ATTRACTIVENESS EXPLORER (RAE). It connects the POE to a composite Index of
         Rural
@@ -96,8 +97,8 @@
         impact on an
       </p>
     </div>
-    <div class="col-6">
-      <div class="card">
+    <div class="col-4">
+      <div class="card shadow">
           <img class="card-image-top" src="assets/fig/ill-rae.png" />
       </div>
   </div>

src/app/pages/policy-options-explorer/policy-options-explorer.component.html

@@ -41,13 +41,13 @@
         <li>links to newsletters (tbd.)</li>
     </ul>
     <p>Or continue to the <a routerLink="/rural-attractiveness-explorer">Rural Attractiveness Explorer</a>.</p>
-    <div class="card col-6 mx-auto my-5">
+    <div class="card col-6 mx-auto my-5 shadow">
         <figure>
             <img class="card-img-top" src="assets/fig/fig-03-popt.png" />
             <figcaption>Policy options explorer</figcaption>
         </figure>
         <div class="card-body">
-            <p class="card-text">Fig 3: Overview of available models in the Policy Options Explorer</p>
+            <p class="card-text">Overview of available models in the Policy Options Explorer</p>
         </div>
     </div>
 </div>

src/app/pages/rural-attractiveness-explorer/rural-attractiveness-explorer.component.html

@@ -20,30 +20,3 @@
   </div>
 </nav>
 <router-outlet></router-outlet>
-<!--   <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>
-</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> -->

src/app/pages/rural-attractiveness-explorer/rural-attractiveness-explorer.component.ts

@@ -8,5 +8,19 @@ import {Component, OnInit} from '@angular/core';
 export class RuralAttractivenessExplorerComponent implements OnInit {
   constructor() {}
 
-  ngOnInit(): void {}
+  listener = (e) => {
+    const i = window.document.getElementById('iframe');
+    if (i) {
+      (<HTMLIFrameElement>i).style.height = e.data.height + 'px';
+    }
+  };
+
+  ngOnInit(): void {
+    window.removeEventListener('message', this.listener, false);
+    window.addEventListener('message', this.listener, false);
+  }
+
+  ngOnDestroy() {
+    window.removeEventListener('message', this.listener, false);
+  }
 }

src/app/pages/system-dynamics-modelling/system-dynamics-modelling.component.html

@@ -45,10 +45,10 @@
         for tourism, on performance indicators such as the number of visitors, nights stayed and jobs created, and see
         how these play out over time. </p>
     <p> By way of illustration, the 3LM for exploring tourism related policy options might look like this.</p>
-    <div class="card col-6 mx-auto my-5">
+    <div class="card col-6 mx-auto my-5 shadow">
         <img class="card-img-top" src="assets/fig/fig-01-sdm.png" />
         <div class="card-body">
-            <p class="card-text">Fig 1: Sample 3LM for exploring tourism</p>
+            <p class="card-text">Sample 3LM for exploring tourism</p>
         </div>
     </div>
     <p> The model itself can be improved. Just putting this diagram on a slide and projecting it on a wall as support
@@ -56,10 +56,10 @@
         is described in some detail in project deliverable D5.5 listed below. The project has developed two interactive
         systems allowing groups of stakeholders to dig deeper into the exploration of policy options.
     <p> One of these is called the POE or Policy Options Explorer. Its interface looks something like this.</p>
-    <div class="card col-6 mx-auto my-5">
+    <div class="card col-6 mx-auto my-5 shadow">
         <img class="card-img-top" src="assets/fig/fig-02-sdm.png" />
         <div class="card-body">
-            <p class="card-text">Fig 2: Screenshot from the Polirural Policy Option Explorer</p>
+            <p class="card-text">Screenshot from the Polirural Policy Option Explorer</p>
         </div>
     </div>
     <p> The other tool is called the RAE or Rural Attractiveness Explorer. It links the SDM models embedded in the POE

src/app/sdm-dih.service.ts

@@ -37,7 +37,7 @@ export class SdmDihService {
       .then(() => {
         this.years = Object.keys(this.sdmData);
         this.yearsLoaded = true;
-        console.log(this.years);
+        // console.log(this.years);
         this.firstYear = this.years[0];
         this.lastYear = this.years[this.years.length - 1];
         this.regions = [
@@ -45,19 +45,19 @@ export class SdmDihService {
             this.sdmData[this.firstYear].map((yearData) => yearData['MODEL'])
           ),
         ];
-        console.log(this.regions);
+        // console.log(this.regions);
         this.scenarios = [
           ...new Set(
             this.sdmData[this.firstYear].map((yearData) => yearData['SCENARIO'])
           ),
         ];
-        console.log(this.scenarios);
+        // console.log(this.scenarios);
         this.domains = [
           ...new Set(
             this.sdmData[this.firstYear].map((yearData) => yearData['DOMAIN'])
           ),
         ];
-        console.log(this.domains);
+        // console.log(this.domains);
         this.dataLoads.next(true);
       })
       .catch((err) => {
@@ -102,7 +102,7 @@ export class SdmDihService {
 
   async loadData() {
     const data = await csv(this.DATA_PATH); // Array of objects, each object represents a row, where key is a heading and value is the cell
-    console.log(data);
+    // console.log(data);
     this.sdmData = {};
     for (const row of data) {
       const timeStep = row['TIME_STEP'];
@@ -112,7 +112,7 @@ export class SdmDihService {
       }
       this.sdmData[timeStep].push(regionData);
     }
-    console.log(this.sdmData);
+    // console.log(this.sdmData);
   }
 
   perc2color(perc: number): string {

src/styles.scss

@@ -7,6 +7,7 @@
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/images";
 
+
 $primary: #2B3948;
 $secondary: #818A91;
 // $success: #00ff00;
@@ -16,15 +17,19 @@ $secondary: #818A91;
 // $light: #00ff00;
 // $dark: #00ff00;
 
+
 $theme-colors: (
   "primary": $primary,
+  "secondary": $secondary,
   "danger": $danger
 );
 
+
 @import "~bootstrap/scss/bootstrap";
 
 
-html, body {
+html,
+body {
   position: relative;
   width: 100%;
   height: 100%;
@@ -39,7 +44,7 @@ body {
 }
 
 a {
-  color: rgb(0,100,200);
+  color: rgb(0, 100, 200);
   text-decoration: none;
 }
 
@@ -48,14 +53,17 @@ a:hover {
 }
 
 a:visited {
-  color: rgb(0,80,160);
+  color: rgb(0, 80, 160);
 }
 
 label {
   display: block;
 }
 
-input, button, select, textarea {
+input,
+button,
+select,
+textarea {
   font-family: inherit;
   font-size: inherit;
   -webkit-padding: 0.4em 0;
@@ -105,7 +113,8 @@ h2 {
   color: $primary;
 }
 
-div.has-fixed-header p, div.has-fixed-header li {
+div.has-fixed-header p,
+div.has-fixed-header li {
   text-align: justify;
   font-size: 1.2em;
   font-weight: 150;
@@ -130,21 +139,21 @@ div.has-fixed-header p, div.has-fixed-header li {
 }
 
 .iframe-100 {
-  height: 100vh;
+  width: 100%;
 }
 
 .navbar-dark .nav-item a.nav-link {
-  color: rgba( $light, .65 )
-} 
+  color: rgba($light, .65)
+}
 
 .navbar-dark .nav-item a.nav-link.active {
   color: $light;
-} 
+}
 
 .navbar-dark .nav-item a.nav-link:hover {
   color: rgba($light, .85);
   text-decoration: none;
-} 
+}
 
 .hsl {
   /*
@@ -155,4 +164,4 @@ div.has-fixed-header p, div.has-fixed-header li {
     color: $primary
   }
   */
-}
+}