feat(heatmap): allow rotation of x axis labels

[rshen91]

Summary

The rotation configuration is available on the theme.heatmap.xAxisLabel theme style to rotate the labels of the X axis from 0 to 90 degree.
The rotation will shrink the chart vertically( and occasionally also horizontally) depending on the length of the labels.
Few changes to the x axis labels are also landed in this PR:

• categorical labels overflowing the chart boundaries will play a role in shrinking the chart size.
• the X axis now shows small ticks, center aligned for categorical scale and left aligned for time
• the time axis ticks are aligned to the right of the ticks
• time axis labels instead, will not shrink the chart anymore. The number of labels will be reduced gradually to avoid overlaps and overflows. The right edge of the heatmap will always touch the right edge of the rendering area.

BREAKING CHANGES

width, align and baseline style properties are removed from the xAxisLabels and yAxisLabels style of the Heatmap theme.
These properties were not used in the rendering.

Details

Compute the X axis space

The X axis space is computed as the following:
categorical

• measure all the categorical label sizes
• compute the rotated boundingbox
• use the screenspaceMarkerScaleCompressor to compute how much we need to shrink the grid width considering the label positions in the domain and their screen size. I also included the Y axis so that we can take also the maximum label width in the calculation.

time

• similar to categorical we compute all the label sizes and the rotated bbox
• we compute a first scale compression considering all the label visible. If that step produces no overlaps between labels and no overflows at the chart edges, we use that result if not we iterate over reducing the number of visible ticks each time by skipping ticks with an increasing cadence. The current tick reduction doesn't follow the multiLayerTimeAxis but in a future step we can include that.

Future possible steps

• wrap and/or trim horizontal labels into multiple lines within their grid column size
• reuse the multilayer time axis approach

Issues

Partially solves #1168 (missing the automatic trimming of horizontal labels)

Checklist

• The proper chart type label has been added (e.g. :xy, :partition)
• The proper feature labels have been added (e.g. :interactions, :axis)
• All related issues have been linked (i.e. closes #123, fixes #123)
• New public API exports have been added to packages/charts/src/index.ts
• Unit tests have been added or updated to match the most common scenarios
• The proper documentation and/or storybook story has been added or updated

[rshen91]

jenkins test this

[monfera]

The overlap (and secondarily, rotating time tick labels in the example) look unintended, conveying less than ideal practice to users

[monfera]

Good for merging once all tests pass