[VisCanvas] Extract axes/grid rendering logic

[axelboc]

I'd like to investigate the feasibility of switching to an API like this:

<VisCanvas>
  <Title>My Plot</Title>
  <Axes abscissaLabel="X" />
  <Grid vertical={false} />
</VisCanvas>

The idea is to make some of VisCanvas's props such as showAxes and AxisConfig.showGrid obsolete. The goal is to make the API simpler, but also to remove a lot of internal rendering logic from VisCanvas. Toggling the axes, the grid, the plot title or the axis labels becomes a matter of rendering the corresponding components conditionally (or adding ternaries to some of the props), and those components can have their own dedicated documentation sections on the Storybook site.

The main challenge is of course dealing with axis offsets.

[axelboc]

Decoupling grids from axes might not be a good idea: #1429 (comment) – it seems simpler to have one component for each axis (x/y) and to keep rendering the corresponding grid inside:

<XAxis />
<YAxis /> // each with prop `showGrid` defaulting to `true`, and `showAxisLine` defaulting to `!showGrid`

<DefaultAxes /> // defaults to both `XAxis` and `YAxis` with grids visible and axis lines hidden, but configurable like `DefaultInteractions`

[axelboc]

Got a prototype working, but it uncovered an issue: with a declarative API, there's no easy way to "pre-allocate" space next to the canvas for the axes, and since the axes are rendered after the canvas (because of Html), the canvas renders first and fills the space then shrinks when the axes are added to the DOM. The effect is pretty awful.

[axelboc]

Closed in favour of #1276

[loichuder]

Closed in favour of #1276

I guess you meant #1469 ?