From 0c9efe4bfac40bad090eb7fe74bb19164acd2859 Mon Sep 17 00:00:00 2001
From: Martin Gordon <martingordon@users.noreply.github.com>
Date: Fri, 20 Oct 2017 10:29:18 -0400
Subject: [PATCH] feat(axes): add onClick handler to axis ticks (#60)

* feat(axes): add onClick handler to axis ticks

* feat(axes): only include onClick prop if present

* fix(axes): just pass through onClick function

* fix(axes): pass event to onClick handler
---
 src/components/axes/Axis.js     |  8 ++++++++
 src/components/axes/AxisTick.js | 12 +++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/axes/Axis.js b/src/components/axes/Axis.js
index 744b1e0f4..ea443645a 100644
--- a/src/components/axes/Axis.js
+++ b/src/components/axes/Axis.js
@@ -76,6 +76,9 @@ const Axis = ({
     animate,
     motionStiffness,
     motionDamping,
+
+    // interactivity
+    onClick,
 }) => {
     const { x, y, ticks, textAlign, textBaseline } = computeAxisTicks({
         width,
@@ -152,6 +155,7 @@ const Axis = ({
                         theme={theme}
                         x={tick.x}
                         y={tick.y}
+                        {...(onClick ? { onClick } : {})}
                     />
                 ))}
             </g>
@@ -193,6 +197,7 @@ const Axis = ({
                                 textBaseline={textBaseline}
                                 textAnchor={textAlign}
                                 theme={theme}
+                                {...(onClick ? { onClick } : {})}
                                 {...style}
                             />
                         ))}
@@ -232,6 +237,9 @@ Axis.propTypes = {
 
     // theming
     theme: PropTypes.object.isRequired,
+
+    // interactivity
+    onClick: PropTypes.func,
 }
 
 Axis.defaultProps = {
diff --git a/src/components/axes/AxisTick.js b/src/components/axes/AxisTick.js
index ee2a65aa5..6a5d79186 100644
--- a/src/components/axes/AxisTick.js
+++ b/src/components/axes/AxisTick.js
@@ -34,6 +34,7 @@ export default class AxisTick extends Component {
             format,
             lineX,
             lineY,
+            onClick,
             textX,
             textY,
             textBaseline,
@@ -46,8 +47,17 @@ export default class AxisTick extends Component {
             value = format(value)
         }
 
+        let gStyle = { opacity }
+        if (onClick) {
+            gStyle['cursor'] = 'pointer'
+        }
+
         return (
-            <g transform={`translate(${x},${y})`} style={{ opacity }}>
+            <g
+                transform={`translate(${x},${y})`}
+                {...(onClick ? { onClick: e => onClick(e, value) } : {})}
+                style={gStyle}
+            >
                 <line x1={0} x2={lineX} y1={0} y2={lineY} stroke={theme.axis.tickColor} />
                 <text
                     alignmentBaseline={textBaseline}