[XY] Add axes support

[VladLasitsa]

Closes: #129062

Summary

For better user experiance and understanding yConfig was renamed to decorations. Now we have 2 expression function

• for data: dataDecorationConfig
• for reference line: referenceLineDecorationConfig

The unified XY renderer has to support two different styles of handling axis configurations. To achive this new args - yAxisConfigs and xAxisConfig were added to expression functions. This arg allow to provide specific axis config and connect it to dataDecorationConfig from layer by axisId.
As axis have position arg where we can provide correct position for axis the 'axisMode' arg was removed from dataDecorationConfig.
For reference line we can also provide axisId so that attach it ti needed axis or just provide position in that case reference line will be belong to first axis on defined postion.

Note: To achive the axisMode='auto' behavior dataDecorationConfig shouldn't have axisId.

Some additional changes:

• Added possibility to provide global config for y-axes by position (add axes without id)
• Added possibility to provide global config for x-axis using new arg - xAxisConfig.
• Thanks to the previous steps xTitle, yTitle, yRightTitle, yLeftExtent, yRightExtent, tickLabelsVisibilitySettings, labelsOrientation, gridlinesVisibilitySettings, axisTitlesVisibilitySettings args was removed as it can be provided as global axis configs by position or using xAxisConfig.
• Splited seriesType to different args - isPercentage, isHorizontal, isStacked. From now seriesType can be only: bar, area or line.
• Added possibility to number of symbols before truncating label on axis. (truncate arg)
• Added possibility to hides overlapping labels and duplicates on axis. (showOverlappingLabels and showDuplicatesarg)
• Added possibility to configure color of labels on axes. (labelColor arg)
• Added possibility to configure labels orientation on axes. (labelsOrientation arg)
• Added possibility to configure padding for computed domain as positive number for y-axis. (boundsMargin arg)
• Added possibility to customize axis position. (position arg)
• Added possibility to customize axis title. (title arg)
• Added possibility to show/hide axis title. (showTitle arg)
• Added possibility to show/hide axis labels. (showLabels arg)
• Added possibility to add extents for y-axes. (extent arg)
• Added support of scaling type (time, linear, log, sqrt) for y-axes. (scaleType arg)
• Added support of scaling mode (normal, percentage, wiggle, silhouette) for y-axes. (mode arg)
  • Note - Axis mode in specified axis have more prioritet than the same arguments provided for whole layer (isPercentage) or in global axis config.

Testing notes:

Global x-axis config:

kibana
| selectFilter
| demodata
| head 15
| xyVis seriesType="area" xAccessor="project" accessors={visdimension "percent_uptime" format="percent"} xAxisConfig={xAxisConfig title="test" labelsOrientation=-45 truncate=10}
| render

Global y-axis config for defined position:

kibana
| selectFilter
| demodata
| head 15
| xyVis seriesType="area" xAccessor="project" accessors={visdimension "percent_uptime" format="percent"} yAxisConfigs={yAxisConfig position="left" title="test" scaleType=''sqrt" labelsOrientation=-45 truncate=10}
| render

Specifed y-axis config for accessor:

kibana
| selectFilter
| demodata
| head 15
| xyVis seriesType="area" xAccessor="project" accessors={visdimension "percent_uptime" format="percent"} decorations={dataDecorationConfig forAccessor='percent_uptime' axisId="axis-1"} yAxisConfigs={yAxisConfig id="axis-1" position="left" title="test" scaleType=''sqrt" labelsOrientation=-45 truncate=10}
| render

Specifed axis for reference line by id:

kibana
| selectFilter
| demodata
| head 15
| xyVis seriesType="area" xAccessor="project" accessors={visdimension "percent_uptime" format="percent"} decorations={dataDecorationConfig forAccessor='percent_uptime' axisId="axis-1"}  referenceLines={referenceLine fill="below" color="green" value=10 axisId="axis-1"} yAxisConfigs={yAxisConfig id="axis-1" position="left" title="test" scaleType=''sqrt" labelsOrientation=-45 truncate=10}
| render

Specifed axis for reference line by position:

kibana
| selectFilter
| demodata
| head 15
| xyVis seriesType="area" xAccessor="project" accessors={visdimension "percent_uptime" format="percent"} decorations={dataDecorationConfig forAccessor='percent_uptime' axisId="axis-1"} referenceLines={referenceLine fill="below" color="green" value=10 position="left"} yAxisConfigs={yAxisConfig id="axis-1" position="left" title="test" scaleType=''sqrt" labelsOrientation=-45 truncate=10}
| render

[VladLasitsa]

Had a first round of local testing and found some issues with the reference lines transition from one chart type to another:

Reference lines/area should rotate together with the chart, as it happens in main:

The bug seems to not affect chart with the same rotation value.

@dej611 Fixed issue, Could you please review again?

[flash1293]

Decoration position in vertical charts are wrong in "auto" mode and don't respect manual choice:

[flash1293]

Axis scale is not respected:

[VladLasitsa]

Decoration position in vertical charts are wrong in "auto" mode and don't respect manual choice:

Fixed

[VladLasitsa]

Axis scale is not respected:

Fixed

[flash1293]

Primary axis is on the wrong side when switching to "bar horizontal stacked":

[Kuznietsov]

@flash1293, I've fixed the problem. Could you, please, review the PR again? Thanks a lot.

[dej611]

Still some issues with reference lines decoration positioning:

The label/name is rotated vertically rather than horizontally

[mbondyra]

For intervals, Reference lines can be applied also on the domain axis. I am not sure if it was accidentally removed but doesn't work for me:

To reproduce:

1. Create data layer with intervals on the horizontal axis.

2. Add reference lines to Horizontal axis.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 4bf7665
• Storybooks Preview
• Webpack Bundle Analyzer

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
expressionXY	111	110	-1

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
expressionXY	138	140	+2
lens	524	521	-3
total			-1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
expressionXY	98.4KB	102.3KB	+3.9KB
lens	1.2MB	1.2MB	+2.0KB
total			+5.8KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
lens	39	40	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
expressionXY	33.1KB	32.8KB	-304.0B

Unknown metric groups

API count

id	before	after	diff
expressionXY	148	150	+2
lens	602	599	-3
total			-1

History

• 💚 Build #51936 succeeded 68fc3ff
• 💚 Build #51859 succeeded b892b1f
• 💔 Build #51844 failed 6ccf543
• 💚 Build #51761 succeeded 0c1552b
• 💔 Build #51595 failed 706efc9
• 💚 Build #51557 succeeded 3f94012

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @VladLasitsa

[alexwizp]

LGTM! Tested locally

[mbondyra]

Tested and except for finding some issues reproducible on main (for example #135024), everything works fine! Approved 👌🏼