Skip to content

Commit

Permalink
feat(heatmap): add support for onClick event
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte authored and Raphaël Benitte committed May 19, 2018
1 parent 5f416e9 commit 52d077c
Show file tree
Hide file tree
Showing 8 changed files with 95 additions and 13 deletions.
5 changes: 5 additions & 0 deletions packages/nivo-heatmap/src/HeatMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ class HeatMap extends Component {

// interactivity
isInteractive,
onClick,
} = this.props

let Cell
Expand Down Expand Up @@ -140,6 +141,7 @@ class HeatMap extends Component {
nodes.map(node =>
React.createElement(Cell, {
key: node.key,
data: node,
value: node.value,
x: node.x,
y: node.y,
Expand All @@ -152,6 +154,7 @@ class HeatMap extends Component {
textColor: getLabelTextColor(node),
onHover: partial(onHover, node),
onLeave,
onClick,
})
)}

Expand Down Expand Up @@ -184,6 +187,7 @@ class HeatMap extends Component {

return React.createElement(Cell, {
key,
data: node,
value: node.value,
x: style.x,
y: style.y,
Expand All @@ -202,6 +206,7 @@ class HeatMap extends Component {
}),
onHover: partial(onHover, node),
onLeave,
onClick,
})
}
)}
Expand Down
7 changes: 7 additions & 0 deletions packages/nivo-heatmap/src/HeatMapCanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,12 @@ class HeatMapCanvas extends Component {
hideTooltip()
}

handleClick = event => {
if (!this.props.currentNode) return

this.props.onClick(this.props.currentNode, event)
}

render() {
const { outerWidth, outerHeight, pixelRatio, isInteractive, theme } = this.props

Expand All @@ -145,6 +151,7 @@ class HeatMapCanvas extends Component {
onMouseEnter={partial(this.handleMouseHover, showTooltip, hideTooltip)}
onMouseMove={partial(this.handleMouseHover, showTooltip, hideTooltip)}
onMouseLeave={partial(this.handleMouseLeave, hideTooltip)}
onClick={this.handleClick}
/>
)}
</Container>
Expand Down
7 changes: 7 additions & 0 deletions packages/nivo-heatmap/src/HeatMapCellCircle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import pure from 'recompose/pure'
const style = { cursor: 'pointer' }

const HeatMapCellCircle = ({
data,
value,
x,
y,
Expand All @@ -25,13 +26,17 @@ const HeatMapCellCircle = ({
textColor,
onHover,
onLeave,
onClick,
}) => (
<g
transform={`translate(${x}, ${y})`}
style={style}
onMouseEnter={onHover}
onMouseMove={onHover}
onMouseLeave={onLeave}
onClick={e => {
onClick(data, e)
}}
>
<circle
r={Math.min(width, height) / 2}
Expand All @@ -53,6 +58,7 @@ const HeatMapCellCircle = ({
)

HeatMapCellCircle.propTypes = {
data: PropTypes.object.isRequired,
value: PropTypes.number.isRequired,
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired,
Expand All @@ -65,6 +71,7 @@ HeatMapCellCircle.propTypes = {
textColor: PropTypes.string.isRequired,
onHover: PropTypes.func.isRequired,
onLeave: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
}

export default pure(HeatMapCellCircle)
7 changes: 7 additions & 0 deletions packages/nivo-heatmap/src/HeatMapCellRect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import pure from 'recompose/pure'
const style = { cursor: 'pointer' }

const HeatMapCellRect = ({
data,
value,
x,
y,
Expand All @@ -25,12 +26,16 @@ const HeatMapCellRect = ({
textColor,
onHover,
onLeave,
onClick,
}) => (
<g
transform={`translate(${x}, ${y})`}
onMouseEnter={onHover}
onMouseMove={onHover}
onMouseLeave={onLeave}
onClick={e => {
onClick(data, e)
}}
style={style}
>
<rect
Expand All @@ -56,6 +61,7 @@ const HeatMapCellRect = ({
)

HeatMapCellRect.propTypes = {
data: PropTypes.object.isRequired,
value: PropTypes.number.isRequired,
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired,
Expand All @@ -68,6 +74,7 @@ HeatMapCellRect.propTypes = {
textColor: PropTypes.string.isRequired,
onHover: PropTypes.func.isRequired,
onLeave: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
}

export default pure(HeatMapCellRect)
4 changes: 3 additions & 1 deletion packages/nivo-heatmap/src/props.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* file that was distributed with this source code.
*/
import PropTypes from 'prop-types'
import { quantizeColorScalePropType } from '@nivo/core'
import { quantizeColorScalePropType, noop } from '@nivo/core'

export const HeatMapPropTypes = {
// data
Expand Down Expand Up @@ -50,6 +50,7 @@ export const HeatMapPropTypes = {

// interactivity
isInteractive: PropTypes.bool,
onClick: PropTypes.func.isRequired,
hoverTarget: PropTypes.oneOf(['cell', 'row', 'column', 'rowColumn']).isRequired,
cellHoverOpacity: PropTypes.number.isRequired,
cellHoverOthersOpacity: PropTypes.number.isRequired,
Expand Down Expand Up @@ -91,6 +92,7 @@ export const HeatMapDefaultProps = {

// interactivity
isInteractive: true,
onClick: noop,
hoverTarget: 'rowColumn',
cellHoverOpacity: 1,
cellHoverOthersOpacity: 0.35,
Expand Down
11 changes: 11 additions & 0 deletions website/src/components/charts/heatmap/HeatMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,16 @@ export default class HeatMap extends Component {
this.setState({ settings })
}

handleNodeClick = (node, event) => {
alert(
`${node.yKey}.${node.xKey}: ${node.value}\nx: ${Math.round(node.x)}, y: ${Math.round(
node.y
)}, w: ${Math.round(node.width)}, h: ${Math.round(node.height)}\nclicked at x: ${
event.clientX
}, y: ${event.clientY}`
)
}

render() {
const { data, keys, settings } = this.state

Expand Down Expand Up @@ -208,6 +218,7 @@ export default class HeatMap extends Component {
data={data}
keys={keys}
{...mappedSettings}
onClick={this.handleNodeClick}
theme={nivoTheme}
/>
</ChartTabs>
Expand Down
11 changes: 11 additions & 0 deletions website/src/components/charts/heatmap/HeatMapCanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,16 @@ export default class HeatMap extends Component {
this.setState({ settings })
}

handleNodeClick = (node, event) => {
alert(
`${node.yKey}.${node.xKey}: ${node.value}\nx: ${Math.round(node.x)}, y: ${Math.round(
node.y
)}, w: ${Math.round(node.width)}, h: ${Math.round(node.height)}\nclicked at x: ${
event.clientX
}, y: ${event.clientY}`
)
}

diceRoll = () => {
this.setState({ ...generateHeavyDataSet() })
}
Expand Down Expand Up @@ -176,6 +186,7 @@ export default class HeatMap extends Component {
data={data}
keys={keys}
{...mappedSettings}
onClick={this.handleNodeClick}
theme={nivoTheme}
/>
</ChartTabs>
Expand Down
56 changes: 44 additions & 12 deletions website/src/components/charts/heatmap/props.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,11 @@ export default [
required: false,
default: defaults.keys,
},
/*##################################################################################################################
/*——————————————————————————————————————————————————————————————————————————
Base
Base
##################################################################################################################*/
————————————————————————————————————————————————————————————————————————————*/
{
key: 'width',
scopes: ['api'],
Expand Down Expand Up @@ -173,11 +173,11 @@ export default [
max: 36,
},
},
/*##################################################################################################################
/*——————————————————————————————————————————————————————————————————————————
Style
Style
##################################################################################################################*/
————————————————————————————————————————————————————————————————————————————*/
{
key: 'cellShape',
scopes: '*',
Expand Down Expand Up @@ -275,11 +275,11 @@ export default [
withCustomColor: true,
},
},
/*##################################################################################################################
/*——————————————————————————————————————————————————————————————————————————
Labels
Labels
##################################################################################################################*/
————————————————————————————————————————————————————————————————————————————*/
/*
{
key: 'enableLabels',
Expand Down Expand Up @@ -333,11 +333,11 @@ export default [
controlGroup: 'Grid',
},
...axesProperties,
/*##################################################################################################################
/*——————————————————————————————————————————————————————————————————————————
Interactivity
Interactivity
##################################################################################################################*/
————————————————————————————————————————————————————————————————————————————*/
{
key: 'isInteractive',
scopes: ['HeatMap', 'HeatMapCanvas'],
Expand All @@ -348,6 +348,33 @@ export default [
controlType: 'switch',
controlGroup: 'Interactivity',
},
{
key: 'onClick',
scopes: ['HeatMap', 'HeatMapCanvas'],
type: '{Function}',
required: false,
description: (
<div>
onClick handler, will receive node data as first argument & event as second one. The
node data has the following shape:
<pre className="code code-block">
{dedent`
{
key: {string},
value: {number},
x: {number},
xKey: {string|number},
y: {number},
yKey: {string|number},
width: {number},
height: {number},
opacity: {number}
}
`}
</pre>
</div>
),
},
{
key: 'hoverTarget',
scopes: ['HeatMap', 'HeatMapCanvas'],
Expand Down Expand Up @@ -403,5 +430,10 @@ export default [
step: 0.05,
},
},
/*——————————————————————————————————————————————————————————————————————————
Motion
————————————————————————————————————————————————————————————————————————————*/
...motionProperties(['HeatMap'], defaults),
]

0 comments on commit 52d077c

Please sign in to comment.