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

Author: martingordon

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 = {

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}