Merge pull request #183 from williaster/chris--area-shape

🚀 [shape] add `<Area />` and tests

packages/vx-shape/build/index.js

@@ -76,6 +76,15 @@ Object.defineProperty(exports, 'LinkRadial', {
   }
 });
 
+var _Area = require('./shapes/Area');
+
+Object.defineProperty(exports, 'Area', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Area).default;
+  }
+});
+
 var _AreaClosed = require('./shapes/AreaClosed');
 
 Object.defineProperty(exports, 'AreaClosed', {

packages/vx-shape/src/index.js

@@ -6,6 +6,7 @@ export { default as LineRadial } from './shapes/LineRadial';
 export { default as LinkHorizontal } from './shapes/LinkHorizontal';
 export { default as LinkVertical } from './shapes/LinkVertical';
 export { default as LinkRadial } from './shapes/LinkRadial';
+export { default as Area } from './shapes/Area';
 export { default as AreaClosed } from './shapes/AreaClosed';
 export { default as AreaStack } from './shapes/AreaStack';
 export { default as Bar } from './shapes/Bar';

packages/vx-shape/src/shapes/Area.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { area } from 'd3-shape';
+import additionalProps from '../util/additionalProps';
+
+Area.propTypes = {
+  x: PropTypes.func,
+  x0: PropTypes.func,
+  x1: PropTypes.func,
+  y: PropTypes.func,
+  y0: PropTypes.func,
+  y1: PropTypes.func,
+  xScale: PropTypes.func,
+  yScale: PropTypes.func,
+  data: PropTypes.array,
+  defined: PropTypes.func,
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+    PropTypes.object,
+    PropTypes.array,
+  ]),
+  innerRef: PropTypes.func,
+  strokeDasharray: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  stroke: PropTypes.string,
+  fill: PropTypes.string,
+  curve: PropTypes.func,
+};
+
+export default function Area({
+  x,
+  x0,
+  x1,
+  y,
+  y0,
+  y1,
+  xScale,
+  yScale,
+  data = [],
+  defined = () => true,
+  className,
+  strokeDasharray,
+  strokeWidth = 2,
+  stroke = 'black',
+  fill = 'rgba(0,0,0,0.3)',
+  curve,
+  innerRef,
+  ...restProps
+}) {
+  const path = area();
+  if (x) path.x(d => xScale(x(d)));
+  if (x0) path.x0(d => xScale(x0(d)));
+  if (x1) path.x1(d => xScale(x1(d)));
+  if (y) path.y(d => yScale(y(d)));
+  if (y0) path.y0(d => yScale(y0(d)));
+  if (y1) path.y1(d => yScale(y1(d)));
+  if (defined) path.defined(defined);
+  if (curve) path.curve(curve);
+  return (
+    <g>
+      <path
+        ref={innerRef}
+        className={cx('vx-area', className)}
+        d={path(data)}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeDasharray={strokeDasharray}
+        fill={fill}
+        {...additionalProps(restProps, data)}
+      />
+    </g>
+  );
+}

packages/vx-shape/test/Area.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { extent } from 'd3-array';
+import { Area } from '../src';
+import { scaleTime, scaleLinear } from '../../vx-scale';
+
+const fakeData = [
+  { x: new Date('2017-01-01'), y: 5 },
+  { x: new Date('2017-01-02'), y: 5 },
+  { x: new Date('2017-01-03'), y: 5 },
+];
+
+const x = d => d.x;
+const y = d => d.y;
+
+const fakeXScale = scaleTime({
+  range: [0, 100],
+  domain: extent(fakeData, x),
+});
+
+const fakeYScale = scaleLinear({
+  range: [100, 0],
+  domain: extent(fakeData, y),
+});
+
+describe('<Area />', () => {
+  test('it should be defined', () => {
+    expect(Area).toBeDefined();
+  });
+
+  test('it should have the .vx-area class', () => {
+    const wrapper = shallow(
+      <Area
+        data={fakeData}
+        xScale={fakeXScale}
+        yScale={fakeYScale}
+        x={x}
+        y={y}
+      />,
+    );
+    expect(wrapper.find('path').prop('className')).toBe('vx-area');
+  });
+
+  test('it should expose its ref via an innerRef prop', done => {
+    const refCallback = n => {
+      expect(n.tagName).toEqual('PATH');
+      done();
+    };
+    mount(
+      <Area
+        data={fakeData}
+        xScale={fakeXScale}
+        yScale={fakeYScale}
+        x={x}
+        y={y}
+        innerRef={refCallback}
+      />
+    );
+  });
+});