♻️ restructure modules

src/app/app.module.ts

@@ -5,9 +5,8 @@ import {NgModule} from '@angular/core';
 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';
+import {DiscsModule} from './graphs/discs-chart/discs.module';
+import {DotsModule} from './graphs/dots-chart/dots.module';
 
 @NgModule({
   declarations: [HslayersAppComponent],
@@ -15,9 +14,8 @@ import {YearGraphModule} from './graphs/year-graph/year-graph.module';
     BrowserModule,
     FormsModule,
     HslayersModule,
-    YearGraphModule,
-    AllInOneModule,
-    RegionGraphModule,
+    DiscsModule,
+    DotsModule,
   ],
   providers: [],
   bootstrap: [HslayersAppComponent],

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

@@ -1,17 +0,0 @@
-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 {AllInOneGraphComponent} from './all-in-one-graph.component';
-
-PlotlyModule.plotlyjs = Plotly;
-
-@NgModule({
-  imports: [CommonModule, FormsModule, PlotlyModule],
-  exports: [AllInOneGraphComponent],
-  declarations: [AllInOneGraphComponent],
-  providers: [],
-})
-export class AllInOneModule {}

src/app/graphs/year-graph/year-graph.module.ts → src/app/graphs/discs-chart/discs.module.ts

@@ -3,7 +3,7 @@ import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
 
 import {QuarterPipe} from '../quarter.pipe';
-import {YearGraphComponent} from './year-graph.component';
+import {YearGraphComponent} from './year-graph/year-graph.component';
 
 @NgModule({
   imports: [CommonModule, FormsModule],
@@ -11,4 +11,4 @@ import {YearGraphComponent} from './year-graph.component';
   declarations: [YearGraphComponent, QuarterPipe],
   providers: [],
 })
-export class YearGraphModule {}
+export class DiscsModule {}

src/app/graphs/year-graph/year-graph.component.ts → src/app/graphs/discs-chart/year-graph/year-graph.component.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {interpolate, quantize, select} from 'd3';
 
-import {SdmDihService} from '../sdm-dih.service';
+import {SdmDihService} from '../../sdm-dih.service';
 
 @Component({
   selector: 'year-graph',

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

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 
-import {SdmDihService} from '../sdm-dih.service';
+import {SdmDihService} from '../../sdm-dih.service';
 
 @Component({
   selector: 'all-in-one-graph',

src/app/graphs/region-graph/region-graph.module.ts → src/app/graphs/dots-chart/dots.module.ts

@@ -4,14 +4,15 @@ import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
 import {PlotlyModule} from 'angular-plotly.js';
 
-import {RegionGraphComponent} from './region-graph.component';
+import {AllInOneGraphComponent} from './all-in-one-graph/all-in-one-graph.component';
+import {RegionGraphComponent} from './region-graph/region-graph.component';
 
 PlotlyModule.plotlyjs = Plotly;
 
 @NgModule({
   imports: [CommonModule, FormsModule, PlotlyModule],
-  exports: [RegionGraphComponent],
-  declarations: [RegionGraphComponent],
+  exports: [RegionGraphComponent, AllInOneGraphComponent],
+  declarations: [RegionGraphComponent, AllInOneGraphComponent],
   providers: [],
 })
-export class RegionGraphModule {}
+export class DotsModule {}

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

@@ -1,4 +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>
 </div>

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

@@ -1,6 +1,6 @@
 import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
 
-import {SdmDihService} from '../sdm-dih.service';
+import {SdmDihService} from '../../sdm-dih.service';
 
 @Component({
   selector: 'region-graph',