[axis] render prop for axis, full control over rendering

[hshoff]

This is meant to address

• Allow custom component for axis label #160 - Allow custom component for axis label
• Axis tick text transforms #149 - Axis tick text transforms

and any future customization/extension by passing render control to the user.

So now you can do:

     <AxisBottom
        top={height - margin.bottom}
        left={margin.left}
        scale={xScale}
        numTicks={numTicksForWidth(width)}
        label="time"
      >
        {props => {
          const tickLabelSize = 10;
          const tickRotate = 45;
          const tickColor = '#8e205f';
          const axisCenter =
            (props.axisToPoint.x - props.axisFromPoint.x) / 2;
          return (
            <g className="my-custom-bottom-axis">
              {props.ticks.map((tick, i) => {
                const tickX = tick.to.x;
                const tickY =
                  tick.to.y + tickLabelSize + props.tickLength;
                return (
                  <Group
                    key={`vx-tick-${tick.value}-${i}`}
                    className={'vx-axis-tick'}
                  >
                    <Line
                      from={tick.from}
                      to={tick.to}
                      stroke={tickColor}
                    />
                    <text
                      transform={`translate(${tickX}, ${tickY}) rotate(${tickRotate})`}
                      fontSize={tickLabelSize}
                      textAnchor="middle"
                      fill={tickColor}
                    >
                      {tick.formattedValue}
                    </text>
                  </Group>
                );
              })}
              <text
                textAnchor="middle"
                transform={`translate(${axisCenter}, 50)`}
                fontSize="8"
              >
                {props.label}
              </text>
            </g>
          );
        }}
      </AxisBottom>

and you get something like:

the children function will be called with (hopefully) everything you need to make your cool custom axis:

// children function props
{
  axisFromPoint: { x: 0, y: 10.5 },
  axisToPoint: { x: 0, y: 0.5 },
  horizontal: false,
  tickSign: -1,
  numTicks: 10,
  label: "test axis",
  rangePadding: 0,
  tickLength: 8,
  tickFormat: "function",
  tickPosition: "function",
  ticks: [
    {
      value: 0,
      index: 0,
      from: [Object],
      to: [Object],
      formattedValue: "0"
    }
    // ...
  ]
}

This is an enhancement and not a breaking change so all existing Axis implementations should be fine. This is just if you want more control.

cc @williaster