Update elastic charts to 20.0.2

[nickofthyme]

Summary

• update createTheme function with theme changes
• add @elastic/charts under optionalDependencies

The charts Theme now allows for inner and outer padding of axis title and labels. As well as tick visibility which now removes tick line padding as well.

@cchaos feel free to change any of the styles to your liking.

Before

After

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation
• Checked Code Sandbox works for the any docs examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3792/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3792/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3792/

[chandlerprall]

@cchaos thoughts on marking this as a breaking change, as the EUI theme configuration would be invalid for previous chart versions?

[nickofthyme]

@cchaos thoughts on marking this as a breaking change, as the EUI theme configuration would be invalid for previous chart versions?

To be clear, these changes would not throw any errors with respect to the chart, but the styling would be different until these changes are added to kibana. I was hoping to upgrade eui and ec together in the same pr on kibana but I noticed eui is a major version ahead and not sure when y'all plan to upgrade eui in kibana to the latest version.

[cchaos]

All the charts in the examples render correctly to me with these changes. Thank you for tackling our side of it!

I have one question about a rendering problem we have and not sure if they've been fixed in Charts yet, but:

When the axis tick labels are missing, they still take up space

As for the "breaking change", what is the industry standard for considering if a boost in dependency version has been changed? I'm ok not considering the actual theme changes a break.

[chandlerprall]

As for the "breaking change", what is the industry standard for considering if a boost in dependency version has been changed?

Strictly, it's a breaking change. A weird here because the chart theming isn't our main published package. I'd lead toward breaking, tho, as it is more accurate.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3792/

[nickofthyme]

@cchaos yes that is fixed in this version. The new padding layout more customizable. The padding layout is now as follows for a left-side axis and is analogous for other sides (i.e. mirrored or rotated)

Each of the colors are tied together in terms of visibility. So if the label visibility is set to false, the label and all associated padding is removed with it.

[nickofthyme]

...So if the tickLine.visible = false and tickLabel.padding.inner = 0, you would get something like this...

[nickofthyme]

Sorry I thought you were referring to the tickLine but yes the same applies to the tickLabel

[cchaos]

Thanks, @nickofthyme. Can you resolve the conflicts on this PR? Then I'll throw you a commit that'll fix the "Sizing" example.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3792/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3792/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3792/

[cchaos]

retest

[cchaos]

👍 LGTM, though I guess we also need a Breaking change changelog item specifying the upgrade in dependency

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3792/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3792/

[nickofthyme]

@chandlerprall are you ok with these changes?

[chandlerprall]

Thanks @nickofthyme !