Merge pull request #260 from sto3psl/tick-component

add tickComponent prop and use @vx/text for axis ticks
airbnb · Mar 29, 2018 · 48c34f9 · 48c34f9
2 parents 9d7ffaa + 86369e7
commit 48c34f9
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 25 deletions.
diff --git a/packages/vx-axis/package.json b/packages/vx-axis/package.json
@@ -33,6 +33,7 @@
     "@vx/group": "0.0.153",
     "@vx/point": "0.0.153",
     "@vx/shape": "0.0.158",
+    "@vx/text": "0.0.153",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.0"
   },

diff --git a/packages/vx-axis/src/axis/Axis.js b/packages/vx-axis/src/axis/Axis.js
@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { Line } from '@vx/shape';
 import { Point } from '@vx/point';
 import { Group } from '@vx/group';
+import { Text } from '@vx/text';
 import center from '../utils/center';
 import identity from '../utils/identity';
 import getLabelTransform from '../utils/labelTransform';
@@ -39,6 +40,7 @@ const propTypes = {
   tickStroke: PropTypes.string,
   tickTransform: PropTypes.string,
   tickValues: PropTypes.array,
+  tickComponent: PropTypes.func,
   top: PropTypes.number,
   children: PropTypes.func,
 };
@@ -79,6 +81,7 @@ export default function Axis({
   tickStroke = 'black',
   tickTransform,
   tickValues,
+  tickComponent,
   top = 0,
 }) {
   let values = scale.ticks ? scale.ticks(numTicks) : scale.domain();
@@ -187,18 +190,25 @@ export default function Axis({
                 to={tickToPoint}
                 stroke={tickStroke}
               />
+              )}
+            {tickComponent ? tickComponent({
+              x: tickToPoint.x,
+              y: tickToPoint.y + (horizontal && !isTop ? tickLabelFontSize : 0),
+              formattedValue: format(val, index),
+              ...tickLabelPropsObj
+            }) : (
+              <Text
+                x={tickToPoint.x}
+                y={
+                  tickToPoint.y +
+                  (horizontal && !isTop ? tickLabelFontSize : 0)
+
+                }
+                {...tickLabelPropsObj}
+              >
+                {format(val, index)}
+              </Text>
             )}
-            <text
-              x={tickToPoint.x}
-              y={
-                tickToPoint.y +
-                (horizontal && !isTop ? tickLabelFontSize : 0)
-
-              }
-              {...tickLabelPropsObj}
-            >
-              {format(val, index)}
-            </text>
           </Group>
         );
       })}
@@ -215,7 +225,7 @@ export default function Axis({
       )}
 
       {label && (
-        <text
+        <Text
           className={cx('vx-axis-label', labelClassName)}
           {...getLabelTransform({
             labelOffset,
@@ -228,7 +238,7 @@ export default function Axis({
           {...labelProps}
         >
           {label}
-        </text>
+        </Text>
       )}
     </Group>
   );

diff --git a/packages/vx-axis/src/axis/AxisBottom.js b/packages/vx-axis/src/axis/AxisBottom.js
@@ -28,6 +28,7 @@ const propTypes = {
   tickStroke: PropTypes.string,
   tickTransform: PropTypes.string,
   tickValues: PropTypes.array,
+  tickComponent: PropTypes.func,
   top: PropTypes.number,
   children: PropTypes.func,
 };
@@ -63,6 +64,7 @@ export default function AxisBottom({
   tickStroke,
   tickTransform,
   tickValues,
+  tickComponent,
   top,
 }) {
   return (
@@ -91,6 +93,7 @@ export default function AxisBottom({
       tickStroke={tickStroke}
       tickTransform={tickTransform}
       tickValues={tickValues}
+      tickComponent={tickComponent}
       top={top}
       children={children}
     />

diff --git a/packages/vx-axis/src/axis/AxisLeft.js b/packages/vx-axis/src/axis/AxisLeft.js
@@ -28,6 +28,7 @@ const propTypes = {
   tickStroke: PropTypes.string,
   tickTransform: PropTypes.string,
   tickValues: PropTypes.array,
+  tickComponent: PropTypes.func,
   top: PropTypes.number,
   children: PropTypes.func,
 };
@@ -64,6 +65,7 @@ export default function AxisLeft({
   tickStroke,
   tickTransform,
   tickValues,
+  tickComponent,
   top,
 }) {
   return (
@@ -92,6 +94,7 @@ export default function AxisLeft({
       tickStroke={tickStroke}
       tickTransform={tickTransform}
       tickValues={tickValues}
+      tickComponent={tickComponent}
       top={top}
       children={children}
     />

diff --git a/packages/vx-axis/src/axis/AxisRight.js b/packages/vx-axis/src/axis/AxisRight.js
@@ -28,6 +28,7 @@ const propTypes = {
   tickStroke: PropTypes.string,
   tickTransform: PropTypes.string,
   tickValues: PropTypes.array,
+  tickComponent: PropTypes.func,
   top: PropTypes.number,
   children: PropTypes.func,
 };
@@ -64,6 +65,7 @@ export default function AxisRight({
   tickStroke,
   tickTransform,
   tickValues,
+  tickComponent,
   top,
 }) {
   return (
@@ -92,6 +94,7 @@ export default function AxisRight({
       tickStroke={tickStroke}
       tickTransform={tickTransform}
       tickValues={tickValues}
+      tickComponent={tickComponent}
       top={top}
       children={children}
     />

diff --git a/packages/vx-axis/src/axis/AxisTop.js b/packages/vx-axis/src/axis/AxisTop.js
@@ -28,6 +28,7 @@ const propTypes = {
   tickStroke: PropTypes.string,
   tickTransform: PropTypes.string,
   tickValues: PropTypes.array,
+  tickComponent: PropTypes.func,
   top: PropTypes.number,
   children: PropTypes.func,
 };
@@ -63,6 +64,7 @@ export default function AxisTop({
   tickStroke,
   tickTransform,
   tickValues,
+  tickComponent,
   top,
 }) {
   return (
@@ -91,6 +93,7 @@ export default function AxisTop({
       tickStroke={tickStroke}
       tickTransform={tickTransform}
       tickValues={tickValues}
+      tickComponent={tickComponent}
       top={top}
       children={children}
     />

diff --git a/packages/vx-axis/test/Axis.test.js b/packages/vx-axis/test/Axis.test.js
@@ -3,6 +3,7 @@ import { Axis } from '../src';
 import { shallow } from 'enzyme';
 import { scaleLinear, scaleBand } from '../../vx-scale';
 import { Line } from '@vx/shape';
+import { Text } from '@vx/text'
 
 const axisProps = {
   orientation: 'left',
@@ -79,7 +80,7 @@ describe('<Axis />', () => {
 
     const ticks = wrapper.find('.vx-axis-tick');
     ticks.forEach(tick => {
-      expect(tick.find('text').props()).toEqual(
+      expect(tick.find(Text).props()).toEqual(
         expect.objectContaining(tickProps),
       );
     });
@@ -109,7 +110,7 @@ describe('<Axis />', () => {
     );
 
     const label = wrapper.find('.vx-axis-label');
-    expect(label.find('text').props()).toEqual(
+    expect(label.find(Text).props()).toEqual(
       expect.objectContaining(labelProps),
     );
   });
@@ -218,8 +219,8 @@ describe('<Axis />', () => {
       wrapper
         .children()
         .find('.vx-axis-tick')
-        .find('text')
-        .text(),
+        .find(Text)
+        .prop('children')
     ).toBe('test!!!');
   });
 
@@ -235,9 +236,9 @@ describe('<Axis />', () => {
       wrapper
         .children()
         .find('.vx-axis-tick')
-        .find('text')
-        .text(),
-    ).toBe('0');
+        .find(Text)
+        .prop('children')
+    ).toBe(0);
   });
 
   test('it should use center if scale is band', () => {

diff --git a/packages/vx-axis/test/AxisBottom.test.js b/packages/vx-axis/test/AxisBottom.test.js
@@ -69,6 +69,6 @@ describe('<AxisBottom />', () => {
     const label = 'test';
     const wrapper = shallow(<AxisBottom {...axisProps} label={label} />).dive();
     const text = wrapper.find('.vx-axis-label');
-    expect(text.text()).toEqual(label);
+    expect(text.prop('children')).toEqual(label);
   });
 });
diff --git a/packages/vx-axis/test/AxisLeft.test.js b/packages/vx-axis/test/AxisLeft.test.js
@@ -69,6 +69,6 @@ describe('<AxisLeft />', () => {
     const label = 'test';
     const wrapper = shallow(<AxisLeft {...axisProps} label={label} />).dive();
     const text = wrapper.find('.vx-axis-label');
-    expect(text.text()).toEqual(label);
+    expect(text.prop('children')).toEqual(label);
   });
 });
diff --git a/packages/vx-axis/test/AxisRight.test.js b/packages/vx-axis/test/AxisRight.test.js
@@ -69,6 +69,6 @@ describe('<AxisRight />', () => {
     const label = 'test';
     const wrapper = shallow(<AxisRight {...axisProps} label={label} />).dive();
     const text = wrapper.find('.vx-axis-label');
-    expect(text.text()).toEqual(label);
+    expect(text.prop('children')).toEqual(label);
   });
 });
diff --git a/packages/vx-axis/test/AxisTop.test.js b/packages/vx-axis/test/AxisTop.test.js
@@ -69,6 +69,6 @@ describe('<AxisTop />', () => {
     const label = 'test';
     const wrapper = shallow(<AxisTop {...axisProps} label={label} />).dive();
     const text = wrapper.find('.vx-axis-label');
-    expect(text.text()).toEqual(label);
+    expect(text.prop('children')).toEqual(label);
   });
 })
diff --git a/packages/vx-demo/components/tiles/axis.js b/packages/vx-demo/components/tiles/axis.js
@@ -123,6 +123,9 @@ export default ({ width, height, margin }) => {
           dx: '-0.25em',
           dy: '0.25em',
         })}
+        tickComponent={({ formattedValue, ...tickProps}) => (
+          <text {...tickProps}>{formattedValue}</text>
+        )}
       />
       <AxisBottom
         top={height - margin.bottom}

diff --git a/packages/vx-demo/pages/axis.js b/packages/vx-demo/pages/axis.js
@@ -139,6 +139,9 @@ export default ({ width, height, margin }) => {
           dx: '-0.25em',
           dy: '0.25em',
         })}
+        tickComponent={({ formattedValue, ...tickProps}) => (
+          <text {...tickProps}>{formattedValue}</text>
+        )}
       />
       <AxisBottom
         top={height - margin.bottom}

diff --git a/packages/vx-demo/static/docs/vx-axis.html b/packages/vx-demo/static/docs/vx-axis.html
@@ -207,6 +207,12 @@ <h2 id="-axistop-"><code>&lt;AxisTop/&gt;</code></h2>
 <td style="text-align:left">The x offset to the tick&#39;s text.</td>
 </tr>
 <tr>
+<td style="text-align:left">tickComponent</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">function</td>
+<td style="text-align:left">Function returning a React component to render as tick.</td>
+</tr>
+<tr>
 <td style="text-align:left">hideAxisLine</td>
 <td style="text-align:left">false</td>
 <td style="text-align:left">bool</td>
@@ -376,6 +382,12 @@ <h2 id="-axisbottom-"><code>&lt;AxisBottom/&gt;</code></h2>
 <td style="text-align:left">The x offset to the tick&#39;s text.</td>
 </tr>
 <tr>
+<td style="text-align:left">tickComponent</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">function</td>
+<td style="text-align:left">Function returning a React component to render as tick.</td>
+</tr>
+<tr>
 <td style="text-align:left">hideAxisLine</td>
 <td style="text-align:left">false</td>
 <td style="text-align:left">bool</td>
@@ -545,6 +557,12 @@ <h2 id="-axisleft-"><code>&lt;AxisLeft/&gt;</code></h2>
 <td style="text-align:left">The x offset to the tick&#39;s text.</td>
 </tr>
 <tr>
+<td style="text-align:left">tickComponent</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">function</td>
+<td style="text-align:left">Function returning a React component to render as tick.</td>
+</tr>
+<tr>
 <td style="text-align:left">hideAxisLine</td>
 <td style="text-align:left">false</td>
 <td style="text-align:left">bool</td>
@@ -714,6 +732,12 @@ <h2 id="-axisright-"><code>&lt;AxisRight/&gt;</code></h2>
 <td style="text-align:left">The x offset to the tick&#39;s text.</td>
 </tr>
 <tr>
+<td style="text-align:left">tickComponent</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">function</td>
+<td style="text-align:left">Function returning a React component to render as tick.</td>
+</tr>
+<tr>
 <td style="text-align:left">hideAxisLine</td>
 <td style="text-align:left">false</td>
 <td style="text-align:left">bool</td>
@@ -889,6 +913,12 @@ <h2 id="-axis-"><code>&lt;Axis /&gt;</code></h2>
 <td style="text-align:left">The x offset to the tick&#39;s text.</td>
 </tr>
 <tr>
+<td style="text-align:left">tickComponent</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">function</td>
+<td style="text-align:left">Function returning a React component to render as tick.</td>
+</tr>
+<tr>
 <td style="text-align:left">hideAxisLine</td>
 <td style="text-align:left">false</td>
 <td style="text-align:left">bool</td>
@@ -925,4 +955,4 @@ <h2 id="-axis-"><code>&lt;Axis /&gt;</code></h2>
       </div>
     </div>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
-  </html>
+  </html>