fix style application

elastic · Jan 14, 2025 · fd7ac96 · fd7ac96
1 parent 2a9c10c
commit fd7ac96
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git a/packages/charts/src/chart_types/xy_chart/specs/axis.ts b/packages/charts/src/chart_types/xy_chart/specs/axis.ts
@@ -11,28 +11,9 @@ import { ComponentProps } from 'react';
 import { ChartType } from '../..';
 import { SpecType } from '../../../specs/constants';
 import { specComponentFactory } from '../../../state/spec_factory';
-import { Position, type RecursivePartial } from '../../../utils/common';
-import type { AxisStyle } from '../../../utils/themes/theme';
+import { Position } from '../../../utils/common';
 import { AxisSpec, DEFAULT_GLOBAL_ID } from '../utils/specs';
 
-/** @internal */
-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,
-  },
-};
-
 /**
  * Add axis spec to chart
  * @public
@@ -48,7 +29,6 @@ export const Axis = specComponentFactory<AxisSpec>()(
     showOverlappingTicks: false,
     showOverlappingLabels: false,
     position: Position.Left,
-    style: MULTILAYER_TIME_AXIS_STYLE,
     timeAxisLayerCount: 2,
   },
 );

diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_axis_styles.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_axis_styles.ts
@@ -9,17 +9,44 @@
 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 { mergePartial, Position, type RecursivePartial } from '../../../../utils/common';
 import { AxisId } from '../../../../utils/ids';
 import { AxisStyle } from '../../../../utils/themes/theme';
 import { isVerticalAxis } from '../../utils/axis_type_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 }) => {
+    axesSpecs.reduce((axesStyles, { id, style, gridLine, position, timeAxisLayerCount }) => {
+      const timeAxisStyle = timeAxisLayerCount > 0 ? MULTILAYER_TIME_AXIS_STYLE : undefined;
       const gridStyle = gridLine && { gridLine: { [isVerticalAxis(position) ? 'vertical' : 'horizontal']: gridLine } };
-      return axesStyles.set(id, style ? mergePartial(sharedAxesStyle, { ...style, ...gridStyle }) : null);
+      return axesStyles.set(
+        id,
+        style || timeAxisStyle
+          ? mergePartial(sharedAxesStyle, {
+              ...(style ? style : {}),
+              ...(timeAxisStyle ? timeAxisStyle : {}),
+              ...gridStyle,
+            })
+          : null,
+      );
     }, new Map()),
 );