Automatically adjust stepRatioScale to fix weired behaviour when calculating yAxis-domain

src/util/scale/getNiceTickValues.ts

@@ -7,6 +7,10 @@ import Decimal from 'decimal.js-light';
 import { compose, range, memoize, map, reverse } from './util/utils';
 import { getDigitCount, rangeStep } from './util/arithmetic';
 
+const MIN_SCALE_RATIO = 0.02;
+const SCALE_RATIO_DECREMENT = 0.01;
+const STEP_THRESHOLD_FACTOR = 0.7;
+
 /**
  * Calculate a interval of a minimum value and a maximum value
  *
@@ -45,12 +49,23 @@ export const getFormatStep = (roughStep: Decimal, allowDecimals: boolean, correc
   const digitCountValue = new Decimal(10).pow(digitCount);
   const stepRatio = roughStep.div(digitCountValue);
   // When an integer and a float multiplied, the accuracy of result may be wrong
-  const stepRatioScale = digitCount !== 1 ? 0.05 : 0.1;
-  const amendStepRatio = new Decimal(Math.ceil(stepRatio.div(stepRatioScale).toNumber()))
-    .add(correctionFactor)
-    .mul(stepRatioScale);
+  let stepRatioScale = digitCount !== 1 ? 0.05 : 0.1;
+
+  let formatStep: Decimal;
+
+  while (stepRatioScale > MIN_SCALE_RATIO) {
+    const amendStepRatio = new Decimal(Math.ceil(stepRatio.div(stepRatioScale).toNumber()))
+      .add(correctionFactor)
+      .mul(stepRatioScale);
+
+    formatStep = amendStepRatio.mul(digitCountValue);
 
-  const formatStep = amendStepRatio.mul(digitCountValue);
+    if (formatStep.mul(STEP_THRESHOLD_FACTOR).lt(roughStep)) {
+      break;
+    }
+
+    stepRatioScale -= SCALE_RATIO_DECREMENT;
+  }
 
   return allowDecimals ? new Decimal(formatStep.toNumber()) : new Decimal(Math.ceil(formatStep.toNumber()));
 };
@@ -165,6 +180,7 @@ export const calculateStep = (
  * @param  {Number}  min, max      min: The minimum value, max: The maximum value
  * @param  {Integer} tickCount     The count of ticks
  * @param  {Boolean} allowDecimals Allow the ticks to be decimals or not
+ * @param  {StepRatioControl} stepRatioControl The value to control the step of y domain
  * @return {Array}   ticks
  */
 function getNiceTickValuesFn([min, max]: [number, number], tickCount = 6, allowDecimals = true) {

test/cartesian/ReferenceArea.spec.tsx

@@ -94,7 +94,7 @@ describe('<ReferenceArea />', () => {
     const allAreas = container.querySelectorAll('.recharts-reference-area-rect');
     expect(allAreas).toHaveLength(1);
     const area = allAreas[0];
-    expect(area).toHaveAttribute('d', 'M 20,109.44444444444444 h 960 v 25.555555555555557 h -960 Z');
+    expect(area).toHaveAttribute('d', 'M 20,103.05555555555556 h 960 v 31.944444444444443 h -960 Z');
   });
 
   test("Don't render any rect in ReferenceArea when no x1, x2, y1 or y2 is set", () => {

test/cartesian/ReferenceDot.spec.tsx

@@ -40,7 +40,7 @@ describe('<ReferenceDot />', () => {
     const label = labels[0];
     expect.soft(label.getAttributeNames().sort()).toEqual(['class', 'fill', 'offset', 'text-anchor', 'x', 'y']);
     expect(label.getAttribute('x')).toEqual('472.72727272727275');
-    expect(label.getAttribute('y')).toEqual('86.66666666666667');
+    expect(label.getAttribute('y')).toEqual('78.33333333333334');
     expect(label.getAttribute('fill')).toEqual('#808080');
     expect(label.getAttribute('class')).toEqual('recharts-text recharts-label');
     expect(label.getAttribute('text-anchor')).toEqual('middle');

test/cartesian/ReferenceLine/ReferenceLine.spec.tsx

@@ -261,8 +261,8 @@ describe('<ReferenceLine />', () => {
       x1: 65,
       x2: 1095,
       y: 20,
-      y1: -152.5,
-      y2: -152.5,
+      y1: -181.66666666666666,
+      y2: -181.66666666666666,
     });
   });