diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/linear-nicing-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/linear-nicing-chrome-linux.png new file mode 100644 index 00000000000..c61fab95b07 Binary files /dev/null and b/e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/linear-nicing-chrome-linux.png differ diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/visible_ticks.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/visible_ticks.ts index 661a601f39b..d82710fc723 100644 --- a/packages/charts/src/chart_types/xy_chart/state/selectors/visible_ticks.ts +++ b/packages/charts/src/chart_types/xy_chart/state/selectors/visible_ticks.ts @@ -52,7 +52,7 @@ export type GetMeasuredTicks = ( type Projections = Map; -const adaptiveTickCount = true; +const USE_ADAPTIVE_TICK_COUNT = true; function axisMinMax(axisPosition: Position, chartRotation: Rotation, { width, height }: Size): [number, number] { const horizontal = isHorizontalAxis(axisPosition); @@ -117,6 +117,7 @@ function getVisibleTicks( layer: number | undefined, detailedLayer: number, ticks: (number | string)[], + adaptiveTickCount: boolean, multilayerTimeAxis: boolean = false, showGrid = true, ): AxisTick[] { @@ -200,6 +201,7 @@ function getVisibleTickSet( detailedLayer: number, ticks: (number | string)[], labelFormatter: AxisLabelFormatter, + adaptiveTickCount: boolean, multilayerTimeAxis = false, showGrid = true, ): AxisTick[] { @@ -218,6 +220,7 @@ function getVisibleTickSet( layer, detailedLayer, ticks, + adaptiveTickCount, multilayerTimeAxis, showGrid, ); @@ -260,6 +263,8 @@ function getVisibleTickSets( const multilayerTimeAxis = isMultilayerTimeAxis(axisSpec, scaleConfigs.x.type, chartRotation); // TODO: remove this fallback when integersOnly is removed const maximumFractionDigits = mfd ?? (integersOnly ? 0 : undefined); + const isNice = (isXAxis ? scaleConfigs.x.nice : scaleConfigs.y[groupId]?.nice) ?? false; + const adaptiveTickCount = !isNice && USE_ADAPTIVE_TICK_COUNT; const getMeasuredTicks = ( scale: ScaleBand | ScaleContinuous, @@ -282,6 +287,7 @@ function getVisibleTickSets( detailedLayer, ticks, labelFormatter, + adaptiveTickCount, multilayerTimeAxis, showGrid, ), diff --git a/storybook/stories/test_cases/15_linear_nicing.story.tsx b/storybook/stories/test_cases/15_linear_nicing.story.tsx new file mode 100644 index 00000000000..77d21ff8bf9 --- /dev/null +++ b/storybook/stories/test_cases/15_linear_nicing.story.tsx @@ -0,0 +1,52 @@ +/* + * 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 { boolean } from '@storybook/addon-knobs'; +import React from 'react'; + +import { Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts'; +import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils'; + +import type { ChartsStory } from '../../types'; +import { useBaseTheme } from '../../use_base_theme'; + +const rng = getRandomNumberGenerator(); + +// This data is carefully picked to trigger adaptive tick placements +// See https://github.com/elastic/elastic-charts/issues/2687 +const data = new Array(20).fill(1).map((_, i) => ({ + x: i === 0 ? -1e6 : (i - 1) * 13e6, + y: (i === 0 ? 0 : i === 2 ? -5.2 : i === 12 ? 21 : rng(-4, 20)) * 1e5, +})); + +export const Example: ChartsStory = (_, { title, description }) => { + const xNice = boolean('Nice x ticks', true); + const yNice = boolean('Nice y ticks', true); + + return ( + + + + + + + ); +}; + +Example.parameters = { + resize: true, +}; diff --git a/storybook/stories/test_cases/test_cases.stories.tsx b/storybook/stories/test_cases/test_cases.stories.tsx index f0384d68cd5..2da5430f2a5 100644 --- a/storybook/stories/test_cases/test_cases.stories.tsx +++ b/storybook/stories/test_cases/test_cases.stories.tsx @@ -26,4 +26,5 @@ export { Example as startDayOfWeek } from './11_start_day_of_week.story'; export { Example as logWithNegativeValues } from './12_log_with_negative_values.story'; export { Example as pointStyleOverrides } from './13_point_style_overrides.story'; export { Example as errorBoundary } from './14_error_boundary.story'; +export { Example as linearNicing } from './15_linear_nicing.story'; export { Example as lensStressTest } from './33_lens_stress.story';