diff --git a/packages/visx-shape/src/shapes/LinePath.tsx b/packages/visx-shape/src/shapes/LinePath.tsx index 8ea17a714..6d5919b52 100644 --- a/packages/visx-shape/src/shapes/LinePath.tsx +++ b/packages/visx-shape/src/shapes/LinePath.tsx @@ -38,6 +38,9 @@ export default function LinePath({ className={cx('visx-linepath', className)} d={path(data) || ''} fill={fill} + // without this a datum surrounded by nulls will not be visible + // https://github.com/d3/d3-shape#line_defined + strokeLinecap="round" {...restProps} /> ); diff --git a/packages/visx-shape/test/LinePath.test.tsx b/packages/visx-shape/test/LinePath.test.tsx index f50eea792..a570be8fb 100644 --- a/packages/visx-shape/test/LinePath.test.tsx +++ b/packages/visx-shape/test/LinePath.test.tsx @@ -23,33 +23,37 @@ const LinePathChildren = ({ children, ...restProps }: Partial{children}); describe('', () => { - test('it should be defined', () => { + it('should be defined', () => { expect(LinePath).toBeDefined(); }); - test('it should have the .visx-linepath class', () => { + it('should have the .visx-linepath class', () => { expect(LinePathWrapper(linePathProps).prop('className')).toBe('visx-linepath'); }); - test('it should contain paths', () => { + it('should default to strokeLinecap="round" for superior missing data rendering', () => { + expect(LinePathWrapper(linePathProps).prop('strokeLinecap')).toBe('round'); + }); + + it('should contain paths', () => { expect(LinePathWrapper(linePathProps).find('path').length).toBeGreaterThan(0); }); - test('it should take a children as function prop', () => { + it('should take a children as function prop', () => { const fn = jest.fn(); LinePathChildren({ children: fn }); expect(fn).toHaveBeenCalled(); }); - test('it should call children function with { path }', () => { + it('should call children function with { path }', () => { const fn = jest.fn(); LinePathChildren({ children: fn }); const args = fn.mock.calls[0][0]; const keys = Object.keys(args); - expect(keys.includes('path')).toEqual(true); + expect(keys).toContain('path'); }); - test('it should expose its ref via an innerRef prop', () => { + it('should expose its ref via an innerRef prop', () => { // eslint-disable-next-line jest/no-test-return-statement return new Promise(done => { const refCallback = (ref: SVGPathElement) => { diff --git a/packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx b/packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx index 6b49ac04f..d2eea9f27 100644 --- a/packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx +++ b/packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx @@ -129,6 +129,7 @@ function BaseAreaSeries diff --git a/packages/visx-xychart/src/components/series/private/BaseLineSeries.tsx b/packages/visx-xychart/src/components/series/private/BaseLineSeries.tsx index d2ba86f07..b2f35ce25 100644 --- a/packages/visx-xychart/src/components/series/private/BaseLineSeries.tsx +++ b/packages/visx-xychart/src/components/series/private/BaseLineSeries.tsx @@ -88,6 +88,7 @@ function BaseLineSeries', () => { expect(wrapper.find(Area)).toHaveLength(1); }); + it('should set strokeLinecap="round" to make datum surrounded by nulls visible', () => { + const wrapper = mount( + + + + + , + ); + expect(wrapper.find('path').prop('strokeLinecap')).toBe('round'); + }); + it('should use x/y0Accessors an Area', () => { const y0Accessor = jest.fn(() => 3); const wrapper = mount( diff --git a/packages/visx-xychart/test/components/LineSeries.test.tsx b/packages/visx-xychart/test/components/LineSeries.test.tsx index 9d4565ce4..d02ccb96b 100644 --- a/packages/visx-xychart/test/components/LineSeries.test.tsx +++ b/packages/visx-xychart/test/components/LineSeries.test.tsx @@ -26,6 +26,17 @@ describe('', () => { expect(wrapper.find(LinePath)).toHaveLength(1); }); + it('should set strokeLinecap="round" to make datum surrounded by nulls visible', () => { + const wrapper = mount( + + + + + , + ); + expect(wrapper.find('path').prop('strokeLinecap')).toBe('round'); + }); + it('should render Glyphs if focus/blur handlers are set', () => { const wrapper = mount(