💄 charts alignments and styling

src/app/app.component.html

@@ -2,18 +2,25 @@
   <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.
+    <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>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>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>
 
@@ -27,20 +34,18 @@
     <ng-container [ngbNavItem]="2">
       <a ngbNavLink>1st ("Discs")</a>
       <ng-template ngbNavContent>
-          <year-graph></year-graph>
+        <year-graph></year-graph>
       </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>
+          <h2>Detailed overview of single 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>
@@ -61,6 +66,6 @@
       </ng-template>
     </ng-container>
   </nav>
-  
+
   <div [ngbNavOutlet]="nav" class="mt-2"></div>
 </main>

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

@@ -1,5 +1,5 @@
 <h2>Rural attractiveness index of regions between 2015 and 2040</h2>
 <div id="plot-place" *ngIf="dataLoaded; else loading">
-  <plotly-plot [data]="data" [layout]="layout" [className]="'plotly-plot'" [useResizeHandler]="true"></plotly-plot>
+  <plotly-plot [data]="data" [layout]="plotlyLayout" [config]="plotlyConfig" [className]="'plotly-plot'" [useResizeHandler]="true"></plotly-plot>
 </div>
 <ng-template #loading> Loading data... </ng-template>

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

@@ -1,8 +1,8 @@
 #plot-place {
   width: 100%;
-  height: 400px;
-  margin-left: 5rem;
-  margin-right: 5rem;
+  height: 300px;
+  margin-left: 2rem;
+  margin-right: 2rem;
 }
 
 .plotly-plot {

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

@@ -10,10 +10,29 @@ import {SdmDihService} from '../../sdm-dih.service';
 export class AllInOneGraphComponent implements OnInit {
   dataLoaded = false;
   data = [];
-  layout = {
-    height: '20rem',
+  plotlyLayout = {
+    height: 270,
+    cliponaxis: false,
+    constraintext: 'none',
+    yaxis: {
+      automargin: true,
+    },
+    xaxis: {
+      automargin: true,
+    },
+    margin: {
+      l: 5,
+      r: 5,
+      b: 10,
+      t: 10,
+      pad: 4,
+    },
+    //hovermode: '',
     //width: '100%',
   };
+  plotlyConfig = {
+    //staticPlot: true,
+  };
 
   constructor(public sdmDihService: SdmDihService) {}
 

src/app/dots-chart/region-graph/region-graph.component.html

@@ -1,6 +1,5 @@
-<h2>Detailed overview of {{region}}</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>
-<div id="plot-place" *ngIf="dataLoaded; else loading">
-  <plotly-plot [data]="data" [layout]="layout" [className]="'plotly-plot'" [useResizeHandler]="true"></plotly-plot>
+<h3>Detailed overview of {{region}}</h3>
+<div class="plot-place" *ngIf="dataLoaded; else loading">
+  <plotly-plot [data]="data" [layout]="plotlyLayout" [config]="plotlyConfig" [className]="'plotly-plot'" [useResizeHandler]="true"></plotly-plot>
 </div>
 <ng-template #loading> Loading data... </ng-template>

src/app/dots-chart/region-graph/region-graph.component.scss

@@ -1,4 +1,4 @@
-#plot-place {
+.plot-place {
   width: 100%;
   height: 250px;
 }

src/app/dots-chart/region-graph/region-graph.component.ts

@@ -11,10 +11,28 @@ export class RegionGraphComponent implements OnChanges {
   @Input() region: string;
   dataLoaded = false;
   data = [];
-  layout = {
-    height: 400,
+  plotlyLayout = {
+    height: 270,
+    cliponaxis: false,
+    constraintext: 'none',
+    yaxis: {
+      automargin: true,
+    },
+    xaxis: {
+      automargin: true,
+    },
+    margin: {
+      l: 5,
+      r: 5,
+      b: 10,
+      t: 10,
+      pad: 4,
+    },
     //width: '100%',
   };
+  plotlyConfig = {
+    staticPlot: true,
+  };
 
   constructor(public sdmDihService: SdmDihService) {
     this.sdmDihService.dataLoads.subscribe((loaded) => {