CartesianAxis: Improve interval option 'equidistantPreserveStart'

src/cartesian/getEquidistantTicks.ts

@@ -0,0 +1,55 @@
+import { isVisible } from '../util/TickUtils';
+import { CartesianTickItem } from '../util/types';
+import { getEveryNthWithCondition } from '../util/getEveryNthWithCondition';
+import { Sign } from './getTicks';
+
+export function getEquidistantTicks(
+  sign: Sign,
+  boundaries: { start: number; end: number },
+  getTickSize: (tick: CartesianTickItem, index: number) => number,
+  ticks: CartesianTickItem[],
+  minTickGap: number,
+): CartesianTickItem[] {
+  const result = (ticks || []).slice();
+
+  const { start: initialStart, end } = boundaries;
+  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 = getTickSize(entry, index);
+
+    const tickCoord = entry.coordinate;
+    // We will always show the first tick.
+    const isShow = index === 0 || isVisible(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

@@ -11,8 +11,9 @@ import {
   getNumberIntervalTicks,
   getAngledTickWidth,
 } from '../util/TickUtils';
+import { getEquidistantTicks } from './getEquidistantTicks';
 
-type Sign = 0 | 1 | -1;
+export type Sign = 0 | 1 | -1;
 
 function getTicksEnd(
   sign: Sign,
@@ -136,6 +137,10 @@ export function getTicks(props: CartesianAxisProps, fontSize?: string, letterSpa
   const sign = ticks.length >= 2 ? mathSign(ticks[1].coordinate - ticks[0].coordinate) : 1;
   const boundaries = getTickBoundaries(viewBox, sign, sizeKey);
 
+  if (interval === 'equidistant') {
+    return getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap);
+  }
+
   if (interval === 'equidistantPreserveStart') {
     candidates = getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap);
 

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,11 +8,27 @@ export default {
 
 export const TickPositioning = {
   render: () => {
-    const intervalOptions = ['preserveStart', 'preserveEnd', 'preserveStartEnd', 'equidistantPreserveStart', 0];
+    const intervalOptions = [
+      'preserveStart',
+      'preserveEnd',
+      'preserveStartEnd',
+      'equidistantPreserveStart',
+      'equidistant',
+      0,
+    ];
 
     return (
       <ResponsiveContainer>
-        <LineChart data={ticks}>
+        <LineChart
+          data={ticks}
+          // Margins are neccessary to show ticks that extend beyond the chart (i.e. last and first tick).
+          margin={{
+            top: 20,
+            right: 30,
+            left: 20,
+            bottom: 20,
+          }}
+        >
           <Line dataKey="coordinate" />
           {intervalOptions.map((intervalOption, index) => (
             <XAxis

test/cartesian/getEquidistantTicks.spec.ts

@@ -0,0 +1,40 @@
+// unit test for getEquidisantTicks
+
+import _ from 'lodash';
+import { getEquidistantTicks } from '../../src/cartesian/getEquidistantTicks';
+import { CartesianTickItem } from '../../src/util/types';
+
+describe('getEquidistantTicks', () => {
+  // We mock getting the tick width by simply using the value of the tick.
+  // This makes testing rather easy and intuitive.
+  const getTickSize = (tick: CartesianTickItem) => {
+    return tick.value;
+  };
+
+  it('should return empty array if no ticks are passed', () => {
+    const result = getEquidistantTicks(1, { start: 0, end: 100 }, getTickSize, [], 0);
+    expect(result).toEqual([]);
+  });
+
+  test.each([
+    // If all ticks fit, we show all ticks
+    { ticksThatFit: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], resultingTicks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
+    { ticksThatFit: [0, 1, 2, 3, 4, 5, 6, 7, 8], resultingTicks: [0, 2, 4, 6, 8] },
+    { ticksThatFit: [0, 1, 2, 3, 4, 5, 6, 7], resultingTicks: [0, 5] },
+    { ticksThatFit: [0, 1, 2, 3, 4, 5, 6], resultingTicks: [0, 5] },
+    { ticksThatFit: [0, 1, 2, 3, 4, 5], resultingTicks: [0, 5] },
+    { ticksThatFit: [0, 1, 2, 3, 4], resultingTicks: [0] },
+    { ticksThatFit: [0, 1, 2, 3], resultingTicks: [0] },
+    { ticksThatFit: [0, 1, 2], resultingTicks: [0] },
+    { ticksThatFit: [0, 1], resultingTicks: [0] },
+    { ticksThatFit: [0], resultingTicks: [0] },
+    // We always show the first tick, even if it does not fit
+    { ticksThatFit: [1, 2, 3, 4, 5, 6, 7, 8, 9], resultingTicks: [0] },
+  ])('Show only every n-th tick that fits, but always show the first.', ({ ticksThatFit, resultingTicks }) => {
+    const ticks = _.range(0, 10).map(index => {
+      return { value: ticksThatFit.includes(index) ? 10 : 1000, coordinate: index * 50 };
+    });
+    const result = getEquidistantTicks(1, { start: 0, end: 10 * 50 }, getTickSize, ticks, 0);
+    expect(result).toEqual(resultingTicks.map(index => ticks[index]));
+  });
+});