From 8438336be342c0bad2160cc4334b436f7c38dff0 Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Thu, 16 Apr 2020 16:37:45 +0800
Subject: [PATCH] feat: add hover support for tech radar

---
 .../ledge-tech-radar/ledge-tech-radar.component.ts    | 11 +++++++++--
 src/styles/mdstyles/_tech-radar.scss                  |  5 +++++
 2 files changed, 14 insertions(+), 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
index 31868b0e..14599bf1 100644
--- 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
index 27219263..41c9cede 100644
--- 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;