🤡 mock detailed graph per each region

src/app/app.component.html

@@ -9,9 +9,12 @@
   <div class="graph-row">
     <year-graph></year-graph>
   </div>
-  <div class="graph-row">
+  <div class="graph-row-plotly">
     <all-in-one-graph></all-in-one-graph>
   </div>
+  <div class="graph-row-plotly">
+  <region-graph [region]="'Apulia'"></region-graph>
+  </div>
   <div class="map-row">
     <h2>Map-based comparison</h2>
     <div class="hs-map">

src/app/app.component.scss

@@ -10,6 +10,10 @@
   height: 20rem;
 }
 
+.graph-row-plotly {
+  height: 30rem;
+}
+
 hslayers {
   height: 20rem;
   display: block;

src/app/app.module.ts

@@ -5,11 +5,18 @@ import {HslayersAppComponent} from './app.component';
 import {HslayersModule} from 'hslayers-ng';
 
 import {AllInOneModule} from './graphs/all-in-one-graph/all-in-one-graph.module';
+import {RegionGraphModule} from './graphs/region-graph/region-graph.module';
 import {YearGraphModule} from './graphs/year-graph/year-graph.module';
 
 @NgModule({
   declarations: [HslayersAppComponent],
-  imports: [BrowserModule, HslayersModule, YearGraphModule, AllInOneModule],
+  imports: [
+    BrowserModule,
+    HslayersModule,
+    YearGraphModule,
+    AllInOneModule,
+    RegionGraphModule,
+  ],
   providers: [],
   bootstrap: [HslayersAppComponent],
 })

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

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

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

@@ -11,7 +11,7 @@ export class AllInOneGraphComponent {
   dataLoaded = false;
   data = [];
   layout = {
-    height: 400,
+    height: '20rem',
     //width: '100%',
   };
 

src/app/graphs/region-graph/region-graph.component.html

@@ -0,0 +1,5 @@
+<h2>Detailed overview of {{region}}</h2>
+<div id="plot-place" *ngIf="dataLoaded; else loading">
+  <plotly-plot [data]="data" [layout]="layout" [className]="'plotly-plot'" [useResizeHandler]="true"></plotly-plot>
+</div>
+<ng-template #loading> Loading data... </ng-template>

src/app/graphs/region-graph/region-graph.component.scss

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

src/app/graphs/region-graph/region-graph.component.ts

@@ -0,0 +1,56 @@
+import {Component, Input} from '@angular/core';
+
+import {SdmDihService} from '../sdm-dih.service';
+
+@Component({
+  selector: 'region-graph',
+  templateUrl: './region-graph.component.html',
+  styleUrls: ['./region-graph.component.scss'],
+})
+export class RegionGraphComponent {
+  @Input() region: string;
+  dataLoaded = false;
+  data = [];
+  layout = {
+    height: 400,
+    //width: '100%',
+  };
+
+  constructor(public sdmDihService: SdmDihService) {
+    this.sdmDihService.dataLoads.subscribe(() => {
+      this.processData();
+      this.dataLoaded = true;
+    });
+  }
+
+  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 trace1 = {
+      x: years,
+      y: regions,
+      mode: 'markers',
+      marker: {
+        size: 10,
+        color: colors,
+        colorscale: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1].map(
+          (perc) => {
+            return [perc, this.sdmDihService.perc2color(perc)];
+          }
+        ),
+      },
+      type: 'scatter',
+    };
+    this.data = [trace1];
+  }
+}

src/app/graphs/region-graph/region-graph.module.ts

@@ -0,0 +1,17 @@
+import Plotly from 'plotly.js-dist-min';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {NgModule} from '@angular/core';
+import {PlotlyModule} from 'angular-plotly.js';
+
+import {RegionGraphComponent} from './region-graph.component';
+
+PlotlyModule.plotlyjs = Plotly;
+
+@NgModule({
+  imports: [CommonModule, FormsModule, PlotlyModule],
+  exports: [RegionGraphComponent],
+  declarations: [RegionGraphComponent],
+  providers: [],
+})
+export class RegionGraphModule {}