✨ show data also in all-in-one graph

src/app/graphs/all-in-one-graph/all-in-one-graph.component.html

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

src/app/graphs/all-in-one-graph/all-in-one-graph.component.scss

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

src/app/graphs/all-in-one-graph/all-in-one-graph.component.ts

@@ -9,38 +9,76 @@ import {SdmDihService} from '../sdm-dih.service';
 })
 export class AllInOneGraphComponent {
   dataLoaded = false;
-  trace1 = {
-    x: [2014, 2014, 2014, 2015, 2015, 2030],
+  /*trace1 = {
+    x: [2014, 2014, 2014, 2015, 2015, 2016, 2030],
     y: [
       'Monaghan',
       'Hame',
       'Central Greece',
       'Central Bohemia',
       'Segobriga',
+      'Segobriga',
       'Galilee',
     ],
-
     mode: 'markers',
-
     marker: {
       size: 10,
-
-      color: [0, 1, 2, 3, 4, 5],
+      color: [0, 0.1, 0.2, 0.5, 0.4, 0.3, 0],
+      colorscale: 'YlOrRd',
     },
-  };
-  data = [this.trace1];
+    type: 'scatter',
+  };*/
+  data = [];
   layout = {
     height: 400,
-    width: '100%',
+    //width: '100%',
   };
 
   constructor(private sdmDihService: SdmDihService) {
     this.sdmDihService.dataLoads.subscribe(() => {
+      this.processData();
       this.dataLoaded = true;
     });
     //this.drawPlot();
   }
 
+  processData() {
+    //TODO: parametrize the PARAM_TO_COMPARE
+    const PARAM_TO_COMPARE = 'aggregated';
+    const years = [];
+    const regions = [];
+    const colors = [];
+    for (const yearData of Object.values<any[]>(this.sdmDihService.sdmData)) {
+      for (const regionData of yearData) {
+        years.push(regionData['TIME_STEP']);
+        regions.push(regionData['MODEL']);
+        colors.push(regionData[PARAM_TO_COMPARE]);
+      }
+    }
+    /*const years = Object.keys(this.sdmDihService.sdmData).map((year) =>
+      parseFloat(year)
+    );
+    const regions = [
+      ...new Set<string>(
+        this.sdmDihService.sdmData[years[1] + ''].map(
+          (yearData) => yearData['MODEL']
+        )
+      ),
+    ];*/
+    const trace1 = {
+      x: years,
+      y: regions,
+      mode: 'markers',
+      marker: {
+        size: 10,
+        color: colors, //[0, 0.1, 0.2, 0.5, 0.4, 0.3, 0],
+        colorscale: 'YlOrRd',
+      },
+      type: 'scatter',
+    };
+    this.data = [trace1];
+  }
+
   /*drawPlot() {
     const trace1 = {
       y: [