{
- onClick(cell, e)
- }}
+ position={cell.position}
+ size={cellSize}
+ x={cell.x}
+ y={cell.y}
+ color={cell.color}
+ opacity={cell.data ? 1 : emptyOpacity}
+ borderWidth={borderWidth}
+ borderColor={getBorderColor(cell)}
+ data={cell.data}
+ onHover={partial(onHover, cell)}
+ onLeave={onLeave}
+ onClick={onClick}
/>
))}
diff --git a/packages/nivo-waffle/src/WaffleHtmlNode.js b/packages/nivo-waffle/src/WaffleHtmlNode.js
new file mode 100644
index 000000000..cce3d7726
--- /dev/null
+++ b/packages/nivo-waffle/src/WaffleHtmlNode.js
@@ -0,0 +1,71 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import pure from 'recompose/pure'
+
+const WaffleHtmlNode = ({
+ position,
+ size,
+ x,
+ y,
+ color,
+ opacity,
+ borderWidth,
+ borderColor,
+ data,
+ onHover,
+ onLeave,
+ onClick,
+}) => {
+ return (
+
{
+ onClick({ position, color, x, y, data }, event)
+ }}
+ />
+ )
+}
+
+WaffleHtmlNode.propTypes = {
+ position: PropTypes.number.isRequired,
+ size: PropTypes.number.isRequired,
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ color: PropTypes.string.isRequired,
+ opacity: PropTypes.number.isRequired,
+ borderWidth: PropTypes.number.isRequired,
+ borderColor: PropTypes.string.isRequired,
+ data: PropTypes.object.isRequired,
+ onHover: PropTypes.func.isRequired,
+ onLeave: PropTypes.func.isRequired,
+ onClick: PropTypes.func.isRequired,
+}
+WaffleHtmlNode.defaultProps = {
+ data: {},
+}
+WaffleHtmlNode.displayName = 'WaffleHtmlNode'
+
+export default pure(WaffleHtmlNode)
diff --git a/packages/nivo-waffle/src/WaffleNode.js b/packages/nivo-waffle/src/WaffleNode.js
index eef4382bf..3bd726892 100644
--- a/packages/nivo-waffle/src/WaffleNode.js
+++ b/packages/nivo-waffle/src/WaffleNode.js
@@ -16,6 +16,7 @@ const WaffleNode = ({
x,
y,
color,
+ fill,
opacity,
borderWidth,
borderColor,
@@ -23,26 +24,24 @@ const WaffleNode = ({
onHover,
onLeave,
onClick,
-}) => {
- return (
-
{
- onClick({ position, color, x, y, data }, event)
- }}
- />
- )
-}
+}) => (
+ {
+ onClick({ position, color, x, y, data }, event)
+ }}
+ />
+)
WaffleNode.propTypes = {
position: PropTypes.number.isRequired,
@@ -50,6 +49,7 @@ WaffleNode.propTypes = {
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired,
color: PropTypes.string.isRequired,
+ fill: PropTypes.string,
opacity: PropTypes.number.isRequired,
borderWidth: PropTypes.number.isRequired,
borderColor: PropTypes.string.isRequired,
diff --git a/packages/nivo-waffle/src/enhance.js b/packages/nivo-waffle/src/enhance.js
index 6738f125f..ae5eb3987 100644
--- a/packages/nivo-waffle/src/enhance.js
+++ b/packages/nivo-waffle/src/enhance.js
@@ -62,7 +62,18 @@ export default Component => {
switch (Component.displayName) {
case 'Waffle':
return compose(
- ...[defaultProps(implDefaultProps), ...commonEnhancers, withMotion(), pure]
+ ...[
+ defaultProps(implDefaultProps),
+ ...commonEnhancers,
+ withMotion(),
+ pure,
+ withPropsOnChange(
+ ['computedData', 'defs', 'fill'],
+ ({ computedData, defs, fill }) => ({
+ defs: bindDefs(defs, computedData, fill, { targetKey: 'fill' }),
+ })
+ ),
+ ]
)(Component)
case 'WaffleHtml':
diff --git a/packages/nivo-waffle/src/props.js b/packages/nivo-waffle/src/props.js
index f60544b9b..2984509ae 100644
--- a/packages/nivo-waffle/src/props.js
+++ b/packages/nivo-waffle/src/props.js
@@ -46,6 +46,8 @@ export const WafflePropTypes = {
// interactivity
isInteractive: PropTypes.bool,
+ tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ tooltip: PropTypes.func,
// computed
cellSize: PropTypes.number.isRequired,
diff --git a/website/src/assets/icons/waffle-grey.png b/website/src/assets/icons/waffle-grey.png
new file mode 100644
index 000000000..7135ac531
Binary files /dev/null and b/website/src/assets/icons/waffle-grey.png differ
diff --git a/website/src/assets/icons/waffle-red.png b/website/src/assets/icons/waffle-red.png
new file mode 100644
index 000000000..4a5d64d46
Binary files /dev/null and b/website/src/assets/icons/waffle-red.png differ
diff --git a/website/src/components/charts/calendar/props.js b/website/src/components/charts/calendar/props.js
index 770b37fe3..ec3848618 100644
--- a/website/src/components/charts/calendar/props.js
+++ b/website/src/components/charts/calendar/props.js
@@ -20,7 +20,7 @@ export default [
Chart data, which must conform to this structure:
{dedent`
- Array.<{
+ Array<{
day: {string} // format must be YYYY-MM-DD,
value: {number}
}>
@@ -28,7 +28,7 @@ export default [
),
- type: '{Object}',
+ type: '{Array