feat(xy)!: change timeAxisLayerCount the default from 0 to 2

docs/docs/api/specs/xy/axis.mdx

@@ -132,7 +132,7 @@ Show duplicated ticks
 
 ### `timeAxisLayerCount`
 - Type: <code>timeAxisLayerCount: number</code>
-- Default: `0`
+- Default: `2`
 - tag: `@alpha`
 
 Render a multi-layer time axis. Use 2 or 3 as valid number of layers. Use 0 to use the alternative, one row, time axis.

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

@@ -6,7 +6,9 @@
  * Side Public License, v 1.
  */
 
+import type { ScaleType } from '../../../scales/constants';
 import type { SmallMultiplesSpec } from '../../../specs';
+import type { Rotation } from '../../../utils/common';
 import { Position } from '../../../utils/common';
 import type { PerSideDistance } from '../../../utils/dimensions';
 import { innerPad, outerPad } from '../../../utils/dimensions';
@@ -16,7 +18,7 @@ import type { AxesTicksDimensions } from '../state/selectors/compute_axis_ticks_
 import { getSpecsById } from '../state/utils/spec';
 import { isHorizontalAxis, isVerticalAxis } from '../utils/axis_type_utils';
 import type { TickLabelBounds } from '../utils/axis_utils';
-import { getAllAxisLayersGirth, getTitleDimension, shouldShowTicks } from '../utils/axis_utils';
+import { getAllAxisLayersGirth, getTitleDimension, isMultilayerTimeAxis, shouldShowTicks } from '../utils/axis_utils';
 import type { AxisSpec } from '../utils/specs';
 
 const getAxisSizeForLabel = (
@@ -25,11 +27,12 @@ const getAxisSizeForLabel = (
   axesStyles: Map<AxisId, AxisStyle | null>,
   { maxLabelBboxWidth = 0, maxLabelBboxHeight = 0 }: TickLabelBounds,
   smSpec: SmallMultiplesSpec | null,
+  multilayerTimeAxis: boolean,
 ) => {
   const { tickLine, axisTitle, axisPanelTitle, tickLabel } = axesStyles.get(axisSpec.id) ?? sharedAxesStyles;
   const horizontal = isHorizontalAxis(axisSpec.position);
   const maxLabelBoxGirth = horizontal ? maxLabelBboxHeight : maxLabelBboxWidth;
-  const allLayersGirth = getAllAxisLayersGirth(axisSpec.timeAxisLayerCount, maxLabelBoxGirth, horizontal);
+  const allLayersGirth = getAllAxisLayersGirth(axisSpec.timeAxisLayerCount, maxLabelBoxGirth, multilayerTimeAxis);
   const hasPanelTitle = isVerticalAxis(axisSpec.position) ? smSpec?.splitVertically : smSpec?.splitHorizontally;
   const panelTitleDimension = hasPanelTitle ? getTitleDimension(axisPanelTitle) : 0;
   const titleDimension = axisSpec.title ? getTitleDimension(axisTitle) : 0;
@@ -41,7 +44,7 @@ const getAxisSizeForLabel = (
   // don't overflow when the multiTimeAxis layer is used.
   const maxLabelBoxHalfLength = isVerticalAxis(axisSpec.position)
     ? maxLabelBboxHeight / 2
-    : axisSpec.timeAxisLayerCount > 0
+    : multilayerTimeAxis
       ? 0
       : maxLabelBboxWidth / 2;
   return horizontal
@@ -66,13 +69,23 @@ export function getAxesDimensions(
   axesStyles: Map<AxisId, AxisStyle | null>,
   axisSpecs: AxisSpec[],
   smSpec: SmallMultiplesSpec | null,
+  xScaleType: ScaleType,
+  rotation: Rotation,
 ): PerSideDistance & { margin: { left: number } } {
   const sizes = [...axisDimensions].reduce(
     (acc, [id, tickLabelBounds]) => {
       const axisSpec = getSpecsById<AxisSpec>(axisSpecs, id);
       if (tickLabelBounds.isHidden || !axisSpec) return acc;
+      const multilayerTimeAxis = isMultilayerTimeAxis(axisSpec, xScaleType, rotation);
       // TODO use first and last labels
-      const { top, bottom, left, right } = getAxisSizeForLabel(axisSpec, theme, axesStyles, tickLabelBounds, smSpec);
+      const { top, bottom, left, right } = getAxisSizeForLabel(
+        axisSpec,
+        theme,
+        axesStyles,
+        tickLabelBounds,
+        smSpec,
+        multilayerTimeAxis,
+      );
       if (isVerticalAxis(axisSpec.position)) {
         acc.axisLabelOverflow.top = Math.max(acc.axisLabelOverflow.top, top);
         acc.axisLabelOverflow.bottom = Math.max(acc.axisLabelOverflow.bottom, bottom);

packages/charts/src/chart_types/xy_chart/legend/legend.test.ts

@@ -71,7 +71,7 @@ const axisSpec: AxisSpec = {
   position: Position.Left,
   style,
   tickFormat: (value: any) => `${value}`,
-  timeAxisLayerCount: 0,
+  timeAxisLayerCount: 2,
 };
 axesSpecs.push(axisSpec);
 

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

@@ -27,6 +27,7 @@ export interface AxisProps {
   debug: boolean;
   renderingArea: Dimensions;
   layerGirth: number;
+  multilayerTimeAxis: boolean;
 }
 
 /** @internal */

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

@@ -31,16 +31,12 @@ export function renderTicks(ctx: CanvasRenderingContext2D, ticks: AxisTick[], ax
 }
 
 function getTickLineCoordinates(
-  { position, domainClampedPosition: tickPosition, layer, detailedLayer }: AxisTick,
-  {
-    axisSpec: { position: axisPosition, timeAxisLayerCount },
-    size: { width, height },
-    axisStyle: { tickLine },
-    layerGirth,
-  }: AxisProps,
+  { position, domainClampedPosition: tickPosition, layer, detailedLayer, multilayerTimeAxis }: AxisTick,
+  { axisSpec, size: { width, height }, axisStyle: { tickLine }, layerGirth }: AxisProps,
 ): Line | undefined {
   if (Math.abs(tickPosition - position) > OUTSIDE_RANGE_TOLERANCE) return;
-  const tickOnTheSide = timeAxisLayerCount > 0 && typeof layer === 'number';
+  const { position: axisPosition } = axisSpec;
+  const tickOnTheSide = multilayerTimeAxis && typeof layer === 'number';
   const extensionLayer = tickOnTheSide ? layer + 1 : 0;
   const tickSize =
     tickLine.size +

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

@@ -20,9 +20,10 @@ export function renderTickLabel(
   ctx: CanvasRenderingContext2D,
   tick: AxisTick,
   showTicks: boolean,
-  { axisSpec: { position, timeAxisLayerCount }, dimension, size, debug, axisStyle }: AxisProps,
+  { axisSpec, dimension, size, debug, axisStyle }: AxisProps,
   layerGirth: number,
 ) {
+  const { position } = axisSpec;
   const labelStyle = axisStyle.tickLabel;
   const tickLabelProps = getTickLabelPosition(
     axisStyle,
@@ -48,7 +49,7 @@ export function renderTickLabel(
     }
   }
 
-  const tickOnTheSide = timeAxisLayerCount > 0 && Number.isFinite(tick.layer);
+  const tickOnTheSide = tick.multilayerTimeAxis && Number.isFinite(tick.layer);
 
   renderText(
     ctx,

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

@@ -35,7 +35,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 } = props;
+  const { size, anchorPoint, debug, axisStyle, axisSpec, panelAnchor, secondary, multilayerTimeAxis } = 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;
@@ -49,7 +49,16 @@ function renderPanel(ctx: CanvasRenderingContext2D, props: AxisProps, locale: st
       renderTitle(
         ctx,
         true,
-        { panelTitle, axisSpec, axisStyle, size, dimension, debug, anchorPoint: { x: 0, y: 0 } },
+        {
+          panelTitle,
+          axisSpec,
+          axisStyle,
+          size,
+          multilayerTimeAxis,
+          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?
     }
@@ -64,7 +73,7 @@ export function renderPanelSubstrates(ctx: CanvasRenderingContext2D, props: Axes
   perPanelAxisGeoms.forEach(({ axesGeoms, panelAnchor }) => {
     axesGeoms.forEach((geometry) => {
       const {
-        axis: { panelTitle, id, position, secondary },
+        axis: { panelTitle, id, position, secondary, multilayerTimeAxis },
         anchorPoint,
         size,
         dimension,
@@ -84,7 +93,16 @@ export function renderPanelSubstrates(ctx: CanvasRenderingContext2D, props: Axes
         renderTitle(
           ctx,
           false,
-          { size: parentSize, debug, panelTitle, anchorPoint, dimension, axisStyle, axisSpec },
+          {
+            size: parentSize,
+            debug,
+            panelTitle,
+            anchorPoint,
+            dimension,
+            axisStyle,
+            axisSpec,
+            multilayerTimeAxis,
+          },
           locale,
         );
       }
@@ -106,6 +124,7 @@ export function renderPanelSubstrates(ctx: CanvasRenderingContext2D, props: Axes
           debug,
           renderingArea,
           layerGirth,
+          multilayerTimeAxis,
         },
         locale,
       );

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

@@ -18,7 +18,10 @@ import { isHorizontalAxis } from '../../../utils/axis_type_utils';
 import { getAllAxisLayersGirth, getTitleDimension, shouldShowTicks } from '../../../utils/axis_utils';
 import type { AxisProps } from '../axes/axis_props';
 
-type PanelTitleProps = Pick<AxisProps, 'panelTitle' | 'axisSpec' | 'axisStyle' | 'size' | 'dimension' | 'debug'>;
+type PanelTitleProps = Pick<
+  AxisProps,
+  'panelTitle' | 'axisSpec' | 'axisStyle' | 'size' | 'dimension' | 'debug' | 'multilayerTimeAxis'
+>;
 type TitleProps = PanelTitleProps & { anchorPoint: Point };
 
 const titleFontDefaults: Omit<TextFont, 'fontFamily' | 'textColor' | 'fontSize'> = {
@@ -36,14 +39,16 @@ export function renderTitle(
   {
     size: { width, height },
     dimension: { maxLabelBboxWidth, maxLabelBboxHeight },
-    axisSpec: { position, hide: hideAxis, title, timeAxisLayerCount },
+    axisSpec,
     axisStyle: { axisPanelTitle, axisTitle, tickLabel, tickLine },
     panelTitle,
     debug,
     anchorPoint,
+    multilayerTimeAxis,
   }: TitleProps,
   locale: string,
 ) {
+  const { position, hide: hideAxis, title, timeAxisLayerCount } = axisSpec;
   const titleToRender = panel ? panelTitle : title;
   const axisTitleToUse = panel ? axisPanelTitle : axisTitle;
   if (!titleToRender || !axisTitleToUse.visible) {
@@ -55,7 +60,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 allLayersGirth = getAllAxisLayersGirth(timeAxisLayerCount, maxLabelBoxGirth, horizontal);
+  const allLayersGirth = getAllAxisLayersGirth(timeAxisLayerCount, maxLabelBoxGirth, multilayerTimeAxis);
   const labelPaddingSum = innerPad(tickLabel.padding) + outerPad(tickLabel.padding);
   const labelSize = tickLabel.visible ? allLayersGirth + labelPaddingSum : 0;
   const otherTitleDimension = otherTitle ? getTitleDimension(otherAxisTitleToUse) : 0;

packages/charts/src/chart_types/xy_chart/specs/axis.ts

@@ -30,7 +30,7 @@ export const Axis = specComponentFactory<AxisSpec>()(
     showOverlappingTicks: false,
     showOverlappingLabels: false,
     position: Position.Left,
-    timeAxisLayerCount: 0,
+    timeAxisLayerCount: 2,
   },
 );
 

packages/charts/src/chart_types/xy_chart/specs/bar_series.ts

@@ -47,7 +47,14 @@ export const BarSeries = function <D extends BaseDatum = Datum>(
   >,
 ) {
   const { defaults, overrides } = buildProps;
-  useSpecFactory<BarSeriesSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  const constraints: Pick<typeof props, 'enableHistogramMode'> = {};
+
+  // enable histogram mode for time scales to align with the multi-layer time axis.
+  if (props.xScaleType === ScaleType.Time) {
+    constraints.enableHistogramMode = true;
+  }
+
+  useSpecFactory<BarSeriesSpec<D>>({ ...defaults, ...stripUndefined(props), ...overrides, ...constraints });
   return null;
 };
 

packages/charts/src/chart_types/xy_chart/state/chart_state.interactions.test.tsx

@@ -767,7 +767,7 @@ describe('Chart state pointer interactions', () => {
           showOverlappingLabels: false,
           showOverlappingTicks: false,
           style,
-          timeAxisLayerCount: 0,
+          timeAxisLayerCount: 2,
         };
         bottomAxis = {
           chartType: ChartType.XYAxis,
@@ -780,7 +780,7 @@ describe('Chart state pointer interactions', () => {
           showOverlappingLabels: false,
           showOverlappingTicks: false,
           style,
-          timeAxisLayerCount: 0,
+          timeAxisLayerCount: 2,
         };
         currentSettingSpec = getSettingsSpecSelector(store.getState());
       });

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

@@ -7,12 +7,14 @@
  */
 
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
+import { getScaleConfigsFromSpecsSelector } from './get_api_scale_configs';
 import { getAxesStylesSelector } from './get_axis_styles';
 import { axisSpecsLookupSelector } from './get_specs';
 import { getVisibleTickSetsSelector } from './visible_ticks';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { computeSmallMultipleScalesSelector } from '../../../../state/selectors/compute_small_multiple_scales';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
 import { getAxesGeometries } from '../../utils/axis_utils';
 
 /** @internal */
@@ -24,6 +26,8 @@ export const computeAxesGeometriesSelector = createCustomCachedSelector(
     getAxesStylesSelector,
     computeSmallMultipleScalesSelector,
     getVisibleTickSetsSelector,
+    getScaleConfigsFromSpecsSelector,
+    getSettingsSpecSelector,
   ],
   getAxesGeometries,
 );

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

@@ -7,11 +7,13 @@
  */
 
 import { computeAxisTicksDimensionsSelector } from './compute_axis_ticks_dimensions';
+import { getScaleConfigsFromSpecsSelector } from './get_api_scale_configs';
 import { getAxesStylesSelector } from './get_axis_styles';
 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';
 
@@ -24,6 +26,8 @@ export const computeChartDimensionsSelector = createCustomCachedSelector(
     getAxesStylesSelector,
     getAxisSpecsSelector,
     getSmallMultiplesSpec,
+    getScaleConfigsFromSpecsSelector,
+    getSettingsSpecSelector,
   ],
   computeChartDimensions,
 );

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

@@ -6,20 +6,55 @@
  * Side Public License, v 1.
  */
 
+import { getScaleConfigsFromSpecsSelector } from './get_api_scale_configs';
 import { getAxisSpecsSelector } from './get_specs';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
-import { mergePartial } from '../../../../utils/common';
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
+import type { RecursivePartial } from '../../../../utils/common';
+import { mergePartial, Position } from '../../../../utils/common';
 import type { AxisId } from '../../../../utils/ids';
 import type { AxisStyle } from '../../../../utils/themes/theme';
 import { isVerticalAxis } from '../../utils/axis_type_utils';
+import { isMultilayerTimeAxis } from '../../utils/axis_utils';
+
+const MULTILAYER_TIME_AXIS_STYLE: RecursivePartial<AxisStyle> = {
+  tickLabel: {
+    visible: true,
+    padding: 0,
+    rotation: 0,
+    alignment: {
+      vertical: Position.Bottom,
+      horizontal: Position.Left,
+    },
+  },
+  tickLine: {
+    visible: true,
+    size: 0,
+    padding: 4,
+  },
+};
 
 /** @internal */
 export const getAxesStylesSelector = createCustomCachedSelector(
-  [getAxisSpecsSelector, getChartThemeSelector],
-  (axesSpecs, { axes: sharedAxesStyle }): Map<AxisId, AxisStyle | null> =>
-    axesSpecs.reduce((axesStyles, { id, style, gridLine, position }) => {
-      const gridStyle = gridLine && { gridLine: { [isVerticalAxis(position) ? 'vertical' : 'horizontal']: gridLine } };
-      return axesStyles.set(id, style ? mergePartial(sharedAxesStyle, { ...style, ...gridStyle }) : null);
+  [getAxisSpecsSelector, getChartThemeSelector, getScaleConfigsFromSpecsSelector, getSettingsSpecSelector],
+  (axesSpecs, { axes: sharedAxesStyle }, scaleConfigs, settingsSpec): Map<AxisId, AxisStyle | null> =>
+    axesSpecs.reduce((axesStyles, axisSpec) => {
+      const { id, position, style, gridLine } = axisSpec;
+      let mergedStyle: AxisStyle | null = null;
+
+      // apply multilayer time axis style to xy charts with time on the x axis.
+      if (isMultilayerTimeAxis(axisSpec, scaleConfigs.x.type, settingsSpec.rotation)) {
+        mergedStyle = mergePartial(sharedAxesStyle, MULTILAYER_TIME_AXIS_STYLE);
+      }
+
+      if (style) {
+        const gridStyle = gridLine && {
+          gridLine: { [isVerticalAxis(position) ? 'vertical' : 'horizontal']: gridLine },
+        };
+        mergedStyle = mergePartial(mergedStyle ?? sharedAxesStyle, { ...style, ...gridStyle });
+      }
+
+      return axesStyles.set(id, mergedStyle);
     }, new Map()),
 );