💄 improve legend

+ add legend to dots

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

@@ -33,7 +33,7 @@ export class DiscLegendComponent implements OnInit, AfterViewInit {
   drawLegend(): void {
     //select(`#graph-legend-place`).remove();
     const width = 200;
-    const height = 20;
+    const height = 40;
     const g = select(`#${this.divId}`)
       .append('svg')
       .attr('width', width)
@@ -42,13 +42,14 @@ export class DiscLegendComponent implements OnInit, AfterViewInit {
       .style('overflow', 'visible')
       .style('display', 'block')
       .append('g');
-    for (let i = 0; i < 10; i++) {
+    const PIECES = 20;
+    for (let i = 0; i < PIECES; i++) {
       g.append('rect')
-        .attr('x', i * 20)
+        .attr('x', i * (width / PIECES))
         .attr('y', 0)
-        .attr('width', width / 10)
-        .attr('height', height / 2)
-        .attr('fill', this.sdmDihService.perc2color(i / 10));
+        .attr('width', width / PIECES)
+        .attr('height', height / 3)
+        .attr('fill', this.sdmDihService.perc2color(i / PIECES));
     }
     g.append('text')
       .attr('x', 0 - 10)
@@ -56,9 +57,19 @@ export class DiscLegendComponent implements OnInit, AfterViewInit {
       .attr('dy', '.5em')
       .text('0 %');
     g.append('text')
-      .attr('x', 200 - 10)
+      .attr('x', 0 - 10)
+      .attr('y', height)
+      .attr('dy', '.5em')
+      .text('(least attractive)');
+    g.append('text')
+      .attr('x', 200 - 20)
       .attr('y', 20)
       .attr('dy', '.5em')
       .text('100 %');
+    g.append('text')
+      .attr('x', 200 - 20)
+      .attr('y', height)
+      .attr('dy', '.5em')
+      .text('(most attractive)');
   }
 }

src/app/discs-chart/discs.module.ts

@@ -17,6 +17,7 @@ import {YearGraphComponent} from './year-graph/year-graph.component';
 @NgModule({
   imports: [CommonModule, FormsModule],
   exports: [
+    DiscLegendComponent,
     FactorYearGraphComponent,
     YearGraphComponent,
     ScenarioFactorYearGraphComponent,

src/app/pages/comparing-rural-attractiveness/comparing-rural-attractiveness.component.html

@@ -44,6 +44,7 @@
     <div class="card-body">
       <p class="card-text">“Dots” visualization for the project regions and its evolution over time
       </p>
+      <disc-legend region="dots-all"></disc-legend>
     </div>
   </div>
 

src/app/pages/exploring-dynamics/exploring-dynamics.component.html

@@ -26,6 +26,7 @@
       <div class="card-body p-3">
         <h5 class="card-title">‘Dots’ visualization of sub-indices for the regions and their evolution over time
         </h5>
+        <disc-legend region="dots-all"></disc-legend>
       </div>
     </div>
   </div>