diff --git a/src/plugins/charts/common/index.ts b/src/plugins/charts/common/index.ts index d06dbc73e29b1..936ad2d10ac64 100644 --- a/src/plugins/charts/common/index.ts +++ b/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'; diff --git a/src/plugins/charts/common/static/index.ts b/src/plugins/charts/common/static/index.ts index 9cde3bafe59e4..ac706ac7869c5 100644 --- a/src/plugins/charts/common/static/index.ts +++ b/src/plugins/charts/common/static/index.ts @@ -19,3 +19,5 @@ export { } from './color_maps'; export { ColorMode, LabelRotation, defaultCountLabel } from './components'; + +export * from './styles'; diff --git a/src/plugins/charts/common/static/styles/index.ts b/src/plugins/charts/common/static/styles/index.ts new file mode 100644 index 0000000000000..688103322c53f --- /dev/null +++ b/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'; diff --git a/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts b/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts new file mode 100644 index 0000000000000..02a5533f53fca --- /dev/null +++ b/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 = { + tickLabel: { + visible: true, + padding: 0, + rotation: 0, + alignment: { + vertical: Position.Bottom, + horizontal: Position.Left, + }, + }, + tickLine: { + visible: true, + size: 0.0001, + padding: 4, + }, +}; diff --git a/src/plugins/charts/public/static/index.ts b/src/plugins/charts/public/static/index.ts index 6f5c87ce0df4d..53078eebe9c56 100644 --- a/src/plugins/charts/public/static/index.ts +++ b/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'; diff --git a/src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx b/src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx index 32058e8889ac5..e35201651d5a7 100644 --- a/src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx +++ b/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 = useLegacyTimeAxis - ? {} - : { - tickLine: { - size: 0.0001, - strokeWidth: 1, - padding: 4, - visible: true, - }, - tickLabel: { - padding: 0, - alignment: { - vertical: Position.Bottom, - horizontal: Position.Left, - }, - }, - }; - return (
@@ -227,7 +207,7 @@ export function DiscoverHistogram({ position={Position.Bottom} tickFormat={formatXValue} timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2} - style={xAxisStyle} + style={useLegacyTimeAxis ? {} : MULTILAYER_TIME_AXIS_STYLE} /> 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 ( @@ -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} /> diff --git a/src/plugins/vis_types/xy/public/config/get_axis.ts b/src/plugins/vis_types/xy/public/config/get_axis.ts index 7729d217bd9fa..97f2b1805701f 100644 --- a/src/plugins/vis_types/xy/public/config/get_axis.ts +++ b/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), }, }; diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx index ee9f4457d5baa..5e552faf78eb9 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx +++ b/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 = 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: {