feat: add hover support for tech radar

phodal · Apr 16, 2020 · 8438336 · 8438336
1 parent 3321cf2
commit 8438336
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/projects/ledge-render/src/lib/chart/ledge-tech-radar/ledge-tech-radar.component.ts b/projects/ledge-render/src/lib/chart/ledge-tech-radar/ledge-tech-radar.component.ts
@@ -207,7 +207,15 @@ export class LedgeTechRadarComponent implements OnInit, AfterViewInit, OnChanges
               return `translate(${x}, ${y})`;
             })
             .attr('class', 'tech-circle')
-            .on('click', handleClick);
+            .on('click', handleClick)
+            .on('mouseover', (event: any) => {
+              d3.selectAll(`.legend li`)
+                .classed('active', false)
+                .filter((d: any) => {
+                  return d.number === event.number;
+                })
+                .classed('active', true);
+            });
 
           radarCircle.append('circle')
             .attr('class', 'radarCircle, color-' + (c + 1))
@@ -223,7 +231,6 @@ export class LedgeTechRadarComponent implements OnInit, AfterViewInit, OnChanges
             .attr('fill', 'white')
             .attr('text-anchor', 'middle')
             .attr('dominant-baseline', 'central');
-
         });
 
       // draw the legend

diff --git a/src/styles/mdstyles/_tech-radar.scss b/src/styles/mdstyles/_tech-radar.scss
@@ -4,6 +4,7 @@ $color1: #868e96;
 $color2: #ec7b1a;
 $color3: #dc5332;
 $color4: #55acee;
+$black: #000;
 
 .color-1 {
   color: $color1;
@@ -90,6 +91,10 @@ $color4: #55acee;
     align-self: center;
   }
 
+  .legend li.active a {
+    color: $black;
+  }
+
   #radar > .legend-0 {
     grid-column: 1;
     grid-row: 1;