XY Renderer unification - axis handling

[flash1293]

The unified XY renderer has to support two different styles of handling axis configurations:

• Lens allows some settings for a "right" and a "left" axis and an axis assignment mode per series (auto, left or right).
  • left/right means the series will always be assigned to the left/right axis (if no series is assigned to an axis, it's not rendered)
  • auto means the series will be assigned to the left axis by default, but if another series with a non-matching formatter is already assigned to the left axis, it will switch over to the right axis. If both axes have assigned series with non-matching formatters already, it tries to balance the number of series on the left and on the right
• Visualize is doing an explicit mapping - axes are defined on the chart level with an id and every series is assigned to one axis
  • This configuration style allows multiple axes on the left/right side

To unify both approaches, the following behavior should be implemented:

• It's possible to define arbitrary axes with a position argument (to allow multiple axes on the same side) and an id to allow Visualize-style explicit mapping
• By default, a series is using the Lens style auto assignment mode
  • If explicit axes are defined, the auto assignment mode will treat the first axis defined with position left as the left axis and the first axis defined with position right as the right axis in the existing auto-assignment logic for the three modes (it will never pick the second or third axis defined for the same position)
  • If no explicit axis is defined for a side but the existing auto-assignment logic tries to put a series on this side, a new implicit axis with default settings for the sides position is assumed
• The explicit assignments are done first, then the auto assignment algorithm will assign the rest of the series which do not have an explicit assignment, taking into account the formatters of the explicitly assigned series

Examples

implicit axis -> chart will create a "left" axis

layeredXYVis layer={xyLayer accessor="y1" yConfig={yConfig for="y1" color="red"}}

Chart will render a single right axis with auto assigment logic

explicit assignment and explicit axis

layeredXYVis layer={xyLayer accessor="y1" yConfig={yConfig for="y1" color="red" axisId="1"}}  layer={xyLayer accessor="y2" yConfig={yConfig for="y2" color="blue" axisId="2"}} axis={xyAxis id="1" position="right" scale="log"} axis={xyAxis  id="2" position="left" scale="linear"}

Chart will render y1 on axis 1 on the right side and y2 on axis 2 on the left side with specified settings (lookup via id/axisId)

mixed axis assignment

layeredXYVis layer={xyLayer accessor="y1" yConfig={yConfig for="y1" color="red" axisId="1"}}  layer={xyLayer accessor="y2" yConfig={yConfig for="y2" color="blue"}} axis={xyAxis id="1" position="left" scale="log"}

Chart will assign y1 to axis 1 because that's explicitly stated. based on its formatter, y2 will either be assigned to axis 1 as well (in case the formatters of y1 and y2 match) or it will be assigned to an implicit axis with default settings and position right

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

[flash1293]

cc @VladLasitsa Let me know whether some case is unclear based on this.