💄 add legend to each row

src/app/discs-chart/disc-legend.component.ts

@@ -16,10 +16,9 @@ export class DiscLegendComponent implements OnInit, AfterViewInit {
   constructor(public sdmDihService: SdmDihService) {}
 
   ngOnInit(): void {
-    this.divId = `graph-legend-place-${this.region.replace(
-      ' ',
-      '_'
-    )}-${this.scenario.replace(' ', '_')}`;
+    const regionSafeName = this.region.replaceAll(' ', '_');
+    const scenarioSafeName = this.scenario.replaceAll(' ', '_');
+    this.divId = `graph-place-${regionSafeName}-${scenarioSafeName}`;
   }
 
   ngAfterViewInit(): void {

src/app/discs-chart/scenario-factor-year-graph/scenario-factor-year-graph.component.html

@@ -32,6 +32,7 @@
       <disc [region]="selectedRegion" [scenario]="scenario" show="scenario" inSitu="true"></disc>
     </div>
   </div>
+  <disc-legend [region]="selectedRegion" scenario="all-2"></disc-legend>
 
   <h3>Rural attractiveness factors</h3>
   <div class="d-flex">
@@ -45,6 +46,7 @@
       <disc [region]="selectedRegion" [factor]="factor" show="factor" inSitu="true"></disc>
     </div>
   </div>
+  <disc-legend [region]="selectedRegion" scenario="baseline-2"></disc-legend>
   <hr>
   <div *ngFor="let scenario of filteredScenarios">
     <div class="d-flex">
@@ -58,6 +60,7 @@
         <disc [region]="selectedRegion" [factor]="factor" [scenario]="scenario" show="factor" inSitu="true"></disc>
       </div>
     </div>
+    <disc-legend [region]="selectedRegion" [scenario]="scenario"></disc-legend>
     <hr>
   </div>
 </div>