add tickComponent prop and use @vx/text for axis ticks

[sto3psl]

💥 Breaking Changes

None 🎉

🚀 Enhancements

Implements features mentioned in #259

• use @vx/text for axis ticks and axis label
• add tickComponent prop to all axis components

📝 Documentation

1. By default <Axis /> components now use @vx/text to render tick labels. This enables multi line labels and scaling text to fit in a certain amount of space.

Example:

<Axis 
  {...axisProps}
  tickLabelProps = (tickValue, index) => ({
    textAnchor: 'middle',
    verticalAnchor: 'middle',
    width: 100,
    scaleToFit: true
  })
/>

2. <Axis /> components got a new prop tickComponent to enable rendering of custom ticks. With this prop one can completely customize ticks without having to create a new custom <Axis /> component.

Example:

<Axis
  {...axisProps}
  tickComponent={({ x, y, formattedValue }) => (
    <g>
      <circle cx={x} cy={y} r={2} fill='rebeccapurple' />
      <text x={x + 4} y={y}>{formattedValue}</text>
    </g>
  )}
/>

tickComponent accepts a function and gets called with the following attribute:

tickComponent({ x, y, formattedValue, ...tickLabelPropsObj })

---

P.S.: I think currently it's quite hard to get started developing on vx. I don't really know how lerna works and if I maybe did something wrong, please let me know. A little Getting started developing vx section in the readme would be lovely.

[williaster]

this will be a great addition @sto3psl! 🚀

and good suggestion about the dev environment instructions, I just added a section to the readme about this.

[techniq]

Nice work! And thanks Chris for adding the dev notes. I've always kept a note in my wiki (https://github.com/techniq/wiki/wiki/vx) as I have to reremember. Now I won't have to 😁.

…

On Wed, Mar 28, 2018, 7:11 PM Chris Williams ***@***.***> wrote: this will be a great addition @sto3psl <https://github.com/sto3psl>! 🚀 and good suggestion about the dev environment instructions, I just added a section to the readme <https://github.com/hshoff/vx#development> about this. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#260 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAK1RJTII8rqcVxff-8ZKY4xPZsu3ypXks5tjBiUgaJpZM4S_ZvK> .

[sto3psl]

Great I did almost everything correctly forking vx and getting started 😄. Thank you @williaster for the quick addition!

[hshoff]

LGTM thanks for the contribution @sto3psl!