fix: fix connectNulls of Line, fix #725, fix #702

recharts · Jun 11, 2017 · 8de8847 · 8de8847
1 parent e2edbfc
commit 8de8847
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 3 deletions.
diff --git a/src/cartesian/Line.js b/src/cartesian/Line.js
@@ -282,7 +282,7 @@ class Line extends Component {
   }
 
   renderCurveStatically(points, needClip, props) {
-    const { type, layout } = this.props;
+    const { type, layout, connectNulls } = this.props;
     const curveProps = {
       ...getPresentationAttributes(this.props),
       ...filterEventAttributes(this.props),
@@ -291,7 +291,7 @@ class Line extends Component {
       clipPath: needClip ? `url(#clipPath-${this.id})` : null,
       points,
       ...props,
-      type, layout,
+      type, layout, connectNulls,
     };
 
     return <Curve {...curveProps} pathRef={this.pathRef} />;

diff --git a/test/specs/chart/LineChartSpec.js b/test/specs/chart/LineChartSpec.js
@@ -26,7 +26,7 @@ describe('<LineChart />', () => {
     expect(wrapper.find('.recharts-line .recharts-line-curve').length).to.equal(1);
   });
 
-  it('Render 1 line in simple LineChart', () => {
+  it('Render 1 line when LineChart has <XAxis /> and <YAxis />', () => {
     const wrapper = render(
       <LineChart width={400} height={400} data={data} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
         <XAxis />
@@ -37,6 +37,66 @@ describe('<LineChart />', () => {
     expect(wrapper.find('.recharts-line .recharts-line-curve').length).to.equal(1);
   });
 
+  it('Render smooth curve when type of Line is monotone', () => {
+    const wrapper = render(
+      <LineChart width={400} height={400} data={data} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
+        <XAxis />
+        <YAxis type="category" />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+      </LineChart>
+    );
+    const curves = wrapper.find('.recharts-line .recharts-line-curve');
+    expect(curves.length).to.equal(1);
+    const path = curves[0].attribs.d;
+    expect(path.indexOf('C')).to.not.equal(-1);
+  });
+
+  it('Render two paths when connectNulls is false', () => {
+    const breakData = [
+      { name: 'Page A', uv: 400, pv: 2400, amt: 2400 },
+      { name: 'Page B', uv: 300, pv: 4567, amt: 2400 },
+      { name: 'Page C', uv: 300, pv: 1398, amt: 2400 },
+      { name: 'Page D', uv: null, pv: 9800, amt: 2400 },
+      { name: 'Page E', uv: 278, pv: 3908, amt: 2400 },
+      { name: 'Page F', uv: 189, pv: 4800, amt: 2400 },
+    ];
+
+    const wrapper = render(
+      <LineChart width={400} height={400} data={breakData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
+        <XAxis />
+        <YAxis type="category" />
+        <Line type="monotone" connectNulls={false} dataKey="uv" stroke="#ff7300" />
+      </LineChart>
+    );
+    const curves = wrapper.find('.recharts-line .recharts-line-curve');
+    expect(curves.length).to.equal(1);
+    const path = curves[0].attribs.d;
+    expect(path.length - path.split('M').join('').length).to.equal(2);
+  });
+
+   it('Render one paths when connectNulls is true', () => {
+    const breakData = [
+      { name: 'Page A', uv: 400, pv: 2400, amt: 2400 },
+      { name: 'Page B', uv: 300, pv: 4567, amt: 2400 },
+      { name: 'Page C', uv: 300, pv: 1398, amt: 2400 },
+      { name: 'Page D', uv: null, pv: 9800, amt: 2400 },
+      { name: 'Page E', uv: 278, pv: 3908, amt: 2400 },
+      { name: 'Page F', uv: 189, pv: 4800, amt: 2400 },
+    ];
+
+    const wrapper = render(
+      <LineChart width={400} height={400} data={breakData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
+        <XAxis />
+        <YAxis type="category" />
+        <Line type="monotone" connectNulls dataKey="uv" stroke="#ff7300" />
+      </LineChart>
+    );
+    const curves = wrapper.find('.recharts-line .recharts-line-curve');
+    expect(curves.length).to.equal(1);
+    const path = curves[0].attribs.d;
+    expect(path.length - path.split('M').join('').length).to.equal(1);
+  });
+
   it('Renders customized active dot when activeDot is set to be a ReactElement', () => {
     const ActiveDot = ({ cx, cy }) =>
       <circle cx={cx} cy={cy} r={10} className="customized-active-dot" />;