fix(axis): disable nice adaptive ticks (#2689)

Author: nickofthyme

e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/linear-nicing-chrome-linux.png

@@ -52,7 +52,7 @@ export type GetMeasuredTicks = (
 
 type Projections = Map<AxisId, Projection>;
 
-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,
             ),

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

@@ -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 (
+    <Chart title={title} description={description}>
+      <Settings baseTheme={useBaseTheme()} />
+      <Axis id="x" position={Position.Bottom} />
+      <Axis id="y" position={Position.Left} style={{ tickLabel: { rotation: -90 } }} />
+      <LineSeries
+        id="line-1"
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        data={data}
+        xNice={xNice}
+        yNice={yNice}
+        xAccessor="x"
+        yAccessors={['y']}
+      />
+    </Chart>
+  );
+};
+
+Example.parameters = {
+  resize: true,
+};

storybook/stories/test_cases/15_linear_nicing.story.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';