feat(axes): add ability to rotate axes tick label

plouc · Aug 16, 2017 · 3921c2f · 3921c2f
1 parent 705f13a
commit 3921c2f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/src/components/axes/Axes.js b/src/components/axes/Axes.js
@@ -18,15 +18,22 @@ const verticalPositions = ['left', 'right']
 const positions = [...horizontalPositions, ...verticalPositions]
 
 const Axes = ({
+    // generic
     xScale,
     yScale,
     width,
     height,
+
+    // axes
     top,
     right,
     bottom,
     left,
+
+    // theming
     theme,
+
+    // motion
     animate,
     motionStiffness,
     motionDamping,
@@ -63,17 +70,19 @@ const Axes = ({
 }
 
 Axes.propTypes = {
+    // generic
     xScale: PropTypes.func.isRequired,
     yScale: PropTypes.func.isRequired,
-
     width: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,
 
+    // axes
     top: axisPropType,
     right: axisPropType,
     bottom: axisPropType,
     left: axisPropType,
 
+    // theming
     theme: PropTypes.object.isRequired,
 
     // motion

diff --git a/src/components/axes/Axis.js b/src/components/axes/Axis.js
@@ -10,7 +10,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import compose from 'recompose/compose'
 import pure from 'recompose/pure'
-import shouldUpdate from 'recompose/shouldUpdate'
 import { TransitionMotion, spring } from 'react-motion'
 import { withMotion } from '../../hocs'
 import AxisTick from './AxisTick'
@@ -33,6 +32,7 @@ export const axisPropType = PropTypes.shape({
     // ticks
     tickSize: PropTypes.number,
     tickPadding: PropTypes.number,
+    tickRotation: PropTypes.number,
     format: PropTypes.func,
 
     // legend
@@ -54,13 +54,17 @@ const willLeave = springConfig => ({ style }) => ({
 })
 
 const Axis = ({
+    // generic
     scale,
     width,
     height,
     position: _position,
     orient: _orient,
+
+    // ticks
     tickSize,
     tickPadding,
+    tickRotation,
     format,
 
     // legend
@@ -99,6 +103,16 @@ const Axis = ({
 
         textAnchor = 'middle'
         textDY = orient === 'top' ? '0em' : '0.71em'
+        if ((orient === 'bottom' && tickRotation < 0) || (orient === 'top' && tickRotation > 0)) {
+            textAnchor = 'end'
+            textDY = '0.32em'
+        } else if (
+            (orient === 'bottom' && tickRotation > 0) ||
+            (orient === 'top' && tickRotation < 0)
+        ) {
+            textAnchor = 'start'
+            textDY = '0.32em'
+        }
         textXY.y = (tickSize + tickPadding) * (orient === 'bottom' ? 1 : -1)
 
         tickLine.y2 = tickSize * (orient === 'bottom' ? 1 : -1)
@@ -175,6 +189,7 @@ const Axis = ({
                         value={tick.key}
                         format={format}
                         tickLine={tickLine}
+                        rotate={tickRotation}
                         textXY={textXY}
                         textDY={textDY}
                         textAnchor={textAnchor}
@@ -215,6 +230,7 @@ const Axis = ({
                                 value={key}
                                 format={format}
                                 tickLine={tickLine}
+                                rotate={tickRotation}
                                 textXY={textXY}
                                 textDY={textDY}
                                 textAnchor={textAnchor}
@@ -239,6 +255,7 @@ const Axis = ({
 }
 
 Axis.propTypes = {
+    // generic
     width: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,
     orient: PropTypes.oneOf(axisPositions),
@@ -248,33 +265,29 @@ Axis.propTypes = {
     // ticks
     tickSize: PropTypes.number.isRequired,
     tickPadding: PropTypes.number.isRequired,
+    tickRotation: PropTypes.number.isRequired,
     format: PropTypes.func,
 
     // legend
     legend: PropTypes.string,
     legendPosition: PropTypes.oneOf(legendPositions).isRequired,
     legendOffset: PropTypes.number.isRequired,
 
+    // theming
     theme: PropTypes.object.isRequired,
 }
 
 Axis.defaultProps = {
     // ticks
     tickSize: 5,
     tickPadding: 5,
+    tickRotation: 0,
 
     // legend
     legendPosition: 'end',
     legendOffset: 0,
 }
 
-const enhance = compose(
-    withMotion(),
-    shouldUpdate((props, nextProps) => {
-        //console.log('=> scale', props.scale === nextProps.scale)
-        return true
-    }),
-    pure
-)
+const enhance = compose(withMotion(), pure)
 
 export default enhance(Axis)
diff --git a/src/components/axes/AxisTick.js b/src/components/axes/AxisTick.js
@@ -16,10 +16,12 @@ export default class AxisTick extends Component {
         x: PropTypes.number.isRequired,
         y: PropTypes.number.isRequired,
         opacity: PropTypes.number.isRequired,
+        rotate: PropTypes.number.isRequired,
     }
 
     static defaultProps = {
         opacity: 1,
+        rotate: 0,
     }
 
     render() {
@@ -28,6 +30,7 @@ export default class AxisTick extends Component {
             x,
             y,
             opacity,
+            rotate,
             format,
             tickLine,
             textXY,
@@ -45,9 +48,9 @@ export default class AxisTick extends Component {
             <g transform={`translate(${x},${y})`} style={{ opacity }}>
                 <line {...tickLine} stroke={theme.axis.tickColor} />
                 <text
-                    {...textXY}
                     dy={textDY}
                     textAnchor={textAnchor}
+                    transform={`translate(${textXY.x},${textXY.y}) rotate(${rotate})`}
                     style={{
                         fill: theme.axis.textColor,
                         fontSize: theme.axis.fontSize,