DRY style and share it from charts plugin

src/plugins/charts/common/index.ts

@@ -34,6 +34,7 @@ export {
   ColorMode,
   LabelRotation,
   defaultCountLabel,
+  MULTILAYER_TIME_AXIS_STYLE,
 } from './static';
 
 export { ColorSchemaParams, Labels, Style } from './types';

src/plugins/charts/common/static/index.ts

@@ -19,3 +19,5 @@ export {
 } from './color_maps';
 
 export { ColorMode, LabelRotation, defaultCountLabel } from './components';
+
+export * from './styles';

src/plugins/charts/common/static/styles/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './multilayer_timeaxis';

src/plugins/charts/common/static/styles/multilayer_timeaxis.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { Position, RecursivePartial, AxisStyle } from '@elastic/charts';
+
+export 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.0001,
+    padding: 4,
+  },
+};

src/plugins/charts/public/static/index.ts

@@ -9,3 +9,4 @@
 export * from './colors';
 export * from './components';
 export * from './utils';
+export * from '../../common/static/styles';

src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx

@@ -23,8 +23,6 @@ import {
   Settings,
   TooltipType,
   XYChartElementEvent,
-  AxisStyle,
-  RecursivePartial,
 } from '@elastic/charts';
 import { IUiSettingsClient } from 'kibana/public';
 import {
@@ -37,7 +35,7 @@ import { DataCharts$, DataChartsMessage } from '../../services/use_saved_search'
 import { FetchStatus } from '../../../../types';
 import { DiscoverServices } from '../../../../../build_services';
 import { useDataState } from '../../utils/use_data_state';
-import { LEGACY_TIME_AXIS } from '../../../../../../../charts/common';
+import { LEGACY_TIME_AXIS, MULTILAYER_TIME_AXIS_STYLE } from '../../../../../../../charts/common';
 
 export interface DiscoverHistogramProps {
   savedSearchData$: DataCharts$;
@@ -184,24 +182,6 @@ export function DiscoverHistogram({
 
   const useLegacyTimeAxis = uiSettings.get(LEGACY_TIME_AXIS, false);
 
-  const xAxisStyle: RecursivePartial<AxisStyle> = useLegacyTimeAxis
-    ? {}
-    : {
-        tickLine: {
-          size: 0.0001,
-          strokeWidth: 1,
-          padding: 4,
-          visible: true,
-        },
-        tickLabel: {
-          padding: 0,
-          alignment: {
-            vertical: Position.Bottom,
-            horizontal: Position.Left,
-          },
-        },
-      };
-
   return (
     <React.Fragment>
       <div className="dscHistogram" data-test-subj="discoverChart" data-time-range={timeRangeText}>
@@ -227,7 +207,7 @@ export function DiscoverHistogram({
             position={Position.Bottom}
             tickFormat={formatXValue}
             timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2}
-            style={xAxisStyle}
+            style={useLegacyTimeAxis ? {} : MULTILAYER_TIME_AXIS_STYLE}
           />
           <CurrentTime isDarkMode={isDarkMode} domainEnd={domainEnd} />
           <Endzones

src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js

@@ -32,7 +32,11 @@ import { getBaseTheme, getChartClasses } from './utils/theme';
 import { TOOLTIP_MODES } from '../../../../../common/enums';
 import { getValueOrEmpty } from '../../../../../common/empty_label';
 import { getSplitByTermsColor } from '../../../lib/get_split_by_terms_color';
-import { renderEndzoneTooltip, useActiveCursor } from '../../../../../../../charts/public';
+import {
+  MULTILAYER_TIME_AXIS_STYLE,
+  renderEndzoneTooltip,
+  useActiveCursor,
+} from '../../../../../../../charts/public';
 import { getAxisLabelString } from '../../../components/lib/get_axis_label_string';
 import { calculateDomainForSeries } from './utils/series_domain_calculation';
 
@@ -147,23 +151,6 @@ export const TimeSeries = ({
 
   const shouldUseNewTimeAxis =
     series.some(({ stack }) => stack !== STACKED_OPTIONS.NONE) && !useLegacyTimeAxis;
-  const xAxisStyle = shouldUseNewTimeAxis
-    ? {
-        tickLabel: {
-          visible: true,
-          padding: 0,
-          alignment: {
-            vertical: Position.Bottom,
-            horizontal: Position.Left,
-          },
-        },
-        tickLine: {
-          size: 0.0001,
-          padding: 4,
-          visible: true,
-        },
-      }
-    : {};
 
   return (
     <Chart ref={chartRef} renderer="canvas" className={classes}>
@@ -354,7 +341,7 @@ export const TimeSeries = ({
         title={getAxisLabelString(interval)}
         tickFormat={xAxisFormatter}
         gridLine={gridLineStyle}
-        style={xAxisStyle}
+        style={shouldUseNewTimeAxis ? MULTILAYER_TIME_AXIS_STYLE : undefined}
         timeAxisLayerCount={shouldUseNewTimeAxis ? 3 : 0}
       />
     </Chart>

src/plugins/vis_types/xy/public/config/get_axis.ts

@@ -8,16 +8,11 @@
 
 import { identity } from 'lodash';
 
-import {
-  AxisSpec,
-  TickFormatter,
-  YDomainRange,
-  ScaleType as ECScaleType,
-  Position,
-} from '@elastic/charts';
+import { AxisSpec, TickFormatter, YDomainRange, ScaleType as ECScaleType } from '@elastic/charts';
 
 import { LabelRotation } from '../../../../charts/public';
 import { BUCKET_TYPES } from '../../../../data/public';
+import { MULTILAYER_TIMEAXIS_STYLE } from '../../../../charts/common';
 
 import {
   Aspect,
@@ -164,18 +159,13 @@ function getAxisStyle(
 ): AxisSpec['style'] {
   return isMultiLayerTimeAxis
     ? {
+        ...MULTILAYER_TIMEAXIS_STYLE,
         tickLabel: {
+          ...MULTILAYER_TIMEAXIS_STYLE.tickLabel,
           visible: Boolean(ticks?.show),
-          rotation: 0, // rotation is disabled on new time axis
-          padding: 0,
-          alignment: {
-            vertical: Position.Bottom,
-            horizontal: Position.Left,
-          },
         },
         tickLine: {
-          size: 0.0001,
-          padding: 4,
+          ...MULTILAYER_TIMEAXIS_STYLE.tickLine,
           visible: Boolean(ticks?.show),
         },
         axisTitle: {
@@ -187,7 +177,7 @@ function getAxisStyle(
           visible: (title ?? '').trim().length > 0,
         },
         tickLabel: {
-          visible: ticks?.show,
+          visible: Boolean(ticks?.show),
           rotation: -(ticks?.rotation ?? rotationFallback),
         },
       };

x-pack/plugins/lens/public/xy_visualization/expression.tsx

@@ -54,6 +54,7 @@ import { search } from '../../../../../src/plugins/data/public';
 import {
   ChartsPluginSetup,
   ChartsPluginStart,
+  MULTILAYER_TIME_AXIS_STYLE,
   PaletteRegistry,
   SeriesLayer,
   useActiveCursor,
@@ -569,18 +570,13 @@ export function XYChart({
   };
   const xAxisStyle: RecursivePartial<AxisStyle> = shouldUseNewTimeAxis
     ? {
+        ...MULTILAYER_TIME_AXIS_STYLE,
         tickLabel: {
+          ...MULTILAYER_TIME_AXIS_STYLE.tickLabel,
           visible: Boolean(tickLabelsVisibilitySettings?.x),
-          rotation: 0, // rotation is disabled on new time axis
-          padding: 0,
-          alignment: {
-            vertical: Position.Bottom,
-            horizontal: Position.Left,
-          },
         },
         tickLine: {
-          size: 0.0001,
-          padding: 4,
+          ...MULTILAYER_TIME_AXIS_STYLE.tickLine,
           visible: Boolean(tickLabelsVisibilitySettings?.x),
         },
         axisTitle: {