[heatmap] use accessors for bin data, add bound event handlers

airbnb · Jun 4, 2017 · 30cea68 · 30cea68
1 parent c0eda08
commit 30cea68
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 23 deletions.
diff --git a/packages/vx-demo/components/tiles/heatmap.js b/packages/vx-demo/components/tiles/heatmap.js
@@ -78,8 +78,12 @@ export default ({
           colorScale={colorScale}
           opacityScale={opacityScale}
           binWidth={bWidth + 4}
+          radius={(bWidth + 4) / 2}
           step={dStep}
           gap={4}
+          onClick={data => event => {
+            alert(`clicked: ${JSON.stringify(data.bin)}`)
+          }}
         />
       </Group>
       <Group top={margin.top} left={xMax + margin.left}>
@@ -93,6 +97,9 @@ export default ({
           binHeight={bWidth}
           step={dStep}
           gap={0}
+          onClick={data => event => {
+            alert(`clicked: ${JSON.stringify(data.bin)}`)
+          }}
         />
       </Group>
     </svg>

diff --git a/packages/vx-heatmap/src/heatmaps/circle.js b/packages/vx-heatmap/src/heatmaps/circle.js
@@ -1,35 +1,49 @@
 import React from 'react';
+import cx from 'classnames';
 import { Group } from '@vx/group';
+import additionalProps from '../util/additionalProps';
 
 export default function HeatmapCircle({
+  className,
   data,
-  binWidth,
   gap = 1,
-  step,
+  step = 0,
+  radius = 6,
   xScale,
   yScale,
   colorScale,
-  opacityScale,
+  opacityScale = d => 1,
+  bin = d => d.bin,
+  bins = d => d.bins,
+  count = d => d.count,
+  ...restProps
 }) {
+  const r = radius - gap;
   return (
     <Group>
       {data.map((d, i) => {
         return (
           <Group
             key={`heatmap-${i}`}
             className='vx-heatmap-column'
-            left={xScale(d.bin)}
+            left={xScale(bin(d))}
           >
-            {d.bins.map((b, i) => {
-              const radius = binWidth / 2;
+            {bins(d).map((b, j) => {
               return (
                 <circle
-                  key={`heatmap-tile-${i}`}
-                  fill={colorScale(b.count)}
-                  r={radius - gap}
-                  cx={binWidth / 2}
-                  cy={yScale(b.bin + step) + radius}
-                  fillOpacity={opacityScale(b.count)}
+                  key={`heatmap-tile-circle-${j}`}
+                  className={cx('vx-heatmap-circle', className)}
+                  fill={colorScale(count(b))}
+                  r={r}
+                  cx={radius}
+                  cy={yScale(bin(b) + step) + radius} fillOpacity={opacityScale(count(b))}
+                  {...additionalProps(restProps, {
+                    bin: b,
+                    index: j,
+                    datum: d,
+                    datumIndex: i,
+                    data
+                  })}
                 />
               );
             })}

diff --git a/packages/vx-heatmap/src/heatmaps/rect.js b/packages/vx-heatmap/src/heatmaps/rect.js
@@ -1,36 +1,54 @@
 import React from 'react';
+import cx from 'classnames';
 import { Group } from '@vx/group';
+import additionalProps from '../util/additionalProps';
 
 export default function HeatmapRect({
+  className,
   data,
   binWidth,
   binHeight,
+  x = 0,
   gap = 1,
-  step,
+  step = 0,
   xScale,
   yScale,
   colorScale,
-  opacityScale,
+  opacityScale = d => 1,
+  bin = d => d.bin,
+  bins = d => d.bins,
+  count = d => d.count,
+  ...restProps
 }) {
+  const width = binWidth - gap;
+  const height = binHeight - gap;
   return (
     <Group>
       {data.map((d, i) => {
         return (
           <Group
             key={`heatmap-${i}`}
             className='vx-heatmap-column'
-            left={xScale(d.bin)}
+            left={xScale(bin(d))}
           >
-            {d.bins.map((b, i) => {
+            {bins(d).map((b, j) => {
               return (
                 <rect
-                  key={`heatmap-tile-${i}`}
-                  fill={colorScale(b.count)}
-                  width={binWidth - gap}
-                  height={binHeight - gap}
-                  x={0}
-                  y={yScale(b.bin + step) + gap}
-                  fillOpacity={opacityScale(b.count)}
+                  key={`heatmap-tile-rect-${j}`}
+                  className={cx('vx-heatmap-rect', className)}
+                  fill={colorScale(count(b))}
+                  width={width}
+                  height={height}
+                  x={x}
+                  y={yScale(bin(b) + step) + gap}
+                  fillOpacity={opacityScale(count(b))}
+                  {...additionalProps(restProps, {
+                    bin: b,
+                    index: j,
+                    datum: d,
+                    datumIndex: i,
+                    data
+                  })}
                 />
               );
             })}

diff --git a/packages/vx-heatmap/src/util/additionalProps.js b/packages/vx-heatmap/src/util/additionalProps.js
@@ -0,0 +1,8 @@
+import callOrValue from './callOrValue';
+
+export default function additionalProps(restProps, data) {
+  return Object.keys(restProps).reduce((ret, cur) => {
+    ret[cur] = callOrValue(restProps[cur], data);
+    return ret;
+  }, {});
+}
diff --git a/packages/vx-heatmap/src/util/callOrValue.js b/packages/vx-heatmap/src/util/callOrValue.js
@@ -0,0 +1,6 @@
+export default function callOrValue(maybeFn, data) {
+  if (typeof maybeFn === 'function') {
+    return maybeFn(data);
+  }
+  return maybeFn;
+}