provide chart rotation via settingsSpec

packages/charts/src/chart_types/xy_chart/axes/axes_sizes.ts

@@ -7,6 +7,7 @@
  */
 
 import { SmallMultiplesSpec } from '../../../specs';
+import { SettingsSpec } from '../../../specs/settings';
 import { Position } from '../../../utils/common';
 import { innerPad, outerPad, PerSideDistance } from '../../../utils/dimensions';
 import { AxisId } from '../../../utils/ids';
@@ -31,11 +32,12 @@ const getAxisSizeForLabel = (
   { maxLabelBboxWidth = 0, maxLabelBboxHeight = 0 }: TickLabelBounds,
   smSpec: SmallMultiplesSpec | null,
   scaleConfigs: ScaleConfigs,
+  { rotation }: SettingsSpec,
 ) => {
   const { tickLine, axisTitle, axisPanelTitle, tickLabel } = axesStyles.get(axisSpec.id) ?? sharedAxesStyles;
   const horizontal = isHorizontalAxis(axisSpec.position);
   const maxLabelBoxGirth = horizontal ? maxLabelBboxHeight : maxLabelBboxWidth;
-  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation: 0 });
+  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation });
   const allLayersGirth = getAllAxisLayersGirth(axisSpec.timeAxisLayerCount, maxLabelBoxGirth, isMultilayerTimeAxis);
   const hasPanelTitle = isVerticalAxis(axisSpec.position) ? smSpec?.splitVertically : smSpec?.splitHorizontally;
   const panelTitleDimension = hasPanelTitle ? getTitleDimension(axisPanelTitle) : 0;
@@ -74,6 +76,7 @@ export function getAxesDimensions(
   axisSpecs: AxisSpec[],
   smSpec: SmallMultiplesSpec | null,
   scaleConfigs: ScaleConfigs,
+  settingsSpec: SettingsSpec,
 ): PerSideDistance & { margin: { left: number } } {
   const sizes = [...axisDimensions].reduce(
     (acc, [id, tickLabelBounds]) => {
@@ -87,6 +90,7 @@ export function getAxesDimensions(
         tickLabelBounds,
         smSpec,
         scaleConfigs,
+        settingsSpec,
       );
       if (isVerticalAxis(axisSpec.position)) {
         acc.axisLabelOverflow.top = Math.max(acc.axisLabelOverflow.top, top);

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/index.ts

@@ -9,6 +9,7 @@
 import { renderAxisLine } from './line';
 import { renderTick } from './tick';
 import { renderTickLabel } from './tick_label';
+import { SettingsSpec } from '../../../../../specs/settings';
 import { Dimensions, Size } from '../../../../../utils/dimensions';
 import { Point } from '../../../../../utils/point';
 import { AxisStyle } from '../../../../../utils/themes/theme';
@@ -25,6 +26,7 @@ export interface AxisProps {
   axisStyle: AxisStyle; // todo rename to just style (it's in Axis... already)
   axisSpec: AxisSpec; // todo rename to just spec (it's in Axis... already)
   scaleConfigs: ScaleConfigs;
+  settingsSpec: SettingsSpec;
   size: Size;
   anchorPoint: Point;
   dimension: TickLabelBounds;

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/tick.ts

@@ -20,11 +20,18 @@ const BASELINE_CORRECTION = 2; // the bottom of the em is a bit higher than the
 export function renderTick(
   ctx: CanvasRenderingContext2D,
   { position, domainClampedPosition: tickPosition, layer, detailedLayer }: AxisTick,
-  { axisSpec, size: { width, height }, axisStyle: { tickLine, gridLine }, layerGirth, scaleConfigs }: AxisProps,
+  {
+    axisSpec,
+    size: { width, height },
+    axisStyle: { tickLine, gridLine },
+    layerGirth,
+    scaleConfigs,
+    settingsSpec: { rotation },
+  }: AxisProps,
 ) {
-  const { position: axisPosition } = axisSpec;
   if (Math.abs(tickPosition - position) > OUTSIDE_RANGE_TOLERANCE) return;
-  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation: 0 });
+  const { position: axisPosition } = axisSpec;
+  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation });
   const tickOnTheSide = isMultilayerTimeAxis && typeof layer === 'number';
   const extensionLayer = tickOnTheSide ? layer + 1 : 0;
   const tickSize =

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts

@@ -19,7 +19,7 @@ export function renderTickLabel(
   ctx: CanvasRenderingContext2D,
   tick: AxisTick,
   showTicks: boolean,
-  { axisSpec, dimension, size, debug, axisStyle, scaleConfigs }: AxisProps,
+  { axisSpec, dimension, size, debug, axisStyle, scaleConfigs, settingsSpec: { rotation } }: AxisProps,
   layerGirth: number,
 ) {
   const { position } = axisSpec;
@@ -48,7 +48,7 @@ export function renderTickLabel(
     }
   }
 
-  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation: 0 });
+  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation });
   const tickOnTheSide = isMultilayerTimeAxis && Number.isFinite(tick.layer);
 
   renderText(

packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts

@@ -34,7 +34,7 @@ export function renderGridPanels(ctx: CanvasRenderingContext2D, { x: chartX, y:
 }
 
 function renderPanel(ctx: CanvasRenderingContext2D, props: AxisProps, locale: string) {
-  const { size, anchorPoint, debug, axisStyle, axisSpec, panelAnchor, secondary, scaleConfigs } = props;
+  const { size, anchorPoint, debug, axisStyle, axisSpec, panelAnchor, secondary, scaleConfigs, settingsSpec } = props;
   const { position } = axisSpec;
   const x = anchorPoint.x + (position === Position.Right ? -1 : 1) * panelAnchor.x;
   const y = anchorPoint.y + (position === Position.Bottom ? -1 : 1) * panelAnchor.y;
@@ -48,7 +48,17 @@ function renderPanel(ctx: CanvasRenderingContext2D, props: AxisProps, locale: st
       renderTitle(
         ctx,
         true,
-        { panelTitle, axisSpec, axisStyle, size, scaleConfigs, dimension, debug, anchorPoint: { x: 0, y: 0 } },
+        {
+          panelTitle,
+          axisSpec,
+          axisStyle,
+          size,
+          scaleConfigs,
+          settingsSpec,
+          dimension,
+          debug,
+          anchorPoint: { x: 0, y: 0 },
+        },
         locale,
       ); // TODO: should we use the axisSpec/Style for the title of small multiple or use their own style?
     }
@@ -63,7 +73,7 @@ export function renderPanelSubstrates(ctx: CanvasRenderingContext2D, props: Axes
   perPanelAxisGeoms.forEach(({ axesGeoms, panelAnchor }) => {
     axesGeoms.forEach((geometry) => {
       const {
-        axis: { panelTitle, id, position, secondary, scaleConfigs },
+        axis: { panelTitle, id, position, secondary, scaleConfigs, settingsSpec },
         anchorPoint,
         size,
         dimension,
@@ -83,7 +93,17 @@ export function renderPanelSubstrates(ctx: CanvasRenderingContext2D, props: Axes
         renderTitle(
           ctx,
           false,
-          { size: parentSize, debug, panelTitle, anchorPoint, dimension, axisStyle, axisSpec, scaleConfigs },
+          {
+            size: parentSize,
+            debug,
+            panelTitle,
+            anchorPoint,
+            dimension,
+            axisStyle,
+            axisSpec,
+            scaleConfigs,
+            settingsSpec,
+          },
           locale,
         );
       }
@@ -102,6 +122,7 @@ export function renderPanelSubstrates(ctx: CanvasRenderingContext2D, props: Axes
           dimension,
           ticks,
           scaleConfigs,
+          settingsSpec,
           axisStyle,
           debug,
           renderingArea,

packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/title.ts

@@ -24,7 +24,7 @@ import { renderDebugRect } from '../utils/debug';
 
 type PanelTitleProps = Pick<
   AxisProps,
-  'panelTitle' | 'axisSpec' | 'axisStyle' | 'scaleConfigs' | 'size' | 'dimension' | 'debug'
+  'panelTitle' | 'axisSpec' | 'axisStyle' | 'scaleConfigs' | 'settingsSpec' | 'size' | 'dimension' | 'debug'
 >;
 type TitleProps = PanelTitleProps & { anchorPoint: Point };
 
@@ -46,6 +46,7 @@ export function renderTitle(
     axisSpec,
     axisStyle: { axisPanelTitle, axisTitle, tickLabel, tickLine },
     scaleConfigs,
+    settingsSpec: { rotation: chartRotation },
     panelTitle,
     debug,
     anchorPoint,
@@ -64,7 +65,7 @@ export function renderTitle(
   const font: TextFont = { ...titleFontDefaults, ...axisTitleToUse, textColor: axisTitleToUse.fill };
   const tickDimension = shouldShowTicks(tickLine, hideAxis) ? tickLine.size + tickLine.padding : 0;
   const maxLabelBoxGirth = horizontal ? maxLabelBboxHeight : maxLabelBboxWidth;
-  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation: 0 });
+  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation: chartRotation });
   const allLayersGirth = getAllAxisLayersGirth(timeAxisLayerCount, maxLabelBoxGirth, isMultilayerTimeAxis);
   const labelPaddingSum = innerPad(tickLabel.padding) + outerPad(tickLabel.padding);
   const labelSize = tickLabel.visible ? allLayersGirth + labelPaddingSum : 0;

packages/charts/src/chart_types/xy_chart/state/selectors/compute_chart_dimensions.ts

@@ -13,6 +13,7 @@ import { getAxisSpecsSelector } from './get_specs';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
 import { getSmallMultiplesSpec } from '../../../../state/selectors/get_small_multiples_spec';
 import { computeChartDimensions } from '../../utils/dimensions';
 
@@ -26,6 +27,7 @@ export const computeChartDimensionsSelector = createCustomCachedSelector(
     getAxisSpecsSelector,
     getSmallMultiplesSpec,
     getScaleConfigsFromSpecsSelector,
+    getSettingsSpecSelector,
   ],
   computeChartDimensions,
 );

packages/charts/src/chart_types/xy_chart/utils/axis_utils.ts

@@ -272,6 +272,7 @@ export function getPosition(
   smScales: SmallMultipleScales,
   { top: cumTopSum, bottom: cumBottomSum, left: cumLeftSum, right: cumRightSum }: PerSideDistance,
   scaleConfigs: ScaleConfigs,
+  settingsSpec: SettingsSpec,
 ) {
   const { title, position, hide, timeAxisLayerCount } = axisSpec;
   const tickDimension = shouldShowTicks(tickLine, hide) ? tickLine.size + tickLine.padding : 0;
@@ -281,7 +282,7 @@ export function getPosition(
   const scaleBand = vertical ? smScales.vertical : smScales.horizontal;
   const panelTitleDimension = hasSMDomain(scaleBand) ? getTitleDimension(axisPanelTitle) : 0;
   const maxLabelBboxGirth = tickLabel.visible ? (vertical ? maxLabelBboxWidth : maxLabelBboxHeight) : 0;
-  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation: 0 });
+  const isMultilayerTimeAxis = isMultilayerTimeAxisFn({ axisSpec, scaleConfigs, rotation: settingsSpec.rotation });
   const shownLabelSize = getAllAxisLayersGirth(timeAxisLayerCount, maxLabelBboxGirth, isMultilayerTimeAxis);
   const parallelSize = labelPaddingSum + shownLabelSize + tickDimension + titleDimension + panelTitleDimension;
   return {
@@ -306,16 +307,14 @@ export function getPosition(
 
 /** @internal */
 export function isMultilayerTimeAxisFn({
-  axisSpec,
+  axisSpec: { chartType, timeAxisLayerCount, position },
   scaleConfigs,
   rotation,
 }: {
   axisSpec: AxisSpec;
   scaleConfigs: ScaleConfigs;
   rotation: Rotation;
 }) {
-  const { chartType, timeAxisLayerCount, position } = axisSpec;
-
   return (
     chartType === ChartType.XYAxis &&
     timeAxisLayerCount > 0 &&
@@ -341,6 +340,7 @@ export interface AxisGeometry {
     panelTitle?: string; // defined later per panel
     secondary?: boolean; // defined later per panel
     scaleConfigs: ScaleConfigs;
+    settingsSpec: SettingsSpec;
   };
   dimension: TickLabelBounds;
   visibleTicks: AxisTick[];
@@ -355,6 +355,7 @@ export function getAxesGeometries(
   smScales: SmallMultipleScales,
   visibleTicksSet: Map<AxisId, Projection>,
   scaleConfigs: ScaleConfigs,
+  settingsSpec: SettingsSpec,
 ): AxisGeometry[] {
   const panel = getPanelSize(smScales);
   return [...visibleTicksSet].reduce(
@@ -372,13 +373,14 @@ export function getAxesGeometries(
           smScales,
           acc,
           scaleConfigs,
+          settingsSpec,
         );
         acc.top += topIncrement;
         acc.bottom += bottomIncrement;
         acc.left += leftIncrement;
         acc.right += rightIncrement;
         acc.geoms.push({
-          axis: { id: axisSpec.id, position: axisSpec.position, scaleConfigs },
+          axis: { id: axisSpec.id, position: axisSpec.position, scaleConfigs, settingsSpec },
           anchorPoint: { x: dimensions.left, y: dimensions.top },
           dimension: labelBox,
           visibleTicks: ticks,

packages/charts/src/chart_types/xy_chart/utils/dimensions.ts

@@ -8,6 +8,7 @@
 
 import { AxisSpec } from './specs';
 import { SmallMultiplesSpec } from '../../../specs';
+import { SettingsSpec } from '../../../specs/settings';
 import { Dimensions } from '../../../utils/dimensions';
 import { AxisId } from '../../../utils/ids';
 import { Theme, AxisStyle } from '../../../utils/themes/theme';
@@ -41,8 +42,17 @@ export interface ChartDimensions {
   axisSpecs: AxisSpec[],
   smSpec: SmallMultiplesSpec | null,
   scaleConfigs: ScaleConfigs,
+  settingsSpec: SettingsSpec,
 ): ChartDimensions {
-  const axesDimensions = getAxesDimensions(theme, axisTickDimensions, axesStyles, axisSpecs, smSpec, scaleConfigs);
+  const axesDimensions = getAxesDimensions(
+    theme,
+    axisTickDimensions,
+    axesStyles,
+    axisSpecs,
+    smSpec,
+    scaleConfigs,
+    settingsSpec,
+  );
   const chartWidth = parentDimensions.width - axesDimensions.left - axesDimensions.right;
   const chartHeight = parentDimensions.height - axesDimensions.top - axesDimensions.bottom;
   const pad = theme.chartPaddings;