feat(heatmap): add hover behavior on HeatMapCanvas

plouc · Aug 29, 2017 · 37974a9 · 37974a9
1 parent 036179c
commit 37974a9
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 7 deletions.
diff --git a/src/components/charts/heatmap/HeatMapCanvas.js b/src/components/charts/heatmap/HeatMapCanvas.js
@@ -100,7 +100,7 @@ class HeatMapCanvas extends Component {
 
         const [x, y] = getRelativeCursor(this.surface, event)
 
-        const { margin, offsetX, offsetY, theme } = this.props
+        const { margin, offsetX, offsetY, theme, setCurrentNode } = this.props
         const node = this.nodes.find(node =>
             cursorInRect(
                 node.x + margin.left + offsetX - node.width / 2,
@@ -113,6 +113,7 @@ class HeatMapCanvas extends Component {
         )
 
         if (node !== undefined) {
+            setCurrentNode(node)
             showTooltip(
                 <BasicTooltip
                     id={`${node.yKey} - ${node.xKey}`}
@@ -124,11 +125,13 @@ class HeatMapCanvas extends Component {
                 event
             )
         } else {
+            setCurrentNode(null)
             hideTooltip()
         }
     }
 
     handleMouseLeave = hideTooltip => {
+        this.props.setCurrentNode(null)
         hideTooltip()
     }
 

diff --git a/src/components/charts/heatmap/enhance.js b/src/components/charts/heatmap/enhance.js
@@ -10,6 +10,7 @@ import { min, max, isEqual } from 'lodash'
 import compose from 'recompose/compose'
 import defaultProps from 'recompose/defaultProps'
 import withPropsOnChange from 'recompose/withPropsOnChange'
+import withState from 'recompose/withState'
 import pure from 'recompose/pure'
 import { scaleOrdinal, scaleLinear } from 'd3-scale'
 import { withTheme, withDimensions, withMotion } from '../../../hocs'
@@ -27,6 +28,7 @@ const computeY = (row, cellHeight, padding) => {
 export default Component =>
     compose(
         defaultProps(HeatMapDefaultProps),
+        withState('currentNode', 'setCurrentNode', null),
         withTheme(),
         withDimensions(),
         withMotion(),

diff --git a/src/components/charts/heatmap/props.js b/src/components/charts/heatmap/props.js
@@ -27,7 +27,6 @@ export const HeatMapPropTypes = {
     cellShape: PropTypes.oneOfType([PropTypes.oneOf(['rect', 'circle']), PropTypes.func])
         .isRequired,
     cellOpacity: PropTypes.number.isRequired,
-    cellHoverOpacity: PropTypes.number.isRequired,
     cellBorderWidth: PropTypes.number.isRequired,
     cellBorderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getCellBorderColor: PropTypes.func.isRequired, // computed
@@ -51,6 +50,9 @@ export const HeatMapPropTypes = {
 
     // interactivity
     isInteractive: PropTypes.bool,
+    hoverTarget: PropTypes.oneOf(['cell', 'row', 'column', 'rowColumn']).isRequired,
+    cellHoverOpacity: PropTypes.number.isRequired,
+    cellHoverOthersOpacity: PropTypes.number.isRequired,
 
     // canvas specific
     pixelRatio: PropTypes.number.isRequired,
@@ -69,7 +71,6 @@ export const HeatMapDefaultProps = {
     // cells
     cellShape: 'rect',
     cellOpacity: 0.85,
-    cellHoverOpacity: 1,
     cellBorderWidth: 0,
     cellBorderColor: 'inherit',
 
@@ -88,6 +89,9 @@ export const HeatMapDefaultProps = {
 
     // interactivity
     isInteractive: true,
+    hoverTarget: 'rowColumn',
+    cellHoverOpacity: 1,
+    cellHoverOthersOpacity: 0.35,
 
     // canvas specific
     pixelRatio: window && window.devicePixelRatio ? window.devicePixelRatio : 1,

diff --git a/src/lib/canvas/charts/heatmap/index.js b/src/lib/canvas/charts/heatmap/index.js
@@ -16,15 +16,21 @@
  * @param {number} width
  * @param {number} height
  * @param {string) color
+ * @param {number} opacity
  * @param {string} labelTextColor
  * @param {number} value
  */
-export const renderRect = (ctx, { x, y, width, height, color, labelTextColor, value }) => {
+export const renderRect = (ctx, { x, y, width, height, color, opacity, labelTextColor, value }) => {
+    ctx.save()
+    ctx.globalAlpha = opacity
+
     ctx.fillStyle = color
     ctx.fillRect(x - width / 2, y - height / 2, width, height)
 
     ctx.fillStyle = labelTextColor
     ctx.fillText(value, x, y)
+
+    ctx.restore()
 }
 
 /**
@@ -36,10 +42,17 @@ export const renderRect = (ctx, { x, y, width, height, color, labelTextColor, va
  * @param {number} width
  * @param {number} height
  * @param {string) color
+ * @param {number} opacity
  * @param {string} labelTextColor
  * @param {number} value
  */
-export const renderCircle = (ctx, { x, y, width, height, color, labelTextColor, value }) => {
+export const renderCircle = (
+    ctx,
+    { x, y, width, height, color, opacity, labelTextColor, value }
+) => {
+    ctx.save()
+    ctx.globalAlpha = opacity
+
     const radius = Math.min(width, height) / 2
 
     ctx.fillStyle = color
@@ -49,4 +62,6 @@ export const renderCircle = (ctx, { x, y, width, height, color, labelTextColor,
 
     ctx.fillStyle = labelTextColor
     ctx.fillText(value, x, y)
+
+    ctx.restore()
 }
diff --git a/src/lib/charts/heatmap/index.js b/src/lib/charts/heatmap/index.js
@@ -6,6 +6,14 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+
+const isHoverTargetByType = {
+    cell: (node, current) => node.xKey === current.xKey && node.yKey === current.yKey,
+    row: (node, current) => node.yKey === current.yKey,
+    column: (node, current) => node.xKey === current.xKey,
+    rowColumn: (node, current) => node.xKey === current.xKey || node.yKey === current.yKey,
+}
+
 export const computeNodes = ({
     data,
     keys,
@@ -17,8 +25,15 @@ export const computeNodes = ({
     cellHeight,
     colorScale,
     getLabelTextColor,
-}) =>
-    data.reduce((acc, d) => {
+
+    currentNode,
+    hoverTarget,
+    cellHoverOpacity,
+    cellHoverOthersOpacity,
+}) => {
+    const isHoverTarget = isHoverTargetByType[hoverTarget]
+
+    return data.reduce((acc, d) => {
         keys.forEach(key => {
             const width = sizeScale ? Math.min(sizeScale(d[key]) * cellWidth, cellWidth) : cellWidth
             const height = sizeScale
@@ -36,12 +51,21 @@ export const computeNodes = ({
                 color: colorScale(d[key]),
             }
 
+            let opacity = 1
+            if (currentNode) {
+                opacity = isHoverTarget(node, currentNode)
+                    ? cellHoverOpacity
+                    : cellHoverOthersOpacity
+            }
+
             acc.push(
                 Object.assign(node, {
                     labelTextColor: getLabelTextColor(node),
+                    opacity,
                 })
             )
         })
 
         return acc
     }, [])
+}