[Lens] Allow user to change y axis settings separately for each axis

[flash1293]

Currently it's possible in Lens xy chart to configure some properties of the y axis (hide/show complete axis, tick labels, grid lines as well as overwriting the axis title).

In some cases a chart can have a left and a right y axis. In this case these settings are always applied to both axes in the same way.

The user should be able to control the behavior of the left and the right axis separately.

Suggestion

One way to expose this to the user is to have separate form rows in the settings popover for left y axis and right y axis. If we can be sure there is just a single y axis (e.g. if there is just a single metric or if multiple metrics are specifically mapped to the same axis), we can either disable or hide the form rows for the other Y axis.

Otherwise (e.g. if there are two "auto" mapped metrics or one metric mapped to the left axis and one metric mapped to the right one), we show both rows.

cc @cchaos @stratoula

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[stratoula]

I made a quick implementation of how the right y-axis title will work with the above suggestion:

So if there is no right axis, the setting doesn't appear, it appears only if it is applicable.

The same way could work for gridlines and tick labels but I assume that we should change the UI in X-Axis --> Gridlines, Ticklabels, Left Y-Axis --> Gridlines, Ticklabels and Right Y-Axis --> Gridlines, Ticklabels.

What do you think @cchaos?

[flash1293]

As discussed offline, when doing this we should move out the individual axis settings into separate popovers:

[cchaos]

Those screenshots are slightly out of date. Once this gets underway the best place to find the latest version is in this prototype.

[flash1293]

Thanks @cchaos - could you update this issue once the design is ready to give feedback / start implementation?

[stratoula]

It looks great @cchaos!

[cchaos]

It's ready for feedback now. You can comment directly on the prototype in Figma, or make screenshots and paste comments here.

[stratoula]

@cchaos as far as I can see also pie charts have global settings but are quite different from the XY axes ones.

Are we going to also change them too? Or this applies only for XY-Axis ?

Moreover, I can't find some of the icons on the prototype. Are they new?

[cchaos]

Yes, those would need to be broken apart to fit the new toolbar paradigm. I've started a google doc that breaks down the different global chart settings per chart type so help us organize this.

[stratoula]

Thank you @cchaos, it helps a lot. What about the icons? I can't find them, can you also help me with them?

[cchaos]

Yes, they don't exist yet. I'm still designing them and they may need to be fed through EUI first. I'd just throw some placeholder icons in there for now. I will also most likely need to jump in to get the custom styles working, so maybe if you could just get it split out on the code side, I can jump in to finish the UI.

As a reminder the designs have been updated and the Figma proto stays the most up to date, so be sure to base work off of that. Here's the latest screenshot.

[stratoula]

ok @cchaos thank you. I will share a PR with you this week to jump in and do your magic. I will use random icons.