[G2M] pyramid-chart - add axis label control display

[kc-leung]

I forgot to add this control into the chart display options in my previous PR

@vlatawiec & @YizhiCatherineZhang this is a temporary fix to pick the number of xAxis labels to be displayed can any of you guys take a look or if you have time create new selection design for it?

[github-actions[bot]]

📚 Storybook preview (updated to 51b9892d1c1e64393579f24f4650cca90226a0d3)

[geoerika]

My comments are more design related. Need input from @YizhiCatherineZhang or @vlatawiec as well though.

1. There is a bit of inconsistency with styling in WS which we will hopefully get to fix after a general review at some point. Until then, we should make styling match what we have right now, and in this case I would match the styling of xAxisLabels with the dropdown select component for Legend Position.
2. I think originally Kyle should have just used the lumen-labs styling for the dropdown select, if the choice is to keep with lumen-labs, I would at least extend the Select box to match the Title Position / Legend Position select lengths below.

@kc-leung I did a small review in my last PR, and added a gap between the Title & Legend position as it is in the original Figma file. It also looks better. So the current width of the text field or whatever comp you use for xAxis labels should be:

 maxWidth: '9.5315rem',

[geoerika]

This is how the slider comp that use dropdown select look like aligned with the layer display options in my last PR.

[YizhiCatherineZhang]

@kc-leung I tried in the storybook. Maybe we need to add a round function to make sure the number won't be too long.

Also, will the range change by the widget size. If show it in a small size, having more than 5 will be hard to display.

[kc-leung]

@kc-leung I tried in the storybook. Maybe we need to add a round function to make sure the number won't be too long. Also, will the range change by the widget size. If show it in a small size, having more than 5 will be hard to display.

@kc-leung I tried in the storybook. Maybe we need to add a round function to make sure the number won't be too long. Also, will the range change by the widget size. If show it in a small size, having more than 5 will be hard to display.

default is 5 but those options can be changed when the widget is created or later. It is not possible atm to adjust automatically based on widget's size

[kc-leung]

@YizhiCatherineZhang @geoerika styling and rounded changes fixed can you guys take a look again?

https://user-images.githubusercontent.com/46459367/179076626-cad83bf0-bebe-47bb-bb21-d5c6ea6511f3.mov