🤡 mock the other graph

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

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

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

@@ -0,0 +1,4 @@
+#plot-place {
+  width: 600px;
+  height: 250px;
+}

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

@@ -1,9 +1,71 @@
 import {Component} from '@angular/core';
 
+import {SdmDihService} from '../sdm-dih.service';
+
 @Component({
   selector: 'all-in-one-graph',
-  templateUrl: 'all-in-one-graph.component.html',
+  templateUrl: './all-in-one-graph.component.html',
+  styleUrls: ['./all-in-one-graph.component.scss'],
 })
 export class AllInOneGraphComponent {
-  constructor() {}
+  dataLoaded = false;
+  trace1 = {
+    y: [
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
+    ],
+
+    mode: 'markers',
+
+    marker: {
+      size: 40,
+
+      color: [
+        0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
+        20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
+        38, 39,
+      ],
+    },
+  };
+  data = [this.trace1];
+  layout = {
+    height: 250,
+    width: '100%',
+  };
+
+  constructor(private sdmDihService: SdmDihService) {
+    this.sdmDihService.dataLoads.subscribe(() => {
+      this.dataLoaded = true;
+    });
+    //this.drawPlot();
+  }
+
+  /*drawPlot() {
+    const trace1 = {
+      y: [
+        5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
+        5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
+      ],
+
+      mode: 'markers',
+
+      marker: {
+        size: 40,
+
+        color: [
+          0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
+          20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36,
+          37, 38, 39,
+        ],
+      },
+    };
+
+    const data = [trace1];
+
+    const layout = {
+      title: 'Scatter Plot with a Color Dimension',
+    };
+
+    Plotly.newPlot('plot-place', data, layout);
+  }*/
 }

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

@@ -1,9 +1,14 @@
+import Plotly from 'plotly.js-dist-min';
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {PlotlyModule} from 'angular-plotly.js';
 
 import {AllInOneGraphComponent} from './all-in-one-graph.component';
 
+PlotlyModule.plotlyjs = Plotly;
+
 @NgModule({
-  imports: [],
+  imports: [CommonModule, PlotlyModule],
   exports: [AllInOneGraphComponent],
   declarations: [AllInOneGraphComponent],
   providers: [],