CartesianAxis: Improve interval option 'equidistantPreserveStart'

src/cartesian/CartesianAxis.tsx

@@ -44,7 +44,7 @@
   hide?: boolean;
   label?: any;
 
-  minTickGap?: number;
+  minTickGap?: TickGap;
   ticks?: CartesianTickItem[];
   tickSize?: number;
   tickFormatter?: TickFormatter;

src/cartesian/getEquidistantTicks.ts

@@ -0,0 +1,62 @@
+import { CartesianTickItem, CartesianViewBox, Size } from '../util/types';
+import { mathSign } from '../util/DataUtils';
+import { TickFormatter, TickGap } from './CartesianAxis';
+import { getEveryNthWithCondition } from '../util/getEveryNthWithCondition';
+import { doesTickFitInBetweenStartAndEnd, getInitialStartAndEnd, getSizeOfTick } from '../util/TickUtils';
+
+export function getEquidistantTicks(
+  sizeKey: 'width' | 'height',
+  unitSize: Size,
+  angle?: number,
+  ticks?: CartesianTickItem[],
+  tickFormatter?: TickFormatter,
+  viewBox?: CartesianViewBox,
+  minTickGap?: TickGap,
+  fontSize?: string,
+  letterSpacing?: string,
+): CartesianTickItem[] {
+  const result = (ticks || []).slice();
+  const { length } = result;
+  const sign = length >= 2 ? mathSign(result[1].coordinate - result[0].coordinate) : 1;
+
+  const { start: initialStart, end } = getInitialStartAndEnd(viewBox, sign, sizeKey);
+  let index = 0;
+  // Premature optimisation idea 1: Estimate a lower bound, and start from there.
+  // For now, start from every tick
+  let stepsize = 1;
+  let start = initialStart;
+
+  while (stepsize < result.length) {
+    // Given stepsize, evaluate whether every stepsize-th tick can be shown.
+    // If it can not, then increase the stepsize by 1, and try again.
+
+    const entry = ticks?.[index];
+
+    // Break condition - If we have evaluate all the ticks, then we are done.
+    if (entry === undefined) {
+      return getEveryNthWithCondition(ticks, stepsize);
+    }
+
+    // Check if the element collides with the next element
+    const size = getSizeOfTick(tickFormatter, entry, index, sizeKey, fontSize, letterSpacing, unitSize, angle);
+
+    const tickCoord = entry.coordinate;
+    // We will always show the first tick.
+    const isShow = index === 0 || doesTickFitInBetweenStartAndEnd(sign, tickCoord, size, start, end);
+
+    if (!isShow) {
+      // Start all over with a largerÍ stepsize
+      index = 0;
+      start = initialStart;
+      stepsize += 1;
+    }
+
+    if (isShow) {
+      // If it can be shown, update the start
+      start = tickCoord + sign * (size / 2 + minTickGap);
+      index += stepsize;
+    }
+  }
+
+  return [];
+}

src/cartesian/getTicks.ts

@@ -1,9 +1,9 @@
-import _ from 'lodash';
 import { CartesianTickItem, Size } from '../util/types';
 import { mathSign, isNumber } from '../util/DataUtils';
 import { getStringSize } from '../util/DOMUtils';
 import { Props as CartesianAxisProps } from './CartesianAxis';
 import { Global } from '../util/Global';
+
 import {
   isVisible,
   getEveryNThTick,
@@ -126,7 +126,7 @@
     unit && sizeKey === 'width' ? getStringSize(unit, { fontSize, letterSpacing }) : { width: 0, height: 0 };
 
   const getTickSize = (content: CartesianTickItem, index: number) => {
     const value = _.isFunction(tickFormatter) ? tickFormatter(content.value, index) : content.value;
     // Recharts only supports angles when sizeKey === 'width'
     return sizeKey === 'width'
       ? getAngledTickWidth(getStringSize(value, { fontSize, letterSpacing }), unitSize, angle)
@@ -135,7 +135,21 @@
 
   const sign = ticks.length >= 2 ? mathSign(ticks[1].coordinate - ticks[0].coordinate) : 1;
   const boundaries = getTickBoundaries(viewBox, sign, sizeKey);
-
+
+  if (interval === 'equidistant') {
+    return getEquidistantTicks(
+      sizeKey,
+      unitSize,
+      angle,
+      ticks,
+      tickFormatter,
+      viewBox,
+      minTickGap,
+      fontSize,
+      letterSpacing,
+    );
+  }
+
   if (interval === 'equidistantPreserveStart') {
     candidates = getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap);
 

src/util/TickUtils.ts

@@ -1,4 +1,9 @@
+import _ from 'lodash';
+
+import { TickFormatter } from '../cartesian/CartesianAxis';
+import { getAngledRectangleWidth } from './CartesianUtils';
+import { getStringSize } from './DOMUtils';
 import { getAngledRectangleWidth } from './CartesianUtils';
 import { getEveryNthWithCondition } from './getEveryNthWithCondition';
 import { Size, CartesianViewBox, CartesianTickItem } from './types';
 

src/util/types.ts

@@ -1120,8 +1120,15 @@ export interface BaseAxisProps {
  * 'preserveStartEnd' keeps the left tick on collision and ensures that the first and last ticks are always shown.
  * 'equidistantPreserveStart' computes which ticks are shown according to the 'preserveStart' strategy and
  *  then selects a number N such that every nTh tick will be shown.
+ * 'equidistant' selects a number N such that every nTh tick will be shown without collision.
  */
-export type AxisInterval = number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart';
+export type AxisInterval =
+  | number
+  | 'preserveStart'
+  | 'preserveEnd'
+  | 'preserveStartEnd'
+  | 'equidistantPreserveStart'
+  | 'equidistant';
 
 export interface TickItem {
   value?: any;

storybook/stories/Examples/cartesian/CartesianAxis/TickPositioning.stories.tsx

@@ -8,7 +8,14 @@ export default {
 
 export const TickPositioning = {
   render: () => {
-    const intervalOptions = ['preserveStart', 'preserveEnd', 'preserveStartEnd', 'equidistantPreserveStart', 0];
+    const intervalOptions = [
+      'preserveStart',
+      'preserveEnd',
+      'preserveStartEnd',
+      'equidistantPreserveStart',
+      'equidistant',
+      0,
+    ];
 
     return (
       <ResponsiveContainer>