Section margin/padding (for chart elements)

[atepoorthuis]

[capturing this from our slack discussion yesterday]

Initial prompt

Right now we have the very useful Section component. In principle the Section sets the width and height of the 'data plot'. Question remains: what is the best way to deal with things that belong to that Section but aren't exactly part of the 'data plot'? These are things like titles and axes, that you often don't want overlapping with the data plot. Right now, these can be defined outside of the Section but you do want to tie them to the Section they belong to. Especially for things like facets. One way to do thing of this is to think of a definable margin around the 'data plot' for marginals such titles/axes (this is how it's done in ggplot: (https://ggplot2.tidyverse.org/reference/element.html)).

See also, from Wickham's Layered Grammar: Title, Axis and Axis labels are all outset the 'data' section. But all of them, together with the 'data section', are contained within a single 'plot'.

Summary of our Slack discussion

• We implement this analogous to padding from the CSS Box model.
• The dimensions for the (l, r, t, b) padding will be set explicitly on the Section and are relative to the parent domain. This will effectively 'shrink' the available space left for the 'data plot'.
• We'll implement using named slots

[luucvanderzee]

We'll implement using named slots

This turned out to be impossible, due to some peculiarities of vue's lifecycles. The axes and gridLines were taken care of in #60, but I will leave this issue open for now, as we might still want to add a padding prop or something later.