💄 align dots and discs styles

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

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

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

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

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

@@ -1,3 +1,8 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/card";
+
 #plot-place {
   width: 100%;
   height: 300px;

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

@@ -1,5 +1,8 @@
-<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 class="card">
+  <h3>Detailed overview of {{region}}</h3>
+  <div class="plot-place card-body" *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>
 </div>
-<ng-template #loading> Loading data... </ng-template>

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

@@ -1,3 +1,8 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/card";
+
 .plot-place {
   width: 100%;
   height: 200px;