Apply hover effect when hovering on donut arc or detail line (#535)

* Apply hover effect when hovering on donut arc or detail line Refs #448 * Remove onDetailHover for nibrs donut https://github.com/18F/crime-data-explorer/pull/535#discussion_r10495917 9
fbi-cde · Mar 8, 2017 · 3c0fe98 · 3c0fe98
1 parent 3865c53
commit 3c0fe98
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/components/NibrsDonut.js b/src/components/NibrsDonut.js
@@ -71,7 +71,14 @@ class NibrsDonut extends React.Component {
             </svg>
           </div>
           <div className='col col-6 px1'>
-            <NibrsDonutDetails colorMap={colorMap} data={dataSorted} selected={hover} />
+            <NibrsDonutDetails
+              colorMap={colorMap}
+              data={dataSorted}
+              hover={hover}
+              onMouseOver={this.rememberValue}
+              onMouseOut={this.forgetValue}
+              selected={hover}
+            />
           </div>
         </div>
       </div>

diff --git a/src/components/NibrsDonutDetails.js b/src/components/NibrsDonutDetails.js
@@ -3,21 +3,29 @@ import React from 'react'
 
 const fmt = format(',.0f')
 
-const NibrsDonutDetails = ({ colorMap, data, selected }) => (
+const NibrsDonutDetails = ({ colorMap, data, hover, onMouseOver, onMouseOut, selected }) => (
   <div className='mt2 lg-mt4'>
     <span className='mb2 bold caps fs-12 red'>Incidents</span>
     <ul className='list-style-none p0 m0 fs-14'>
       {data.map((d, i) => {
         const active = d.key === selected
         const border = active ? 'border-bottom' : 'border-bottom-dashed'
+        const opacity = hover === null || active ? 1 : 0.5
         return (
           <li
             key={i}
-            className={`mb1 flex items-baseline ${border}`}
+            className={`mb1 flex items-baseline ${border} cursor-pointer`}
+            onMouseOver={onMouseOver(d.key)}
+            onMouseOut={onMouseOut}
           >
             <span
               className='mr1'
-              style={{ width: 10, height: 10, backgroundColor: colorMap(d.key) }}
+              style={{
+                width: 10,
+                height: 10,
+                backgroundColor: colorMap(d.key),
+                opacity,
+              }}
             />
             <div className={`flex flex-auto justify-between ${active && 'bold'}`}>
               <span>{d.key}</span>