fix(heatmap): fix support for enableLabels property

packages/heatmap/src/HeatMap.js

@@ -68,6 +68,7 @@ class HeatMap extends Component {
             enableGridY,
 
             // labels
+            enableLabels,
             getLabelTextColor,
 
             // theming
@@ -151,6 +152,7 @@ class HeatMap extends Component {
                                         opacity: node.opacity,
                                         borderWidth: cellBorderWidth,
                                         borderColor: getCellBorderColor(node),
+                                        enableLabel: enableLabels,
                                         textColor: getLabelTextColor(node),
                                         onHover: partial(onHover, node),
                                         onLeave,
@@ -201,6 +203,7 @@ class HeatMap extends Component {
                                                                 ...node,
                                                                 color,
                                                             }),
+                                                            enableLabel: enableLabels,
                                                             textColor: getLabelTextColor({
                                                                 ...node,
                                                                 color,

packages/heatmap/src/HeatMapCanvas.js

@@ -62,6 +62,8 @@ class HeatMapCanvas extends Component {
 
             cellShape,
 
+            enableLabels,
+
             theme,
         } = props
 
@@ -72,9 +74,9 @@ class HeatMapCanvas extends Component {
 
         let renderNode
         if (cellShape === 'rect') {
-            renderNode = partial(renderRect, this.ctx)
+            renderNode = partial(renderRect, this.ctx, { enableLabels })
         } else {
-            renderNode = partial(renderCircle, this.ctx)
+            renderNode = partial(renderCircle, this.ctx, { enableLabels })
         }
 
         const nodes = computeNodes(props)

packages/heatmap/src/HeatMapCellCircle.js

@@ -24,6 +24,7 @@ const HeatMapCellCircle = ({
     opacity,
     borderWidth,
     borderColor,
+    enableLabel,
     textColor,
     onHover,
     onLeave,
@@ -48,17 +49,19 @@ const HeatMapCellCircle = ({
             stroke={borderColor}
             strokeOpacity={opacity}
         />
-        <text
-            alignmentBaseline="central"
-            textAnchor="middle"
-            style={{
-                ...theme.labels,
-                fill: textColor,
-            }}
-            fillOpacity={opacity}
-        >
-            {value}
-        </text>
+        {enableLabel && (
+            <text
+                alignmentBaseline="central"
+                textAnchor="middle"
+                style={{
+                    ...theme.labels,
+                    fill: textColor,
+                }}
+                fillOpacity={opacity}
+            >
+                {value}
+            </text>
+        )}
     </g>
 )
 
@@ -73,6 +76,7 @@ HeatMapCellCircle.propTypes = {
     opacity: PropTypes.number.isRequired,
     borderWidth: PropTypes.number.isRequired,
     borderColor: PropTypes.string.isRequired,
+    enableLabel: PropTypes.bool.isRequired,
     textColor: PropTypes.string.isRequired,
     onHover: PropTypes.func.isRequired,
     onLeave: PropTypes.func.isRequired,

packages/heatmap/src/HeatMapCellRect.js

@@ -24,6 +24,7 @@ const HeatMapCellRect = ({
     opacity,
     borderWidth,
     borderColor,
+    enableLabel,
     textColor,
     onHover,
     onLeave,
@@ -51,17 +52,19 @@ const HeatMapCellRect = ({
             stroke={borderColor}
             strokeOpacity={opacity}
         />
-        <text
-            alignmentBaseline="central"
-            textAnchor="middle"
-            style={{
-                ...theme.labels.text,
-                fill: textColor,
-            }}
-            fillOpacity={opacity}
-        >
-            {value}
-        </text>
+        {enableLabel && (
+            <text
+                alignmentBaseline="central"
+                textAnchor="middle"
+                style={{
+                    ...theme.labels.text,
+                    fill: textColor,
+                }}
+                fillOpacity={opacity}
+            >
+                {value}
+            </text>
+        )}
     </g>
 )
 
@@ -76,6 +79,7 @@ HeatMapCellRect.propTypes = {
     opacity: PropTypes.number.isRequired,
     borderWidth: PropTypes.number.isRequired,
     borderColor: PropTypes.string.isRequired,
+    enableLabel: PropTypes.bool.isRequired,
     textColor: PropTypes.string.isRequired,
     onHover: PropTypes.func.isRequired,
     onLeave: PropTypes.func.isRequired,

packages/heatmap/src/canvas.js

@@ -10,44 +10,53 @@
 /**
  * Render heatmap rect cell.
  *
- * @param {Object} ctx
- * @param {number} x
- * @param {number} y
- * @param {number} width
- * @param {number} height
- * @param {string) color
- * @param {number} opacity
- * @param {string} labelTextColor
- * @param {number} value
+ * @param {Object}  ctx
+ * @param {boolean} enableLabels
+ * @param {number}  x
+ * @param {number}  y
+ * @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, opacity, labelTextColor, value }) => {
+export const renderRect = (
+    ctx,
+    { enableLabels },
+    { 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)
+    if (enableLabels === true) {
+        ctx.fillStyle = labelTextColor
+        ctx.fillText(value, x, y)
+    }
 
     ctx.restore()
 }
 
 /**
  * Render heatmap circle cell.
  *
- * @param {Object} ctx
- * @param {number} x
- * @param {number} y
- * @param {number} width
- * @param {number} height
- * @param {string) color
- * @param {number} opacity
- * @param {string} labelTextColor
- * @param {number} value
+ * @param {Object}  ctx
+ * @param {boolean} enableLabels
+ * @param {number}  x
+ * @param {number}  y
+ * @param {number}  width
+ * @param {number}  height
+ * @param {string)  color
+ * @param {number}  opacity
+ * @param {string}  labelTextColor
+ * @param {number}  value
  */
 export const renderCircle = (
     ctx,
+    { enableLabels },
     { x, y, width, height, color, opacity, labelTextColor, value }
 ) => {
     ctx.save()
@@ -60,8 +69,10 @@ export const renderCircle = (
     ctx.arc(x, y, radius, 0, 2 * Math.PI)
     ctx.fill()
 
-    ctx.fillStyle = labelTextColor
-    ctx.fillText(value, x, y)
+    if (enableLabels === true) {
+        ctx.fillStyle = labelTextColor
+        ctx.fillText(value, x, y)
+    }
 
     ctx.restore()
 }

packages/heatmap/tests/.eslintrc.yml

@@ -0,0 +1,2 @@
+env:
+  jest: true

packages/heatmap/tests/HeatMap.test.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { mount } from 'enzyme'
+import HeatMapCellRect from '../src/HeatMapCellRect'
+import HeatMap from '../src/HeatMap'
+
+const sampleProps = {
+    indexBy: 'age',
+    keys: ['rent', 'loan', 'income'],
+    data: [
+        {
+            age: 20,
+            rent: 30,
+            loan: 24,
+            income: 60,
+        },
+        {
+            age: 30,
+            rent: 40,
+            loan: 50,
+            income: 90,
+        },
+        {
+            age: 40,
+            rent: 20,
+            loan: 13,
+            income: 40,
+        },
+    ],
+    width: 500,
+    height: 300,
+    animate: false,
+}
+
+it('should render a basic heat map chart', () => {
+    const component = renderer.create(<HeatMap {...sampleProps} />)
+
+    let tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+})
+
+it('should allow to disable labels', () => {
+    const wrapper = mount(<HeatMap {...sampleProps} enableLabels={false} />)
+
+    const cells = wrapper.find(HeatMapCellRect)
+    expect(cells).toHaveLength(9)
+    cells.forEach(cell => {
+        expect(cell.find('text').exists()).toBe(false)
+    })
+})