diff --git a/packages/vx-demo/components/tiles/heatmap.js b/packages/vx-demo/components/tiles/heatmap.js
index c9aa48211..7c28a4e01 100644
--- 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)}`)
+ }}
/>
@@ -93,6 +97,9 @@ export default ({
binHeight={bWidth}
step={dStep}
gap={0}
+ onClick={data => event => {
+ alert(`clicked: ${JSON.stringify(data.bin)}`)
+ }}
/>
diff --git a/packages/vx-heatmap/src/heatmaps/circle.js b/packages/vx-heatmap/src/heatmaps/circle.js
index f96315075..e4f6b59f1 100644
--- a/packages/vx-heatmap/src/heatmaps/circle.js
+++ b/packages/vx-heatmap/src/heatmaps/circle.js
@@ -1,16 +1,24 @@
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 (
{data.map((d, i) => {
@@ -18,18 +26,24 @@ export default function HeatmapCircle({
- {d.bins.map((b, i) => {
- const radius = binWidth / 2;
+ {bins(d).map((b, j) => {
return (
);
})}
diff --git a/packages/vx-heatmap/src/heatmaps/rect.js b/packages/vx-heatmap/src/heatmaps/rect.js
index 2ce60722a..4e1951c91 100644
--- a/packages/vx-heatmap/src/heatmaps/rect.js
+++ b/packages/vx-heatmap/src/heatmaps/rect.js
@@ -1,17 +1,27 @@
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 (
{data.map((d, i) => {
@@ -19,18 +29,26 @@ export default function HeatmapRect({
- {d.bins.map((b, i) => {
+ {bins(d).map((b, j) => {
return (
);
})}
diff --git a/packages/vx-heatmap/src/util/additionalProps.js b/packages/vx-heatmap/src/util/additionalProps.js
new file mode 100644
index 000000000..b3ac93bc3
--- /dev/null
+++ 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
new file mode 100644
index 000000000..77afb1a09
--- /dev/null
+++ 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;
+}