allow automated axis padding for "gap" and "no-gap"

anselmpaul · anselmpaul · commit d0b578137d5a · 2021-03-27T12:05:54.000+01:00
diff --git a/src/cartesian/XAxis.tsx b/src/cartesian/XAxis.tsx
@@ -20,7 +20,7 @@ interface XAxisProps extends BaseAxisProps {
    * Ticks must be numbers when the axis is the type of number
    */
   ticks?: (string | number)[];
-  padding?: { left?: number; right?: number };
+  padding?: { left?: number; right?: number } | 'gap' | 'no-gap';
   minTickGap?: number;
   interval?: AxisInterval;
   reversed?: boolean;
diff --git a/src/chart/generateCategoricalChart.tsx b/src/chart/generateCategoricalChart.tsx
@@ -807,12 +807,12 @@ export const generateCategoricalChart = ({
           }));
         }
       }
-      const componsedFn = item && item.type && item.type.getComposedData;
+      const composedFn = item && item.type && item.type.getComposedData;
 
-      if (componsedFn) {
+      if (composedFn) {
         formatedItems.push({
           props: {
-            ...componsedFn({
+            ...composedFn({
               ...axisObj,
               displayedData,
               props,
@@ -1370,6 +1370,8 @@ export const generateCategoricalChart = ({
     /**
      * The handler of mouse entering a scatter
      * @param {Object} el     The active scatter
+     * @param {Number} index  the index of the item
+     * @param {Object} e      the click event
      * @return {Object} no return
      */
     handleItemMouseEnter = (el: any) => {
diff --git a/src/util/CartesianUtils.ts b/src/util/CartesianUtils.ts
@@ -2,6 +2,7 @@ import _ from 'lodash';
 import { getTicksOfScale, parseScale, checkDomainOfScale, getBandSizeOfAxis } from './ChartUtils';
 import { findChildByType } from './ReactUtils';
 import { Coordinate, AxisType } from './types';
+import { getPercentValue } from './DataUtils';
 
 /**
  * Calculate the scale function, position, width, height of axes
@@ -32,15 +33,47 @@ export const formatAxisMap = (props: any, axisMap: any, offset: any, axisType: A
     const { orientation, domain, padding = {}, mirror, reversed } = axis;
     const offsetKey = `${orientation}${mirror ? 'Mirror' : ''}`;
 
-    let range, x, y, needSpace;
+    let calculatedPadding, range, x, y, needSpace;
+
+    if (axis.type === 'number' && (axis.padding === 'gap' || axis.padding === 'no-gap')) {
+      const diff = domain[1] - domain[0];
+      let smallestDistanceBetweenValues = Infinity;
+      const sortedValues = axis.categoricalDomain.sort();
+      sortedValues.forEach((value: number, index: number) => {
+        if (index > 0) {
+          smallestDistanceBetweenValues = Math.min(
+            (value || 0) - (sortedValues[index - 1] || 0),
+            smallestDistanceBetweenValues,
+          );
+        }
+      });
+      const smallestDistanceInPercent = smallestDistanceBetweenValues / diff;
+      const rangeWidth = axis.layout === 'vertical' ? offset.height : offset.width;
+
+      if (axis.padding === 'gap') {
+        calculatedPadding = (smallestDistanceInPercent * rangeWidth) / 2;
+      }
+
+      if (axis.padding === 'no-gap') {
+        const gap = getPercentValue(props.barCategoryGap, smallestDistanceInPercent * rangeWidth);
+        const halfBand = (smallestDistanceInPercent * rangeWidth) / 2;
+        calculatedPadding = halfBand - gap - ((halfBand - gap) / rangeWidth) * gap;
+      }
+    }
 
     if (axisType === 'xAxis') {
-      range = [offset.left + (padding.left || 0), offset.left + offset.width - (padding.right || 0)];
+      range = [
+        offset.left + (padding.left || 0) + (calculatedPadding || 0),
+        offset.left + offset.width - (padding.right || 0) - (calculatedPadding || 0),
+      ];
     } else if (axisType === 'yAxis') {
       range =
         layout === 'horizontal'
           ? [offset.top + offset.height - (padding.bottom || 0), offset.top + (padding.top || 0)]
-          : [offset.top + (padding.top || 0), offset.top + offset.height - (padding.bottom || 0)];
+          : [
+              offset.top + (padding.top || 0) + (calculatedPadding || 0),
+              offset.top + offset.height - (padding.bottom || 0) - (calculatedPadding || 0),
+            ];
     } else {
       ({ range } = axis);
     }
diff --git a/test/specs/cartesian/XAxisSpec.js b/test/specs/cartesian/XAxisSpec.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import { Surface, ScatterChart, Scatter, LineChart, Line, XAxis, YAxis, CartesianAxis } from 'recharts';
 import { mount, render } from 'enzyme';
+import { Bar, BarChart } from '../../../src';
 
 describe('<XAxis />', () => {
   const data = [
@@ -21,35 +22,34 @@ describe('<XAxis />', () => {
     { name: 'Page F', uv: 189, pv: 4800, amt: 2400 },
   ];
 
-
   it('Render 1 x-CartesianAxis and 1 y-CartesianAxis ticks in ScatterChart', () => {
     const wrapper = mount(
       <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey={'x'} name="stature" unit="cm" />
-        <YAxis dataKey={'y'} name="weight" unit="kg" />
+        <XAxis dataKey="x" name="stature" unit="cm" />
+        <YAxis dataKey="y" name="weight" unit="kg" />
         <Scatter name="A school" data={data} fill="#ff7300" />
-      </ScatterChart>
+      </ScatterChart>,
     );
     expect(wrapper.find(CartesianAxis).length).to.equal(2);
   });
 
-  it('Don\'t render anything', () => {
+  it("Don't render anything", () => {
     const wrapper = render(
       <Surface width={500} height={500}>
-        <XAxis dataKey={'x'} name="stature" unit="cm" />
-      </Surface>
+        <XAxis dataKey="x" name="stature" unit="cm" />
+      </Surface>,
     );
 
     expect(wrapper.find('svg').children.length).to.equal(1);
     expect(wrapper.find('svg noscript').children.length).to.equal(1);
   });
 
-  it('Don\'t render x-axis when hide is setted to be true', () => {
+  it("Don't render x-axis when hide is setted to be true", () => {
     const wrapper = render(
       <LineChart width={400} height={400} data={lineData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
         <XAxis hide />
         <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-      </LineChart>
+      </LineChart>,
     );
     expect(wrapper.find('.recharts-x-axis').length).to.equal(0);
   });
@@ -59,7 +59,7 @@ describe('<XAxis />', () => {
       <LineChart width={400} height={400} data={lineData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
         <XAxis ticks={[0, 4]} />
         <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-      </LineChart>
+      </LineChart>,
     );
     expect(wrapper.find('.xAxis .recharts-cartesian-axis-tick').length).to.equal(2);
   });
@@ -69,107 +69,98 @@ describe('<XAxis />', () => {
       <LineChart width={400} height={400} data={lineData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
         <XAxis dataKey="name" tickFormatter={(value, i) => `${i}`} />
         <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-      </LineChart>
+      </LineChart>,
     );
     expect(wrapper.find('.xAxis .recharts-cartesian-axis-tick').first()).text().to.equal('0');
   });
 
   it('Render duplicated ticks of XAxis', () => {
     const lineData = [
-      { name: "03/07/2017", balance: 23126.11 },
-      { name: "03/02/2017", balance: 23137.39 },
-      { name: "03/01/2017", balance: 24609.55 },
-      { name: "03/01/2017", balance: 26827.66 },
-      { name: "02/24/2017", balance: 26807.66 },
-      { name: "02/21/2017", balance: 23835.62 },
-      { name: "02/16/2017", balance: 23829.62 }
+      { name: '03/07/2017', balance: 23126.11 },
+      { name: '03/02/2017', balance: 23137.39 },
+      { name: '03/01/2017', balance: 24609.55 },
+      { name: '03/01/2017', balance: 26827.66 },
+      { name: '02/24/2017', balance: 26807.66 },
+      { name: '02/21/2017', balance: 23835.62 },
+      { name: '02/16/2017', balance: 23829.62 },
     ];
 
     const wrapper = render(
-      <LineChart
-        width={600}
-        height={300}
-        data={lineData}
-        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-      >
+      <LineChart width={600} height={300} data={lineData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
         <XAxis dataKey="name" interval={0} />
         <YAxis />
         <Line type="monotone" dataKey="balance" stroke="#8884d8" activeDot={{ r: 8 }} />
-      </LineChart>
+      </LineChart>,
     );
     expect(wrapper.find('.recharts-xAxis .recharts-cartesian-axis-tick').length).to.equal(lineData.length);
   });
 
   it('Render ticks of when the scale of XAxis is time', () => {
     const timeData = [
       {
-        x: new Date("2019-07-04T00:00:00.000Z"),
-        y: 5
+        x: new Date('2019-07-04T00:00:00.000Z'),
+        y: 5,
       },
       {
-        x: new Date("2019-07-05T00:00:00.000Z"),
-        y: 30
+        x: new Date('2019-07-05T00:00:00.000Z'),
+        y: 30,
       },
       {
-        x: new Date("2019-07-06T00:00:00.000Z"),
-        y: 50
+        x: new Date('2019-07-06T00:00:00.000Z'),
+        y: 50,
       },
       {
-        x: new Date("2019-07-07T00:00:00.000Z"),
-        y: 43
+        x: new Date('2019-07-07T00:00:00.000Z'),
+        y: 43,
       },
       {
-        x: new Date("2019-07-08T00:00:00.000Z"),
-        y: 20
+        x: new Date('2019-07-08T00:00:00.000Z'),
+        y: 20,
       },
       {
-        x: new Date("2019-07-09T00:00:00.000Z"),
-        y: -20
+        x: new Date('2019-07-09T00:00:00.000Z'),
+        y: -20,
       },
       {
-        x: new Date("2019-07-10T00:00:00.000Z"),
-        y: 30
-      }
+        x: new Date('2019-07-10T00:00:00.000Z'),
+        y: 30,
+      },
     ];
 
     const wrapper = render(
-      <LineChart
-        width={600}
-        height={300}
-        data={timeData}
-        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-      >
-        <XAxis dataKey="x" domain={[timeData[0].x.getTime(), timeData[timeData.length - 1].x.getTime()]} scale="time" type="number" />
+      <LineChart width={600} height={300} data={timeData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+        <XAxis
+          dataKey="x"
+          domain={[timeData[0].x.getTime(), timeData[timeData.length - 1].x.getTime()]}
+          scale="time"
+          type="number"
+        />
         <YAxis />
         <Line type="monotone" dataKey="y" stroke="#8884d8" activeDot={{ r: 8 }} />
-      </LineChart>
+      </LineChart>,
     );
     expect(wrapper.find('.recharts-xAxis .recharts-cartesian-axis-tick').length).to.equal(1);
   });
 
-  it('Render duplicated ticks of XAxis', () => {
-    const lineData = [
-      { name: "03/07/2017", balance: 23126.11 },
-      { name: "03/02/2017", balance: 23137.39 },
-      { name: "03/01/2017", balance: 24609.55 },
-      { name: "03/01/2017", balance: 26827.66 },
-      { name: "02/24/2017", balance: 26807.66 },
-      { name: "02/21/2017", balance: 23835.62 },
-      { name: "02/16/2017", balance: 23829.62 }
-    ];
+  it('Render Bars with gap', () => {
+    const wrapper = mount(
+      <BarChart width={300} height={300} data={data}>
+        <Bar dataKey="y" />
+        <XAxis dataKey="x" type="number" domain={['dataMin', 'dataMax']} padding="gap" />
+        <YAxis dataKey="y" />
+      </BarChart>,
+    );
+    expect(parseInt(wrapper.find(Bar).prop('data')[0].x, 10)).to.equal(70);
+  });
 
-    const wrapper = render(
-      <LineChart
-        width={600}
-        height={300}
-        data={lineData}
-        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-      >
-        <XAxis dataKey="name" scale="time" interval={0} />
-        <YAxis />
-        <Line type="monotone" dataKey="balance" stroke="#8884d8" activeDot={{ r: 8 }} />
-      </LineChart>
+  it('Render Bars with no gap', () => {
+    const wrapper = mount(
+      <BarChart width={300} height={300} data={data}>
+        <Bar dataKey="y" />
+        <XAxis dataKey="x" type="number" domain={['dataMin', 'dataMax']} padding="no-gap" />
+        <YAxis dataKey="y" />
+      </BarChart>,
     );
-    expect(wrapper.find('.recharts-xAxis .recharts-cartesian-axis-tick').length).to.equal(lineData.length);
+    expect(parseInt(wrapper.find(Bar).prop('data')[0].x, 10)).to.equal(66);
   });
 });
